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.<\/p>\n
\nRetro 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.\n<\/p>\n
\nYou 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.\n<\/p>\n
\nIt’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. 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, […]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[127],"tags":[305,440,61,85],"topics":[],"class_list":["post-13694","post","type-post","status-publish","format-standard","hentry","category-shop-center","tag-web-design","tag-vintage","tag-design","tag-retro"],"acf":[],"yoast_head":"\n
\nUltimately, 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.
\n—
\nHeader graphic created with this<\/a>, this<\/a> and this<\/a>.<\/em><\/p><\/p>\n","protected":false},"excerpt":{"rendered":"