responsiblog

More Than Just A Pretty Webpage

July 2018
using computer mouse with pen in hand

First impressions are important: that’s why we dress our best for things like first dates and job interviews. But no matter how important it is to look good, we probably aren’t going turn the date into a relationship or the interview into a job if we don’t have anything to offer beyond a nice exterior. The same is true in web design. Today’s most successful websites balance beautiful design and intuitive functionality to give their visitors the best of both worlds.

How do you make sure your website is the whole package? Glad you asked. To answer that question we’ll be taking a look at some examples of beautifully designed sites from around the internet.

Uncluttered Design

eIVF landing page
page is simple yet effective

You’ve got a lot of important information to share with your visitors. It can be tempting to cram as much of what you want to say as possible onto a single page-- that way, your visitors won’t miss it, right?

Actually, the opposite is true. Studies have shown that websites with too much going on are harder for visitors to focus on and overall rated as less attractive. Considering that visitors make judgements about the attractiveness of your site in 1/50th to 1/20th of a second, it’s essential to make sure that your site comes across as clean, organized, and inviting.

This page from fertility software company eIVF’s website conveys the company’s message using an effective image and some simple text. This design draws the viewer in, inviting them to explore the rest of the site to find out more.

Technique to steal: Make your website’s as minimalist as possible.

Unique Graphics

Responsival's landing page
Responsival’s landing page uses fun graphics to get visitors’ attention.

Graphics are a great way to add some unique flair to your website that will set you apart from the crowd. The graphics on Responsival’s website are an excellent example: the graphics in white introduce key concepts related to the services Responsival offers, and the colorful graphics establish the personality of organization as fun and creative.

Technique to steal: Use graphics as a quick and visually appealing way to let your visitors know who your company is and what you do.

Intuitive Navigation

ion360
Ion360’s website makes navigation simple and intuitive.

The way your site is organized may make sense to you, but does it make sense to your audience? It’s important to make sure that your website doesn’t take too long for visitors to figure out: the majority of people who visit your site decide within the first 8 seconds whether or not they will stay on your site. That doesn’t give you a lot of time to make an impact. If your visitors spend all 8 of those seconds unsure of how to interpret your page, they likely won’t stick around to figure it out.

Ion360’s landing page offers a great example of intuitive navigation. It has a menu bar with just a few clear, concise options. Another important feature of this site is its use of color: the important buttons that the company hopes you will click on are emphasized by bright colors that stand out from the rest of the page. This guides the user’s eye to those buttons, and ultimately guides the user through the site.

Technique to steal: Keep your menu bar clean and clutter-free, and use color to guide your visitors through your site.

Convincing Photographs

H'n'J Crawfish website
The images on H’n’J Crawfish’s website are tempting enough to make anyone hungry.

Everybody’s heard that a picture’s worth a thousand words, and in the world of web design, that is definitely true. Pictures capture visitors’ attention, and photograph captions are frequently rated as some of the most consistently read copy on a web page. Some studies estimate that captions are read as much as 300% more often than the rest of the copy on a website.

Plus, photographs can elicit an emotional or sensory response in a way that words often struggle to do. Hot’n’Juicy Crawfish uses images to convey how delicious their food is, a sentiment that would be much less clear and compelling if conveyed in copy alone.

Technique to steal: Where words can’t quite do your message justice, include vibrant, high-quality photographs to get the idea across instead.

Clear Visual Hierarchy

X Shadyside website
This website for X Shadyside takes advantage of a visual hierarchy

Did you know that most visitors scan your website in a simple, methodical way? Studies have shown that visitors often scan a web content in an F-shaped pattern, meaning that the first few rows of content and content down the left side of your page tends to get the most attention. For that reason, it’s good to include important copy and tools in those regions.

X Shadyside makes use of this strategy to create a clear visual hierarchy, meaning that they lay out their website in such a way that the most important information is noticed first. They put their toolbar along the left side with some of the most important links at the top, and they also place a slogan and their contact information in the first rows of copy on the page.

Technique to steal: Know where visitors focus their attention on your page, and incorporate that information into your design.

These web design techniques form the basics of creating a website that is beautifully designed from both an aesthetic and functional standpoint. When you’re ready to take the leap and incorporate them into your site, contact Responsival to learn just how affordable designing an awesome website can be.

responsiblog

Keep Reading

Browse All

Subscribe for the Latest

Want to stay in the know with all things Responsival? Sign up for our newsletters, we promise we won't email you too often!

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.