Design usually means arranging things in an orderly, meaningful manner, but this week we’re throwing that out of the window and going for chaotic and whimsical sites. Happy 4th of July weekend, everyone, and welcome to this week’s Friday Focus!

Designs of the Week

The left-aligned layout works well here. I love that in the inner pages, the background changes, but remains “chaotic”.

I’m not sure what this design style is called, but it always catches my eye. Another left-aligned design with a touch of opacity and great use of repetitive graphical elements.

I love the header. And the custom illustrations for for each featured artist. And the bright color scheme—light blue, pink, and yellow for a hip-hop magazine? With a perfect-cursive font for the headers? Now that’s what you call adventurous!

Here’s a one-page portfolio designed like it was a storybook. I particularly like the use of textures on the illustrations.

Now this site takes a similar approach, with the airborne objects found all over the place. It’s not quite as grand and playful as I would have liked, but a great look for a serious institution.

I love the crazy lines and color combination. It’s not a complicated layout, when you look at it closely, but it certainly looks extraordinary.

I’m not sure if this design is a result of cramming everything above the fold, but it works! It showcases the artist’s versatility and his portfolio’s diversity at one glance. And given that all the illustrations look whimsical and fantastical, it gives a very interesting personality to the website. What I’m not sure about is the big default image in the center, and whether it’s competing fiercely with the already strong background.

Another foreground-background competition here. I’m not sure if this design will sit well with everyone, especially since it’s already dark, but the background looks pretty interesting and it’s a quick way to add interest to your site.

Social Media Weekly

Programming - Maintainability Guide (Beta)
An interesting guide on how to write maintanable code.

Usability - Keep Users Updated During Long Load Times
Tips so they won’t just go away.

CSS - CSS cascade - a simple step-by-step presentation
A great tutorial on mastering the CSS cascade.

Backgrounds are so called for a reason. They’re meant to support and complement instead of attract and distract. This week’s featured sites, however, provide a whole other level of interactivity and usefulness to backgrounds. You decide if they’re a good idea or not. Either way, they’re interesting concepts that can only be executed on the Web, so, enjoy!

Designs of the Week

Information visualization

Showing clients/web resources/cities on a world map as a background is brilliant. I don’t think it’s been done this way before. If the movement gets too annoying, you can stop it with a click. The “worldwide” concept carries over to the Time Zones section, which shows both the current time in your area and theirs, as well as how long before their office closes—what a sensitive little idea!

Lots of Twitter-related sites that pull tweets on a certain topic are mostly text-based and don’t usually create a wall of avatars with random popup tweets in the background. When new tweets arrive, the avatars shift right as new ones appear. And as for the foreground? Good typography, contrast, colors, and use of icon. Another well-done one-page site.

Parallax effect

Flash-based, but definitely well done.

Bright, fun illustration-based design. Fluid width too.

I like that the parallax effect works whenever your mouse moves. The background is light and subtle enough to not be distracting.

Navigation

The foreground and background fuse on the homepage, but when since the inner sections are loaded in a lightbox, you can still click on what is now the background. Anyway, very cute design elements, including the tilt-shift effect for the photographic background. And don’t you love the paper boat on the river? The greatness is in the details!

I love what the copy says, which at the same time serves as the navigation to the inner sections of the site. And the background is literally made up of the designer’s portfolio. And it looks good!

This effect might give some people a headache. But I like that the objects in the background can be any size or type—image, video, Flash animation, screenshot, poster, etc.

This one’s got more design elements for a polaroid photo collection metaphor, shadows and all. Not pictured: the designer’s latest tweet and an anti-IE6 disclaimer. One more thing about this effect: it works regardless of browser width.

Social Media Weekly

Applications, Workflow - One Day in the Life of a Web Designer
Great twofold guide for discovering helpful apps and formulating an effective routine for professional designers.

Design - 27 Must-Have Starter Kits For Web Designers
You don’t always have to start from scratch; you don’t have to reinvent the wheel.

Programming - How to properly “speak” HTM language
A nice little tutorial on HTML semantics.

This week on Friday Focus, we celebrate great icon design which carries the overall look of our featured websites.

Designs of the Week

Perhaps what I love most about this site, aside from the kickass image mouse-tank to the left, is how the fuchsia blends into yellow with all the subtle lines and textures, including that cloud slash smoke slash fog. The forms are neatly done too.

I don’t know about you but when I saw this design, I was absolutely delighted by how the stairs were iconized. Icons of stairs! Inside you’ll find real pictures of them, but the style and detail of the icons on the front page is a brilliant idea. It keeps things elegant and uniform while focusing on the actual product—because unlike shoes or mobile phones, you can’t photograph unattached staircases on a white background!

Here’s another spin on the same-icon-types-on-the-frontpage pattern. Although I would say this is a little less effective than the previous site because for starters, you’re depending on the color of the mlik bottle top to differentiate their services. Not a very good idea for accessibility reasons; it might have been better if the bottles had different shapes or adornments. Still, I like how clean this site looks and the general “milk” branding and metaphor.

Two awesome things here: first, the icons actually have animations when you hover over them. Second, the animals and substances are all in laboratory containers (beakers, gradiated cynlinders, etc.)—this was the unity-in-diversity thing I was talking about. These, plus the dramatic dark background as well as the “labs” branding, make you absolutely curious about what the codenames and experiments all mean.

Social Media Weekly

CSS - A Detailed Look at the Z-Index CSS Property
Behold the bane of most front end developers!

Design - 10 Web Design Rules That You Can Break
Rule #10 is the best.

Usability - Stop Counting Clicks
Here’s another myth busted.

This week on Friday Focus: websites that look like they made of paint, not pixels.

Designs of the Week

This look seems to match this company’s logo, but I would have liked that “relaxed” look to carry over to the headings and other elements of the site. Still, good imagery and hues.

This site is not quite as polished as far as the grunge look goes, but the intense painted background texture provides a lot of personality.

Now for something lighter. I love that almost every design element looks like it was drawn or painted, especially the icons on the sidebar. I don’t think I’ve seen a style like that on other hand-drawn/painterly designs!

This one’s even subtler. Unlike the featured sites above, the watercolor effect is more of an accent than the definitive look for the whole site.

Social Media Weekly

Design - Two simple ways to create text embossing effect

CSS - 15 Effective Tips and Tricks from the Masters of CSS

HTML - HTML5 Could Be the OS Killer

Nature-inspired websites come by the dozen these days, but this week’s featured designs up the ante. They’re really lovely, I promise!

Designs of the Week

I love the illustration on the left side. Predominantly green but has lots of bright colors and interesting “characters” too. I would have wanted a bit more of them scattered throughout the one-page site, though.

You know how nature-inspired websites look cliche because they use cliche types of plants and flowers? This isn’t one of them. There’s something about this design that draws me in. Simple, but quite memorable and effective.

So many things to love about this design. First, that the “landscape” is tilted sideways, and the plants serve as dividers for the different blocks of text. Brilliant! Then you have the navigation links skewing every which way. Finally, the typography is fantastic!

Social Media Weekly

Business - The Value of Practical Personal Projects

CSS - All About Floats

Accessibility - Big Red Angry Text

Usability - 10 Tips to Create a More Usable Web

Typography on the Web is growing bigger and bigger—literally! That is this week’s theme on Friday Focus.

Designs of the Week

I like the boxy look. Particularly, that there are all these boxes of content in strong contrasting colors all on top of each other on a fixed background. Which happens to be a CSS parallax effect, by the way.

Huge type can be elegant too. It’s interesting how the inner pages of this site are white on dark gray, while the frontpage is brown on light brown (with a bit of maroon in the footer). And CSS text shadows all over!

I love how bright and bold this site is, apart from the type treatments. It’s very much a study in the colors C, M, Y, K. And this designers loves colors so much he’s got a daily color inspiration (including a downloadable color palette file) section as footer. Good idea!

Social Media Weekly

Design - When the Design Doesn’t Match the Messaging

Programming - JavaScript Debugging Techniques in IE 6

Don’t laugh! Don’t think it’s anything morbid, either! Let’s see how this week’s websites have made use of people’s heads as part of their designs.

Designs of the Week

This site feels a little heavy because everywhere you look there’s something, but it does help that the headshots in the background are in neutral hues, not bold, high-contrast ones. It makes the colors on the shoe products pop, too. I like that the featured products slideshow use big photos, is placed front and center, and contains ample whitespace.

Now for something cleaner and simpler. Good use of bold colors and whitespace. And you can’t go wrong with Seth Godin’s head!

A one-page site with transparency, grunge, big backgrounds, and horizontal scrolling—what’s not to like? The split-screen effect, with varying fonts even, provides maximum impact and a great way to divide the two main sections of the site.

Social Media Weekly

Fonts, CSS - 10 great free fonts for @font-face embedding

HTML, Accessibility - Imporance of HTML headings for accessibility

This week’s Friday Focus features different institutions of society as design inspiration for the featured websites. Did they make you do a double-take too?

Designs of the Week

Very interesting use of these halftone patterns and fine line art juxtaposed against bright, summery colors. I’m not to thrilled I have to scroll horizontally manually (where’s JavaScript scrolling when you need it?) but other than that, fascinating concept.

Now this is like the exact opposite of the previous one: bold, dark, warm, gritty. Good execution all the way to the footer.

If there were an award for the “closest imitation of an ancient publication”, this site would probably win it. The staggering amount of old typefaces and illustrations keep the site interesting despite its stark black and white appearance. Lovely and amusing at the same time.

Social Media Weekly

Design - Negative Space

Photoshop - Make High-Impact Backgrounds for Your Designs with Photoshop

Typography - Illiterate Typography by Simon Page

CSS - Vertically Center Multi-Lined Text

CSS - Styling your Lists: 20+ Brilliant How to’s and Best Practices

Everything old is new again this week on Friday Focus. This week: some 8-bit retro inspired websites!

Designs of the Week

Very cool take on the one-page personal site, where everything’s 100% pixelated, even the once-detailed app icons.

This is a nice break from all the overdone grunge, ornate, and gradient-ridden websites—just a moderate amount of sharp-edged elements. I love that the blog has low-resolution, pixelated icons to represent each post.

This is a softer take on the whole isometric perspective, hues and all. And it’s great that instead of a large landscape header, it’s a vertical background on the left.

Social Media Weekly

Design - The Medium is the Mess
“Yes, we can learn from the many years of work that went into divining rules of thumb for other mediums but we should also remember that the web is not just a new and different medium; it’s an ever-changing, ever-evolving medium.”

Programming - Fix It Fast: Rapid IE6 CSS Debugging
“So, is there a way to shortcut through some of the hair-pulling and learn good debugging right from the start? MAYBE. The following is my cycle of preventing, catching, and fixing bugs in IE6. If I could, I would email it to myself in 2004, but until I figure out how to do that, posting it here will have to do:”

It doesn’t happen a lot on Friday Focus, but this week we have a bunch of websites featured, all dressed up in brown.

Designs of the Week

Social Media Weekly

Design - How Much Intelligence Does Good Design Really Require?

Design - An Ode To border-radius

Programming - Using XAMPP for Local WordPress Theme Development