Sandbox #2 - Retro Web Design

Cool Ass Name

SCROLL

down

Buy

These

Now

$125

Black Gradient

$75

Blue Gradient

$150

Orange Mirror

$125

Black Gradient

$75

Blue Gradient

$150

Orange Mirror

These

Are

Nifty

Part of the “Retro Revolution”, neon colours are making a huge comeback in 2022.

The Retro Revolution

Calling back to the 1980’s, when everyone was wearing bright pink scrunchies and glowing yellow wristbands, bold blue blazers and candy coloured shoes, neon colours and retro web design bring a sense of energy and playfulness that we have really been missing for the past two years. It’s no surprise that, after two years of lockdowns, masks, and social distancing, we’re all looking for a bit of colour and fun to brighten things up.

Getting Attention & Looking Cool

Your CTA’s literally jump into view, immediately drawing the viewer’s eye, and helping you tell the story of your brand. Adding mouse-over hover effects (like I did with the sunglasses in the second and fourth sections) allows your website visitors to gain more information on your products or services in a playful way, while not overwhelming them with all of the information all at once. Bold borders provide a bit of structure, while completing the sort of 80’s feel.

Pairing bold colours with snappy entrance effects draws the viewer’s attention exactly where you want it to go.

I’ve been wanting to do a retro web design like this for quite a while now. I’ve had the landing screen in my head for months—with the sort of “bam, bam, bam” entrance effects of the images, followed by their offset borders—playing over and over in my imagination. While at first I didn’t have it paired with neon colours or the photo-negative colour effects on mouse-over, the two just kind of go hand-in-hand. It’s meant to be attention grabbing, and to feel a bit like a movie. With timed entrances for each element, we can really direct the viewer’s experience of your site, and provide a bit of a narrative to their visit. The “disappearing act” that each item does, snapping out of view immediately before reaching the top of the viewport, again grabs the viewer’s attention and invites them to scroll back up, maybe to reconsider adding an item to their cart that they scrolled past before.

If you want to spice up your site a little, let’s work together! And as always, if you have a design or an idea you think I should try out, let me know in the comments below!

by Phil Vaive

Sandbox # 1 - Parallax Scrolling

For our inaugural Sandbox post, I'm playing around with multi-layer parallax, a sort of three-dimensional effect that can be a lot of fun to incorporate into your website. Since the Sandbox is my testing grounds, let me know if something isn't working for you in the comments below!

Engaging and unique pages keep visitors on your website. Lots of studies have shown this. If they're enjoying what they're looking at, people will stick around a bit longer to see more. The longer they're on your site, the more likely it is that they'll buy something, or engage your services, or whatever your CTA is. Multi-layer parallax is one fun way to keep your users engaged in your site, and maybe get them talking about it too.

What is Parallax?

Parallax is a website design element that creates a feeling of visual depth. It's the idea that things in the distance don't appear to move as quickly as things that are closer to us. Scroll back up to the top of the page, and then play around a bit - the mountains and forest in the foreground move up and down a lot faster than the sun and the sky. It's something we see in the real world every day. When we incorporate it into a 2D representation of the world, parallax can be used to tell a story, taking your viewers through the history of your brand, or it can show off how your product or services can be used. It can create an atmosphere that helps to sell your products (think Pottermore), and can lead users to your Calls-To-Action (cta's).

Your Brand Name

The Benefit

Incorporating different layers of parallax can be a fun and immersive way to keep your website visitors engaged, and when used effectively and creatively, it can make your website stand out from your competitors. It encourages users to scroll, meaning that they'll be more amenable to taking in all the information that your site has to offer. It can break up large amounts of text, making your content easier to digest. Most importantly, it's memorable, and we all our our brands to be top of mind.