There is one thing that cannot be stressed enough in web design: the attractiveness of your website is secondary to its usability. Functionality must come first and design choices need to address the functionality. You want the user to think appreciative thoughts about your website which they will then associate with your brand. They’ll think appreciative thoughts if they get in, quickly navigate where they need to go, and get what they came for without hassle, extra steps, distractions, or confusion.

The best user experience is defined by a frustration-free, effortless, and reasonably enjoyable experience. If your website doesn’t provide this, the customer is going to be frustrated, even if they do get what they came for.

Users expect instantaneous results on the web. If something takes an extra step that could conceivably be eliminated, the user is going to experience some frustration. Same goes if something is hard to find.There is no good excuse for this in the self-interested mind of the consumer. They expect their interest in your brand to be coveted, and they want that to be expressed through thoughtful, helpful design.

Design principles can actually help users to find what they’re looking for. Additionally, they will add a bit of polish that makes the website more pleasing and more comfortable. Again, that polish counts for nothing without the right functionality. But as icing on an already delicious cake, it will tend to make your users more indulgent: they’ll visit more often, linger longer, and associate positive feelings with your brand.

The right amount of artistry is the amount that helps them accomplish what they came there for. To understand this balance, we need to understand why the rules are rules: how they work, and what they can do for you and your users.

How design principles help them get where they need to go

At its core, website design (and design in general) is a study in psychology. These same principles apply to any visual medium: painting, photography, modeling, acting, staging, makeup, fashion,architecture, and interior design. They all use composition elements to direct your attention to points that offer information, stimulation, and -- in the case of websites -- interaction. The biggest thing to realize is that you don’t want users distracted or interrupted by elements that are irrelevant or unimportant.‍

Lines

Lines lead the eye, delineate space into shapes, and frame elements of your website. There is a default pattern that a user’s eye follows when they land on your page, shown below.

Use lines to separate the distinct elements of your page. A page will typically have three kinds of elements: some sort of image, some sort of text, and some sort of interactive element like a link or drop down menu. Use lines to frame an element into its own space, and then use leading lines to direct the user to it. This works well if your leading lines jive with the natural path of the eye portrayed above. Be careful not to feature photos/images with lines that distract away from the purpose of your layout.

Realize that lines can be “implied" as well. The peaks of a row of mountains in a photo can imply a line leading in a certain direction. So can bricks, picket fences, or text. Make sure implied lines are conducive to your scheme and not disruptive to it.

Make each phase of the journey its own distinct element, but one that still fits harmoniously with the rest of them.

Note: Things like neatness and parallel lines are pleasing to the viewer.‍

Space

Make sure every important element has its own designated space, so it looks like it belongs. That will draw the user’s attention to it.Don’t crowd things; it makes the user claustrophobic and uncomfortable. It also makes that specific element seem unimportant,like its an afterthought that was crammed in unceremoniously, rather than an integral piece.

This basically amounts to giving images and text enough of their own margin, and making them the right size. As long as users know who’s site they are on, and they’ve seen how cool your logo is, they don’t need to see it everywhere. Too much makes it feel forced. Plus, it takes up space that could be used for valuable content or imaging.

Be intentional with how you use space. Giving items lots of space can feel comfortable, but too much space might feel sparse. This can be good if its intentional, as you might use in a minimalist theme or if your site is fairly singular in purpose. But if it's not done for a specific reason it might make a site feel empty, bleak, or aimless. Whatever you do, don’t overvalue space to the point that it makes things harder to access for the user. Definitely don’t create pages for things that don’t need their own page simply in the interest of roominess.

Shapes

Shapes define space. Circles, rectangles and triangles (and their variations) are the three most elementary shapes. They correspond with more abstract shapes and their edges. When selecting shapes, consider how they draw attention, how they direct attention, and how they make the viewer feel.

Shapes that have curved and rounded edges such as circles appear graceful and friendly. Irregularly shaped blobs (think of an ink blot or an amoeba) have this affect. Because of their irregularity they can be interesting and spontaneous but they also don’t feel orderly. There’s nothing inherently wrong with that, but if structure and order is your intent, balance the use of blob shapes carefully. Understand that blobs will draw attention in an otherwise stable and predictable space. Perfect circles or symmetrical ovals have more of a neat and stable appearance and still offer that round friendliness.

Nothing is as orderly or as practical for web design as a rectangle. Rectangles are inescapable. The screen itself is one. Even the lines of text on your pages will create an implied rectangle. They are a straightforward way to dedicate space to a particular element. Boxes jive well with other boxes and create a stable feeling environment. The pleasing appearance of parallel lines adds to this effect. The drawback to rectangles is that they’re somewhat boring. Too much uniformity can make it hard to direct attention to specific elements. That being said, there are many creative ways to distinguish boxes from one another. You can overlap, elongate, color them a certain way, and get creative with the border, among other things.

For the “ideal” size for rectangles, use the Golden Ratio, which is 1:1.618. That means one dimension of the rectangle is 1.618 times the size of the other dimension. In practice, all you have to do is take the short side and multiply it by 1.618 to get the long dimension or take the long dimension and divide it by 1.618 to get the short dimension.

This ratio roughly corresponds with the Fibonacci Sequence. This article is a good resource for further reading on space management and ideal sizing using the Fibonacci Sequence. While not always practical, using this will lead to eye-pleasing layouts.

Triangles feel aggressive and have an attention-commanding effect. Think of them as the polar opposite of the warm and friendly blob. This could have something to do with the sharp points, as opposed to the harmless rounded edges of blobs and circles. Triangles are not all bad, of course, and they don’t necessarily make people uncomfortable, either. They represent action. Additionally, an elongated triangle works as an arrow to take command of the user’s attention and send it in a specific direction. All the qualities of triangles hold true for any irregular but “sharp” shape, like a cartoon explosion or a hole in a sheet of glass.

Always keep in mind that shapes can be implied. They appear in negative space as well, being delineated by the shapes and lines of other elements. These manifestations affect the user experience in the same way that deliberately placed shapes do.

Finally, its important to note that one of the most attention grabbing “shapes” in all the world is the human face. This has a special sort of command over us which is why thumbnails on YouTube so often include human faces. Users on social media and file sharing platforms have short attention spans so creators are in a constant war for your attention. The human face is the ultimate weapon in this arena. Additionally, faces add a distinctly human feel to your site that help the user feel connected.

For a detailed breakdown of shapes and their usage, see this article.‍

Contrast

Contrast is what makes any element stand out. The most straightforward example of contrast is in color. Black and white create the most contrast you can get. Any light colored element is going to be stand out in a dark theme, and vice versa. You might even find that the light feels like a haven from the darkness, luring in the attention of your users.

Other examples of contrast include a bold line in a theme of light lines, or a different font where all other text is uniform, or an irregular shape like a cloud or cartoon explosion in an otherwise orderly space.‍

Balance

Balance is a somewhat abstract idea that can be achieved in different ways. One obvious way is symmetry. However, this is a rigid approach that doesn’t lend itself to sensible or creative ways of arranging your content. Symmetry is beautiful when it makes sense. But think of balance in more general terms: you’re trying to balance scales that can tipped by different things: contrast, brightness/darkness,richness in detail, and the complexity of patterns. Consider how things draw the eye, and how they make the viewer feel.

Balance can impact functionality by directing attention toward and away from certain things. An imbalance can make it easy to overlook something important, which leaves the user thinking why is the very thing I came here for so hard to find?‍

Balance can also affect how comfortable the user is. A thoughtfully balanced space can make the user feel at home, while an imbalanced space can provoke them to leave as soon as possible.‍

Theme

In simple terms, your theme can be thought of as consistent formatting. Consistency in your design choices will help create familiarity. This is comfortable for the user and gives them a good sense of how to navigate your site. You want to develop a consistent theme that increases the user experience --- not just through aesthetics, but also through function.

Themes are created through patterns: in color choices, in shapes, in sizes. You can use all of the design principles above to create consistent visual “cues” that signal things to the user.

‍Note: when you have a distinct theme, you can create a lot ofemphasis by deviating from the expectations you’ve created in themind of the user. This use of contrast is exciting to the viewer, butonly in small doses. In large doses, you just subvert your theme andcreate utter chaos. But done subtly and tastefully, a little disordercan make your site more usable.‍

Color Selection

‍Color really plays along with all of the above principles. You want to create a semblance of order and intent by running a consistent color theme. Be purposeful in balancing the amounts of color. The right amount of contrast in color makes everything legible, or “accessible,” if you will. Subverting your theme in small doses of out-of-place color will create emphasis and make your site less boring.

Colors can become more or less comfortable by comparison to other colors. You want colors that jive well, while still offering some contrast. Brighter colors can seem blinding by contrast, especially if they’re already stimulating, like orange and red. This can drive users away, often without them even realizing why they don’t have the patience to navigate your site. It's safer to err on the side of subtlety if you’re unsure about your colors. Just tone down the boldness a bit.

For safe color themes, you can use the tertiary method -- choose colors from the color wheel by selecting three points that divide the wheel up into approximate thirds. You can play somewhat fast and loose with this strategy. You might find you want one of the three colors to be more subtle than the other two.  You could tone yellows down to a beige or make them a bit opaque to use them as a backdrop with the feel of a canvas or watermark. You could tone purple down to an an opaque lavender or almost-gray to make it neutral and almost unnoticeable. You might want to loosely adjust your other colors accordingly by moving along the wheel or reducing amounts, to keep the contrast in check.

There’s a bit to be said for the psychological effect that colors have on the viewer. Bright colors are stimulating. While red can make people passionate or aggressive, orange is a little brighter and friendlier. Yellow is warmer, to the point of being soft by comparison. The response that we have to color is influenced by our gender and by introversion/extroversion, so it's worth looking into the effects colors have on your target audience. A useful article on colors and feelings can be found here.

Use your darker colors for text. Bright text feels unnatural, almost painful, to look at. There’s nothing wrong with black-and-white.You can add tasteful amounts of color throughout to make it interesting.

Be careful that you don’t overdo contrast to the point of garishness by coupling an emphatic color choice with other attention-commanding design choices. Be conscious of the emphasis each choice makes -- and the accumulative effect. Too much emphasis will be in-your-face and pushy.

---

All you need is design that is conducive functionality. A site like this jives with the user and makes fulfilling the task at hand so easy and intuitive that it feels kind of magical. And though its easy to forget, the internet is actually a kind of magic. All we’re trying to do with design is capture the magic that’s already there, not reinvent it.

Context matters. If what your business does is artistic/design work, you might want to connect with your clientele on a deeper level by getting slightly carried away with design. On the other hand, if the purpose of your website is to showcase art work, a high design site might distract from the art work.

One way to constantly improve your ability to harness the power of design is to pay attention to the way design choices affect your user experience when you’re on other sites. And always consider the subtext. What do the design choices say about a brand and the people behind it?