4 Most Important Web Design Principles Explained

There are many factors which contribute to making a wonderful website. However, I’ve picked out the four most important design principles that contribute greatly to creating a wonderful and successful website.

For each of the principle, I’m going to go into detail about what they mean and provide a few different examples to help make each point.

I don’t think any one of the principles is more important the other. When following all four of them, they do prove to be most useful and successful for the web design.

Principle #1: Usefulness

Every website should be useful to its users and visitors. For instance, everybody disliked click bait 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. A user’s, or visitor’s, needs are met by providing relevant information. It’s a great circle of life.

Let’s take a look at the website for Infermedica. The very first thing you see on their homepage is a big heading “Artificial Intelligence for Healthcare Companies.” It’s a little vague but thankfully the product is explained in more details further down the page.

The main focus of the website is two fold. First, to share what Infermedica can do for the medical industry. Second, it’s 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 redundant and 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, to sign up for a free trial or so on. 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.

Another example of a useful website is the landing page for Multicity Leads 2016. It is a landing page for a single night’s event held by the stamping foils company called Foilco. The event is targeted at graphic artists in Leeds. The landing page is filled with useful information such as where the envy is taking place and when.

The detail the three different speakers chose to 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 event is over with but 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 boat load of information. The copy is very concise and to the point. That makes learning about the event as a potential best excitedly 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 on 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 clear feedback to the user when something goes wrong or needs their attention.

An explanation as to why a form is asking for something odd, like 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 key. Additionally, hierarchy plays a big role. When a hierarchy is odd, confusing or just bad a user will be left confused. That’s bad communication.

To get a sense of what a good hierarchy can do for communication I’ve selected to go over home page for Iconic Framework. From top to bottom of the page, 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 that’s interesting to you, you will start scrolling. But say a visitor keeps on scrolling. The next section talks about the product in a little bit of detail and even more detail in the next one and even more in the next one yet.

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 webpage details minor things like integrations.

They don’t matter nowhere near in app building as core features like cross-platform capabilities. Additionally, social proof is not as important either. It only helps cover users who are more seriously interested in the product and it’s going to be someone who has bothered to scroll all the way down. It’s a way to communicate information at relevant times.

Another example we need to look at to judge effective communication is interaction within a website. This time I want to show you the onboarding for Bench, a financial app for smaller businesses. The process has 4 steps. The first introduces you to Lars and Brittany – they’re part of your team now.

There are beautiful photos of them, a few bits of information about them and even their unique signatures by 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 here.

For instance, while filing a credit card information a credit card image pops up and fills int he information as you’d see it on your card. It even flips to it’s 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 as on how to correct it. Bench clearly cared to pay attention to every detail to ensure the cure is not confused but providing clear communication throughout their whole onboarding process.

Principle #3: Simplicity

When things are simple, it means that all the unnecessary jargon, content or information has been weaved out. That’s a fantastic thing to achieve with any website. When a design is simplified, it means it’s kept to only the necessary and relevant content.

That, again, means the website is useful too. If you haven’t noticed already, all of the four principles are different but work together. Achieving one helps achieve the other. Simple designs use white space to help make different page elements readable, legible, and digestible.

Simple designs are clutter free. Simple design requires only the necessary interactions and effort from the users. All of this makes the design so much more self-evident.

The perfect example of a simply designed website has to be Surge App. Take a look at the above screenshot. It’s a section a little further down from the home page. 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 a short subheading which explain, very swiftly, that this is a dating app for gay men. The awesome thing is 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 then would be necessary. 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 section alone covers all the bases of a simple design: use of whitespace, clutter free, self-evident, containing only the necessary information. In turn, the section is useful and purposeful.

Principle #4: Consistency

When I speak about consistency I am 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 growing an eCommerce website, decide on purchasing a product and get to the checkout page where it looks nothing like the rest. It’s confusing and frankly off-putting. It’s anything but reassuring that we are int he right place, doing the right thing.

The second type of consistency comes with following conversions such as having the logo take you to the home page, the login and sign up links located on the right side of the top navigation or social media links being found in the footer.


I’m going to use Vero as the 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, aka consistent. From the home page to the features, the pricing or the career page, the visual style is the same.
This makes the whole experience better for a visitor and it makes the company look a lot more professional as well. I checked, and their sign up and login pages which too 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 conventions. for instance, the logo from the navigation and footer do take you to the home page. The login and sign up buttons are in the right corner of their navigation.

Their footer is the gateway to all sorts of additional information that may be irrelevant to a first time converting user. When you enter information into their inputs the placeholder turns into a label. And so on.

Another example of a consistent visual style, across many and all channels, has to be MailChimp. They are meticulous is keeping their design detailed. From their homepage to their sign up pages, to the 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 keeping the usability standards of their website and product height.

MailChimp is a highly celebrated company in the design community for their efforts in caring about the quality of their company’s designs. It shines in every detail. All that, in turn, is why many people love using their product and love being associated with the company.

Conclusion

There are many different things that contribute to a making of a successful website. These four principles are one of the most important once. Like I’ve mentioned in the post, they help foster once another.

When you have a simple design it is more like to provide only the most relevant information which in turn makes the website usable and so on.

Comments

  1. / Reply

    I just feel the Surge App website is too simple to understand. When visit the website the first time without prior knowledge about it, it’s hard to understand what it’s about until scrolling down several times. I agree simplicity is the key in design. However, it’s one of the hardest things to do.

  2. / Reply

    Thanks for sharing, Paula. I completely agree re: consistency. It’s like training your audience to experience your site or brand for that matter on how you’ve envisioned it. Your audience may not be as well-versed in tech, design or marketing, etc., but they would know when something is off when it comes to your design or branding. This is why when we’re coming up with a new layout, or shuffling around elements on our sites, we constantly ask ourselves if the changes are in line with our branding. We don’t just go with something just because it is aesthetically pleasing, or acceptable. We also apply this to our social media accounts. This is why we disown old posts and delete them when we realize that they’re not in keeping with how we want to present our company.

    On the topic of usefulness, one thing I’ve learned recently as a fairly new Google Analytics user is that you can follow the visitor’s journey within your site and make assumptions as to how functional the layout is to them. For example, for our news site, I found that after landing on an article that was shared via social media, mobile viewers tend to go back to the homepage to select other articles to read. This means our site’s navigation is not as effective as I hoped (because why would they go back to the homepage), or we should move the “popular posts” plugin to a more prominent spot.

  3. / Reply

    Awesome post! I basically agree with every point you mention. I think you should be careful, though: oversimplifying your Website might not satisfy the users when it comes to getting infirmation about your service or you. Although compromizing your information to the most relevant pieces only, your main goal with your website IMO should not be leaving as much white space as possible :)

    • Brian George,
    • April 15, 2017
    / Reply

    I love simple designs as the message tends to stand out. However, there can be overuse of white space that does not visually stimulate the viewer. I therefore prefer a balance of colors and white space. The colors create visual interest and the white space makes the call to action stand out. That way I get the best of both worlds.

    • Neil Agarwal,
    • October 31, 2017
    / Reply

    Thanks for sharing the wonderful article. Tips for the web designing is the great resource for any designer to follow while designing. You have covered many things that we have to consider while designing. I think simplicity is the main thing that you have in mind while designing.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.