Welcome to the last Friday Focus of the month! This week we’re featuring sites employing blocks of color as a dominant part of their designs. Who says we need to use gradients in everything we do? See how it’s done.

Designs of the Week

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

Always a good idea to grab inspiration from your logo and and translate it directly into your design. Here you have a sumptuous photo slideshow on the homepage, but inside it’s all color blocking, with each page title in its own column, and the body copy to the left. It’s only unfortunate that background images had to be used instead of real text, and again, too much all caps.

It looks like color coding and icon-based navigation go hand in hand in this trend. Lots of boxed in elements here, but still looks very light and breezy. I particularly like the background pattern made up of the icons you find in the navigation, but arranged in a way that’s both luxe and cozy at the same time.

I like the paper-based forest in the background and the icon designs that mesh so well with the logo. What puts me off a little, however, is the uneven alignment of the boxes and the justified text.

Once again, another icon-focused design, but in this case they’re quite abstract and futuristic looking. The use of very colorful hues is just right and not overwhelming at all.

Two more familiar trends here: triangles and the use of CMYK as the color palette. I find the text to the left a little too cramped and dark, and considering each block is pretty lengthy there should have been at least some hover effect that lit them up similar to the one you see to the portfolio on the other half of the page.

I like how each section literally uses one bold color in its background. The visualizations and and other hover effects are also lovely. Some blocks are cut off though, as if the height isn’t calculated properly, and the typesetting is a little rough.

Another CMYK (plus green) color scheme here. One good idea I noticed is the hover on each image puts on a slight tint based on the section it’s in. It’s a little confusing, though, that the four colors are used for both locations and the top navigation as seen in the circles above.

Social Media Weekly

Copywriting, User Experience - Not Lorem Ipsum
“We want clients and designers alike to think about their design and how it will work with the web copy, we want you think about how numbers, symbols and bullet points will look.”

Typography – Our Favorite Typefaces of 2011
“The idea is simple: I invite a group of writers, educators, type makers and type users to look back at 2011 and pick the release that excited them most.”

Business – Why I don’t do “mates rates” projects
“It’s almost a certainty that at some point in your career, you’ll be asked by a friend or member of your family to work on a project and feel you should only take a nominal “mates rates” fee. Try not to.”

Typography, Accessibility, Semantics – A better way to use icon fonts
“What do you think about this issue? Is speak:none the Holy Grail of icon fonts? Or could we use SVGs to archive similar things?”

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

Where we stop, nobody knows! This week’s Friday Focus showcases designs that spin around. First it was the fascination with rounded corners, and circles, and now it’s rotating objects that’s all the rage these days.

Designs of the Week

Every video is displayed in one of the three concentric wheels turning in opposite directions against one another. Clicking on the image loads a lightbox, one of two black-and-white transition animations, and plays the video. You can pick from either Vimeo or YouTube, as these are the designer’s liked/favorited ones on each site. This concept is quite the feat and a bit intensive of some computers, but that’s how experimental websites roll (pun intended). I guess my only comment would be that when you’re not doing anything on the site, i.e. the static state, it’s not animated, and you miss the movement between the welcoming animation and the ones that appear when you do clicks.

Not visible here but: the logo sports a stylized teardrop/lowercase ‘a’ shape pointing to the lower left, and this form is echoed in the navigation at its right, every link corner except the bottom left is rounded. Aside from the large images in the portfolio section which resize with the layout accordingly, there’s this secion which contains large circular icons that turn when you hover on them.

Lots of strong imagery in this one-pager; for a baby announcement site it’s very mature with lots of browns and rough textures and its overall imported coffee theme, mixed with this carousel and a rocketship a couple of screenfuls below. Another thing I noticed here is that the anchor links use period (.) instead of the usual hashes (#), which is quite surprising.

There’s another animation going on in this site and it’s one of a pointing hand pressing a button behind an array of stripes. There are only two images laid on top of the other (the stripes and the hand graphic) but a simple horizontal movement creates the optical illusion of something more. Now, these section headings have several more layers of shapes piled on, rotating in different directions and speeds when you scroll past. All fun ideas and the only concern I have is semantics in the markup.

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

Social Media Weekly

CSS, JavaScript – Making Love To WebKit
“This idea started with an accidental discovery: if you put a CSS perspective on a scrollable <DIV>, then 3D elements inside that <DIV> will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling.”

CSS – CSS1K
“A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS.”

User Experience – Five skills you need to make AB testing work
“Multivariate and split testing can be crucial for sales conversions but how do you get the most out of it?”

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

A couple of nations are well known for their love affair with tea: the United Kingdom, India, Australia and China are only a few examples. But the practice of drinking this herbal liquid is spreading to those regions where coffee was for so long the big seller.

That is why you see more websites dedicated to information and exportation of rare and common teas popping up all over the place.

If you are thinking of creating your own – or you are just an enormous tea fanatic – you will love these examples of gorgeous sites dedicated to the beverage. More →

This week’s featured designs are staying fit and trim with these not-so-wide layouts. Happy Friday the 13th Focus!

Designs of the Week

Having a one-column site champions focus. Blogs often get cluttered with unnecessary information (I’m not even talking about ads) so here’s it nice see that’s not the case. Dashed lines repeat everywhere, and so do the raw treatment to the graphics, from the bulls in the background to the rough borders running form top to bottom (neat idea to use tire tracks too).

The right column illustrations appear in full color upon hover. I like the idea of cutouts in the “paper” to signify separate sections of text. You can also see flecks both in the background and foreground.

There’s also a bit of paper metaphors going on here, from the texture to the illusion of folds. I like all the tiny little patterns used on this page, both the linework and grainy ones. And then there’s a neat little ribbon for the monthly archives to the right side.

Notice how the background of the typographic heading and the background are both clouds. I also like how the four corners of the page are cut inward (a nice-to-have in CSS3 someday). There are also some stylings in the section headings and the contact form at the bottom. I guess the thing I wanted was an anchor navigation but perhaps one thinks that because it’s a one-page site, it’s no longer necessary?

Moving your mouse around the page move the blue circle behind the logo. That box also contains more information on its “flip side”, like a business card. Below it are icons that AJAXically loads the other sections of his site. It’s also a responsive design: when the window becomes very narrow the background image disappears and the icons grow larger, becoming more touch-device friendly.

The combination of the blurred background and its lomo filter coloring topped with a subtle parallax effect makes this site for a calming browsing experience. I also really like the almost completely transparent background in the slide-out boxes under each button (not to mention the button style itself).

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

Social Media Weekly

User Experience – Stepping Out of Line
“Nature has no “visual design” phase. Why do we?”

Mobile Web Design – “Mobile first” CSS and getting Sass to help with legacy IE
“Even if you want to don’t want to use any of the Sass or Scss syntax, the pre-processor itself can help you to write your CSS in a “mobile first” manner (with multiple breakpoints), provide a “desktop” experience for IE 6/7/8, and avoid some of the performance or maintenance concerns that are sometimes present when juggling the two requirements.”

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

Our first Friday Focus for the New Year is all about animated designs, a bit on the subtle side but sure to pique your interest nonetheless.

Designs of the Week

The page first loads the logo, then clicking on it displays a trail of circular navigation items for each section of the site. Hovering on each runs a vertically scrolling animation in the background, each unique to the item. Clicking then loads the content area either in the huge half-circle background sliding out from the top, or another slide-out area from the bottom. Nothing too crazy, but lots of fun, casual touches from the heading font choice to the scarcity in straight edges. There’s also a nice little bounce/delay effect in the portfolio slider, where the MBP screenshot “stops” before the iMac one.

The gray droplets of rain appear to stagger diagonally downward, just as slowly as the ferris wheel turns—it’s not my usual expected behavior for rainfall and almost seems to be creeping instead of falling. Clicking around the area (wait to see your cursor change) reveals people holding black umbrellas appearing out of thin air and floating away. You might even chance upon a dinosaur. The portfolio items are arranged one after the other so it’s a tall website, and scrolling past the first screenful reveals a cloud menu affixed to the left, replacing the original one.

This site plays two different animation modes in each section, which you can select by dragging the slider at the top: the pleasant “Reverend” and the more violent “Danger”. Also featured are tree stumps that pop up as you scroll past, and a slider with an added bouncing effect. All areas use simple animations—slides, flips, easing—but it’s the story and visuals that make them special.

There’s only one small animation here and it’s the smoke coming out of the cowboy’s gun. I like how it looks random or unpredictable enough although it does look just a little pixelated at some points. The slanting text in the top navigation gives a small, old-style touch, while the four circles repeat in the social icons at the bottom.

Here’s another on a very short list of sites with the scroll-to-zoom effect, and in this case it’s zooming out instead of zooming in. But that’s only half the story, below it is a shooting game of snowmen and snowballs. I think I only gripe is the two things kind of handicap the scrolling so once you’ve gone down you won’t be able to go up unless you use the “Top” link, which actually reloads the page instead of jumping upwards with an anchor.

Here the animations occur in the slider, albeit one you can’t control (at least a pause on hover would be nice). I like the concept of using CMYK colors for each graphic (also on other pages), tying everything together. Other sections remain warm and neutral.

Social Media Weekly

Design – Ketchup Bottles & The Physicality Of Design
“You may not immediately notice these little details, but they make digital interfaces appear more valuable, like little hand-crafted executive paperweights: expensive, heavy and solid.”

CSS – Seven things still missing from CSS
“CSS has come a long way but it’s not perfect (yet). Molly Holzschlag, passionate standardista and open web evangelist, quizzed her peers to find out what they see as the most frustrating aspects of CSS.”

User Experience – A plea for progressive enhancement
“For this ubiquity to truly benefit all of us (not just those of us with a high income, or the latest phone) we have to start building sites using solid, future friendly principles such as progressive enhancement…not just when it’s handy or simple, but all the time.”

CSS, Optimization – Profiling CSS for fun and profit. Optimization notes.
“As our pages/apps become more interactive, the complexity of CSS increases, and browsers start to support more and more “advanced” CSS features, CSS performance will probably become even more important.”

Tools, HTML, CSS – Animatable
“Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.”

Mobile – Test on Real Mobile Devices without Breaking the Bank
“Mobile is the future of the web, so it’s time to start investing in some mobile devices. “