Web design isn’t so forgiving of beginners and novices. Drawing on centuries of graphic design theory and millennia of aesthetic tenets, web design takes more than a lifetime to master. But before you lose heart, the good news is you don’t need to master web design to create a nice-looking page or two—all you need to do is follow the right web design principles.
Consider the web design principles below as our “ten commandments” for web design—except there are only nine of them because things are more streamlined now than three thousand years ago. If you’re an aspiring designer or even just someone starting a DIY website, take these web design principles to heart.
1. Visual hierarchy determines what people notice first (and last)
—
Visual hierarchy is one of the cornerstones of graphic design. Essentially, it refers to what attracts the most and least attention when you have a group of visuals together (like a web page). By manipulating the visual hierarchy, a designer can theoretically control the order in which the viewer notices each individual element, known as the “visual flow.”
For web design, visual hierarchy is crucial. Web designers must prioritize the most important elements—navigation tools, page titles, calls-to-action, user controls—while simultaneously making sure the less important elements aren’t distracting.
While there are many techniques that can attract or repel attention (some of which are covered in other web design principles below), in practice designers use these three main strategies to define the visual hierarchy:
- Size—as you can imagine, large elements attract more attention while small elements attract less.
- Color—bright, vibrant colors get noticed faster than more muted, duller colors (you can also use color contrast, explained below, to maximize the effect)
- Position—since most people instinctively read from top to bottom, elements placed near the top of the screen are noticed first.
When it comes to creating a web page layout, plan out your visual hierarchy beforehand by making a list of all your elements in the order you want visitors to notice them. From there, apply the appropriate techniques to each.
2. Users shouldn’t have to think
—
In the year 2000, author and computer scientist Steve Krug published his seminal book Don’t Make Me Think, which spawned the early user experience movement. The central lesson of the book—make your designs as simple and easy-to-understand as possible—is still one of the bedrock web design principles, even more than 20 years later.
The idea is, every time a user has to stop and think about how to do something or where the button they need is, it takes away from them accomplishing what they want to accomplish. If your user wants to use your app to write an email, for example, they should be focused solely on writing the email, not trying to find the “Send” button or wondering how to change the font.
Krug’s ideas also emphasize the human instinct to choose the first solution, not necessarily the best solution. It then falls on the designer to make the best solution easy to notice, lest the user go down an unexpected and less efficient route.
Designers should always be on the lookout for ways to streamline and simplify their designs. Visual hierarchy plays a big role in getting users to find what they’re looking for quickly, but other strategies are useful as well.
Take Jakob’s Law—named after another UX pioneer Jakob Nielson—which recommends using icons and patterns that the user is already familiar with from other sites. For example, most sites today use a magnifying glass icon at the top of the screen to indicate the search bar. Using the same icon on your site means the user doesn’t have to think about how to use the search function on your site, and putting it at the top means they don’t have to think about where to find it.
3. Contrast and movement attract attention
—
Expanding on our techniques for attracting and repelling attention, remember that “opposites attract.” Contrast is a favorite tool of experienced designers, who take advantage of the stark differences between both colors and sizes.
Using color opposites in juxtaposition is a great way to attract attention. This is one of the most effective strategies for highlighting CTA buttons; designers will color the CTA button in the opposite color as the background, an easy way to make it stand out.
Likewise, size opposites work well when positioned next to each other. If you have a lot of elements on the page and don’t have room to make anything bigger, try putting something small next to an element—this effectively makes it look bigger, thereby making it more noticeable.
Similarly, movement and motion also attract attention, an old evolutionary hack from our hunter-gatherer days that designers like to exploit. You use small animations for special elements to get them noticed faster—for example, a bouncing icon when there’s a new notification.
Just be careful about overusing animations. If too many things are moving on your screen, it makes it hard to focus. Rather, use movement sparingly to keep it potent.
4. White space lets you control visual flow
—
White space, otherwise known as “negative space,” is another favorite tool of expert designers, photographers and all visual artists. White space refers simply to blank space, or the parts of your screen with no visual elements in them, except for maybe the background.
The white space in a web page is just as important as all the other content—even more important if you use it proactively. For starters, white space is necessary for controlling the balance of a page; too many elements together can be confusing and distracting, so ample white space is necessary to make a layout comprehensive.
Moreover, white space can influence the visual hierarchy with this simple web design principle: the more white space around an object, the more attention that object gets. That means if you surround an element with lots of white space, it will attract more attention than if you surrounded that same element with other visuals.
Lastly, white space is important for spacing and grouping certain elements. Putting extra white space between two objects helps to differentiate them, whereas putting less white space between them connects them.
Using white space for grouping comes in handy when separating certain elements by similarities. For example, let’s say you need to differentiate two separate navigation menus on the same page, such as one menu for your blog categories and another for your entire site. Grouping all the items in one menu together with minimal space helps the user connect them while putting extra space between the two menus prevents the reader from confusing them as the same.
5. Too much information overloads the user
—
Another prevailing web design principle is to limit the amount of information you present to your users at a time. The human brain can only handle so much, especially when it comes to short-term memory, so it helps to break up information into smaller doses—which also feeds into Krug’s advice on not making the user think too much.
This idea is best demonstrated by Miller’s Law, based on the work of psychologist George Miller in 1956. Miller found that the average person can store only 7 pieces of information (give or take 2) in their short-term memory at a time.
Unfortunately, a lot of web pages have more than seven things to say. Miller’s own research suggests using the technique of “chunking,” or grouping related information together in small “chunks” to make it easier to digest. The example of chunking is seen in phone numbers: we put the area code in one chunk, the first three digits in another chunk and the final four digits in the last chunk.
In web design specifically, it also helps to divide your page into “screens,” referring to all the information that’s available on the screen at a time. When a user is finished digesting all the information on one screen, they scroll down for an entirely new screen with new information.
Alternatively, you can also trim the fat and only present what’s necessary. This was partly the impetus behind the web design minimalism trend, which encourages web pages to feature a lot of white space and only the elements that were absolutely essential, like controls. This style works well with web design thanks to its side effect of reducing loading times as well.
6. Interactive areas should be easy to reach
—
Fitts’s Law (often written incorrectly as “Fitts’ Law”) is both painfully obvious and yet frequently overlooked. It states that the most actionable areas should be the easiest to access.
For desktop web design, Fitts’s Law recommends shrinking the distance the user must move the mouse. Typically, if you have functions that are used together, they should be placed as close together as possible, i.e., a comment text box and the “post” button.
This web design principle also birthed the right-click dropdown menu, which perfectly illustrates Fitts’s Law. The right-click dropdown menu is perfect efficiency; the controls appear directly where the cursor is already, minimizing movement distance.
For mobile web design, Fitts’s Law recommends putting the most frequently used controls in the areas of the screen easiest to reach with the user’s fingers (especially the thumbs). Assuming the user is holding a smartphone vertically and using their thumbs to interface, the screens’ hotspots are in the two bottom corners. You’ll notice that most mobile apps have their controls at the bottom instead of the top.
In both desktop and mobile web design, Fitts’s Law suggests making the buttons and controls large enough that the user can comfortably click on them. Bigger buttons reduce how much the user has to move their cursor or fingers—but don’t make them too big or they’ll waste screen space.
7. Typography influences what users think of you
—
When dealing with web design necessities like buttons, icons and images, typography often gets overlooked. But it’s because typography is more subtle that makes it so useful—the look of your text still influences your users’ opinions of you, even if they’re not aware of it.
The fonts, size and style of your text communicates what kind of brand or person you are, from fun and casual to serious and professional. But typography doesn’t just affect how you come across; it also fits into the visual hierarchy, especially for button labels and CTA copy.
First, you have to differentiate between short-form text and long-form text. Short-form text is when you have a word, a line or a single sentence that stands out on its own. These are text-like page titles, button labels, taglines or quick instructions. Long-form text is for reading, such as blog articles and web page copy, or anything more than a couple of sentences.
The basic web design principle for typography is to use flashy and artistic typography only for short-form text and to use more basic typography that prioritizes legibility for long-form text. So you can have large, colorful fonts with embellishments for your page title, but stick with more standardized fonts and basic colors for long blocks of text to make them easier to read.
Regardless, choose typography that best represents your brand. One of the most common choices is between serifs and sans serifs; fonts with serifs come across as more formal and strict, while sans serifs fonts seem more friendly and easygoing.
8. Composition says a lot about you
—
Planning the composition of your page is one of the earliest steps you’ll take in web design, and your first decision will be choosing between symmetry and asymmetry. Years ago it was taken for granted that most websites were designed symmetrically, but lately, asymmetrical styles have been gaining popularity.
Basically, symmetrical web pages are easier to scan, but lack that spark of originality, so viewers tend to find them dull. Asymmetrical web pages, however, stand out and capture the user’s attention, but can make it harder to browse and see everything.
For branding and how visitors perceive your company, symmetrical websites come across as more structured and organized, while asymmetrical websites seem edgier and more artistic. You can choose whichever one fits your brand style best, but if you must feature a lot of scattered items, such as products on an ecommerce site, symmetry can make it easier to organize everything.
Similarly, the grid format used to be the go-to default every time a site needed to display a lot of elements. After all, rows and columns are the most sensible format for grouping all these items together.
However, it’s because the grid is so conventional that using a more scattered and chaotic format helps you stand out. Modern designers realized that they could separate their sites from the herd just by staggering their rows and columns a little. While this style can be off-putting for traditional brands, it’s a perfect look for brands that want to look avant-garde or edgy.
9. Consistency strengthens each design choice
—
Last but not least, good web design is consistent. Each time you repeat a smart web design choice, you strengthen its impact. For example, let’s say you chose red as your accent color because you want to come across as passionate and fierce. Each time you use red as an accent color on other pages, you come across as even more passionate and fierce.
Web design consistency benefits every aspect of your page, affecting navigation, layout, color scheme, typography, imagery and all other aspects. This coincides with the importance of consistency in branding, where using the same logos, colors and slogans strengthens their brand associations with each new usage.
But if that’s not enough to convince you of the importance of consistency, the opposite is even worse. Consider how frustrating it would be for your users if you changed up the control icons and placement for each new page. That means the user would have to figure out where everything was and how things work over and over and over again—breaking the earlier web design principle of not making the user think.
Web design principles to get you started
—
Hopefully, our list of web design principles didn’t overwhelm you too much. It’s not easy to cram such an elaborate discipline into just a handful of quick takeaways. Just remember that the more you apply and practice these principles, the more they’ll make sense; before long, they’ll come to you as second nature.
And if you really are struggling to create the web design you want, feel free to hire one of our freelance graphic designers for your project—they’ve already mastered these web design principles and more!
