Growing Our Clients' REVENUE For Over Two Decades

Website Design: The Good, the Bad and the Unresponsive

Elements to incorporate and those to leave out of your next website design.

There are an overwhelming variety of website design features and functions to choose from these days – but don’t be taken in by all the fancy bells and whistles. They have the power to turn well-meaning websites into frustrating, user-UNfriendly monsters if not used effectively. We’re highlighting good and bad web design practices when it comes to mobile, layout, color, motion, funneling, and copy.

MOBILE

Good

Mobile comes first
Today's design recommendations include starting with a mobile layout, then moving onto a desktop look. Keep things linear and stackable, and program your website to be truly responsive in its ability to resize for every device.
 

Bad

Separate mobile & desktop sites
When you use user-agent detection to show different versions of your website to mobile and desktop users, you’ll have to manage two versions of every page. It’s possible to streamline the process, but code issues often arise.

 

GC Studios' desktop site neatly stacks and sizes down for mobile.
 

LAYOUT

Good

Clean & minimal
Users are savvy these days, but they’re also impatient. Give them what they need and leave clutter out of the picture. Use simple, bold images and text.

Bad

Sensory overload
Websites with images, text, gradients in varied styles, and too many animations all shoved in a small space will confuse, distract, and infuriate users. 

An example of clean, minimal website design is the Herman Miller’s Aeron Remastered page.

Herman Miller’s homepage is the embodiment of a bold, no-frills layout.
 

COLOR

Good

Vibrant meets white
2016 saw an uptick in the use of vibrant, bold colors juxtaposed with clean, bright white. Contrast is a beautiful and effective way to direct the eye to important information.

Bad

Monochromatic colors
While we love colors that match, a fully monochromatic color scheme makes it hard for users to know where to focus.

Spotify isn’t afraid to think outside of the color wheel. Vibrant magenta fading to purple pops next to white.
 

MOTION

Good

For the function
Try incorporating a horizontal menu that expands from one side of the screen, and dropdowns with elements that rotate to convey when they’re open and closed. Motion is the best when it helps explain how a feature works.

Bad

Busy and chaotic
Avoid counterintuitive motions like adding hover changes to pieces that aren’t clickable. Animation of characters and text can be a great addition when used in moderation, but don’t go overboard.

The Sortis menu is a slick, slide-out design with an intuitive close feature—just click anywhere outside of the menu, and it closes.
 

FUNNELING

Good

Stress-based funnels
Create a clear path for users to follow when they land on your site. What stressors do they have? How can you alleviate the stress? Create visuals and copy that offer clear answers and next steps.

Bad

No funnels
Website designs without funnels don’t allow users to quickly and easily find information that can help them solve a particular need or problem they are facing.

Kleenmark uses funnels that focus on user stressors ranging from pricing to quality.
 

COPY

Good

Smart, snappy, & personable
We’d argue that good copy has everything to do with design. A conversational tone personifies your brand and gives users a warm welcome to your website.

Bad

Overly technical & sales-y
Today, average users are inundated with hundreds of messages each day. Leave out technical jargon when possible and avoid overused sales-speak. 

Smart, snappy copy from Skullcandy: “SURVIVING STANDBY - Dig in and chill out to the albums that will keep you Zen throughout all those holiday travels.”
 

Want to learn more about website design strategy? Get in touch with us today for website design advice or to discuss your marketing needs with our savvy digital marketing team. We’ve been building beautiful, user-friendly websites since 1995.

 

 

Contact Us

 

 
To prevent automated spam submissions leave this field empty.
13 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.