Blog

4 Web Design Principles All Entrepreneurs Should Know

Good Website Design

  |   Branding, Digital Marketing, Entrepreneur, Shana, SplashU, Web Development, Web Optimization   |   No comment

Web Design Principles for Entrepreneurs. 

I know, I know. 

Design is not your thing. 

You are an entrepreneur or startup founder and your only goals are to gain more brand awareness, and find your product-market fit, and start discovering your target customers so that you can test your MVP. You’ll just outsource most of the website coding to a designer / developer and blah blah blah. 

Honestly, I have to tell you. 

I’m so sick of seeing so many entrepreneurs spending so much money on websites and landing pages that aren’t built to function correctly!

Without proper consideration, your new website could end up costing you your entire business.

This post is to teach entrepreneurs like yourself about the web design basics that make content easy to consume, visually engaging, and that converts better.

But before I get too far into that, I’m going to let you in on some classified information here:

As a graphic design professional who has been through the wringer of both art and design school, most designers are not taught to build you a website based on conversion principles.

They. Don’t. Think. About. Conversions.

In fact, a lot of designers probably don’t even know about them. It’s an insane idea really.

I did a google search for the phrase “graphic design conversion rate” and here’s what came up:

google search

Maybe I just went to a shitty school (which is entirely probable), but they didn’t teach us about conversions, let alone designing for them.

All that mattered was displaying the information in a way that was nice to look at and easily consumable, which, don’t get me wrong, is still important. But it’s not the be-all end-all of a functional design.  

I know that the industry is changing, but that doesn’t really help you out now, does it? If you’ve already got your website created, then the industry improving doesn’t really help you in this present moment.

Obviously, a designer’s job is (and always has been) to create something functional, but how you measure functionality can be different for a designer, an entrepreneur and a customer!

I’ll admit that a huge part of the problem isn’t just design. Bad copy and messaging can wreak just as much havoc on a well-meaning website or landing page, and I’ll get into that a little bit later on, but I digress.

In my post Digital Marketing and Graphic Design Collide, I mentioned that in today’s day and age, graphic designers need to think more like digital marketers, and vice versa.

This is true for today’s entrepreneur as well.

In order to be successful, online entrepreneurs need to have some idea about how to market their business. And one important facet of owning a business is having a website. If your whole business is based on a website, it better be functional.

Meaning, it better convert.

Bottom line? If you own a website, you need to know this stuff.

Fortunately, you don’t have to be a designer to understand these basic principles, and you don’t need is to go spend money hiring a CRO expert until your website has at least 10,000 monthly visitors.

Just knowing about these design principles will get you ahead of the game.

You’ll be able to easily identify poor design, create images using a program like Canva that don’t look like crap, and fool people into believing you know about good website design.

Free Cheat Sheet

Designing for Conversion

Don’t need any more convincing? Grab your free Designing for Conversion cheat sheet and make some quick changes yourself right now!

Grab My Free Cheat Sheet

 

Now, the first thing I want to tell you is very important.

It’s the number one rule of good website design and it’s something you may not have known.

If you don’t have a website yet, do not design your website and then add the copy and messaging afterward.

I repeat: Do not design your website and then add the copy in after.

Your copy should inform the design of your site, not the other way around.

From a conversion standpoint, you risk way too much by trying to squeeze your message into a pre-determined design. Your messaging is really what’s going to win people over.

This is not the time to be precarious.

It is so much cheaper (and easier) to change words than code.

And, from a designer’s perspective, great design supports the content being showcased, which can make your messaging that much stronger, thus paving the way for better conversions.

Now that you know the number one rule of great web design (and you may have found that one out the hard way…) let’s get into the nitty gritty.

 

Want to hear Shana discuss this blog post, instead of read it? Take a look and listen here:

If you like this video, be sure to subscribe to SplashOPM on Blab to join in the discussion next time.

 

The Four Principles of Good Website Design

As I mentioned earlier, I went to school for graphic design. One of the books that I learned some valuable ideas from (titled The Non-Designers Design Book oddly enough…), listed these exact principles.

Like I said, you don’t have to be a designer to understand this stuff, but as an entrepreneur who does business on the internet, you should definitely know it.

A lot of it is actually psychological and pretty ldo (like duh obviously…).

Once you bring awareness to these concepts, it’s hard not to notice their existence.   

The four basic concepts of design are:

  • Proximity
  • Alignment
  • Contrast
  • Repetition

 

Proximity

From a design standpoint, utilizing proximity means the visual grouping of related items, which creates a sense of order and makes a more organized layout. Items that are not related to each other are placed further apart, to emphasize their lack of association.

(The list of bullet points above is a prime example of proximity.)

Naturally, when you see something near something else, you automatically assume that those items belong together.  

Here’s an example of bad (or a complete lack of) proximity consideration:

Bad-proximity-no-phone-number

Here’s an example of good proximity usage:

Good-Proximity-Usage-no-phone

As you may have guessed, the above pictures are examples created from our very own Splash business card design.

I used a business card design to demonstrate this principle because the small space makes it extremely obvious when something is off, but the same will hold true on a website as well.

Using the proximity principle is a great way to improve user experience because it helps the eye determine which items belong together without taking a lot of time to calculate that information.

 

Alignment

Alignment is the act of placing different items along “an invisible line.” When I’m designing something, I try to make sure that every word or piece of text aligns with something else so that there are no stand-alone phrases awkwardly sticking out.

Poor alignment tends to make things look sloppy:

Example from http://webmarketingtoday.com/articles/learning-from-bad-web-design/

Example from http://webmarketingtoday.com/articles/learning-from-bad-web-design/

Besides the several obvious problems with this website example, the first thing I notice is all of the different mismatched sections and boxes. The alignment (among other things) of this site is terrible.

But in this example,

Example from http://www.designbombs.com/18-beautiful-left-aligned-website-designs/

Example from http://www.designbombs.com/18-beautiful-left-aligned-website-designs/

Everything feels so neat and orderly. You can almost see all of the invisible lines running through this web page and it makes your eye (and your mind) relax.

Another example of good alignment is pictured in the business card example above. The word CEO is aligned directly with the website “splashopm.com” and email address “derric@splashopm,” which has the same organized feeling as the good website example.

 

Contrast

Most of you probably already know the definition of contrast. When used in design, it usually means a visual juxtaposition. (In web design, the term actually refers to something else, but for the purpose of this article, I’m talking about juxtaposition.)

Using two completely different types of font, or using one bright color with a couple of muted gray, black or white tones would be easy examples of contrast.

Example from http://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/

Example from http://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/

This picture aboive is a great example of color contrast. Your eye instinctively wants to focus on the bright, intense oranges first, and then darts around to the cooler blues.

Then as you scroll down, you can see that the dark black background is cut off and followed by a bright white block, which showcases the three text blocks nicely.

 

Typically, when using contrast, you want to choose styles that are VERY different from each other.

When choosing contrasting fonts, you want to make sure that the difference is noticeable, otherwise it will look more like a mistake than a discernable choice.

Contrast-GoodBad-contrast

 

Can you tell which one of the previous images is an example of good contrast use?

Both of these examples use a combination of two fonts, and two font sizes. But the combo on top is better because you can tell right away that these two font types are extremely different.

The example on the bottom uses two types of fonts that are sans serif (they don’t have the little dealies hanging off the ends of the letters), but it’s hard to tell unless you look at the “a.” The sizing is also a problem because there just isn’t enough of a difference between the two.

The right example is more of a conflict than a contrast, so when you attempt to use this principle, aim for extremes. The worst thing you can do is not take it far enough.

Ok, so I’m sorry for putting you through this, but if you take a look below, (Ackkkk I know it’s like looking into the sun…), you can see an example of a website using many contrasting elements (but not in a good way…)

bad website contrast

Example from http://www.riversideartcenter.org/

You can see that the plethora of colors do not create harmony, and the seven different font sizes are pretty damn confusing. They have a decent amount of contrast going on here, but they clearly have no idea what they are doing.

This is not going “too far” by the way, on the contrary, they haven’t worked the design enough. There are discrepancies with alignment and positioning of elements, but not enough that it looks pre-planned. The font sizes and combination were poorly considered, and obviously the colors are ridiculous.

To make this design better in no time, I would recommend:

  • Choosing one font family and using a variation of italic and regular
  • Choosing a cohesive, high-contrast color palette that marries complementary colors with black, white and grey
  • Making the header text larger, and aligning / justifying the body text to the left
  • And making sure that the many boxes and hard edges are properly aligned 

 

Repetition:

The last principle of good website design that I want to introduce you to is repetition. Another pretty obvious concept, but using similar symbols within a design tends to create a sense of unity and conformity that strengthens the overall design experience.

As an entrepreneur, you probably know that repetition and consistency are very important concepts for building a strong brand. And just like with your brand, you want your website design to have consistent elements.

Repetition subtly reinforces whatever notion you are trying to convey.

Without repetition, symbols can seem out of place, the landscape of your website can seem confusing, and your message may feel weak.

 

Here are three examples of blog header images from this very blog:

Growth Marketing Business Goals for 2016 | SplashU

Growth Hacking Twitter Auto Mention Campaign

Growth Marketing Checklist | SplashU

You can tell right away that these pictures are from the same “place.” Technically, we’ve repeated a couple of different elements here:

  • The image layout
  • The use of our own faces
  • Our logo
  • The font types
  • The hashtag

This is part of our branding. But it wasn’t always that way…

The 6 Worst Mistakes

Resolution

Digital Marketing and Graphic Design

Not long ago, (like literally, this past summer), we didn’t have our branding down yet.

We did not use repetition enough in our designs, and as a result, all of our blog header images look like they could have come from different blogs.

In fact, our home page and our blog gave completely different sensations when you went to them, it didn’t feel like the same place, so we fixed that problem immediately and have enjoyed the results.

Repetition doesn’t only refer to exact images like logos or symbols, but other design elements like shapes, or even phrases (or hashtags) can be repeated throughout for a similar effect:

Example from http://www.tripwiremagazine.com/2010/10/minimalist-web-design.html

The website example above uses the circle as a repeated element.

And this next example uses the “green thumb” element as bullet points, a logo design, and the page background:

Example from http://ultimatewebsites.ca/repetitionp249.php

Example from http://ultimatewebsites.ca/repetitionp249.php

That about wraps up the four principles of good website design. You can apply these principles to pretty much everything that you ever need to design. And now you will be able to identify the problem when something just doesn’t look right.

Now I want you to think about your website.

Are you using proximity correctly? Is everything properly aligned? Is there enough contrast on the page to create drama and interest? What artifacts, icons, or text items can you repeat on your website to create a stronger brand identity? 

We know that using these principles in website design leads to a better user experience, which translates into higher conversion rates for you. And I almost can guarantee that you’ll find at least one thing that you can improve on your site right this second that will make your content easier to consume and make the design more visually engaging.

But that’s not all there is to designing for conversion…

Next week, I’m going to go deeper into this subject.

I’m going to teach you all you need to know as an entrepreneur about conversion optimization in my next post “Design Tips for Website Conversion.

I’m going to talk about creating the perfect form, optimizing for usability, and even a little color theory, so check back next week.

You won’t want to miss this one. 

 

Free Cheat Sheet

Designing for Conversion

Ready to take your website to the next level? Download your free Designing for Conversion cheat sheet.

I’ll visually demonstrate the four principles of design so that you can remember which is which. And, you’ll also grab a copy of the 20 Conversion Rules cheat sheet to follow along with my post “Design Tips for Website Conversion.”

Get a head start on creating a website that actually works: 

Grab My Free Cheat Sheet

AUTHOR - Shana Haynie

Creative Director and Co-Founder of SplashOPM - a Growth Marketing Agency for Entrepreneurs and Startups.