A Comprehensive Introduction to Visual Design

By April 27, 2016 Design, Graphic Design

This comprehensive guide will cover the fundamentals of visual design principles, demonstrated with plenty of illustrations to deepen your understanding. Whether you’re an experienced professional, or new to the world of web design, learning a solid grounding in the basics will help tremendously to improve the quality of your design work.

This very comprehensive article will act as a “visual design principles one-stop-shop”, with all you need to get started.

We’re going to cover a great deal in this guide, including the following principles:

  • Unity
  • Alignment
  • Continuation
  • Emphasis
  • Figure Ground Relationship
  • Hierarchy
  • Consistency
  • Similarity
  • White space
  • Balance
  • Proximity
  • Closure

Visual design can help you to convey a message tailored to an audience. Design is communication; through visual design you communicate with a viewer. Your “words” or your repertoire includes shapes, text, symbols, images, white space, textures, colors and even motion (animation or implied movement). Your aim is to be a guide who takes a user through a design, leading them where you want them to go (also where it’s best for them!). A good UI (User Interface) will take this concern seriously and offer appropriate solutions.

Below you’ll find seven design principles and a hand full of useful gestalt principles you should be aware of. They should be taken as guidelines, not as being set in stone, and help you make decisions that lead to greater cohesiveness and quality.

One common theme will lead us through all the principles we talk about today: relationships. Good visual design comes from successfully creating distinctive relationships in your work. Bear in mind, however, that the following content is relatively easy to learn and understand, but it takes repeated practice to put the pieces together and achieve results that create these relationships successfully.

Many of the principles we’ve listed (such as “proximity”, and the “figure ground relationship”) can be categorized as “Gestalt principles”. These laws focus on how we, as the onlooker, perceive the sum of smaller parts as a whole. How we seek patterns and, as we’ve mentioned already, relationships. Similarly to other visual design concepts, they can be applied to print, web, video and photography.

That said, let’s begin with our first visual design principle!

Designs works best as a cohesive whole, aiming to achieve unity when all the elements are put together. Try to build up unified structures. Proximity, alignment, continuation and repetition can help to achieve perceived union among elements. This also helps you separate pieces of the puzzle without using additional borders or other design elements. As viewers, we perceive the overall structure first when we look at new things.

Dropbox unity
Dropbox unity

Dropbox does a lot of things right, making good use of every design principle in the book. The “about” page is a good example of unity. Notice how effortlessly visual unity is achieved with only a few elements on the page. They could even lose the borders and it would still work.

Unity needs to be built up steadily—it doesn’t happen in an instant. Think of it as the combination of macro- and micro-unity; smaller elements also need to convey cohesion when you build up an overall unified impression.

GitHub unity
GitHub unity

GitHub also does a great job in establishing unity. All the little considerations in a content rich page like this add up to a consistent whole where all the pieces fit together and where nothing sticks out negatively.

Unity and cohesion make viewers more comfortable. Establishing trust and understanding how users should follow the content is a free by-product. If nothing stands in the way that could block the users’ attention the more frictionless the user experience will be.

More unity on Github
More unity on Github 

The illustration above is another example of excellent use of unity principles. The block that displays the list of integrations needs nothing else to establish unity.

Alignment reduces visual clutter. Think of a messy desk versus an organized one. Even if you like your creative-looking messy desks, your audience or customers unfamiliar with your desk would appreciate a well sorted appearance over a chaotic one. It’s easier to navigate and find the relevant pieces of information if you can establish some sort of flow via alignment. As a side effect, hierarchy (something we’ll look at shortly) is more easily established without elements floating all over the place.

Alignment by Dropbox
Alignment by Dropbox

This screenshot from the Dropbox help center shows pleasing use of a clear grid to properly align elements.

themanyfacesofcom a fun side project from Paravel
themanyfacesof.com, a fun side project from Paravel

themanyfacesof.com includes a great little Burt Reynolds themed site which has tons of examples of good alignment in action. The alignment is very subtle and mostly achieved through sound typography and clear grids—and breaking alignment skilfully every once in a while.

The Dropbox feature list
The Dropbox feature list

The Dropbox feature list is another example worth studying. Simple, unpretentious and effective design work for structuring content using alignment to maximum effect.

Visual alignment works hand in hand with the Gestalt principle of continuation. We’ll look more into how you can use this in your work when we cover grids in this series. Objects that follow a common direction, for example by being aligned to each other, create the impression of being more related to each other than elements missing this guideline. Following these organized lines of content creates order and flow in a layout.

LOL Colors
LOL Colors

LOL Colors is a great example of alignment and continuation. Without even using segregating borders, you can clearly see a grid at work, and the form of the color drops implies direction continuing down the page.

On macro-level, you should work on aligning things which are related to each other and positioning them along a common edge. That way, elements flow more easily in the overall composition and let users navigate effortlessly. This visual connection can help form an overall unity between small and big elements. It’s like an invisible margin that holds the major pieces in your design together and gives the eye little reason to stop for visual hiccups.

Objects can be aligned along an edge, but equally along a central axis which is often less clearly defined. Aligning content via edges is definitely your bread and butter when you design for the web. Central alignment can be used to emphasize particular elements or calls to action.

Emphasis is all about focal points. The fewer you have, the stronger their emphasis. The key here is in not making everything appear important—if everything is emphasized, nothing sticks out and all you end up with is noise. I’m sure you have seen sites which ignore that principle and plaster tons of funky colored buttons all over the place. Leaves a nasty taste, doesn’t it? That’s what a lack of emphasis can leave behind. More importantly, misuse of emphasis confuses the hierarchy.

Your tools of choice are the usual suspects, but size and color might be the most effective at creating emphasis.

Dropbox CTA
Dropbox CTA

Dropbox makes a great job at highlighting the action the user is supposed to make by using emphasis. Visually, there is nothing standing in the way which blocks the user from focusing on signing up. The strongest emphasis is on the blue buttons which clearly stand out from the rest in the viewport. This design has good visual balance—and would be even better if they’d go with only one blue button.

One or two emphasized elements in a particular viewport should be enough to guide the user’s attention to the most important elements on the page. Deciding on which elements is maybe more difficult than it sounds. Ask yourself, what is so crucial it needs to grab the user’s focus first. Choose wisely!

The wooden Orée keyboard

Emphasis on the product is excellent in this design. Neither the description nor the background blocks emphasis of the wooden Orée keyboard in any way. Beautiful! Symmetry is also working nicely here.

The VIVE
The VIVE

There’s not much to say about how HTC presented the VIVE. Emphasis at its best. Good design like this definitely sells.

Craft by Invision

Craft by Invision has a striking landing page where the input field for email addresses is elegantly emphasized. It’s difficult to get lost on this page. The name of the product stands out effectively as well. The distinction between background and foreground is especially skilled and playful.

This principle is very powerful and so fundamental that you should master it as early as possible. Working on your designs, you should often ask yourself the simple question: which elements are in the background, and which are in the foreground?

Cayenne
Cayenne

In this example you can see that the content and the button to take action clearly stick out from the background. A clear distinction is very important to play with the user’s focus. Here the lines are a bit blurry and playful, but still lend a very clear figure-ground distinction.

When our early ancestors were busy hunting and gathering, it often was of vital importance to discern what might be an immediate threat or advantage right in front of them. Distinguishing things quickly from whatever is just background “noise” seems to still be part of our wiring for “survival”. Think of a tiger behind a bush in the jungle as opposed to rain on the horizon. Neurologically, this visual survival strategy has left such a deep imprint that it’s unlikely we’ll change this simple mechanism of perception. This might sound funny and mostly obsolete for digital folks, but knowing this makes it simpler to decide how to accentuate important information for users and how to “hide” less relevant details in the background.

Zappka
Zappka

Here we have a very prominent background image which absorbs a lot of attention–it’s useful in that it conveys emotion in the form of personal connection. Nevertheless, the button to take action is cleverly placed and its color brings it into the foreground.

Another issue might be that our eyes and brains are not super fast at processing a lot of information at the same time, which leads to prioritizing what we need to focus on first. Understanding this will help you place pieces of the design puzzle more effectively.

www.startupfuckingadvice.com

This example works well, the perspective supplies distinction between background and foreground. Personally I would have liked to see the red button placed at the end of the table—where the eye is naturally drawn to as a result of the lines.

The Samsung Gear 360

This example from the new Samsung Gear 360 is as good as it gets; the background and foreground work together extremely well. There is a clear distinction and the background accentuates the camera in the foreground elegantly. Pretty clever and playful.

Below are a couple more examples of good emphasis and figure-ground relationships for the road:

Go Cubes
Go Cubes
Go Cubes
Gear 360

Hierarchy is all about assigning visual importance; a sort of cousin to emphasis with regards to reducing visual clutter. It’s a macro guide for what to focus on first and how to follow visual, subliminal breadcrumbs—like telling a visual story the user can cling on to when navigating the content of your site. Approach design elements as “layers of importance” which need to be arranged effectively. With only a few pieces strongly emphasized, you are taking the viewer softly by the hand and moving them through the site as intended.

The Reddit index page
The Reddit index page

This screenshot of the Reddit index page is perhaps not the best example of well crafted design—especially in the sense of establishing a clear and strong hierarchy. Reddit is one of these cases where the success of the site and design are not closely related, I feel. It has an authentic ring to it, by being messy I mean, but it wouldn’t need much to establish a clearer visual hierarchy.

As we covered before, you don’t want everything to appear equally important. Were that to be the case, your viewer would have a harder time digesting your content. Instead, create various level of importance which emphasize the overall structure of your composition. One strategy that works as a general rule of thumb: the bigger the size, the bigger the importance. Once a basic hierarchy is achieved through size and spacing, you can bring color to the mix, helping to emphasize certain elements even more. By working in reverse, starting with color, you’ll make your job unnecessarily difficult—or at least less effective.

The Explore page at GitHub
The Explore page at GitHub

I like how the Explore page at GitHub deals with typography to create a subtle and clear hierarchy. It’s very easy for the eye to scan and follow the content downward. Color is also put to good use to create visual anchors, and the same goes for their search results:

Color form white space size and alignment work together and create a solid hierarchy
Color, form, white space, size and alignment work together and create a solid hierarchy.

A clear hierarchy quickly distinguishes good from mediocre design solutions.

Visual hierarchy at Dropbox

The screenshot above is another great example of how skilful designers at Dropbox execute their work. There’s a lot more content to work with, but it’s still successful at guiding the eye through the text.

If you follow the principles discussed so far but lack consistency you’ll weaken any progress made when applying other design principles. Consistency helps to create a mental model of the design, site or look you are going for. Similar items should appear visually similar. Also, once you get into coding your designs, making your designs more DRY (Don’t Repeat Yourself) is a lot more straightforward with that in mind.

Another eye pleasing design from the Dropbox team
Another eye pleasing design from the Dropbox team

The example above shows consistency on various levels. The style and size of the illustrations are consistent. The buttons look the same. The visual weight of all three columns is even and aligned. Each column shares the same inner structure. Overall, this is simple, considered and effective.

Consistency sets expectations that whatever’s encountered next will appear similar, thereby reducing cognitive processing.

UX Timeline
UX Timeline

Avoiding the use of a ton of different typefaces and font sizes is one of the most important paths to consistency. Within one environment users grow accustomed to reading in a particular style or typeface and you shouldn’t disturb that.

Whiplash
Whiplash
SoundCloud Charts
SoundCloud Charts

Have you recently seen sites that use tons of different buttons instead of a few which would create much better consistency? I bet you have and I’ll wager you didn’t like it. The buttons below belong to an interface inventory of one single site. As can be observed below, it’s amazing how far you can go in the wrong direction.

A screenshot from Brad Frosts excellent book about Atomic Design
A screenshot from Brad Frost’s excellent book about Atomic Design

The usability of a system can improve massively when similar elements like these share the same aesthetic. Why make users learn diverse visual language for navigating your page? It doesn’t make any sense!

You guessed it, “consistency” has its roots in this Gestalt principle, which states that similar looking things create a form of unity that you can use in your designs. Elements which share similar characteristics appear to be more related to each other—more so than dissimilar things.

Elements being similar suggests a relationship, creating strong contrast between them and other elements around them.

The user list on Dribbble
The user list on Dribbble,

This is the user list on Dribbble, displaying designers and their work. It’s a superb example of how similarity can support a list of different design elements to create relationships and therefore appear more unified. Movement is suggested across the page by the horizontal proximity of the thumbnails and the similarity of each repeated row.

Reddit
Reddit

Reddit does not achieve great consistency by applying similarity that well. This list of posts has both long and short titles, some headlines are indented while others aren’t. It looks confusing, but wouldn’t take much work to create more cohesion through similarity.

You can achieve similarity between elements by using common:

  • color
  • form
  • size
  • shape
  • texture
  • orientation
  • dimension
  • consistency of size

All of these can suggest relationships. Color and shape are very strong examples to emphasize these relationships. Although similarity is a mighty weapon to yield, it is nevertheless a tool for reinforcement of hierarchies, not one that easily creates it on its own.

Trending Open Source repos on GitHub
Trending Open Source repos on GitHub

This list of trending Open Source repos on GitHub is really strong. Very simple, easy to read and digest, as well as cohesive by repetitive similarity. It is successful in creating blocks of discrete content that I’d argue it doesn’t even need the borders:

The subtle mental map we, as users, can create is not to be underestimated. It helps to establish a pattern for organizing content. Chaos is on the other end of that spectrum and is not what we, as designers, are aiming for. Imagine a page of text where the letters aren’t displayed consistently on a line-by-line basis, but float randomly around the page. Not very inviting to read, huh?

The Explore section on GitHub
The Explore section on GitHub

This is the landing page of the Explore section on GitHub. Here, a more consistent use of size and appearance would have been more effective. The increased size on some elements isn’t, in fact, an “editorial” decision to consciously highlight certain categories; it’s randomized. Lacking good reason to play with size, the unity would have been made stronger by leaning on consistency. Also, you have two sorts of cards, one with just a title for the category and one with additional descriptive text. On top of that, the hover effects are different for all three variations. This all creates visual interest, but the page isn’t as strong as the showcases list of the same section below:

Same content as above but the result is much stronger.

In terms of functionality, similar looking elements should accomplish similar tasks for the user. When users unnecessarily needs to re-learn different behaviors for similar looking interface elements, frustration ensues. Similarity helps to manage expectations—that in itself is a very powerful tool in your arsenal.

What exactly is considered “white space”? White space is unmarked, negative, or empty space between elements in a composition. It effectively frames the content. Macro white space is for the main pieces in your design—which create more obvious effects. Micro white space, on the other hand, is for minute details, like all the spacings for typographical elements.

Here the excellent use of white space creates strong and elegant emphasis on a new product. There are a couple of principles put to work successfully, but white space is playing the strongest role to make this design work so well.

Foundersuite
Foundersuite

Take a look at the example above. When we investigate the sizes used to establish the white space on Foundersuite, we see the measurements used play off of each other. These common measurements create “active” white space, deliberately directing attention. Let’s have a look below:

“Active” white space is a fuzzy description, but we use it when white space displays relationships to the elements around it. Active whitespace helps emphasize the composition or structure of your content and therefore impacts the hierarchy positively. “Passive” whitespace isn’t so divisive, but is equally important since it can create small amounts of breathing room. However, too much inactive white space, lacking relationships to surrounding elements, will make your work look inconsiderate or even messy.

ionicio
ionic.io

Excellent application of white space on ionic.io. Here there is a relationship in size as well as macro and micro white space playing well together.

Every day, when you read text, you witness the useful application of white space without thinking much about it. The space between words, sentences and paragraphs is all white space and helps us to visually digest the meaning of the letters being written. It guides the eye through the content and gives us cues to effectively move through the text. Both macro and micro white space give the eyes a chance to rest and support the overall balance.

Keep in mind that we aim to achieve differentiation though space. This lets us cut back on other elements to create distinctions. If you like that “clean” look of your favorite web designs then the conscious application of white space was most likely a major component of it. Nothing speaks elegance and sophistication better than proper user of white space.

Balance is all about keeping visual weight, optical equilibrium, in check. We instinctively like to look at things which are balanced around a vertical axis–it’s part of having binocular vision. Balance across a vertical axis is a safe pattern to follow—very formal and ordered. If you can break that balance masterfully though, create a bit of a tension or surprise, maybe to highlight some aspect of the composition, your design might appear more dynamic and interesting.

The Blockhead adapter
The Blockhead adapter

The site for the Blockhead adapter has a few nice examples of how they craftily applied balance to their designs. Above, the image to the right with its accompanying text achieve a nice optical equilibrium. The same goes for the image below. Balance, hierarchy, whitespace and emphasis are all well applied.

Symmetrical balance is not difficult to achieve and is a safe way of making a visually appealing composition. The asymmetric approach is less rigid or static but expects a bit more craft to pull off successfully. For asymmetric balance we need to work on keeping the various non-mirrored parts in aperceived balance.

The Dropbox landing page
The Dropbox landing page.

The Dropbox landing page makes excellent use of visual balance all over the place. You can see that the images and the text achieve a nice asymmetrical balance–especially in reference to other sections around them. And don’t get me started on how they used the Koi carp to imply responsiveness and multi-device operability. Genius!

When you play with visual balance, all the design tools are at your disposal: size, color, position, shape, repetition, texture, and they can all influence perceived weight individually and play off each other.

Asymmetrical balance can be considered more friendly and conveys a design that appears more playful and dynamic. Not that I’m a Dropbox fan boy or something, but in terms of design the Dropbox website makes skilful use of every design principle we’ve discussed today, achieving an overall quality to be admired.

Dropboxs asymmetric about page Good balance
Dropbox’s asymmetric about page. Good balance.

Design elements which are placed within relative proximity to each other naturally form an implied relationship. Handling proximity well can impact your designs positively, enabling you to leave out other elements that would otherwise be needed to achieve visual unity—borders for example. Again, unity is at the heart of this, and all the tools we’ve discussed thus far can be used to varying degrees to achieve it.

On the site for YoGrow you can see how proximity is used. I would suggest they could have used less background color and borders, instead letting proximity do its magic.

In the example below, which we’ve seen before, proximity is all that is needed to imply the relationships between these color palettes. Borders or background colors can be omitted, generating an elegant look.

Closure is a compositional technique where the user fills in the blanks of your designs—blanks which you have deliberately planted. This is a form of suggestion, an illusion which completes the image that the designer wants you to see. Closure is what allows readers to interpret comic strips, taking suggestion of what happens in the gutter between frames. Closure is also what allows us to interpret negative space in logos, for example.

The pattern-seeking human brain operates by filling in missing pieces into familiar forms.

Take GitHub for example. The logo they use on the page is a black circle, with a negetive impression of their Octocat within. Even at a small size, you can identify their mascot easily and, placed in the navbar, it serves as a visual anchor that appears unpretentious and restrained.

So how does all of this tie into designing interfaces for the web? Well, it rarely does to be frank. You’re more likely to fun into this concept if you ever design icons and logos.

We’ve covered a lot here! From now on, try to consider these principles whenever you take a look at any design or artwork. Try to understand if the creators took visual relationships into account, applying them actively and constructively. Remember that in order to become effective at using these ideas you’ll need to practice! Whilst you’re doing so, these principles will certainly help you enjoy designing more.

 

Source: TutsPlus

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.