Bring 80′s-inspired styles to your web templates

The Eighties are making a comeback not only in fashion but also in web design. Here’s how to add some recognisable graphical touches

The Eighties is a special time for today’s Gen-Y’ers. It’s synonymous with our childhood when sunglasses, Rubik’s Cubes, cassette tapes and neon colours were all the rage. It was about exuding an unprecedented loud personality in all fronts: big hair, big clothes, and even bigger shoulder pads.
In terms of design aesthetics, computer graphics had started to become more popular. Everything was over the top and often clashed because of the bold colours, playful compositions, zany patterns or a combination of all of them. Some designs were so visually strong that it was overwhelming to look at. Nevertheless, this is what gave the Eighties its daring edge, which makes it one of the most memorable eras.
With this in mind, let’s explore how to dress up a web template in the style of this unique look. A collage, hands-on approach using bold colours, hand-drawn text, sketchy doodles and the signature spunky attitude all come into play. Totally rad, right dudes?

Tutorial files available here.

01 Design concept

This exciting concept for an Eighties-style design is a whirlwind of playful iconic graphics that can all be associated
with that time. It embodies a combination of computer and hand-created images with some vibrant splashes of colour to invoke an energetic quirk. The open structure of the page invites the viewer to step in as if they were entering a time machine.

02 Design space

There are three columns here from left to right: navigation, main content, and eye-candy graphics. The backdrop for the actual content is toned down compared to the heavier graphics to create balance and visual comfort. Although the menu text is rendered in a sketchy manner, it’s clean and clutter-free and this helps add to the focus.

03 Iconic images

We chose four of our favourite images from the Eighties: a Rubik’s Cube, cassette player, fashionable girl and a sneaker. Sketch these by hand with a pen or marker on white paper. Scan the drawings into Photoshop under File>Import. Double-click on the image layer and hit Enter to exit the default locked background mode.

04 Close Cropping

Then you will need to save the document as a .psd file. Next, delete the background so only the object remains (this is Close Cropping). This can be done with the Magic Wand tool and Polygonal Lasso tool. Clean up afterward with the Eraser tool if needed to make sure all your edges are sharp and the image looks clean and crisp.

Pages: 1 2 3 4