In my daily web-browsing ventures I frequently stumble across websites that really shine. But what makes a website truly stand apart from the rest? Is it their awesome usability factor? Their color scheme? Their simplicity? In this post we'll explore the most important web design principles to remember so you can make a website visually engaging, effective, easy to use, and memorable.
PURPOSE / OBJECTIVE
Before touching any web-building application, you first need to clearly define your website's main purpose or objective. This sounds obvious, however, designers at times tend to skip or ignore this step and make assumptions about what the client is seeking. This ends up with the client expecting A-B-C, while the designer delivers X-Y-Z, leaving both parties unsatisfied and frustrated with the end result.
As examples, a website's main purpose could variably be:
- A trendy ecommerce fashion website selling high-end designer baby outfits
- A general-information brochure website for refrigerators
- An interactive web teaser for the newest Star Wars movie
The user experience for each of these theoretical websites would be drastically different. Therefore the best web designers are carefully tuned to the needs of their users and have a firm grasp of each website's purpose, the type of content that should live on each page, and how each page should interact and relate to the rest of the website.
"The best web designers are tuned to needs of the user and have a firm grasp of website purpose" (CLICK TO TWEET)
PRIORITY
A great way to determine the importance of what elements are found on a specific page is to simply rank them. Determine their rank based on how closely aligned elements are to the main purpose or objective of the website.
Take, for example, the Nordstrom website:
The first thing that you are introduced to is a promo for clearance items from designer names. It is using a very aggressive action color (red) to capture your attention.
As your eye wanders down the page, a second promo for recommendations is shown.
Before scrolling for more content, the eyes circle back up to see the Nordstrom logo, as well as another small ad-strip for shopping gift cards. Then you see the navigation elements before returning to the main designer clearance ad.
If the website being designed is information-heavy, it is beneficial to present the information in such a way that the user will be able to find information quickly, read through the content easily, then process it. Use simple web fonts that read well when used in long passages.
If the website is more image-based, make sure the imagery being utilized is of high quality (no 20x20px photos blown up 5x its size, please). Check to ensure it renders well on slower internet connections (no 15mb JPGs for backgrounds!) and is well-organized so users can quickly and easily browse the site without experiencing loading-time hindrances.
GESTALT PRINCIPLES
Covered at length in a previous post, the gestalt principles help immensely when designing a website.
Simply put, —gestalt— is a German term most commonly used in psychology that means —unified whole.— You may have heard of the phrase, —the whole is more than the sum of its parts—. Essentially people tend to view websites as one whole entity before seeing the individual elements (such as the logo, navigation, main CTA, body content, footer, etc.) that comprise the entire interface.
RELATED POST: Gestalt Principles When Applied to Design
CLARITY / WHITESPACE / SIMPLICITY
Clarity, whitespace, and simplicity directly relate to one another. In order to achieve clarity, the UI should be simple, easy to use, and uncluttered, employing many different facets of whitespace to give importance to or take attention away from elements.
- Clarity - Clarity among elements on a page means that every piece should have a clear purpose for its presence on the page as well as its positioning. Clarity can also refer to the literal sharpness of an object. To combat sharpness issues always make sure there are no —partial pixels— present on any element and that all pieces align with the pixel grid, otherwise the design of a page can seem out of focus and unrefined.
- Whitespace - Whitespace can mean many things. It could mean, very obviously, the —white— space surrounding any element. The spacing between elements does not have to be literal white, but alludes more to the negative space surrounding the elements. The amount of negative space employed can give a very different feel from website to website. Many fashion, architecture, or other high-end websites utilize a lot of whitespace to give an air of elegance and luxury, while some websites, like this one, utilize very little white space on their website, leaving the user overstimulated and flustered by all of the UI bells and whistles during their experience.
Whitespace could also refer to the line-spacing between lines of text. Increasing line-spacing, especially with fonts encompassing a larger x-height than usual, aids in readability of long passages of text. Be careful not to have too much line-spacing with text though, as the likelihood of connecting the user's eye from one line to another decreases when line-spacing increases dramatically. Whitespace can also be found in the margins and padding of elements. Margins and padding are spaces between elements and text in the realm of HTML / CSS. As a general rule, text and images shouldn't overlap, unless there is a specific purpose or intent behind the reasoning of doing so. Each element can utilize either margins or padding to increase / decrease the space between itself and other elements. - Simplicity - It has been proven that simple website designs are preferred by users. Unless your website is specifically geared toward tantalizing people with a mind-blowing design, most of the time your users are simply looking for information. Sometimes complex designs can interfere. To alleviate the frustration, follow the K-I-S-S rule and keep your website simple, direct, and easy-to-use. A good user experience is beautiful, but a great user experience is both beautiful while also staying out of the user's way during their journey.
RESPONSIVE WEB DESIGN
You may have heard about responsive design, because the thinking has been around for a while now. Responsive web design (RWD) is a technique utilized in web design that aims to provide to site viewers the best viewing experience possible across a wide range of devices. When building responsive websites, the site is built using a proportion-based grid, flexible-sized images, and media queries via CSS.
In today's world you should generally plan on building a website responsively. The number of mobile users viewing websites on their devices will only increase over time, so make sure your website is running on a platform which gives the optimal experience for any user on any screen-size. Otherwise, you could leave a very wrong impression with visitors who struggle to view your content on their phones, so much so that they may never return for a follow-up visit!
NAVIGATION
Have you ever tried finding a specific destination without any directions whatsoever on how to arrive there? The likelihood of reaching your destination was probably close to zero. This is what users face when they stumble upon a new website. To alleviate their struggle, it is key to employ a clear, simple, and easy-to-use navigation.
Take Google, for example:
There are no extra bells and whistles on their search page, unlike other search engines like Bing or Yahoo. The main purpose for using Google is to find information. To do this, the essentials that are needed are simply a search field, a search button, and for self-promo purposes, a logo. The barely-there navigation that exists on the upper-right hand corner of the page allows Google users access to everything tied to their google account, in a neat and simple package, without hindering the user experience. As stated before, a great user experience (such as Google's) is both beautiful, and also stays out of the user's way during their journey.
USABILITY
The most beautiful website in the world is worth nothing if it isn't usable. As websites these days become more interactive, it's the designer's job to make absolutely sure the website functions well and is easy to use. Always be sure to look out for usability issues such as:
- Unexpected placement for very obvious things. For example, we typically find search bars somewhere at the top of the page (either top right, or, if called out more, top-center). If we place the search bar at the bottom of the page, it will take a while for users to find it. In cases like this the conventional placement of useful UI elements is the best route to take. Humans are creatures of habit - if you place elements in areas where they aren't usually found on other websites, you will inevitably confuse your users.
- Launching a website without any form of user testing. You won't know for certain any user behavior patterns on the website until you get it in the hands of users. Maybe the CTA you thought would get 100% visibility and 80% clickability performed poorly in actual testing. Maybe the one subtle element on the page actually gets clicked 4x as much as you anticipated. Either way, you don't know what you don't know, and you won't know until you test!
The best and most cost-efficient way to test for usability issues is with prototypes. The prototypes don't even have to be coded up - they can simply be design mockups that link each page to another. Invision is a great prototyping tool that transforms static screens into clickable, interactive prototypes.
CONCLUSION
First and foremost, before any design work is started, you must know the website's main purpose, objective, and its end-users. By applying the design principles mentioned above, you're already a step ahead of thousands of other websites today.