useless marketing tactics
The Pinkletter

The October Pinkletter

principles of web design
blog image best practices
September 2017 web news
The Pinkletter

The September Pinkletter

Best website WordPress plugins
social media tips
August 2017 web tech news
The Pinkletter

The August Pinkletter

Website copy writing tips
principles of web design

9 Web Design Principles that Boost Conversion Rate and Usability

Do you know why some websites are more successful than others? Sure, it has a lot to do with the quality of the content or services, but web design also plays an important part. Here are nine web design principles every business owner should know:

  1. Visual hierarchy means highlighting the elements (text, image, etc.) you want visitors to see first. There are many ways to achieve that:
    • Page-scanning pattern – most users follow an F-pattern when reading a web page. Use this tendency to your advantage. Put the most important information near the top left corner of a page and place headings on the left.

F reading pattern

    • Size – the bigger the element, the more attention it gets.
    • Color and contrast – images or text that have bright and bold colors draw more attention. On the rest of your website, however, use your brand colors – ideally those in your logo, which shouldn’t be more than 2-3. This is ons of the web design principles that you can easily apply to improve conversion: use the boldest colors only where you want to draw the most attention (calls-to-action, for instance).

      Principle of color usage in web design
      When we redesigned the website of this Coral Springs family dentistry earlier this year, we reserved the accent color for calls-to-action and kept the rest of the palette in the blue range of their brand colors.
    • Typeface – using heavy and stylized typefaces can help highlight certain phrases or headings. However, don’t use too many typefaces on your website (2-3 should do). Assign fonts to headers and use them consistently across your website.
    • Headings and subheadings are very commonly used to organize the text and create a visual hierarchy.
    • Directionality – text that’s arranged non-horizontally draws immediate attention.
    • Space and texture – adding more space around certain elements helps distinguish them from the rest.
  1. White space is the spare area around web page elements that helps eliminate clutter, highlighting important elements on that web page. A simpler layout and design makes your content more digestible and helps increase your conversion rate. How you use white space also reflects your business values. For example, a lot of white space suggests luxury and minimalism. Less white space usually denotes the quality of being informative, like on news websites.

    Principle of white space
    Luxury brand Hermes uses plenty of white space in their homepage layout.
  2. The grid system provides a visual structure for neatly organizing content on a web page. Web designers typically use a grid with multiple columns to display content.
  3. Occam’s Razor is a principle from philosophy stating that, between two explanations, the simpler one is usually better. Occam’s Razor is also a web design principle because the simpler design is almost always superior. So when you’re thinking of removing content from a long landing page, you’re most likely right.
  4. Accessibility in web design refers to making your website accessible to all users, including those with disabilities and other special needs. To do so, choose popular fonts such as Open Sans at a comfortable size. Also use contrasting colors for legibility like black text on a white background. Be careful of how your website looks on mobile devices – you’ll need to invest in responsive web design.

    Responsive website design
    Responsive layouts adapt to any size screen, for any device.
  5. The Golden Ratio is a mathematical ratio found in nature and has been used by many artists and architects since ancient times. The ratio, 1.618, helps designers create pleasing and natural-looking compositions. For example, dividing the typical width of a webpage (960 pixels) by 1.618 results in 594 pixels. You’ll find that page height on many websites.
  6. Gestalt Design Laws refer to how the mind copes with visual input. Here’s how the laws apply to web design:
    • Proximity – We tend to see objects that are close in space as one object.
    • Similarity – If a number of items look similar, we perceive them to be in the same group.
    • Continuity – When the eye starts following something, it’ll continue traveling in that direction. For example, you have a photo on a landing page of a person looking towards your call-to-action.
    • Closure – When we see shapes or images that aren’t complete, we tend to fill in the blanks. You can use this principle to create interesting graphics.
    • Symmetry – Our mind likes symmetry and coherent shapes. So when we see two unconnected but symmetrical elements, we tend to put them together.

      Principle of symmetry in web design
      In this website we designed for a medical practice in Plantation, Florida, all the services are displayed in symmetrical boxes on two columns. Because the number of odd, we completed the symmetry with a call-to-action box that is therefore perceived as related to those services.
    • Common fate – Our mind groups together objects that show the same directionality. We perceive people gesturing in the same direction as a group.
  7. Hick’s Law is a web design principle that refers to the Paradox of Choice. When you give people too many choices, most of them won’t choose anything at all. In terms of web design, Hick’s Law points at minimizing the amount of choices, such as calls to action, you give to your visitors in order to improve conversion rates.
  8. Fitt’s Law refers to putting important target objects, such as a submit button, a hyperlink, or an input field, in the most accessible area of a web page. The quicker visitors can reach a target object, the more convenient and easy it is to use.

    web design principles applied
    In this award-winning website we designed for Signal Restoration, it’s easy to find the phone number. It’s placed both on the top bar and as the main call-to-action.

Knowing these web design principles can help you understand what works best for your website. Next time you hire a web design agency, you’ll be able to understand better why they did what they did. Do you think it may be time for a change? Read this to see when you should consider a website redesign. And don’t forget to ask your website designer these 10 questions.

At BrightPink Studio, we design & develop awesome websites, make gorgeous print materials, create logos and other branding items, and more. In our blog, we share news, tips & inspiration - like this article! If you enjoyed it, please share.

FacebookTwitterGoogle+Pinterest

namecheap-bannermailchimp_125x125

Latest On Facebook

The BrightPink Studio team wishes you a Happy #Thanksgiving! ... See MoreSee Less

19 hours ago  ·  

In a teamwide creative challenge to make a GIF, our copywriter Octav came up with this Thanksgiving-themed mixture between a GIF and slideshow. Here's our early #Thanksgiving greetings! #HappyThanksgiving ... See MoreSee Less

2 days ago  ·  

Barcelino on the weekend. He thinks sunsets are magic, just like him 🌅🦄 #unicorntravels #barcelino #agencymascot #sunset #sunsetbeach #sunsetsky #toughlife ... See MoreSee Less

5 days ago  ·  

Celebrating 9 years of BrightPink Studio. Tom was our first client back in 2008 and a very dear friend today. Here’s to us! ... See MoreSee Less

1 week ago  ·