Going Retro: What You Need to Know

By on May 2, 2016 in Community
Going Retro: What You Need to Know

Retro-looking sites have been on the radar of web designers for a while. Sitting side-by-side with trends like flat design and text-light layouts, old-fashioned illustrations and design elements give designers the chance to make a timeless statement. It also allows you to bow out of hot-or-not debates on what makes a cutting-edge website design. However, using vintage elements means thinking through your site design and layout with a modern eye. Users still look at sites with the same needs, including an intuitive user interface (UI) and clear copy. With that in mind, here are some components to think about if you’re planning to incorporate retro graphics into your site.

Is it right for your site?

Retro elements tend to send a certain aesthetic message. Victorian and early 20th-century looks come off as romantic or nostalgic. Graphics inspired by later decades give off a more playful vibe, especially those that draw from popular culture. In general, though, vintage design elements tend to evoke a slightly quirky personality, so they make the best picks for websites where uniqueness is key. If you’re working on a design-driven site like a portfolio or product site, vintage can be a great style choice. It’s a more difficult proposition, though not impossible, to style a tech-driven product site in a vintage way. However, there are certainly exceptions. Some niche news sites look great with a vintage style, especially if they follow the aesthetic of an old-fashioned paper.

What types of retro elements do you want to use?

You can incorporate many different types of vintage graphics into a website. A typeface that evokes 1950's print ads can be a subtle nod to an old-fashioned aesthetic. Illustrations that riff on 1900's magazines add a more pronounced vintage flair. If you want to make your site look retro without being overpowering, you can use a single large image evoking the period as a header or anchor for your homepage. Or, you can go all the way with a vintage typeface and graphics. Another way to add vintage components is to utilize one or two carefully curated skeuomorphic elements (graphics that resemble real-life objects). Maybe try a contact button that looks like an envelope -- just make sure it’s clear what the button is supposed to do.

What does incorporating vintage graphics mean for your layout?

It’s important to understand that even for a site with a decidedly retro bent, users still have a modern eye for how elements are arranged on the page. It’s important to maintain clarity in your layout and typography. If you are using a typeface with a lot of graphic impact for a logo, for example, keep the rest of the site's type easily readable. Also, don’t be tempted to channel the super-small print typical of old-fashioned papers. Keeping type large enough to read -- even on mobile screens -- needs to be a priority. The same goes for keeping graphics streamlined. Lush Victorian-era drawings can look too fussy on a webpage that has a lot going on. Use silhouettes or sketch-type drawings instead.

Ultimately, it’s your decision whether to go down the retro road or stay in the present. Or, you can mix and match. Take one old-fashioned image or typeface and use the color scheme or layout to tie it into an otherwise contemporary site. The possibilities are endless.

---

Header graphic created with this, this and this.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

3 Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →