Designing is no easy task. Unless you were gifted with having a great eye for things, it’s unlikely you will be able to design a masterpiece overnight.
Design is essential in everyday life. Have you ever just sat down and looked at the world around you? You will notice design everywhere. Look at the shirt your friend is wearing or those pillows on the couch. How about the mug you’re drinking out of or that advertisement on the TV? You will also notice when a design is awful. Have you ever seen a website that was created in the early 2000’s and hasn’t been updated since? For example, you have a multi-national conglomerate company like Bershire Hathway. Successful company without a doubt (and we love all Berkshire does for our Omaha community), but its website looks like it was created when the internet first came out.
Now here are some design principles even the non-designers should be able to follow!
Use contrast to make pieces of your design standout.
Without contrast, web pages would be nearly impossible for users to comprehend. Contrast can help us organize page content and visual elements; create a digestible and pleasing flow for the user; and establish a good sense of visual hierarchy for the user to follow without having to think about it.
When most people hear the word contrast, they think of color. While color isn’t the only way to achieve contrast, it can go a long way in helping the user intuitively differentiate distinctive page elements or sections from one another.
Using different colors, sizes, and even styles, you can successfully separate headings, subheadings, and paragraphs, which also creates a sense of hierarchy for the user.
Contrasting fonts can help separate information, contrasting color can help make something stand out, and contrasting size of elements can help to create hierarchy and emphasis. By incorporating differences in size, shape, color, style, etc., you can take advantage of contrast, and successfully accentuate the necessary differences between elements in a design.
Look at the following image our Head Designer, Evynne Doue, created. There are several elements of contrast used throughout this piece. “Violence” stands out because of its size, capitalization of the word, and the red background. Other words contrast with it because of their smaller sizes, different colors, and lowercase letters. As you can tell, it makes a huge difference!
Place items that relate with each other, together. Better known as proximity.
Proximity in web design means that similar or related design elements and information are grouped together, while unrelated items are separate.
The use of proximity in web design helps us to create less clutter and come up with an organized layout that makes sense to our users. When you place unrelated items further apart, you emphasize their lack of relationship to each other.
As we’ve covered, the physical and visual relationships between design elements create a level of emphasis, which helps us to then establish hierarchy. Every object or element in a design has a kind of gravitational pull in relation to the other objects that are closest to it, which is based on their position to one another.
To website users, close proximity indicates that things are connected or have an important relationship to each other, making them one visual unit, which ultimately provides a logical organization and structure of a web page’s layout.
In the following image, you can see how Evynne grouped similar items together. Such as the location, date, and time are in one section. While the activities are in a separate section. What would make this wrong? If she placed the location randomly on the graphic and separated the time and date far apart from each other.
Focus on the alignment of elements, that is, the placement of items on a design and how it connects with other elements on the page.
Sometimes it may feel like instinct to center align something on a page.
For some reason, we like to think this look makes text look more visually appealing.
Like having things centered gives it a certain appeal.
And it some cases—it does!
But NOT ALWAYS.
Look at the following design, you can tell that there is a left alignment only and it looks amazing. Sure, if Evynne wanted to, she could have centered all the text, but it wouldn’t give it that same flow and probably would have taken away from the overall design. It adds more sophistication by not center aligning it.
Use emphasis to help create a focal point in a design.
It’s how we can bring attention to what’s most important. Successful implementation of emphasis catches the user’s eye and makes them stop and look. Without emphasis, visual communication between the web page and the user cannot occur.
Emphasis can be created by contrast. Practically anything can be contrasted, so thinking about what’s most important and using contrast to show that visually, is creating emphasis.
An element in contrast with something else is more easily seen and understood because something different attracts the eye. Think of it as an anomaly that is going to stand out and grab our attention, for example, a person wearing a swimsuit outside in the dead of winter.
Look at the following graphic. What stands out? Automatically you will probably look at the donut, right? Images typically draw a person’s attention first. But you can tell that emphasis is created by the dark, larger font “The Art of Donuts.” You read it before the font below it, didn’t you?
Create Hierarchy through the user of contrast and emphasis.
Think of hierarchy as order of importance, which means the order in which you want your user to see things. You can even think of hierarchy as different levels of emphasis—from most emphasized to least emphasized.
A good example of hierarchy and emphasis is the h1–h6 elements in HTML markup. Your browser automatically renders the h1 – h6 tags as levels of “importance” by using super basic practices of contrast and emphasis, which creates a basic level of visual hierarchy.
An important thing to remember: If everything in a design is emphasized (AKA no contrast is being utilized), nothing will stand out. And if nothing stands out, nothing is going to grab your users’ attention, which also means there is no visual hierarchy—something we absolutely want to avoid.
Let’s go back to look at more donuts, shall we? The following example shows the use of hierarchy. Can you see the different levels of hierarchy present? The headings are larger and emphasized through the user of color, type font, and size.
Repetition is reusing the same or similar elements throughout your entire design.
The repetition of certain elements creates a sense of unity and consistency, which can happen within a single web page layout, or across multiple pages within a site.
Effective repetition occurs when the same or similar elements are used more than once in a design: shapes, colors, lines, graphic elements, etc. Repeating elements in a consistent manner helps to promote the organization of a website and reinforce its overall sense of cohesion.
In the following image, you can see repetitive elements throughout the entire webpage. What do you notice? Repetitive colors. Repetitive fonts. It creates that cohesion and brings the site together.
These are just some of the many design tips that are out there! Design takes time to master, but we hope that these few tips will help you get started!