There are many factors that contribute to making a wonderful website. In this article, I’ve picked out the four most important web design principles that greatly contribute to creating a beautiful and successful website. For each principle, I’m going to go into detail about what they mean and provide a few different examples to help make sense of each.
I don’t think any of the principles is more important than the other. When following all four of them, they do prove to be useful and successful for the web design.
Principle #1 – Usefulness
Every website should be useful to its users and visitors. For instance, everybody dislikes clickbait because it’s useless. When a website proves to be useful it also proves to be valuable. A well-designed website will meet user needs and have a solid purpose beyond just looking good. Additionally, a useful website will provide relevant information to the user. You can meet the needs of a user or a visitor by providing relevant information. That’s the great circle of life.
Example #1 – Infermedica
Let’s take a look at the website for Infermedica. The very first thing you see on their homepage is a big heading saying “Artificial Intelligence for Healthcare Companies.” It’s a little vague but thankfully but the product is explained in more details further down the page.
The main focus of the website is twofold. First, to share what Infermedica can do for the medical industry. Second, it aims to get people to schedule a demo. The whole website explains the ease and betterment of the medical workflow with the help of Infermedica’s artificial intelligence product.
Additionally, the call-to-action to schedule a call is quite repetitive. This is great because there aren’t any contradictory call-to-actions on this website such as urging visitors to sign up for a newsletter or free trial. The purpose of Infermedica’s website is clear as day.
Infermedica provides an explanation of how their product works and specific use cases as part of their relevant information.
Example #2 – Multiplicity Leeds 2016
Another example of a useful website is the landing page for Multiplicity Leads 2016. It is a landing page for a single night’s event held by the stamping foils company called Foilco. The event targets graphic artists in Leeds. The landing page is filled with useful information such as where the event is taking place and when.
They detail the three different speakers who appear at the event and why they were chosen. Additionally, the web page explains a little about the host as well and why they find it important to host the event in the first place. At this point, the page is over. However, before that was the case, you were able to reserve tickets as well.
Although there is not a lot of text on this website, there is a boatload of information. The copy is very concise and to-the-point. That makes learning about the event as a potential excitingly easy but also useful. None of the information seems out of place or irrelevant.
Principle #2 – Communication
Everything on a website is communication. From the copy of the buttons to the way a user interacts with the checkout flow. It’s important for a website to have clear instructions on how to fill out a form and give feedback to the user when something goes wrong or needs their attention.
An explanation of why a form is asking for something odd such as your maiden name while you’re just trying to buy a book helps improve the communication between the website and the user. Clear language is the key. Additionally, hierarchy plays a big role. When the hierarchy is odd, confusing, or just bad the user will be left confused. That’s bad communication.
Example #1 – Iconic Framework
To get a sense of what a good hierarchy can do for communication I will go over the homepage of Iconic Framework. From the top to bottom, the information gets more and more detailed.
It starts with a clear and short description of the product—it’s an open-source framework for building mobile apps. If you find that interesting you will start scrolling. Say, a visitor keeps scrolling. The next section talks about the product in a little bit of detail and even more details in the next section and even more in the next one.
All those things, all the information will allow a visitor to judge whether or not this product is useful for them. Only after trying to sell the product with the best foot forward, the web page details minor things such as integrations.
Core features such as cross-platform capabilities don’t matter as much as the app building feature. Additionally, social proof is not as important either. It only helps convince users who are more seriously interested in the product and that’s going to be someone who has bothered to scroll all the way down. It’s a way to communicate information at relevant times.
Example #2 – Bench
Another example we need to look at if we want to judge effective communication is interaction within a website. This time, I want to show you the onboarding of Bench, a financial app for smaller businesses. The process has four steps. The first introduces you to Lars and Brittany—they’re part of your team now.
There are beautiful photos and a few bits of information about them and even their unique signatures within the welcome message. That communicates care. It communicates that there are, in fact, humans behind the app. As you move on the onboarding process, Lars is there to kind of help you out—a nice touch.
The little tails in the design go a long way as well. For instance, while filling the credit card information, a credit card image pops up and fills in the information as you’d see it on your card. It even flips to its back when filling out the security code, like you do with an actual card.
When you are entering information, the form tells you how to format the information. But, if you do something wrong, it provides clear information about how to correct it. Bench has clearly cared to pay attention to every detail to ensure they don’t confuse users but provide clear communication throughout the whole onboarding process.
Principle #3 – Simplicity
When things are simple, it means that all the unnecessary jargon, content, and information is weeded out. That’s a fantastic thing to achieve with any website. When a design is simplified, it means it keeps only the necessary and relevant content.
That, again, means the website is useful, too. If you haven’t noticed yet all of the four web design principles are different but work together. Achieving one helps achieve the other. Simple designs use whitespace to make different page elements readable, legible, and digestible. But, simple designs are clutter-free, too. Moreover, simple design requires only the necessary interactions and effort from the users. All that makes a design so much more self-evident.
Example #1 – Surge App
The perfect example of a simply-designed website must be Surge App. Take a look at the above screenshot. It’s a section a little further down from the homepage. It has so little going on, yet it’s still useful. It has a gorgeous photo of a gay couple; it’s the main thing you see.
Then, you’re presented with a short headline and subheading which explain, very swiftly, that this is a dating app for gay men. The awesome thing is that there is nothing else there. This section is an example of beautiful web design.
What else can we say about this section? If you want to learn more about the app you have to click the link. The section doesn’t contain anything that would be necessary to click. Yet, it does allow a visitor to obtain the necessary information if they wanted it.
Did you also notice the navigation? It’s the hamburger menu icon on the left-hand side. Again, the navigation doesn’t get in the way. There aren’t countless links trying to get you to go elsewhere.
Each section has a purpose and there is very little to distract you, as a visitor from it. This example alone covers all the basics of simple design: use of whitespace, clutter-free, self-evident, containing only the necessary information. In turn, the design is useful and purposeful as much as it can be.
Principle #4 – Consistency
When I speak about consistency I’m referring to two different things. First, there is the consistency of the web pages and overall online presence. The same website, web app, or product should have the same visual style on each page and across various platforms or devices.
We’ve all been there where we are shopping at an eCommerce website, decide on purchasing a product, and get to the checkout page that looks nothing like the rest. It’s confusing and frankly, off-putting. It’s anything but reassuring if we know we are in the right place, doing the right thing.
The second type of consistency is about following conventions such as having the logo clickable, place login and signup links to the right side of the top navigation or put social media links into the footer.
Example #1 – Vero
I’m going to use Vero as a great example of a consistent visual style. As you’re browsing through the different pages, the whole look and feel of the website is the same a.k.a. consistent. From the homepage to the features, the Pricing or the Career page, the visual style is all the same.
This makes the whole experience better for a visitor and it makes the company look a lot more professional, too. I’ve checked it out and their signup and login pages also follow the same style. It seems a bit silly, but like I said, we’ve all seen a website where their visual style is all over the place.
Additionally, Vero does follow typical web design conventions. For instance, the logo both in the header and footer do take you to the homepage. The login and signup buttons are in the right corner of their navigation. The footer is the gateway to all sorts of additional information that may be irrelevant for a first time user. When you enter information into the input fields, the placeholder turns into a label. And so on.
Example #2 – MailChimp
MailChimp is another awesome example of a consistent visual style across many channels. They are meticulous in keeping their design detailed. From the homepage to their signup page and web app, the whole thing looks cohesive because it follows the same style.
Their support pages and additional resources are fantastic, too. The company also follows typical web conventions that help in making their website and product highly usable.
The design community greatly celebrates MailChimp for their efforts in caring about the quality of their company’s designs that shine in every detail. That’s why so many people love using their product and love being associated with the company.
There are many different things that contribute to the making of a successful website. These four web design principles are the most important ones. Like I’ve mentioned in the post, they help foster one another. When you have a simple design it provides more likely only the most relevant information, which in turn makes the website usable, and so on.