Lots of Meat on These Bones

For my website design analysis I’ll be taking a look at a site I just discovered recently. It’s a one-off product promo page at http://themble.com/bones/ for a bare bones HTML5 WordPress theme called “Bones”. The promo site was created by Eddie Machado and features illustrations by Melanie Matthews. It’s a great showcase for HTML5 and CSS3.

The theme itself is a minimalist black on white affair with clean HTML and lots of ID & class hooks for CSS themability. However, it’s nothing special design wise. The promo site is. It’s a colorful feast that has heavily inspired my site design for this class. What makes this design so strong is its combination of cheery illustration, playful animation, and solid typography.

Illustration

The first thing that pops about this site is the illustration. It’s big, bright, colorful, and textured. Melanie Matthews is really good at creating interesting characters and her bone pirates (and their pets) are dynamic and, ironically, quite alive. The curved lines, stretched ovals, and thrusting lines of the ship give it a sense of motion even as a static graphic. This is the advantage of employing a professional illustrator.

Animation

The illustrations are given more life through a tasteful application of animation. The ship rocks gently and the waves move across the screen while a shark circles. The effect is achieved using the new transitionanimation properties of CSS3. While not technically difficult, CSS animation requires a lot of trial and error to get right. The biggest skill in creating good animation is not to overstate it. If everything on a site is whizzing around the viewer will be overwhelmed. For most sites the best applications are for subtle transitions, like the slight rotation applied to the sun like site logo.

Typography

The last element of what makes this page look so good is the selection and layout of type. Typography seems simple: pick a font, add some spacing between headers and paragraphs, and maybe even use columns. It’s not that easy. When non-designers “pick a font” they don’t often consider the typographic quality of what they are picking. What is the spacing. Is it well kerned? Does it support all the character sets you need? Typography Deconstructed has a great glossary of basic terms and concepts. After a quick look there you’ll see that there are a lot of details that come into good typography. On top of that there are legal issues with what you are licensed to do with fonts. You are often not allowed to redistribute them; e.g. include them on websites with the CSS @font-face declaration.

Type sample of Freight Sans Pro Black designed by Josh Darden in 2009

Eddie Machado is using Freight Sans Pro here which is available from myfonts as a family bundle for just $279. This is a well balanced font. It includes several weights which allows Eddie to mix thin letterforms with bolder ones creating rhythm and contrast in his design. The ‘Sans’ in the name refers to the fact that it’s a sans-serif, or without serifs, which means its strokes aren’t embellished like the ends of the letters in Times New Roman (a serif font). Sans-serif fonts often convey a modern or clean aesthetic which is used here to describe the template Eddie is offering. He also makes an effort to break his text up into shorter paragraphs and uses bullets or lists where they make sense. This adds to the sparse, clean, ‘just the bones’ feel of the site. Lastly, the font is licensed for use on the web (in this case through TypeKit), which puts Eddie on safe legal ground and respects the type designer.

All together, a lot of thought went into building this page and making it clean and splashy. This kind of page design is probably out of most first time web authors skill level and price range. Still, it’s a good design to aspire to. Plus, it’s a fun site to look at 😉

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s