My Services

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.

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.

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.

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.

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.

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.

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.

The importance of typography is often overlooked mostly because of it’s subtle influence sort of from the background. But typography plays a very significant role on the overall impression a website makes on visitors. The font size and style can make a big difference, it can be formal and elegant or fun and casual. It can also create a visual hierarchy, split content into separate sections, grab attention when used in buttons and CTA banners.

The most significant differentiating factor for typography type used is 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, colourful fonts with embellishments for your page title, but stick with more standardized fonts and basic colours for long blocks of text to make them easier to read.

In any case typography needs to best represents the 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.

At the earliest stages of the design process decisions need to be made about the type of composition, choosing between symmetrical vs asymmetrical design composition. Symmetrical is perceived as more structured and organized, easier to navigate trough but at the same time they are more conventional and strict in nature while the asymmetrical composition grabs users attention, appears as more creative and edgy but somewhat chaotic and harder to use.

Both of these approaches can be complementary when compatible with the brand. Symmetrical is suitable for ecommerce and any other business that involves large content, list of products or services to navigate through. In that way having structure and organization precedes creativity. Asymmetrical design applied in these cases would result in very chaotic and hard experience and it wouldn’t be complementary to the brand.

In the other hand an asymmetrical composition makes for unique, personable, fresh, creative and memorable experience and if the impression is the purpose of the brand then that would be a great match. This approach would be very appropriate for any business that deals with uniqueness and customization, like design, illustration, online art galleries, photography, craft stores and so on.

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.

Web design consistency plays a great role in reinforcing the brand strength. By applying it in navigation, layout, colour scheme, typography, imagery and all other aspects throughout the website the brand gets stronger and stronger.

At the same time if the consistency is not strictly applied the brand gets weaker and the website becomes more ambiguous and harder to use in a way that it forces the user to think about how to get around instead of having naturally intuitive experience.