Designing better using Design Principles
Hey there! Welcome to this blog. I’m Ben, the guy who runs Interfacer. In this post, I’m going to talk about a few design principles that you can use to make your designs better. I thought I’d share my understanding with you because I know it can be really hard to learn about Design Principles, at least that’s how it was for me.
When I got started in design, the designs I made were pretty horrible. Not saying I’m great at them right now, but I’ve made progress. What I learned from my journey is that you don’t have to be an expert to create something that looks nice or usable. You only need to know a few rules that will help you make intuitive choices which will contribute towards making you a better designer. These principles that I will be talking about in this post are pretty rational and you’ve probably used them in your real life too.
I’ll list a few of them, keeping them to 3 for now.
- The 80⁄20 Rule
It’s one of those principles that is so simple that we don’t really think about it. But stop! It’s important, this actually can make or break your designs. Basically, Alignment is when you align 2 or more elements along the rows or columns of a grid. This way, it increases the overall aesthetics of your designs. It’s not only used to make it better but also control the viewer’s vision to where you want them to see.
I made a quick mockup of a poster where the one on the left uses Alignment to structure the content and makes the overall design scannable. It also guides the viewer into how to scan the poster.
The one on the right is the same poster but the contents inside it aren’t structured and placed at random. The problem with this one is that it guides the user but the overall aesthetics is decreased. And it doesn’t really tell the viewer which of the information to look at first.
Use this principle if you want to increase the overall appeal of your design and help the user navigate better. Who doesn’t want that? I used a column grid to align the items. However, you can use any kind of grids, the only condition is that 2 or more elements must be aligned with each other. That’s pretty much it for alignment.
Hierarchy is a pretty fascinating concept. I’m not just saying it, I actually mean it! Hierarchy maintains order. It directs the viewer’s eye in a way the designer wants the viewer to look at it. Normally, when there’s no Hierarchy in design, our eyes are all over the place and there isn’t a proper location to focus on. To put simply, there’s no balance. Here’s a mockup that I made to explain my point.
The one on the left uses Hierarchy and the one on the right doesn’t. Hierarchy is when elements are ordered sequentially with respect to their size, shape, placement or color. Naturally, we look at the bigger elements first because it catches our attention, then we gradually move down to the next element. But it doesn’t mean that you have to make the first element bigger, that’s your choice. You use it to convey a message, and that necessarily isn’t the first element. It can be in the middle or at the bottom of it doesn’t even have to be a text.
Other than shape or size, we can use colors to indicate superiority and it dictates how someone perceives a design. In the example image, the design on the left uses Hierarchy to direct your eyes. It uses color to indicate superiority and it uses size to differentiate between what is important and what is not. It tells you the big chunk of text is the heading and the text after that is a subheading and so on. You can clearly tell what’s wrong with the design on the right. Maybe see if you can improve it. That’s it for Hierarchy, now let’s go onto the next one.
The 80⁄20 Principle
The 80⁄20 Principle is also known as the Pareto Rule. It simply states that “80% of the results in a system come from 20% of the causes”. So what does it mean? It simply means that most of the elements in your design are more important than the others, only 20% of the contents convey some kind of message, that is doing the 80% work. The rest can be made less obvious since they’re not that important.
So it’s basically a rule to help you figure out which elements are important and helps you decide where to place them in a scene. For example, the print function in most software apps (Docs, sheets, etc). Normally, the print function is hidden under some kind of dropdown menu but it also can be accessed using a shortcut (CTRL+P). The reason for making that function available as a shortcut key is because it’s widely used and saves time. This can be applied in any kind of design or website and it will definitely help you make better choices while considering where to place elements or maybe even remove them. This is not an easy task, and this is actually a UX principle, but I believe that it will benefit you a lot if you start applying this rule or at least consider it while working on something. But as I said before, it’s not an easy thing to do. It requires observation from your users, then only you can weed out the elements that are less useful.
More articles on this if you’re interested in exploring more
That’s a wrap, I hope you enjoyed reading this post as much as I did writing it. Also, here’s last weeks post - 5 Free Design tools/resources you should use if you are getting started in Design. I had made a tiny list of free resources that you might find useful.
If you’ve read this far, you’re probably interested in the things I’m working on, so if you want to know more you can follow me on Twitter. Have a good day!
Hello there! It’s Ben from Interfacer. I hope you had a wonderful week.
So for this week, I wrote a post on how to improve your designs using some basic Design Principles. The post is aimed at beginners who are just starting out in the design industry. If you’re an expert read it anyway.
Here’s the link to the post
And I have a small favor to ask from you. I’m in the process of making my website better so I’d love to hear some feedback. I have set up a small form which will take you a minute or two of your time to fill. Please give me your feedback, I’d really appreciate it.
Here’s the link to the form
Also, a reminder for all those who have forgotten about interfacer ;). If you’re looking for free design resources, we’ve got them. So be sure to check it out.