{"id":2554,"date":"2019-10-18T15:00:59","date_gmt":"2019-10-18T13:00:59","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=2554"},"modified":"2020-08-02T02:04:38","modified_gmt":"2020-08-02T00:04:38","slug":"web-design-90s-look","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/web-design-90s-look\/","title":{"rendered":"Web Design Trends: That 90s Look is Coming Back"},"content":{"rendered":"

[vc_row][vc_column][vc_empty_space height=”28px”][vc_column_text]Oh, the 90s\u2026 The era that gave us so many things. Almost everybody wore flannel shirts paired with high-waisted jeans and had light-up sneakers or All Stars on their feet. Grunge was on the rise, while the East Coast \u2013 West Coast hip hop rivalry reached its peak. This is the decade that also gave us, some might say, the best sitcoms of all time, such as Frasier and Friends, not to mention animated classics like The Simpsons and South Park. And everything \u2013 pop-culture, politics, fashion \u2013 was steeped in a loud, raw look that marked the entire era.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Fast forward to the present-day: that 90s look is coming back in a big way. And there\u2019s no stopping it.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The fierce 90s aesthetic is omnipresent and is ruling the design world.<\/strong> Everything screams contrast. Nowadays it\u2019s all about big fonts, bold animations, and asymmetry.<\/strong> Almost every creative out there seems to be going for an unpolished and raw look.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Tennent <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Gone are the days when perfect symmetry and gentle-looking designs were in demand.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"Daniel <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Even though every website is unique in its own right, there are some elements they all share. Check them out below and discover just what it takes to achieve that 90s look.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Over-The-Top Typography<\/h2>\n

[\/vc_column_text][vc_column_text]One of the most prominent characteristics of the 90s aesthetic is its eye-catching typography. Sure, you want to keep the text readable, but that doesn\u2019t mean you need to opt for a dull typeface. Spice things up from the get-go and make the lettering the focal point of your design.<\/strong> Some font combinations<\/a> work better than others, so be careful when making font choices for your website.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Play around with font styles, use uppercase, lowercase, make your letters bold or underlined, etc. There are many options to choose from. What matters in the end is that bigger is better<\/strong>, so go ahead and use large fonts that just scream for attention.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The Locomotive design agency does a great job presenting their case studies<\/a>. Just look at that headline, taking up the entire screen. It really wants us to notice it, right? What adds to its prominence is the use of black lettering on a white background. Contrast is one of the key players now, remember?[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Locomotive\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There are also websites like davideperozzi.com<\/a> that have gone one step further and have made typography the most prominent element of their design.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"Davide <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Even the portfolio section is all about the huge letters! Imagery and colors are secondary. The only time you catch a glimpse of images is either when you hover over or click on a word. This bare typography is paired with a variety of animation effects and displacements. And it\u2019s precisely this combination of large, raw fonts and atypical animations that make the site feel dynamic, interesting, and memorable.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Contrasts in Font Sizes<\/h2>\n

[\/vc_column_text][vc_column_text]Due to the exaggerated size of the headlines and their impact on visitors, all the other typography on your website should be smaller<\/strong>. That isn\u2019t to say it must be small, or even what might be considered \u201cstandard\u201d size for paragraph text. The difference should be just enough to tone down the somewhat over-the-top effect the huge headlines have on readers<\/strong> and signify that there\u2019s an obvious visual hierarchy in all your typography<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The folks at craftedbygc.com<\/a> did a great job at incorporating perfectly set font sizes with the images they chose to use on the page.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Crafted <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The headlines are obviously the most prominent element here, while the remaining typographic elements remain significantly smaller. Typography is what carries this page, but without overshadowing imagery.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Asymmetric Layout<\/h2>\n

[\/vc_column_text][vc_column_text]Until a few years ago, the symmetrical arrangement of elements was the standard of design. Every single line on a page had to be perfectly placed, and a well-balanced composition was the only thing considered aesthetically pleasing. With the 90s look back, you can forget about all that. These days, it\u2019s all about asymmetry<\/strong>. While this technique may be a bit provocative, it\u2019s most definitely impactful. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let\u2019s check out a great example of asymmetry done right on the Burnish Creative website<\/a>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Burnish <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]With each scroll, something surprising happens. The letters are moving, a video starts to play, the faces on images appear and, as you scroll away, they disappear, one element overlaps the other, etc\u2026 It may seem like it\u2019s all a bit too much, but it\u2019s actually refreshing to see a website like this one. There\u2019s a lot of content on each page, but the minute you start scrolling, the fun starts, and you never want it to end.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Minimalism<\/h2>\n

[\/vc_column_text][vc_column_text]Even though it may not look like it, the 90s aesthetics is, in its essence, quite minimalistic<\/strong>. Don\u2019t get confused by large and bold typography choices and chunky designs. When you take a closer look, there are just not too many elements on any of these pages.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Design <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The design is stripped off of any elements that have no purpose. The whole point is to give your visitors exactly what they came looking for<\/strong>. You don\u2019t want to distract them with unnecessary embellishments. Adding purely decorative elements will only impede the raw, clean aesthetic you\u2019re going for. The 90s look is not about visual competition.<\/strong> You need to let your content breathe.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Simplicity is evocative of professionalism, elegance, and clear thinking. Keep that in mind. Making your design simple and streamlined will enhance the impact of your message. Put your users first and make sure your design meets their needs. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Outlined Typography<\/h2>\n

[\/vc_column_text][vc_column_text]The 90s aesthetic is very big on using outlined typography. Hollow fonts are an excellent choice, especially for websites that are all about imagery. If you don\u2019t want your typography to overpower the images on your site, but you still need your text to be prominent enough, outlined typography is a great choice<\/strong>. Take a look at the benandmartin.com<\/a> website for a great example of outlined typography in use.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Benand <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]As you scroll down, their projects keep popping up, with the name of each project written in an outline font. But the best thing about it is that the letters do not dominate the page. The pictures are the main content, but the text is also prominent enough to grab your attention. Had they used a solid font and then placed the text over images, the images would\u2019ve served just as a background for the text.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Outlined typography is great because you can play around with it and place the lettering basically wherever you want. The letters look bold, modern, and cutting-edge. And, depending on the overall composition of your page, you can easily make them big, bold, italic, etc. without disrupting the design.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Bold Animations<\/h2>\n

[\/vc_column_text][vc_column_text]We want to keep things simple, right? As we already mentioned, there\u2019s no need to add any unnecessary details on a page. What you can do, though, is pop in some animated effects here and there to make the browsing experience more engaging and exciting<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This guy did it really well:[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Louisansa\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Louis Ansa<\/a> uses bold animations to turn what would probably be just another portfolio website into something fun and definitely memorable. Each time you scroll, things start to move. The transition from one project to the next is very vigorous, and the lettering he uses is just as intense. And this is not where the fun stops. As you hover over an image, you\u2019ll notice that it changes its shape, because of the liquid hover effect. It\u2019s also clear that Mr. Ansa is very attentive to details because he took care of micro-interactions on his website as well. As soon as you put the mouse cursor over an image or the project list button, the pointer changes its form and becomes outlined. These small things matter and make the whole browsing experience more special and enjoyable.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

The Extremes of Brutalism<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"Noforno\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]One of the ways of giving your websites that 90s look is by incorporating brutalism into your works. This means that raw, rugged, and unpolished<\/strong> looks are what you should go for.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Pascal Deville (brutalistwebsites.com<\/a>) gave one of the best explanations of what brutalism is:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]“In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design.” <\/em>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"Saint <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Brutalism is the complete opposite of the tame and austere designs that we are all accustomed to. Lots of vivid colors, bold lettering, micro-interactions, misplaced images, animations, peculiar text arrangements, asymmetry\u2026 These are some of the main characteristics of both the distinct 90s look we\u2019re talking about and of brutalist designs.<\/strong><\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Break the rules, and forget about perfection. Infuse the content with personality and character.<\/strong> That\u2019s the essence of brutalism. And while brutalists artist often take a far bolder approach to this philosophy, it\u2019s without doubt one of the factors that can help you achieve that 90s look you\u2019re going for.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Brutalist designs will ensure you set yourself apart from other trends, but be careful as this style is not for everybody. It\u2019s best directed toward an alternative and underground audience<\/strong>, who are interested in more than just squeaky-clean designs.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Make It Red<\/h2>\n

[\/vc_column_text][vc_column_text]We already talked about how 90s-inspired designs are mostly stripped of color, using it mainly as a highlight or minor detail. But when you do decide to use some color, which one should you go with? Which color goes best with the simple yet impactful 90s aesthetic? The answer, of course, is red![\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Agauche <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]When your goal is to bring attention to a specific part of your site, red should be the obvious choice. This primary color is deeply rooted in our brains already. We associate it with strength, energy, and passion, among other things.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Go back and take another look at all the examples we\u2019ve used in the text. There isn\u2019t exactly a myriad of colors on those websites, but the details in red<\/strong> are everywhere! Your eye is immediately drawn precisely to those elements.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Had the authors used red in abundance, it would probably be over-stimulating. Most people would be overwhelmed by it. So make sure you use it in moderation<\/strong>, and only for the things you wish to highlight.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

To Sum Things Up<\/h2>\n

[\/vc_column_text][vc_column_text]The 90s had a deep-rooted underground character. Which is probably why its unique aesthetic is gaining popularity today. Especially among the more alternative crowd. Creatives everywhere are tapping into this trend and mixing the retro styles of three decades ago with modern techniques. Simple, effective, bold, attention-grabbing<\/strong> \u2013 this is how your designs should be when you\u2019re going for that 90s look. Charge it with attractive typography<\/strong>, and don\u2019t be scared to go big. 90s nostalgia has definitely reached its peak, and if you\u2019re feeling it, let it show in your works![\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Creatives everywhere are tapping into the 90s trend and mixing the retro styles of three decades ago with modern techniques. Big fonts, bold animations, asymmetry, and attractive typography are just some of the elements all the designs have in common. <\/p>\n","protected":false},"author":1090,"featured_media":2581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,44],"class_list":["post-2554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-trends"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/2554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/1090"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=2554"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/2554\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/2581"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=2554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=2554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=2554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}