Here’s an old-school pattern that hasn’t gone the way of the dodo: left-aligned designs. Symmetry is great, but asymmetry? Even better. Welcome to this week’s Friday Focus!

Designs of the Week

Going left-aligned isn’t just about “being different”, sometimes the design really calls for it, like this one does. It also has a fixed area—those two seem to go hand in hand for a lot of sites, don’t they?

Utterly simple formula (photographic background + minimal graphics) but it works!

This one’s the polar opposite of the previous design: a calmer look, Flash for the photographic background transitions, and custom fonts.

Do your users hate long-scrolling pages? Make people love ‘em—this site makes it easy with the up/down arrows. I also like that the heading backgrounds match the portfolio color schemes.

Not shown, but I like the treatment of the posts in the lower half. Another example of matching by color (and by icons), and also breaking the boxiness away.

I love elegant, subtle designs. Interesting portfolio technique: display nothing but a full-size screenshot of your work for each client page. That way people experience the designs as close to the real thing as possible. Lightboxes and other solutions usually resize down.

Social Media Weekly

Design – Free Icon Search Engine – FindIcons.com

CSS – CSS Font Shorthand Property Cheat Sheet
“I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project.”

CSS – The Right Frame of Mind: Applying the Lessons of CSS Frameworks
“The purpose of this article isn’t to debate whether or not you should use a framework, but to examine why the need for such solutions exists. We’ll take the processes used (and lessons learned) in their creation, and try to show how they can be applied to your own style sheets.”

HTML – HTML5 structure—div, section & article
“These elements are replacements for the common ad-hoc semantics we applied before HTML5 with @class and @id, for example <div class="sidebar"> or <div class="nav">.”

Going dirty has never looked this good! It’s grungy websites this week on Friday Focus.

Designs of the Week

It’s interesting how despite the chaotic background you can still make out the boxiness. A nice contrast.

I like how the site is designed as this screaming poster for the band. The content for each page is minimal and concentrated in the middle. The style is a bit of old school webdesign with the custom scrollbars and whatnot, but impact looks like the top priority here.

Again, this looks chaotic but at first but you’ll find the screen divided into three: the navigation area, the content area, and the slideshow area. Simple.

I just love how well-integrated the navigation is into the design, which happens to be a bit cheery and not just the usual angsty grunge. Another thing I like: the custom background for the lightbox overlay—a lot of people don’t bother changing that, and here it matches the design.

Truth is, only the background is the grungy part. The foreground is a very interesting folded paper texture, which even influences how the logo looks. Also interesting is the treatment of the portfolio items.

Social Media Weekly

CSS – Progressive enhancement: pure CSS speech bubbles
“Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.”

Usability – 5 Can’t-Miss Usability Tips for Mobile Website Designs
“Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.”

JavaScript – The Total Newbie’s Guide to jQuery: Select Elements and Manipulate CSS with jQuery (Part 2)
“If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.”

Just because monitors have gotten bigger doesn’t mean we should jump into wide layouts all the time. See how these designs make use of narrower widths effectively.

Designs of the Week

Even several years ago this could be one of the narrowest sites out there, and it stands out because of that. Yet the content isn’t sacrificed.

Needs a bit more refined type, but the overall look is quite pleasant.

This one, on the other hand, mixes a lot of different typefaces and shades of yellow to brown. It may be a bit glaring to some but the detalis are lovely.

This business card-type site looks almost underdesigned but still looks crisp and clean. Again, it’s all in the custom type.

A narrow layout lets striking photo backgrounds define the look of the site. I like that the menu on the left shows the subpages for each link, not just the top-level navigation: instant sitemap.

Same photo background treatment, except it doesn’t change per page.

Great graphic details everywhere, and a very restrained use of color.

Narrow designs seem to have minimalist tendencies too. This one hides away the clutter with a sliding box for the navigation.

A narrow layout can also influence you to do a one-column, one-page site that makes reading and browsing more convenient.

Social Media Weekly

Design – 4 Pixels or Less
“Having too much choice is one of the main obstacles for 21st century designers. With virtually unlimited tools and possibilities at our fingertips in the digital age, our creativity can become clouded very easily. Being inundated with thousands of photoshop brushes or fonts can push the very concept of a design from the forefront of your mind.”

Typography – The Future Of CSS Typography
“In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.”

CSS – !important is Actually Useful (in Print Style Sheets)
“So what you need is a way of specifying print styles that can override the inline styles. There’s only one way to do that: !important.”

CSS – Flexible Color Schemes in Layouts with RGBa
“This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency.”

This week on Friday Focus: designs that are dressed in fine typography and details.

Designs of the Week

Social Media Weekly

Usability – The 10-Second Usability Test
“Is your site usable? Testing the usability of a site is one of the first things to be done during the search engine optimisation process. Keeping tabs on usability is one of the ways to assess how much work your site is going to need to pull it up in the rankings.”

Design – Taking Type to the Next Level with Alternate Characters
“Are you sick of your type looking plain and boring? Many OpenType fonts have alternate characters built into them that can transform your type into a beautiful piece of art. By using these alternate characters you can add things like flourishes and flair to your type with ease.”

Ideas – 10 Principles That May Make Your Work Better Or May Make It Worse
“I was asked to map my own ocean and to document a few of my guiding principles. They may be of assistance to you. They may not. But then again, it’d be a shame if we were all working off the same map, looking for the same treasure.”

Mobile – 10 Great Tools to Create a Mobile Version of Your Site

This week on Friday Focus: excellent websites that happen to have fixed elements in them.

Designs of the Week

Not only do we have a light on dark design here, but a glowing light on dark design. It’s colorful too, because of the thick demarcations color-coded by content type. My only wish is for the search bar to be part of the fixed area; I think that’s just as important a navigation element as pagination.

Interesting choice of content in the fixed area: name and contact info (very important), quick links to portfolio items grouped by year, and quick links to additional info about the designer. Overall, neat and nicely organized.

Another split, one page site. Cool hover effect on the brain graphic, and interesting combination of background patterns (one ornate, one techie).

Brilliant effect on the blue markers, telling you exactly where you are on the page and keeping things dynamic.

A custom font makes a big difference. Big, bold, boxy, but not overwhelming.

Not so exciting fixed area (they’re more for utility anyway) but does well in presenting the portfolio.

More than half of the page is fixed—narrow content areas isn’t quite dead yet!

I like how you start with a practically blank screen when you load the site. Then you get a simple yet dramatic transition animation to load each section’s content.

Another thing that isn’t dead: left-aligned layouts. No skimping on the amount of whitespace either.

The thing about changing backgrounds is the foreground has to match, and amazingly enough, this site pulls it off. Other than that, graceful details everywhere.

I like the three different shades of blue in three different columns. Not too thrilled about the use of the drop shadows and inner shadows here though.

I love endless scrolling. I’m on the fence about the stark black icons, although they give a quirky feel to a text-filled site.

What really sets this design apart is the carefully chosen and crafted custom photos for each post, everything blends well. Not to mention custom type everywhere.

Social Media Weekly

Usability – Why Not a User

CSS – CSS gradients for all web browsers, without using images

CMS – 10 Simple and Light Weight CMS Solutions

In the spirit of Valentine’s Day, let’s try our hand at wedding planning with these nicely designed websites. Whether your status is “single”, “in a relationship”, or “it’s complicated”, there’s no hurt in dreaming up the perfect wedding just like the kids used to do in their notebooks, and what better season than now? Have a lovely Friday Focus, everyone!

Designs of the Week

Wedding sites tend to be filled with flowers and scripty type. This look is a sort of middle ground that doesn’t overwhelm: a more delicate slab serif and purple hues instead of pink.

Here’s a similar look, this time with a shade of Tiffany blue, often associated with weddings. The scalloped edges also seem to be a popular touch for that cozy and romantic feel. And when in doubt, serifs also seem to up the romance factor a bit!

The design gets out of the way, but doesn’t forget to make the browsing experience better with the drop-down menu and the share buttons.

Despite a positioning problem for one line of text in the header, this site looks pretty good. And it needs a bit more contrast with the smaller text below.

Interesting how the header area isn’t very big but attracts attention nonetheless with the floral vines, which is pretty much the only decoration on the site. And by the looks of the screenshot for registered users, the UI looks well done.

Here’s another typical scenario: if it’s a wedding photography site, it’s probably dark. That usually makes the photos pop. You’ll want the design minimal as well.

Or you can go light, remembering to stay neutral. The flowers used here are really pretty; they look almost as transparent as the main box. Love the whitespace.

I think the paragraph text should be darker and bigger. Other than that, I like that lots of elements on the site carry the scrapbook theme well, even the forum icons and calendar dates.

Has the feel of wedding invitation, but doesn’t go overboard. I love the second-level menu.

This one’s definitely a girly look. My problem with this site is it looks somewhat juvenile instead of elegant. Perhaps too sugary?

It looks almost underdesigned. But the fantastic part of this site is this: clicking on the arrows scrolls two panes (one for the images and one for the description) and changes the background to match what’s in the panes. Subtle but brilliant! (Tiny issue though: when you change pages, the default background flashes before it is replaced by the contextual one.)

Love the 3D effect going on below the blurbs, although it looks a little too light.

The odd one out of the group, with a completely different look that doesn’t really scream “wedding”. Looks quite savvy though, which does seem to match the feel of luxurious jewelry. I like how the buttons have a subtle background pattern to them. Then the logo reappears as a large watermark background in the bottom navigation, another nice touch.

Social Media Weekly

Design – Overcoming Creative Block

Accessibility – Social Inclusion for the Web

Programming – Explaining what YQL is to non-technical people

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.”