Today we’re looking at designs that don’t shy away from a broad color palette and completely embrace the rainbow. Happy Friday Focus!

Designs of the Week

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Jilion

The top section is a little confusing, it doesn’t quite say that the video player graphic is just a product of the company by the way it appears, and it takes a little longer for you to make that conclusion (even if it’s milliseconds in your brain). The form elements and icons are lovely, and especially so for the logo, which even casts a rainbow glow behind it. The site’s got a nice dark, but not intimidating feel.

PixelStorm

This site is far from perfect but I like a few of the concepts that went into it, like the circular elements and the reuse of patterns.

Intuitive Designs

I enjoy the background graphic, the color scheme, and the little detail of texture that appears when you hover over the menu links. I also like the layers of translucent boxes that don’t line up. It was also a good idea to space out the letters given the dark background for better readability.

Alexander Zhestkov

Each strip represents the dominant hue in the project, with the logo on it. Clicking on it expands to display the sample work on it with matching background color, so it’s like you’re completely transported to that “world” every time. A very simple accordion style one page portfolio that’s all about the content.

Maminkám.cz

It’s always a challenge to use bright colors as text backgrounds, so I’m concerned it may be difficult to read for certain people. But I like the non-dominating amount of it used in the design. Everything else is warm and cozy, from the illustrated background pattern to the perforated borders in between content blocks and around images.

Designzoom

Very mod, color-blocked, and designy! Everything seems to be in the right place. Very bold move to use yellow for the form fields.

Social Media Weekly

HTML – How to Safeguard Your Site with HTML5 Sandbox
“Today’s web applications are mash ups of new experiences into one experience. Think Twitter widgets showing the latest tweets about a product. Or Facebook comments discussing an article. Or even just integrated web pages through an iframe element. These experiences can increase security breaches to your site. Don’t stress … there’s a new kid on the block to help you out: the HTML5 sandbox. But before I get to that, let’s quickly review iframe element issues.”

Mobile Web Design, Debugging – Ringmark
“Ringmark is a web-based test suite that measures how well a mobile browser supports the capabilities that modern mobile web apps require.”

Design – Modularity and Style Guides
“It’s one of many techniques I use in front-end website development. Below I’ll introduce a few more and how I link them together for the ultimate Power Up ★”

User Experience – Principles of User Interface Design

Create unique, extraordinary websites with Squarespace. No experience necessary!

This week’s Friday Focus shines the spotlight on designs with comic book-inspired aesthetic, each with its distinct take on the kick-butt art form. Check ‘em out after the jump!

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Drift Boys

Stylized elements everywhere, from the splatters and tears to the comic book fonts, plus a bold red-black-white color palette for maximum impact. On art portfolio sites it’s always a good idea to showcase your work as much as possible, so using a variety of them in the header of each page, as well as a different character for the contact link that slides in when you reach the bottom, all works out nicely.

Jean Delbrel

I really like the choices done on this site; it’s clean and simple looking but still carries a lot of personality thanks to the illustrations. Using comic book covers with superhero insignias in the top navigation menu is genius. The striped shadows everywhere are also a neat subtle touch and highlights the attention to detail that went into the design. The yellow, of course, is to cap off the energetic vibe that comes with comic book titles.

Glamour.biz

You get a minimal homepage but on the inside, it’s jam-packed with illustrations from corner to corner, also highlighting the foreground-background interplay with blurring and shadow treatments, even overlapping the pull-out menu. The text, meanwhile, is split right in the middle for a two-column layout.

Bobadilium

A bit much of the all-caps text (and Courier) for my liking, but a nice storytelling approach going on here, with small animations sprinkled all over the place. It’s also cool how the top menu changes color to match each section. It’s like a masked text with the background peeking through, although upon inspection it’s faked using sprites.

Kitschen Sink

Here’s another popular color palette especially for vintage comics. Comic book panels applied to websites also lend themselves to compartmentalized, bento layouts.

Diaz - Don't clean up this blood

Some people may be tired or no longer impressed with the parallax effect but it’s still interesting to see what others come up with (e.g. here there’s a broken glass graphic element that turns up in the Cast section). The site also feels like one long movie poster.

Social Media Weekly

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

CSS – Cross-Browser Debugging CSS
“CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs.”

Mobile Web Design – A non-responsive approach to building cross-device webapps
“The general approach involves classifying your visitor’s device into the right device class, and serving the appropriate version to that device, while maximizing code reuse between versions.”

Web Design – You’re not at the cutting edge and that’s fine
“Feeling like you’re falling behind with the pace of technological change? Don’t worry too much, the cutting edge of any industry moves faster than you can and web is no different.”

We’ve featured bento-style layouts before, and this week’s Friday Focus zones in on navigation that carries that same property. Check ‘em out!

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

Calepino Pocket Notebooks

Two boxy menus here, at the top and bottom, which merges contact information and a subscription form into the layout. Both look like stubs with various store details, although the input field isn’t so distinguishable due to the whole blending factor.

CaptainDash

The sliding animations from page to page and inside the menus tie the whole “showcase” feel together. The illustrations, submenu arrows, backgrounds, and choice of colors all look retro-superhero-outerspace cool.

Talking Donkey Shop

More of the ticket stub motif done here, reinforced with icons and diagonal stripes. Even the styling of the cart area isn’t run of the mill. More of the vintage feel comes from the buttons, borders, and fonts.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Responsive Web Design – Fanfare for the common breakpoint
“I don’t think it’s desirable to have a “standard” handful of screen widths, any more than it’s desirable to have a single rendering engine in every browser (yes, I know some developers actually wish for that: they know not what they do).”

CSS – Linear Gradient Keywords
“Linear gradients in CSS can lead to all kinds of wacky, wacky results—some of them, it sometimes seems, in the syntax itself. Let me note right up front that some of what I’m talking about here isn’t widely deployed yet, nor for that matter even truly set in stone. Close, maybe, but there could still be changes. Even if nothing actually does change, this isn’t a “news you can use RIGHT NOW” article. Like so much of what I produce, it’s more of a stroll through a small corner of CSS, just to see what we might see.”

JavaScript – Of parser-fetishists and semi-colons
“TL;DR: if you advocate omitting sensible syntax as parsers will fix that for us, you are not a visionary developer. You waste your and our time. And you come across as a semi-colon.”

Our featured designs on this week’s Friday Focus put the paper motif to good use once more, focusing on its creases and folds. Not just in the corners and as borders, but as a way to demarcate sections of content at a time.

Designs of the Week

Wing Cheng

The entire site, except for the fixed navigation on the bottom right, is presented in an accordion-type notebook with all the text and graphics done in the designer’s own handwriting, contact form included. It’s only when you click on the images that you get the actual version of the logos. There are tradeoffs of course: legibility, seeing the real logos without having to click anything, accessibility, and so on.

3D Polystyren

I always enjoy a good “power line” and this one, although yellow and chunky looking against the huge 3D header, is not distracting but a welcome trail all the way down. The text blocks are a bit long and heavy though.

Granville Island

Love the worn quality to the background paper, like an opened and laid out map. Color block is also hot right now! Also, in the top left menu there’s a small “you are here” sign, again reinforcing the travel theme.

Spreads for iPad

Another accordion sheet of paper, except this time the folds aren’t equal heights. Love the pop of read against the blue, which gradients into pitch black when you reach the bottom of the page. Also interesting is the decision to put a screenshot of the app nowhere above the fold, with introductory paragraphs coming first.

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Social Media Weekly

Programming – Light Table – a new IDE concept
“We need to be able to move things around, keep clutter down, and bring information to the foreground in the places we need it most.”

Design – Startups, this is how design works.
“This handy guide will help you understand design and provide resources to help you find awesome design talent.”

CSS, Tables – A #CSS grid system for tables, for you
“A neat way of aligning the columns in tables up with each other — a table grid system of sorts.”

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

We’ve featured moving backgrounds using native HTML/CSS/JS animation before, but using video in backgrounds is quite the challenge given how it eats up more resources. Let’s see how effective these websites use this feature in this week’s Friday Focus.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Kolonien

Like the two other sites, the video background appears only in the homepage. The overall look here is warm, earthy, handcrafted—mixing two “scratchy” typefaces and a vintage color palette. Everything looks customized, even the music page uses play/pause control buttons that blend in.

Weathery for iPhone

The video background runs a shorter loop than the other too, so that’s something to consider when using such a thing, although I’m afraid the quality suffers a bit. This one page site doesn’t need much else to its design, either, because it’s the design of its product, an iPhone app, that will grab your attention.

Voice

There’s a purplish/pinkish hue to the video on the homepage that regrettably disappears in the other pages, where brown dominates. I do like the page transitions and other animations though, all carried out in a slanted fashion. There’s also a neat slideshow technique in the Virksomhet page.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Mobile Web Design – Nielsen is wrong on mobile | Designers respond to Nielsen on mobile | Nielsen responds to mobile criticism

Responsive Web Design – Responsive web design: a project-management perspective
“This is where many people stop. After all, many of the challenges with responsive design are fairly similar, regardless of project size and budget. There are, however, additional challenges to consider on large projects, which are too rarely addressed: this article will aim to address those.”

Forms – The Current State of HTML5 Forms
“HTML5 has many new features intended to make creating websites easier and people’s experience in using those websites better. Among those features are many enhancements to web forms.”

We’re already into the fourth month of the year, and this week we’re featuring designs whose main navigation strictly use that number.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Brand Almanac

There’s a chalkboard look on the homepage, plus circular links that contrast against the four boxes and alternate with slideshow photographs. On the inside it’s a lighter look while still retaining that classic, old school, neutral feel.

Raffaele Leone

I like the keyboard navigation all the way into the deeper sections like the portfolio, but using the bright colors as backgrounds on top of the chunky font in white and black, it’s a bit much.

Planet Propaganda

The navigation’s actually on top of the full-screen slideshow, but arranged in a triangular, X-mark fashion, carrying both the studio’s logo and slogan—smart and effective move. The shape is repeated in their about page as well.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Web Design – Responsive Web Design: Missing the Point
“Responsive design is the real deal. It is not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers. But don’t feel like it’s the end-all be-all of website construction. This aint religion. This is web design.”

Design, Typography – Fontomas – iconic fonts scissors
“Now it’s trivial to customise fonts for your needs with 3 simple step. At first, you select needed symbols on source fonts. Then rearrange those on destination font. After that, you can download SVG font and make webpack via fontsquirrel generator or other services.”

Business –

Published Friday March 30, 2012 at 1:02 pm
By Sophia Lucero with 1 comment