Design Focus

Friday Focus 09/30/11: Traveling Clouds

Clouds are one of the most popular graphic elements on websites and designers have upped the ante by making them move across visitors’ screens. Let’s see how this week’s featured sites did it.

Designs of the Week

Simple Send website

Simple Send

It seems like where there are clouds, there are aircraft, and in this case, paper planes as a metaphor for the product they’re selling. Everything looks okay, but there seems like a little disconnect between the overall look of the site and the features table. Kudos to two bits of microcopy—“freshen my inbox” and “heard in the twitter breeze”—to reinforce the “windy” theme running throughout the page.

Merican Made website

Merican Made

This site uses a more realistic look to its clouds to match the view. I love the use of stars here, particularly on the US map to show their locations. It’s a strong, boxy look with the Helvetica bold, and the use of red and blue as background everywhere.

CSS Rockets website

CSS Rockets

This site surprises you with its upwards scrolling to match its theme of rocketing towards space. Aside from the moving clouds, which show up only on the first two “levels”. there are subtle parallax animations when you hover on the objects, and a couple of custom typefaces at work (but not for the body text).

Bogotaconf website


I find the cloud placement a tad odd, some of them seem too high up. I like that as the page is still loading, you’ll see a red train zipping through, which disappears when it’s done. It’s a nice contrast from the rest of the colors on the site, which seems to be a lot of green!

Intellisult website


We’ve had planes and rockets on the previous sites, and here we have parachutes and blimps. I like the chunky blue button styles, but they probably should remember to make the page scroll down to the insult area if the user neglects to do that, otherwise they wouldn’t know something already changed on the page. I also find the white text shadows a little bit too strong for a letterpressed effect.

Social Media Weekly

HTMLThe ‘nav’ abstraction

CSSScalable and Modular Architecture for CSS

Design, TypographyFont-Embedding Icons: This Is a Big Deal

Responsive Web DesignResponsive web design from the future


Design Focus

Friday Focus 09/23/11: The Dip

Happy Friday Focus! Today we’re looking at designs with a bit of a “dip” in them—one content area leading into another with a nice little curve. Can you spot them? Read on!

Designs of the Week

Matthias Schütz's website

Matthias Schütz's website

I like the combination of wood, light grunge, stripes, and glossy (web 2.0) green—all used in moderation. This design is the poster child for “the dip” technique I’m talking about: a nice column containing navigation links at the right instead of the usual header area, ending in a curly brace shape pointing downward to the rest of the sidebar.

Ellie Taylor's website

Ellie Taylor's website

This shade of blue is quite popular for girly sites, especially wedding-themed ones, combined with slab serifs and calligraphic fonts. This one looks a little flat, literally, with no textures or gradients, and the girl looks like a cut-out doll with the stark white shadow!

Filidor Wiese's website

Filidor Wiese's website

Looking for the content? It’s tucked away in the top drawer. The focus of this design is a parallaxed animation featuring an pixelated rendering of the site owner during different times of the day. Right now the screenshot shows him typing away at his laptop (if you watch long enough, his dog shows up but gets shooed away and floats off into space), but click on the different color swatches at the bottom left and you’ll see him doing other things like dreaming in binary, grabbing coffee from out of nowhere, and playing arcade games. Aside from the fact that the colors per scene are blended really, I think this is a smart, funny way for strangers to get to know this person better, even by a little bit.

Snowden Industries website

Snowden Industries website

First, while the callouts aren’t interactive, I like how the first slide is styled especially the halo around the “view portfolio” circle. Hovering over the top navigation gives you circular backgrounds, too, but the active ones get pointers and turn into speech bubbles. There are cool slopes marking each section, and inner pages crop off the the very large headings to focus on the content below.

Sparkling Milk website

Sparkling Milk website

The welcome blurb plays with depth by blurring and resizing objects to make them look like they’re in the background. The illustrations are straightforward, but the use of a patch of grass to separate each section is clever. You must also check out the hover effect on each portfolio item, like a store sign or label. I must say, though, the way the contact form is center-aligned in the footer is a little weird!

Social Media Weekly

BusinessHow Doing Less Work for More Money Saved Client Work (or) How I Finally Became a Professional Designer
Don’t sell yourself short. Find out how “boundaries will set you free”—as in design itself.

TypographyFontDropper 1000
A bookmarklet that lets you test web fonts on any page.

HTML5HTML 5 Canvas Deep Dive
Start learning how to work the canvas, now!

UX, Wireframing, HTML, CSSBuilding prototypes in HTML and CSS
A step by step guide to creating frames and flows, live, in the browser.

HTML, Accessibility, SEOPagination with rel=“next” and rel=“prev”
Google shows you how to add meaning to your navigation (and help their search engine) with semantic markup.


Design Focus

Friday Focus 09/16/11: Superheroic

This week on Friday Focus, we’re zooming in on designs with a superhero slant. We’ve had robots and ninjas before, so it’s no surprise people turn to yet another persona to welcome visitors to their sites.

Designs of the Week


RUhotEnuf? website

The first screenful of this one page site perfectly captures that action-packed look found in superhero comic books: complimentary colors, action bubbles, and of course, a sunburst. I love how seamless the latest tweets displayed inside the speech bubble looks with a nice comic font. Lots of nice subtle textures too, including the halftone pattern you see in printed materials. Scroll a bit lower and after you get some nice animations on the thermometer, both in digital and analog formats.


Logoman website

This one’s a little tame, if not underdesigned, compared to the others. I would’ve wanted less gray and more green at least. I do love the way their logo is styled, and how the logos in their portfolio have vignettes and small drop shadows, more like business cards than framed portraits. The superhero look just needed to reach out to more parts of the site.

UX Heroes Visual Prototyping Bundle

UX Heroes website

Love the utility belt to reinforce the superhero look. It gets a little “safe” in the middle part (another one page site) but there are very nice interface details at the bottom / checkout portion: you use a slider to specify the price you’re paying for the bundle, and your virtual receipt is appears to print out from a slot.

Social Media Weekly

User ExperienceTiered, Adaptive Front-end Experiences
Let’s go over this again: do websites need to look exactly the same in every browser? No!

HTML, AccessibilityBlock level links and accessibility
How do screen readers deal with HTML5 links wrapped around block level elements? Check out the results and solutions.

CSSTabs with Round Out Borders
Tabbed navigation has been around for ages, but do yours round out like this one does?

User ExperienceInternationalization
The Google engineers provide tips on designing and building pages for different locales.


Design Focus

Friday Focus 09/09/11: Denim

This week on Friday Focus we’re featuring a specific type of texture being used in websites: denim. Is it the new wood pattern? Let’s find out.

Designs of the Week

Enliven Labs website

Enliven Labs

I like that the texture used isn’t the typical blue fabric, which also means you aren’t limited by the color palette for the design. You see color swatches at the top, a fixed red ribbon background, and a huge call to action button once you get to the bottom of the page. Also, in the quest for integrating social icons into a design, we come across another technique: there’s a dark silhouette of the Twitter bird, which “lights up” into full color when you hover.

wtfJeans website


The jean texture looks interesting but seems to be fighting with the navigation text. I think it’s good that the figure text is actual text, and not merged with the rest of the pants diagram. The “Made In Europe” text looks a little out of place, and could have been styled more like a badge than a button. What I really like is the textured circular backgrounds in the four bottom links—not mind-blowingly stunning but a nice touch.

Alexander Hahn's website

Alexander Hahn

I love the stitched look especially on the logo. It’s a simple design, based on an existing theme in fact (as noted in the footer credits), but the idea of using two “layers” in the background, bounded by a vertical border on either side, is something I don’t see everyday.

Drupalcamp Atlanta website

Drupalcamp Atlanta

This site ties many different elements together to create a lovely design: vintage typography, tickets that look like tickets, folded tabs, and even orange-dyed denim shaped as ribbons! However, the orange on dark gray, combined with the Harlow font, is a little taxing on the eyes.

Social Media Weekly

TypographyThe 10 best fonts from the Google Webfonts Directory
With Google’s Webfonts list growing, it’s nice to know which are the highly recommended fonts on there.

CSS, DesignUse Google+ to improve your UI
See how they did it! There’s also an Apple OS X version of the guide.

CSSWhy Browsers Read Selectors Right to Left
Understanding how things work always helps people get better.

BusinessThe Dark Art of Pricing
Jessica Hische lists her experiences in the dirty job of pricing your work.



Basekit Website Builder Makes Creating Sites Easy And Affordable


As a fan of simple to use “what you see is what you get” (WYSIWYG) applications I was pleasantly surprised over the last few days to be testing Basekit, a website builder that allows for easy and attractive website creation.

The system works by allowing users to pick PSD (Photoshop) templates which are geared towards certain users such as artists, traders, photographers and various other sectors. Users can choose from literally hundreds of available templates.

Once a specific template type is chosen users are then able to drag and drop certain functions into their website. For example, you can choose to drag a navigation menu to the top of your template (or any other location you choose) and then add a Google Maps location to the center portion of your page. By layering elements on top of each template Basekit makes it simple to feature certain functions in a matter of seconds.

Much like WordPress, Tumblr and other content management systems the Basekit program also provides a decent set of widgets, for example users can drag their Flickr account into their website or setup RSS, Twitter and Carousel options with ease.

I personally tested Basekit.com with a sub-domain on their system (subdomain.basekit.com) however the site also allows users to point their own domains to their monthly Basekit account, creating a more personalized experience. Users can even add Google analytics to their site to track visitor numbers.

Not only does Basekit allow users to quickly create website pages, it also gives excellent customization options, for example I was able to easily change content fonts, line height and other information using simple drag bars while coloring is just as easy to implement. The program also allowed me to choose which parts of the website I was attempting to modify, for example I could choose different font and font sizes for the body of pages compared to headings.

The Basekit program also allows users to easily setup the columns on their website, for example a user might want a top column for their header and then a content area followed by a sidebar, all of which can be dropped into place by make a simple setup choice.

BaseKit Demo

For more advanced users the program also allows for manipulation of direct HTML and CSS code. After a page is created users can access tabs which allows them to manipulate the base code of their websites.

HTML and CSS - Basekit SetupThrow in the ability to add videos and images with simple drag and drop functions and it’s easy to see how simple it is to create a website using Basekit.

For users looking for distinct web pages Basekit is a great option which provides a decent set of website building options. Drag and drop functions, the ability to customize your entire website via HTML and CSS functions and a sleek interface makes Basekit worth a closer look, especially for users who only need a smaller website that can be easily customized on the fly.

Give Basekit a try today and let us know what you think.






Design Focus

Friday Focus 09/02/11: Over the Moon

This week’s Friday Focus features designs that incorporate the moon in them.

Designs of the Week

Ryan Lottering's website

Ryan Lottering

Let’s talk about the moon and how it’s in the top right, in the foreground, spinning oh so slowly—just enough for people to notice it’s moving. Overall look seems simple, but I think it’s effective and still makes an impact. I think it’s interesting that the site labels the homepage as the About page at the same time. One nit to pick, while not visual, is that there are two different email addresses being used in three email links.

BlackMoon Design website

BlackMoon Design

It’s funny how this site also uses the Star Trek logo as one of its icons in keeping with the outer space theme. I love the illustrated, painted look in the header, including the word “design” in the logo (which doesn’t look like just another handwritten typeface). It’d be nice to have the headings as real web fonts now instead of images, but then I discovered that the whole design—and I mean every graphic you see on the page—is one big sprite, so kudos to that!

Things We Left on the Moon website

Things We Left on the Moon

This is just a demo site created by Dan Cederholm for An Event Apart Seattle 2010, but there are a lot of neat things to be inspired by here, particularly CSS3 features in the hover effects and typography. Love the idea of the halftoned moon landing picture as a background. The use of purple is also a nice touch, since it’s easy to just reach out for midnight blue when depicting skies and space.

Social Media Weekly

Mobile Web Design, E-CommerceAdd to Cart: 5 Ways to Improve Shopping on the Mobile Web
Five steps to optimizing online shopping on mobile devices.

HTML5The Current State of HTML5 Forms
Check out the latest browser support and techniques for using form attributes in HTML5.

CSS3Sizing with CSS3′s vw and vh units
Another set of measuring units included in CSS3, this time based on viewport dimensions.

CSSThe Minimum Page Project
Another iteration on the CSS resets out there. The idea is to avoid redundancy due to broad-sweeping resets.

Design, CSSAdapted
Reflections on the challenges and options in adapative, responsive web design.

Design, User ExperienceThoughts On Communicating Design
“Communicating design, in general, needs to be less about documentation and more about clear, concise and ongoing two-way communication.”