Design Focus

Design Focus: Retro Futura

This Friday we’re featuring an interesting typographic trend: designs with a union, vintage feel, featuring lots of blacks and grays, textures, thick borders, uppercase, and letter spacing.

Designs of the Week

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

Lost Type Co-op website

Lost Type Co-op

The shade of green in the menu is a tad surprising given the surrounding grungy look, but it gives a bright and cheery touch. I love the font classification card on the top right of each font page, as well as the Directory of typeface designers on the about page—perfect example of the vintage look being applied today while still retaining its utility.

Tectonica website


I like the use of the browser window as the backdrop for each scene in the slider, plus the 3D block treatment on containers (including the map illustrations on the contact page).

Pixelivery website


Love the almost equal parts usage of bright blue, bright red, gray and black. Everything’s done big and bold here, especially the newsletter subscription button, the Twitter follow section, and the bullseye animation at the footer.

Don’t Fear the Internet website

Don’t Fear the Internet

I feel a little uncomfortable with the kind of spacing I see everywhere, or maybe Futura designs really just have to be like that. Or maybe it’s the amount of black that makes it feel so stark.

Friends of Type website

Friends of Type

Love the huge images, the cut-off painted-style logo (also minty green!), and the hidden top navigation that appears only on hover. It’s also great when you have banners/ads that typographically blend in with your design.

Chitwood & Hobbs website

Chitwood & Hobbs

Also a popular feature with this retro Futura look: bento navigation, featured here in a very subdued hue. The post titles are reminiscent of label-maker tags with their white on black look and going over the post images like that.

Full Stop Interactive website

Full Stop Interactive

Very interesting trick: put a link to your contact form right on the logo. Another tiny detail: the thick divider between each section falls right under the menu when you scroll to it, almost like a color-coded thing. Lastly: the blue period (full stop) at the end of each header, to reinforce their branding of course.

Greenwood Space Travel Supply Co. website

Greenwood Space Travel Supply Co.

I like the subtle parallax and translucency, the mix-and-match fonts, and the little bits of illustration & copy that reinforce the space theme of the site.

10k Apart website

10k Apart

Love the grunged-up device illustrations presented like textbook captioned figures. Simple design choices here, and it’s the use of yellow and illustrations that make things pop.

Social Media Weekly

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

User Interface DesignThinking of interfaces as sets of jobs
“Shifting our focus from visual concerns like pixels and proportions to the jobs an interface should do helps us articulate the function of each element on screen.”

CSSDon’t Overthink It Grids
“Here’s how I build grids. It’s not hard or complicated. Even making them flexible is no big deal.”

User Interface DesignVisually Reinforce Your Credit Card Fields (89% Get it Wrong)
“Only 11% visually reinforced their sensitive fields to some degree by either visually encapsulating the fields, or by positioning security badges in close proximity. Let’s take a look at those sites and see what they did right.”

  1. By peter posted on August 30, 2012 at 8:37 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Excellent serious of post you have here. You are doing nice work. Thanks in helping me to improve my designing skill.

  2. By mikeo posted on September 3, 2012 at 2:14 am
    Want an avatar? Get a gravatar! • You can link to this comment

    thanks for sharing. i like this article very much

  3. TrackbackDesign Focus: Ruler Markers | Devlounge