japan

Friday Focus 04/01/11: Help Japan

April 1, 2011 By Sophia Lucero

It may be April Fools’ today but we’re completely serious about turning the spotlight on worldwide causes dedicated towards Japan relief. Get inspired by these beautiful and thoughtful websites.

Designs of the Week

Beautiful textures and illustrations everywhere for that warm, comforting feeling. I like the subtle translucency and the way the shadows blend in.

Relatively simple setup here, but striking and effective.

A Swiss design approach combined with a focus on infographics and geometric forms.

Another minimal site with one big red button for maximum impact.

Using red (because of Japan and the message of urgency and aid) and yellow, textures, and uppercase letters seems to be a running theme. Here it’s a contrast between light grungy, textured elements and something modern.

There’s a nice big red sun in the background although it only works well for wide screens.

I like the negative space in the header. Everything’s grayed out except for the colorful Threadless buttons and the shirt designs.

Social Media Weekly

CSS – CSSPrefixer & prefixMyCSS

CSS – The CSS3 Flexible Box Layout Module (flexbox)

User Experience – Web Forms that Don’t Make People Angry

CSS – How to avoid common CSS3 mistakes

Mobile – Mobile Form Design Strategies

Accessibility – Why we should support users with no Javascript

CSS – text-align: centaur;

Friday Focus 01/21/11: Four Ninjas & a Samurai

January 21, 2011 By Sophia Lucero

These Japanese warriors seem to be very popular figures in design and tech companies, so let’s see how these websites take off on the concept. Welcome to this week’s Friday Focus!

Designs of the Week

Clearly the header image is too narrow for wider screen resolutions but it doesn’t look bad like this. Love the hanging look of the content and the weapons as icons everywhere.

Instead of listing recent work on the page, they surprisingly show up in the flyout menus. This design seems to prioritize keywords over portfolio.

Doesn’t feel too ninja-y, but looks very elegant.

Do we have copycats in this list? The carousel integrated into the sliding door panel is clever, but the rope and hanging paper looks almost exactly like the first site featured here, with ninja star icons in the menu as well. Who copied who?

I like how the content area needs no background so the rest of the design shows through without much distraction.

Social Media Weekly

Business – Building the Trunk, First
“Why you should focus on the core of your product.”

Design – 10 Designers Share the Process of Creating Their Amazing Design Work
“In this article you’ll find 10 designer share the process of creating their amazing design work, which I hope can help you to get some inspiration.”

CSS – What’s the Difference Between :before and ::before?
“I had assumed that there would be some difference in the way each functioned, but that’s not the case, as the short and long answers below make clear.”

HTML – Get familiar with HTML5!
“We’ll advise you on how it can fit into your learning right now, even if you are a novice web designer or developer, and we will look at some of the main features of HTML5, so you can see what it adds to the already powerful HTML language.”

CSS – Polka dot background with gradients

Friday Focus 09/18/09: Airplanes

September 18, 2009 By Sophia Lucero

If last week we had clouds, this week we have planes! We’re keeping things up in the air this week on Friday Focus. (Still lots of clouds though.)

Designs of the Week

Two words: absolutely beautiful.

Another cool one page site. The egg in the header is a quirky little touch!

So many fascinating details in here, like planes flying out of the frame, the underwater graphic (it could’ve been clouds instead), and the skills chart and personal information sheets.

I love the use of several different patterns and borders for that retro effect.

I like that you can hover-zoom effect on the airplane and switch models without having to load a new page. I also like the background texture, complete with rivets.