{"id":16355,"date":"2018-04-09T11:28:55","date_gmt":"2018-04-09T18:28:55","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16355"},"modified":"2024-09-09T19:56:49","modified_gmt":"2024-09-10T02:56:49","slug":"whats-old-is-new-again-modern-retro-web-designs-for-2018","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/","title":{"rendered":"What&#8217;s Old Is New Again: Modern Retro Web Designs for 2018"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">What\u2019s old is new again. At least when it comes to website design, anyway.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Design concepts borrowed from decades ago are making an impact in digitally today. Many of the ideas and designs were originally created for print campaigns that are making a comeback in the digital space.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What makes retro design styles work is the sense of nostalgia they invoke with users visually. Pair that emotion with a modern interface and user patterns and you\u2019ve got a combination that\u2019s hard not to interact with.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Modern retro design is so popular that <\/span><a href=\"https:\/\/www.nytimes.com\/2017\/07\/17\/fashion\/90s-web-design.html\"><span style=\"font-weight: 400;\">The New York Times<\/span><\/a><span style=\"font-weight: 400;\"> even gave it a mention:<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">\u201cWhile millennials and members of Generation Z \u2014 those born in the years from the mid-1990s to the early 2000s \u2014 may not remember what the web looked like in the era of AltaVista and GeoCities, the retro designs tap into the current cultural revival of all things \u201990s. (See the return of \u201cTwin Peaks,\u201d \u201cWill &amp; Grace\u201d and concert T-shirts.)<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">\u201cFor those who are older, these sites recall the improvised internet of their youth, in the days before mobile optimization and beta-tested user interfaces brought a sleek uniformity to modern web design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cNostalgic websites meant to mimic the days of dial-up modems are cropping up in artsy and tech-geek corners of the web.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So what does the modern retro design trend look like? Let\u2019s take a look.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Throwback Decades<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16369\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image13.jpg\" alt=\"Retro design Throwback Decades\" width=\"1200\" height=\"707\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image13.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image13-509x300.jpg 509w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image13-768x452.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image13-1024x603.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/lucasbigot.com\/\"><span style=\"font-weight: 400;\">http:\/\/lucasbigot.com<\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16361\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image5.jpg\" alt=\"Retro design lucasbigot\" width=\"1200\" height=\"724\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image5.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image5-497x300.jpg 497w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image5-768x463.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image5-1024x618.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">http:\/\/www.sweetmagnoliagelato.com\/<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16365\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image9.jpg\" alt=\"retro design sweetmagonliagelato\" width=\"1200\" height=\"709\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image9.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image9-508x300.jpg 508w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image9-768x454.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image9-1024x605.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">http:\/\/www.solangemusic.com<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16367\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image11.jpg\" alt=\"retro design solangemusic\" width=\"1200\" height=\"718\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image11.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image11-501x300.jpg 501w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image11-768x460.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image11-1024x613.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"https:\/\/www.shiner.com\/\"><span style=\"font-weight: 400;\">https:\/\/www.shiner.com\/<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Retro can actually refer to a lot of things. The modern retro designs that are most popular now include styles that are most reminiscent of the 1980s and 1990s. (Which for some of us might not seem like that long ago at all.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designers are also borrowing a few influences from the 1970s, particularly in terms of color.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What\u2019s appealing about retro design is that it pulls from early computer influences as well as print, fashion and events of the time:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>1990s<\/b><span style=\"font-weight: 400;\">: This era was both bold with lots of animation color and moving parts or stripped down versions of designs that provided pure information. Designers were trying to find their way in the new digital age of visual and graphic design.<br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>1980s<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">: Pixels were OK and the bright neon culture of MTV and video games had a distinct influence on design elements of the time.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\"><b>1970s<\/b><span style=\"font-weight: 400;\">: Muted color and bold typefaces help draw users into designs that were still primarily in print (aside from television screens).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">To make any of these retro styles work, the interface must meet modern usability standards. In many of the examples, you can actually see the juxtaposition of old and new &#8212; a muted color palette with a familiar hamburger-style navigation menu or a pixelated game with simple swipe actions.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Old-School Typography<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16364\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image8.jpg\" alt=\"Old school typography\" width=\"1200\" height=\"712\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image8.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image8-506x300.jpg 506w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image8-768x456.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image8-1024x608.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/www.sbs.com.au\/imyourman\/\"><span style=\"font-weight: 400;\">http:\/\/www.sbs.com.au\/imyourman\/<\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16362\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image6.jpg\" alt=\"retro design sbs\" width=\"907\" height=\"541\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image6.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image6-503x300.jpg 503w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image6-768x458.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image6-1024x610.jpg 1024w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><\/p>\n<p><a href=\"http:\/\/leathermilk.com\/\"><span style=\"font-weight: 400;\">http:\/\/leathermilk.com\/<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Big, block-style lettering with elaborate strokes and coloring will take users back in time in an instant. The same can be said for more cursive styles with heavier lines and roughed up edges.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Both styles have found new success because of resurgence in retro typography styles. Many of these website designs pay homage to print with an almost movie-poster style that demands attention.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To make the most of these vintage style typefaces, keep the rest of the typography palette simple. Opt for one retro typeface for display purposes and use a simple serif or sans serif for the main body copy to ensure readability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider pairing this style of typography with old-style visuals as well. (Some of these typefaces can look a little odd with super modern imagery. Remember one of the keys to a retro style is to evoke the emotion of the era.) Both examples above use a dot-grain filter for images that connects typography to the design style of the 1970s and 1980s when photography and videography had that same dotted look.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Less Bright or Brighter Color Choices<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16358\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image2.jpg\" alt=\"Bright color choices\" width=\"1200\" height=\"713\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image2.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image2-505x300.jpg 505w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image2-768x456.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image2-1024x608.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"https:\/\/caavadesign.com\/\"><span style=\"font-weight: 400;\">https:\/\/caavadesign.com\/<\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16359\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image3.jpg\" alt=\"Color choices\" width=\"1200\" height=\"635\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image3.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image3-567x300.jpg 567w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image3-768x406.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image3-1024x542.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/vintagehope.co.uk\/\"><span style=\"font-weight: 400;\">http:\/\/vintagehope.co.uk\/<\/span><\/a><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-techniques-colors-flat-design\/\"><span style=\"font-weight: 400;\">Flat design<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.uxpin.com\/material-design-ui-kit\"><span style=\"font-weight: 400;\">material design<\/span><\/a><span style=\"font-weight: 400;\"> led to a resurgence in bright, bold color options. Modern retro styles pull color trends the other way with more muted hues and color overlays.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Reds, yellows and oranges are especially popular. As can be subtle blues and greens when you are going for a 1970s or 1980s vibe. Many of these color choices are paired with illustrated imagery, rather than actual photographs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Color sometimes isn\u2019t enough to move you to another time though; it can take other visual cues.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider neon colors, which have an early 1990s feel: With the right animation \u2013 harsh flashing rather than subtle movements \u2013 users know exactly what decade they are in. The same colors though are popular today without the nostalgia, making it important to use color with some other visual cues, most often typography or texture and gradients.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Texture and Gradient<\/span><span style=\"font-weight: 400;\">ts<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16368\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image12.jpg\" alt=\"texture and gradient\" width=\"1200\" height=\"721\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image12.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image12-499x300.jpg 499w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image12-768x461.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image12-1024x615.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/thislandishovland.com\/\"><span style=\"font-weight: 400;\">http:\/\/thislandishovland.com\/<\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16363\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image7.jpg\" alt=\"retro design thislandishovland\" width=\"1200\" height=\"718\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image7.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image7-501x300.jpg 501w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image7-768x460.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image7-1024x613.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"https:\/\/www.balenciaga.com\/us\/women\/new-arrivals#%7B%22ytosQuery%22:%22true%22,%22department%22:%22nwrrvlsw%22,%22gender%22:%22D%22,%22season%22:%22A,P,E%22,%22yurirulename%22:%22searchwithdepartment%22,%22agerange%22:%22adult%22,%22page%22:%221%22,%22productsPerPage%22:%2224%22,%22suggestion%22:%22false%22,%22totalPages%22:%221%22,%22totalItems%22:%2215%22,%22partialLoadedItems%22:%2215%22,%22itemsToLoadOnNextPage%22:%220%22,%22departments%22:[%7B%22id%22:%22nwrrvlsw%22,%22page%22:1%7D]%7D\"><span style=\"font-weight: 400;\">https:\/\/www.balenciaga.com\/us\/women\/new-arrivals<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Background patterns can be a huge visual cue when it comes to creating a time-period connection. Remember getting away from skeuomorphism just a few years ago?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are two distinct styles when it comes to texture and gradients:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Plenty of texture in the design so that websites have a realistic (kind of) look<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Lack of all styling for an easy, minimal, stripped down style<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Both options are usable and either style can work in a number of ways. But they take on very different feels \u2013 warm and cozy with plenty of high-design texture or more stark and cold with the minimal option.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Video-Game Style<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16366\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image10.jpg\" alt=\"Video game style retro design\" width=\"1200\" height=\"718\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image10.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image10-501x300.jpg 501w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image10-768x460.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image10-1024x613.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">http:\/\/mostdecisivegame.com\/<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16360\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image4.jpg\" alt=\"retro design mostdecisivegame\" width=\"1200\" height=\"717\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image4.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image4-502x300.jpg 502w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image4-768x459.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image4-1024x612.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/www.rleonardi.com\/interactive-resume\/\"><span style=\"font-weight: 400;\">http:\/\/www.rleonardi.com\/interactive-resume\/<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">How many of you think \u201cSuper Mario Bros.\u201d when you think of video games? This is a common connection and the video-game style retro design pattern is popular because of that.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In a high-def everything world, an intentional, more pixelated style actually starts to stand out.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The examples above showcase two very different ways of drawing on that video game nostalgia. <\/span><span style=\"font-weight: 400;\">The Most Decisive Game<\/span><span style=\"font-weight: 400;\"> is a fully block style design that looks old (but does not have old-school interactions). <\/span><a href=\"http:\/\/www.rleonardi.com\/interactive-resume\/\"><span style=\"font-weight: 400;\">Leonardi\u2019s portfolio<\/span><\/a><span style=\"font-weight: 400;\"> uses the color and mood of the classic Mario Bros., but with smoother, cleaner lines for the artwork (that\u2019s the modern touch).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The combination of old and new works well for both sites and really exemplifies what modern retro is all about.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">\u201cObnoxious\u201d Graphics<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16370\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image14.jpg\" alt=\"Obnoxious graphics\" width=\"1200\" height=\"715\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image14.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image14-503x300.jpg 503w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image14-768x458.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image14-1024x610.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/www.everythingnow.com\/\"><span style=\"font-weight: 400;\">http:\/\/www.everythingnow.com\/<\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16357\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg\" alt=\"Obnoxious graphics everything now\" width=\"1200\" height=\"713\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1-505x300.jpg 505w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1-768x456.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1-1024x608.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><a href=\"http:\/\/retrominder.tv\/\"><span style=\"font-weight: 400;\">http:\/\/retrominder.tv\/<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">We went through a lot of bad website design before we got to some of the more polished styles that users are accustomed to now. But are some of those obnoxious graphics actually appealing?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They can be for some users.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The old flicker TV really can take you back to the past in an instant. It\u2019s at the heart of why designers can make style like this work. There are a lot of users that connect to the imagery.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What keeps the designs fresh is that connection to yesteryear and a desire to go back in time with click and touch actions and navigation and user elements that are very now. <\/span><a href=\"https:\/\/everythingnow.com\/\"><span style=\"font-weight: 400;\">Everything Now<\/span><\/a><span style=\"font-weight: 400;\"> is packed with videos to watch, iTunes and Spotify downloads and concert dates and ticket sales that are just one click away.<\/span><\/p>\n<p><a href=\"http:\/\/retrominder.tv\/\"><span style=\"font-weight: 400;\">Retro Minder TV<\/span><\/a><span style=\"font-weight: 400;\"> is a fast-paced speed trivia site, which uses images of the past with modern gamification and appeals to a desire for instant gratification (a common user behavior).<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Pull it All Together<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Modern retro is a bit of a quirky design trend.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The trick to a retro design is adding enough modern flair so it doesn\u2019t just look old. (You don\u2019t want the next <\/span><a href=\"http:\/\/www.milliondollarhomepage.com\/\"><span style=\"font-weight: 400;\">Million Dollar Homepage<\/span><\/a><span style=\"font-weight: 400;\">.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Make sure to use imagery and design styles that invoke the type of brand nostalgia that works with your messaging. Then build the design on a modern framework so that users feel an emotional draw and understand how to interact with and use the design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you plan to go the retro route, pick a specific look and decade to pull from. You probably want to avoid mixing and matching all of the styles noted in the examples above. One distinct piece of retro design is more than enough.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s also important to consider that not all modern retro styles will work for extended periods or for every brand, making this trend ideal for a smaller brand page or microsite. Some of today\u2019s trends might just be the next retro style and it is important to stay on top of those changes so that your vintage style is appropriate.<\/span><\/p>\n<p>You can design graphics in this style using an app like Glorify. It&#8217;s the perfect balance between Canva and Photoshop with simple tools for beginners as well as advanced features for professionals. <a href=\"https:\/\/www.glorify.com\/\" target=\"_blank\" rel=\"noopener\">You can try it out for free<\/a>.<\/p>\n<p>As per web design, create fully interactive prototypes in UXPin. Test them with real users and build iterations on the spot. UXPin is a full-stack design tool. <a href=\"https:\/\/uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try it for free<\/a>.<\/p>\n<p><em>For more advice and dozens of examples, download the 78-page free ebook <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-trends-2018\/\">Web Design Trends 2018<\/a>.\u00a0<\/em><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-trends-2018\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16356\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.png\" alt=\"web design trends UXPin ebook\" width=\"902\" height=\"451\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.png 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1-1024x512.png 1024w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A quick guide to a useful trend for 2018. <\/p>\n","protected":false},"author":25,"featured_media":16357,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-16355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-web-design"],"yoast_title":"","yoast_metadesc":"Design concepts borrowed from decades ago are making an impact in digitally today.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What&#039;s Old Is New Again: Modern Retro Web Designs for 2018 | UXPin<\/title>\n<meta name=\"description\" content=\"Design concepts borrowed from decades ago are making an impact in digitally today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What&#039;s Old Is New Again: Modern Retro Web Designs for 2018\" \/>\n<meta property=\"og:description\" content=\"Design concepts borrowed from decades ago are making an impact in digitally today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-09T18:28:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T02:56:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"713\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carrie Cousins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@carriecousins\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carrie Cousins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/\"},\"author\":{\"name\":\"Carrie Cousins\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e9fea31a2f764c9c37cf53e098fbeeeb\"},\"headline\":\"What&#8217;s Old Is New Again: Modern Retro Web Designs for 2018\",\"datePublished\":\"2018-04-09T18:28:55+00:00\",\"dateModified\":\"2024-09-10T02:56:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/\"},\"wordCount\":1522,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/image1.jpg\",\"articleSection\":[\"Blog\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/\",\"name\":\"What's Old Is New Again: Modern Retro Web Designs for 2018 | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/image1.jpg\",\"datePublished\":\"2018-04-09T18:28:55+00:00\",\"dateModified\":\"2024-09-10T02:56:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e9fea31a2f764c9c37cf53e098fbeeeb\"},\"description\":\"Design concepts borrowed from decades ago are making an impact in digitally today.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/image1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/image1.jpg\",\"width\":1200,\"height\":713,\"caption\":\"image1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/whats-old-is-new-again-modern-retro-web-designs-for-2018\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What&#8217;s Old Is New Again: Modern Retro Web Designs for 2018\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e9fea31a2f764c9c37cf53e098fbeeeb\",\"name\":\"Carrie Cousins\",\"description\":\"Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/carriecousins\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/carriecousins\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What's Old Is New Again: Modern Retro Web Designs for 2018 | UXPin","description":"Design concepts borrowed from decades ago are making an impact in digitally today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/","og_locale":"en_US","og_type":"article","og_title":"What's Old Is New Again: Modern Retro Web Designs for 2018","og_description":"Design concepts borrowed from decades ago are making an impact in digitally today.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/","og_site_name":"Studio by UXPin","article_published_time":"2018-04-09T18:28:55+00:00","article_modified_time":"2024-09-10T02:56:49+00:00","og_image":[{"width":1200,"height":713,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg","type":"image\/jpeg"}],"author":"Carrie Cousins","twitter_card":"summary_large_image","twitter_creator":"@carriecousins","twitter_misc":{"Written by":"Carrie Cousins","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/"},"author":{"name":"Carrie Cousins","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e9fea31a2f764c9c37cf53e098fbeeeb"},"headline":"What&#8217;s Old Is New Again: Modern Retro Web Designs for 2018","datePublished":"2018-04-09T18:28:55+00:00","dateModified":"2024-09-10T02:56:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/"},"wordCount":1522,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg","articleSection":["Blog","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/","name":"What's Old Is New Again: Modern Retro Web Designs for 2018 | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg","datePublished":"2018-04-09T18:28:55+00:00","dateModified":"2024-09-10T02:56:49+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e9fea31a2f764c9c37cf53e098fbeeeb"},"description":"Design concepts borrowed from decades ago are making an impact in digitally today.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/04\/image1.jpg","width":1200,"height":713,"caption":"image1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/whats-old-is-new-again-modern-retro-web-designs-for-2018\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What&#8217;s Old Is New Again: Modern Retro Web Designs for 2018"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e9fea31a2f764c9c37cf53e098fbeeeb","name":"Carrie Cousins","description":"Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.","sameAs":["https:\/\/x.com\/carriecousins"],"url":"https:\/\/www.uxpin.com\/studio\/author\/carriecousins\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16355"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16355\/revisions"}],"predecessor-version":[{"id":54493,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16355\/revisions\/54493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/16357"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}