Subtlety is the name of the game this week on Friday Focus. We’re featuring designs with light hues and textures for a relaxing, elegant feel overall.

Designs of the Week

Love the texture on the blurb itself, not just in the background. And the use of rotated spades as bullets? Lovely.

I really like the asymmetrical elements in this design. And it feels organic and warm as opposed to loud and bold—a different take on what design firm websites typically look like.

Airy, open design. What I could call a “pretty much perfect”!

I’m not sure what the reasoning behind a left-aligned design is, but it’s interesting to see that isn’t completely extinct. Also interesting: the ad placement on the left side.

Everything’s so nice and wide, including the neat dropdown menus.

I really like the way the edges of the “paper” layout have thumbprints on them, aside from the shadows and watercolor paint below.

The repeated use of the curly brace as a design element is a great touch.

Animated elements in headers are getting more popular too. I just think I want the navigation to have bit detail to it.

The only thing that bothers me is the way the button is designed. It’s very striking, yes, but I think it could be done better.

Love the stack of images that each comes to the front upon hovering.

Note how there’s not a whole lot of links in the header, and that they’re all big clickable things, which makes the visitor’s browsing choices dead simple.

A straightforward enough layout (it’s a tumblelog) but the background at the top makes all the difference.

Another watercolor-y approach, but you won’t tire of the details all over.

I think my favorite part here is the sidebar!

Social Media Weekly

Accessibility – Is Web accessibility a human right?

CSS – 47 Amazing CSS3 Animation Demos

Design – 5 Well Designed Icon Tutorials

This week on Friday Focus: websites that are split right in the middle! Is there a schizophrenia outbreak somewhere that caused these designers to break the rule of thirds? Let’s find out.

Designs of the Week

A great opportunity to exercise good contrast. And a neutral tone against a deep red gives that rich, royal feeling.

The schizo’s kicking in. Love the code peeking out in the middle, and that the right half looks hand-drawn.

The text is way too small, but otherwise a great look.

Very classy. I just wish that one didn’t have to scroll up and down to read the content and then select a new item from the menu, which could have been fixed in its place.

Pixel-precise graphics are still in vogue. And you can’t do better than the logo!

A nice touch in the Twitter area: the older the tweet, the more faded it is. Pink and brown is a pretty sweet combination too—and the site belongs to a guy!

Lots of lovely little details here, and no stone was left unturned.

This site looks elegant but not too stifling, and has touches of quirkiness here and there.

Social Media Weekly

Design – Front-end Quality Levels

Programming – Find The Right JavaScript Solution With A 7-Step Test

UX – Label Alignment in Long Forms | Paper Prototyping for Engineers

This week on Friday Focus: these folded, boxy 3D-looking designs pose an interesting challenge to the designer in creating perspective and breaking out of boundaries. See how these websites did it!

Designs of the Week

Big, colorful, chunky, and grungy. It almost feels wrong to see “normal” sans serif text fonts here and there!

I like the use of the elegant type and wallpaper background against the less elegant ropes, folds, and tears that (which all are done in moderation).

The shadow is not so believable, but I like the look. It’s quite different from the other folded/blocky/3D ones that focus on adding folded ribbons and boxy-fying things up.

Love the icons and the color palette.

The W3C has its own subtle application of the design pattern. Clean, clear, and lovely.

Cute little chimney effect (that isn’t Flash) going on in the header. The design looks a little busy, but I like it.

Now for something unbelievably simple, but still striking and attractive. One of those designs where the design practically goes unnoticed because it’s so subtle.

This isn’t a particularly attractive site, but there are enough attention to detail and typography that gets the job—of making the stories readable—done.

It’s been a while since I’ve seen a super shiny, “Web 2.0″-style design. Bring on the pastels!

I think it makes sense for the design to be so gray and dark because the backgrounds in the gallery are so colorful.

When you’ve got products presented in boxes, a boxy-looking design feels like a natural progression, doesn’t it? What I really like is the footer treatment, which looks like a few sheets of paper with two angling out of place. Not necessary but a very nice touch.

Social Media Weekly

Design – Crafting Subtle & Realistic User Interfaces

Design – Unity In Design: Creating Harmony Between Design Elements

Design – Realism in UI Design

Optimization – How to reduce the number of HTTP requests

CSS – How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS – Keeping Safari (and Chrome) Hacks Out of Your Stylesheets

At one point in our internet lives, we learned to avoid typing in all caps, because it meant we were yelling. At another point, we became attachmented to typing in lowercase, because it looked and felt cool. We see a lot of designs going lowercase in many portions of text, but nowadays, going uppercase is is all the rage. These designs seem to pull that off quite well.

Designs of the Week

The largest amount of custom web fonts and uppercase text I’ve seen, methinks. But oh my goodness does it work. I can’t stop looking at it!

Looks good overall, but I have a problem with the typeface in the body. Why use a different one from the logo?

Enjoying the minimal treatment here—just because you’re using a bold fonts you should be all in-your-face with your design. I just wish the About pullout section were styled a little bit more similar to the rest of the site.

There are several different fonts on this site but it doesn’t go too far.

I’m liking the center-aligned header/blurb here. Very nicely spaced too.

My gripes are under the hood: using JavaScript for image hovers, tables, and <br />s (instead of <p>s). Tsk tsk tsk.

The inner pages need to be more consistently styled with the overall grungy look, but points for almost getting there.

Social Media Weekly

CSS – 8 Free & Best CSS Editors For Web Designers

JavaScript – jQuery 1.4 Released: The 15 New Features you Must Know

Who’s in the mood for some red designs this week? Let’s start the show!

Designs of the Week

A bit of parallax going on in this horizontally scrolling site. Love the illustrations, which are interconnected through color.

I love that practically everything looks hand-drawn! But everything still looks tidy, and therefore readable.

I think my only nitpick here is the use of Flash for the top menu, and the lack of rounded corners in the pizza graphic. Other than that, this site is making me hungry from Brazilian pizza.

I like the not-quite-centered layout and the little nicks and cuts to the content boxes. Edgy, that’s what I think they call it.

I’m a sucker for these 3-dimensional, folded elements (is there a name for this yet? I really want to know). And the shades of red in this site are quite appealing. I just have a tiny issue with the top and bottom padding in the Featured Projects box—should’ve had more.

Now this is one of those sites that put me on the fence when it comes to looks, but I like how striking it is. Plus the quirky icons below? It captures how left-of-field tattooing is.

I like the whole industrial feel with a bit of a plastic-y twist in the menu and buttons. It makes browsing the site that much more exciting.

Beau.ti.ful. You can go a long, long way when you get the typography down pat. And whitespace is your best bud.

I really like the animated neon sign and oil rigs, dresses down the whole grand look of the site with its ornate borders and background.

This site’s bordering on very low contrast, but it’s still readable.

There isn’t as much red in here as the other sites but it makes since a very bright shade of red was used. I have to point out that something brilliant is going on in the contact page: the map of their company office is a live Google Maps spread which spans the whole background. Neat!

Social Media Weekly

Branding – Breadline Design’s Company Naming Machine
Just for kicks.

Design – A UI Design and Prototyping Treasure Chest
“Having these close by will save time and speed up your design and prototyping work flow. Here is a collection of these types of elements that should be a big help to you.”

Programming – 16 Different Clones You Can Build with Drupal
“So, if you’re thinking about building your next big site, here are a few ways that you can take existing modules and turn a project quickly, without needing to make any custom modules.”

Welcome to the first Friday Focus of the year and the new decade! Here are some fantastically designed websites that should inspire you to be more daring and adventurous than ever starting right now. Ready?

Designs of the Week

I just love it when a site creates animations without the use of Flash. I like the idea of a rooftop view too—a nice change from the skies and skyscraper views we see so much. There only needs to be a bit of refining in the inside blocks of text, but other than that, I enjoyed the overall vibe of this site.

The hover effects on the side are all such fun. And the splatter shapes used as masks for the different image thumbnails in the gallery? Great idea.

This is what we call the full experience. From top to bottom you get immersed into the world created by the design. It’s probably the most enjoyable type of site. Using the branches as separators is brilliant, and all the little icons maintain that quirky, storybook look.

Social Media Weekly

Design – 10 Beautiful Sketches for Website Prototypes
“In this post I want to suggest you some interesting examples of beautiful sketches for website prototypes for your daily inspiration.”

Programming – Don’t Miss Out Latest 10 jQuery Plugins Before Closing The Year 2009
“This entry is in jQuery Plugins series that I love to give my readers fresh and useful plugins for inspiration.”

Here’s another interesting look that’s being used in websites lately: blueprints. See how they’re translated into this week’s featured websites on Friday Focus.

Designs of the Week

I have some issues with the spacing in the footer boxes but other than that, good site.

It’s a good idea to add real elements to reinforce the blueprint feel. I also like the animation when you hit the “Next Project” button.

More of chalkboard doodles than a blueprint imitation, but it fits. I really like that the email subscription form blends in, but it’s a little too blended in. Overall that’s the main issue with this site: everything looks the same, it’s hard to tell that there are actually links and clickable elements in it.

Here’s one going for the clean, subtle look. With blueprints it usually means white on blue, or light on dark in general, but it doesn’t have to be that way all the time, as this site demonstrates.

Taking the blueprint look to the third dimension is another great idea. Also, although not shown in full here: I like that the social media icons in the footer are flowing to the left (whooshes and all) instead of lined up side by side.

Social Media Weekly

Project Management – Biz Ladies 09: Project Management
“Today’s Biz Ladies post comes from Tiffani Jones of Second and Park. Tiffani runs a copywriting and content strategy business as well as a web design agency and is here today to share the ins and outs of successful project management.”

Programming – jQuery Masonry
“Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats.”

This week, I’ve come across a lot of sites with sunbursts, a specific type of lighting that’s popular with not just the Web 2.0 look anymore. You decide if they’re crucial to the design or not.

Designs of the Week

Love the way the shape of the ribbon creates a similar cut for the rounded box below it. Everything in here is so chic, but it makes me wonder if to the ordinary visitor it’s Christmas-y enough.

I don’t get tired of seeing 3rd-party bird mascots for Twitter apps, but people could be a little more creative with their “cute” typefaces.

Overall, it’s a good look. But the treasure chest could’ve been more refined, and I’m not too keen about the inner shadow effect on the logo.

I could waste so much time telling you every bit of awesomeness on this site, or I could just tell you to go visit it and see for yourself. Perhaps the one worth mentioning here is the Featured Projects section, which looks pretty different compared to the other carousel designs we see. Also: respect to the tree!

The way the polaroid-style photos shuffle from front to back is topnotch.

The only thing that disappoints me here is that the blog is not as well designed as this site!

The sunburst is so subtle you’ll barely miss it. It’s practically design with the rest of the design. Lots of icons!

Excellent details here, from the illustrations to the framed photos to the type—the rounded font works so well here.

Sometimes a narrow, low-contrast site is the way to go, and that doesn’t mean you have to skimp on the details. I’m not sure the graphics are at the footer, but it definitely reinforces the scrapbook/collage look but doesn’t look heavy at all.

The last thing that appears on the page is the sun, which rises from behind the clouds. Good morning to you too!

Love the rainbow-colored navigation bar at the very top. The subdued blending is like the color palette for the whole site.

People should be more creative with the shape of their sunbursts, like this one. Love the fixed navigation on the rightmost column.

The color matches the dentists scrubs! I also like the arrow treatment—a great way to build to your branding, although I’m not sure if it does match theirs.

A nicely textured sunburst.

I love the splashes of orange watercolor mixed with the ornamental line art. But most of all, I love how all the user-generated photos are laid out on the page.

Some things need to be tweaked to work better but overall, the warm and playful nature-loving look is a welcome one.

The stark type in black combined with the two shades of blue is a nice departure from typographic sites that are usually black and white.

Needs a bit more color below the fold, but this site has its type and graphic details down pat.

I like the boxiness against the painterly header.

The amount of shine on this site is staggering, you’d think it were the set of Twilight (so I hear). But I like it. The links have large clickable areas, custom fonts are used everywhere, and they know their whitespace (though in this case it’s bluespace).

Social Media Weekly

Design – When Minimalism Backfires: When Too Little Is Not Enough
“This article explores some of the potentially negative side-effects of minimalist designs and the consequences of implementing one incorrectly.”

Typography – The Rhetoric Of Typography
“A functioning message is one that succeeds in connecting with the habits and expectations of its audience.”

Web Design – 10 short ‘n’ sweet tips on how to design for web
“This article will quickly run you through some of the greatest issues with design for web and hopefully give you something to think about when you start your next web design.”

This week on Friday Focus: websites adorned with colorful, abstract flourishes that give movement and energy to the designs.

Designs of the Week

No boxes, barely any straight lines. Just areas of content and the graphics to distinguish the header and footer areas.

The striking graphics here aren’t really part of the overall design but of a specific featured article, and you can expect things to change when the site author publishes a new one. This “art direction” trend/idea is really popular now and a great source of new, ever-changing site designs.

The design needs just a little bit of refining but overall, fun to look at! Check out the icons in the inner pages.

A great photo, a color you can’t go wrong with, and some wavy silhouettes to soften things up, and voila. Stunning.

What I really love here is the way the right-side menu was designed. Which is why I’m disappointed the left-side menu doesn’t match. Or why there are two menus on either side like that. Also, there are several fonts used on the site; it can stand to be a little more consistent.

The spacing is a little too tight, and the custom font in the pullquote is not very readable, but other than that I like it.

I love how there’s exactly one decorative graphic in the foreground, like a sculpture of sorts. The background pattern is strong too, but not to the point that it’s distracting.

Social Media Weekly

Design – Oldest Design Galleries

Optimization – The real world costs of an heavy website

Business – Contracts 101 – Part 1: Outline

We love our fonts around these parts, so here’s another batch for this week’s Friday Focus featuring excellent typography, and nothing but.

Designs of the Week

Social Media Weekly

Design – Readability
“In the early years of a child’s reading development, the attainment of mechanical skills is gained initially with the aid of a finger to help left to right progression and accurate return sweeps from the end of one line on to the beginning of the next. By reminding ourselves of what were the perfunctory difficulties of childhood reading, we give ourselves an insight into the fundamental mechanics and principles of setting text.”

Programming – What Beautiful HTML looks like
For your desktop wallpaper?

Usability – Inexpensive Ways to Target Problem Areas
“In the past few years, technology has become available that has brought the cost and complexity of user testing down to a level where it is available for anyone. In addition, it allows designers to be exposed to users, in their native environment, not a sterile lab across town. You can run a test in only a week for less than a few hundred dollars.”

Another dose of great sites with great illustrations that carry the design. Happy Friday the 13th Focus!

Designs of the Week

The blue and brown looks stunning. Everything’s so tidy and well-arranged.

This design conveys playfulness but in a subtle way. Beautiful borders on the boxes.

I adore the navigation. And the Twitter bird floating on the log!

I like how the designer used both the carousel and parallax effects on one page.

Would’ve liked a bit more of the comic book look in other parts of the site, but I enjoy the concept.

Fantastic concept and detail.

Beautiful use of classic illustrations to support that warm, homey look.

Chalkboard effect!

A fun way to illustrate the “refresh” services they’re offering.

Social Media Weekly

Design – Web Typography: Font Embedding Services

Programming – Is HTML5 good for application developers?

Typography – Legibility

This week on Friday Focus: another roundup of sites that play the transparency card very well.

Designs of the Week

I love a good freeform layout. It does get more organized in the inside pages, though, so best of both worlds!

The translucent effects are so subtle, it makes for an elegant design.

Lots of great things going on here: how the portfolio items that aren’t in focus are darkened, the pull-out panel that displays the designers skillset, and the overall edgy look for the site.

Custom type and lovely art both go a long way for this site!

The not so subtle way the content area fades into the background is stunning to look at. But the boat images need improvement, ironically in the transparency department. Still, a gorgeous site.

Social Media Weekly

Design – The Future of Interface Design

Programming – The 3 Basic Rules for Writing HTML