Home » Web Design » How to Design a Website

If you’re thinking about a new website, and asking yourself “How should my website look?” Then you may be asking the wrong question.

Imagine you’re designing a race car and you’ve got a great idea for the paint job. You spend lots of time with your designer getting the look just right. Then, when you’re just about done, you say: “Oh, and it should probably go fast too.” This is exactly how many people approach designing a website. They have ideas on how it should look, what kind of images and colors they want, then when it’s done they start thinking about on-line marketing.

What do you want your website to do for you?

Like starting with the paint job of your race car instead of the engine, this is backwards. The first thing you should do if you’re designing a website, or re-designing a website, is consider your goal. What do you want your website to do for you? (But be realistic. It’s not going to wash your car, feed your dog, and take care of your kids… yet.) For example, if you’re an established musician you may not need to put as much thought into marketing or getting visitors to your website. There’s no direct competition because there is only one you. (Unless you’re Elvis.) You also may not need to think about marketing if you’re an informational site for a specific association or board, and there’s nowhere else to get that information.

However, most people do need to consider they’re going to be competing for visitors with many other sites. So if the goal of your website is to get more business, then it will need to do well in Google and other search engines and be primed to convert those visitors to clients. So the question shouldn’t be “how do I want my website to look,” but “how do I design my website so it will market well and bring in clients.”

Responsive, Fast, and Secure

The three main things you want to be sure your new website has are: a responsive mobile friendly design, a design that is built for speed and loads fast, and a site that is secured with an SSL certificate. Most visitors are going to be viewing your website on their phone. In fact some of your visitors may never even see the desktop version of your site. So designing with mobile users as your first priority is a given.

Your visitors have already left…

And mobile users may not always be on a fast WiFi connection, so speed is also important. So important that website speed is now a ranking factor in Google. If your website takes even a few seconds longer to load than the competition, then your visitors have already left and are now browsing your competitor’s website.

Another new ranking factor in Google is whether or not a site is secure. A secure site will be using an SSL certificate and only load over an https connection. And it’s not enough to just have an SSL certificate. You have to use it correctly. If even one image or script link on your site is loaded over a plain http connection you’ll lose the coveted little green padlock in your browser.

Website Design Aesthetics

Of course, just because the look of your website is not the most important thing doesn’t mean it’s not important. If your site loads fast and secure on mobile phones but is confusing to use and um… well, ugly, then you will probably lose visitors there as well. But what is a “beautiful” website? Are some colors better than others? Is there a perfect font? A perfect image? Not really. If we’ve learned one thing in over twenty years of web development it’s that everyone has a different idea of what makes an aesthetically pleasing website. Everyone has different favorite colors, and a different idea of what types of images they want on their site. But, there are a couple of concepts you can use to guide you along the way.

Prototypicality

Okay, I’m not sure prototypicality is even a word. But the idea is this: The Internet has been around for quite a while now and everyone has an idea what a website should look like. And most people have an idea of what a specific genre of site looks like. Prototypicality means not making your visitors wonder if they clicked on the right link – wonder what your site is about. Studies show sites that more closely match users mental image of what that genre of site should look like are judged more aesthetically pleasing. And this all happens in less than a second.

But this doesn’t mean you have to make your website look just like everyone else’s. It doesn’t mean you can’t be creative or have a novel approach to your look. It just means to keep in mind users expectations as to how a website of your business type should look and function as you design. If it’s a shopping site, there’s probably going to be a “shopping cart” button somewhere on the right or top right. If it’s a real estate site, there’s going to be an easy and obvious way to search for listings. A news site will have top stories readily visible. An adult site will have… okay, enough examples.

Visual Complexity

Visual complexity can be difficult to define. But most people know it when they see it. Of course, they don’t visit a site and immediately think: “That’s a visually complex website.” They probably think more along the lines of: “this website is confusing,” or “this website doesn’t look very professional.” Visually complex sites are also judged as being less attractive.

This website doesn’t look very professional

But don’t confuse this with the complexity of the information on a site, or the amount of information. Visual complexity is more about how the information is being presented. Visual complexity is about having too many different design concepts going on at once. Some concrete examples are having too many different font styles, too many different layout styles, too many different types of graphical styles. Just because you can do something on a website doesn’t mean you should do something on a website. Remember blinking text and scrolling marquees? Ugg.

Cognitive Fluency

Both prototypicality and visual complexity are examples of cognitive fluency – or “the ease with which information is processed.” The human brain likes things that are easy to think about. Not veering too far from what’s expected and not overwhelming the senses are two ways to keep your visitor’s brains happy when they visit your website. Some other examples:

Keep your fonts easy to read. This can affect not only readability, but the brain’s perception of the content. In one study participants were asked to estimate how long a particular exercise routine would take. The ones reading the instructions in a hard-to-read font estimated almost twice as long. So the font used to describe your product or service can actually affect what visitors think about your product or service.

Readability can also affect users perception of truth. Another study had participants judge the truth of a statement. One group read the statement with a light font on a light-colored background and the other a dark font. Those who read the statement with more contrast between font and background judged the statement more likely to be true.

In the end you want to make your website fast, secure, and easy to use. It doesn’t matter how beautiful your site is if you can’t get people to see it. It doesn’t matter how much time you spend picking out the perfect colors and images if it’s otherwise confusing and difficult to use. And if thinking about all this doesn’t make your brain happy, then we can help. Remember, don’t be this guy.