Illustration by Kyle Webster
Digital design is, fundamentally, the process of creating something that provides a solution to a problem using digital technology and platforms. These problems can range from simple—like creating text that’s readable and easy for a user to understand—to the more complex, like arranging an entire interface to increase conversions.
Each problem has two sides: the goals of the business and the goals of the user. In the example of the interface design, the business wants new leads, while the user wants to find out if your service or product is worthwhile. As designers, we use a set of guiding principles to help us achieve these goals and design the best possible work.
Understanding these core principles of design and how to use them can help you create more consistent, usable, and understandable designs without removing your own unique style from your work.
While there are a wide variety of approaches you can use in your design work and plenty of philosophies surrounding them, there are five essential core principles that guide them all.
What was the first thing that stood out to you when you clicked on this article? Likely, it was the title. Titles are designed to attract your attention.
Designing with an emphasis in mind ensures that the user understands what they are viewing and reads the most important information first, every time. For example, emphasizing a company’s main service in the title on their homepage ensures the potential customer viewing the website knows exactly what they can buy from the company.
Apple does a great job of this on their homepage, as you can see in the screenshot above; you see their latest product first, along with the most vital information about it. This is purposely designed to focus users’ attention on the company’s newest product. If you were to complete eye-tracking studies with users, you’d most likely see them turn their attention to new products first.
The way that designers organize a website, app, or even a newspaper plays an important role in determining what the user takes away from their experience. Organization and proper visual hierarchy will create a familiar flow to your design that makes it easy to use.
A great way to think of hierarchy is by using an Importance Rating System. This is when you arrange your design elements in order of importance, with the most important information at the top followed by the less-important information as the page flows downward.
Ideally, your design should incorporate a clear strategy for your hierarchy. If you’re designing websites or apps, it’s typically the same every time: users scroll from top to bottom, so the top of the page should contain the most vital information.
Leaning on the Apple homepage example again from earlier, the latest high-spec iPhone is at the top, while older products are in later sections. Apple obviously wants to sell more of their newest phones, so the page is arranged to support that goal.
This is a key principle of design because without hierarchy, users can get confused. They may click out of your website without purchasing anything or stop using your app out of frustration. Creating designs with a clear hierarchy will ensure you don’t lose a potential customer or user.
Scale is the sizing and proportions of your design on the screen it’s displayed on. Properly scaling your design is a principle that some designers ignore, but it’s very important. This can mean scaling large images down to fit a certain screen size or scaling text up to fill a certain amount of space.
Whitespace, which is empty space that creates a border or spacing between elements, is a big part of scaling. Ensuring the information on a page fits without overcrowding—while still retaining your hierarchy and emphasis principles—brings everything together in unison.
You don’t want your elements filling the entire screen with no space around them, since that can feel cluttered to users. Instead, use padding and whitespace to make everything more readable, scrollable, and understandable—this is one of the biggest elements of human-computer interaction (HCI).
Contrast is the difference between two elements on a screen. For example, black text on a white background creates a nice contrast. This also ties the other design principles together, since the emphasized element should contrast with all of the other elements on the page.
Including contrasting sections is a great way to organize your content and create the hierarchy that your design needs. The second section on a page should contrast from the first to show that it is a new and different section, full of new information for the user. On Apple’s website, the first section is a darker color while the second section is lighter colored. This creates a clear and obvious contrast between the two sections.
Another important principle of design is repetition, which is when one or more design elements recur on a page or throughout an entire site. As you design more complex or larger projects, you will find that repeating certain elements creates familiarity and understanding. In the example image above, you can see that each screen belongs together, even though there is a different design and purpose for each. Blending repeating colors, elements, icons, imagery, and styles is all a part of the repetition principle.
Not only will familiarity in a design generate a visually appealing end result, it also creates trust with the user and helps establish the brand of the website or app. Repeated elements can range from an icon to colors and more. Applying this principle brings the entire design into a cohesive system.
Design and style guides are excellent ways to keep track of the colors, fonts, and logos that make up your brand; ideally each project you design will have a style guide in place to ensure uniformity, especially if you’re working within a large team.
When Can You Break These 5 Principles of Design?
To create unique designs, you need to do something different than everyone else. But how do you do this if everyone is following the same design principles? Breaking the rules means walking a fine line, but in some instances, you can do so to achieve a unique goal.
For example, breaking the common rules of scale can be a good way to design something more on the creative side than the practical side.
In the example above (one of my website designs), I clearly broke some hierarchy and scale rules, but I still achieved a visually appealing design that solved the design problem for the client.
When you combine these principles of UX design with your unique design style, you will find that all of these principles complement not only each other but the existing principles and ideas in your design work. This combination creates a winning formula for you to step up your design skills and produce quality work. Just remember, sometimes it’s okay to break the rules.