Writing quality code can only go so far when it comes to creating a good website.
If you as a web developer really want to win the game of user experience, ensuring that your website visitors love going to and sharing your site, you’ve got to follow at least these three important design principles.
When you first begin designing the look and feel of your website, it can feel overwhelming with all the potential design choices available to you—in truth, however, you likely won’t encounter this overwhelm if you stop trying to reinvent the wheel.
Believe it or not, most successful websites follow templates and design best practices that have already proven to be visually appealing and easy to navigate.
The reason is all too human: we prefer simplicity and familiarity over the complex and new, and although the old adage tells us to do otherwise, we’re definitely going to “judge your book by its cover.”
Fear not, however, for, in this post, we’ll be taking you through the three design principles that every web developer ought to know.
While this post will by no means be the “end all be all” on this subject, it should give you a sufficient understanding of the bare-bones basics which you can build upon in the future.
Table of Contents
Design Principle #1: Visual Hierarchy
The simplest way to understand the principle of visual hierarchy is to consider the size.
When you want to make something look important, you want to make it bigger, right? You want to emphasize to the user that this thing should be paid attention to because it takes up a lot of the screen.
Where this goes wrong is when a web developer makes everything large, as if to say that everything on the page was important, which is ironic because doing this will make nothing seem important to the user.
Visual hierarchy is all about showcasing the differences between various elements on the page. Consider these three elements:
As we mentioned earlier, Bigger equates greater importance and Smaller equates lesser importance. The title of an article or page is always the largest heading, and all subheadings are smaller.
The same applies to images. The featured image of a page generally takes up the most space, sometimes the entire screen! And other images peppered into the page should be smaller by comparison.
Every website ought to have a deliberately constructed color scheme that features a primary color and a few other complementary/contrasting colors.
The primary color may be the background for the website while the secondary color may be the font–or perhaps different headings get different colors; the freedom is yours to choose.
The placement of information on a page is critical to communicating clearly with the user.
The main header should tell them the “big idea” or purpose of the page, and then the information below should fill in the details of said idea.
Even the direction of information can vary, though this mostly occurs when you’re writing in a different language. In English, we read from the left to the right, but in many eastern countries, people read from the right to the left.
Design Principle #2: Readability
If a tree falls in the forest and there’s no one there to hear it, it may as well not have occurred.
In that same way, if you communicate a brilliant idea on your webpage but it scores a zero on the readability scale, it’s unlikely to matter to your users and they’ll leave the page in either confusion or frustration, neither of which are things you want.
Readability mostly has to do with typography and the amount of white space on your page.
For pages, don’t make the width of the text column more than 60-75 characters, though keep in mind that many blogs get away with going a little over that mark. Widths that are too long are difficult to read and make it feel as though it takes forever to get through one line of text.
Avoid creating large blocks of text on the page as well. A popular rule in blogging is to avoid having paragraphs that are over three lines long. This makes it easier to read and the reader will feel like they’re breezing through your content, which is a good thing.
As far as text alignment is concerned, try to keep it on the right or in the center.
This might be obvious, but white space is not literally “white” space. It basically refers to the background/empty spaces on your website, like the space between the paragraphs of the article you’re reading now.
Think of white space as much appreciated breathing room for users. Having a sufficient amount of it on your webpages allows the reader to feel relaxed instead of being barraged with a never-ending stream of content.
In the same way that it’s easy to find your way around a decluttered house, white space makes it easier to navigate your site.
Design Principle #3: Color Schemes
We touched briefly on color schemes for websites in the first principle, but now we’re going to dive a little deeper into the subject.
Color is one of the chief ways you’ll be expressing the personality of your website.
It helps guide and attract attention, communicate certain meanings, and can even incentivize action. Choosing the perfect color scheme for your website should be a planned process. If the website is for a business, you’ll want to consult the business’s brand style guide.
Colors evoke emotions in users, and you want to make sure that the emotions that come to mind inspire the user to return to and advocate your site to others.
The right colors will help increase brand recognition, and if you properly abide by your chosen color scheme, people will eventually be able to recognize your brand just from seeing your site’s color pallet. It’s that powerful.
Make Something Beautiful
As you continue your journey in website design, pay attention to the websites you visit and see if you can recognize these three design principles in action.
Can you spot which sites apply them well and which could use some work? What about other design principles that weren’t mentioned here? Keep your eyes peeled.
You may even discover certain websites that defy these principles in a way that lets them get away with it—and that’s okay; welcome, even. Rules are meant to be followed to the point where you know them well enough to break them beautifully.
And if you follow these principles and still find your web design lacking, don’t beat yourself up about it. It’s better to continue doing something bad and get better at it than to not do it at all; that disappointing feeling is merely the tuition you pay for steady growth.