When you are just starting out in UI design, it can be intimidating when you browse dribbble or behance or such sites. You will see beautiful designs from various talented designers around the world on these sites and if you are anything like me then you must wonder why your designs don’t match up to that level.
Why in spite of your best efforts your designs don’t wow the user?
Now, it’s true that kind of quality is a result of lots and lots of practice and hard work.
But no one’s stopping you from picking up some simple tricks/strategies from them that can elevate your designs upto that level too.
You might have heard of the Pareto principle which states that 80% of consequences come from 20% of the causes.We will apply the same principle in our designs and lift them up to that dribbble or behance level quality by modifying or using simple tricks.
Here we go:
Use a single font family only
Any web page on the internet consists of 90% type. If you remove that the images or other design elements probably won’t be helpful for the visitor. So, if more than 90% space is occupied by type on a page it only serves our best interest to pay some attention to it.
You might have heard the advice that you should use only a limited number of fonts in your designs. This number is often set to 2 or 3 at the most.
This is correct however I would suggest that you don’t even need 2 or 3, just 1 is enough.
Master using only a single font-family in your designs first and then progress towards using 2 or 3 fonts. Play with the weights/sizes in a single font family and you would be surprised how your design would seem more coherent, cleaner and more professional.
The rationale behind this tip is that as we mix different fonts/elements we need to take extra care that they match perfectly with each other. That needs a trained eye.
Deciding which fonts should be paired together takes a whole lot of practice and when you are just starting out you wont have an eye for it.
Minimising the fonts to just a single font family would also force you to think hard on how to use just a single font family to make your designs beautiful.
But fear not you can make variety of beautiful combinations using a single font family only. Master using a single font family and then slowly graduate towards using 2 or 3.
Use appropriate negative or White space
The elements on a page need some room to breathe. If you cramp a lot of design elements in a small space then they will all overpower each other and no one element will stand out. It would just make a mess. Try utilising negative or white space in your design instead.
Remove unnecessary elements from the page until you are left with only what is required and then provide breathing room for each element.
Use colors sparingly
Mastering color theory and its usage in actual design takes a lot of hard work and years of practice. Some blessed individuals might have an eye for it but for us mere mortals we have to practice a lot.
So in the beginning just use only a minimal amount of colors in your design. Mixing and matching different sets of colors to make your design look beautiful is an art which doesn’t come easily.
So keep the colors to the minimum. Use the colors in the ratio of 70–30–10.
Here 70% of the color would be your background color e.g. White.
30% of the color would be your secondary color e.g. black.
10% color would be the color that you use to highlight buttons and other Call to Action elements in your design.
You can also try to use a combination of 2 colors only. Just as with type the same principles apply to usage of colors as well. Master using 1 or 2 colors first and then slowly move onto increasing the number of colors in your designs.
Beautiful Hero section
The first section before scrolling that is visible to a user is often referred to as the Hero section. Now a simple trick to enhance the quality of your UI designs is to craft a beautiful Hero section.
You can do that by using various techniques like, big font size for the headings or a handcrafted illustration or using a 3D mockup of a product or using relevant stock photos etc.
The basic idea here is to just “WOW” the user. That first impression lasts within the mind of the user for the whole session. It basically sets the tone for the entire user experience.
First impression indeed becomes the lasting impression here.
Use grids
At the beginning you would have no idea where to place each element on a page to make it look good. For this purpose you can utilise grids to instantly ramp up the quality of your designs.
By using a grid you make sure that the spacing between different elements is the same and thus they all create a cohesive composition together.
There are gridless designs too but like in life first you need to understand the rules in order to be able to break them successfully. So first master the grid system and then move onto the designs which break the grid.
Bonus tip: I know I said only 5 tricks but who doesn’t love bonuses, so here is an additional tip:
Learn from the masters
If you want to master any field of life the number one trick is to copy from the masters. Now I am not suggesting here to just go out there and start copy pasting other designers’ work. No, don’t do that.
Instead, what you can do is take a design that you like and then try to recreate it pixel by pixel. This process will let you go through the mind of the original creator and what design decisions they took to create their own design. This will then grow your design muscle and your decision making power. You will start knowing the process of each designer and in turn grow your eye for design,
Soon, you will begin to spot patterns and your sense of what beautiful design is will continue to develop.
Bonus bonus tip: Yes, what can I say I love to see people happy 🙂
Go through design inspiration websites daily
This simple trick will enhance your sense of design. When you see a thing repeatedly your brain soon begins to connect the dots and patterns emerge which didn’t exist before.
Simply open dribbble, behance or Awwwards or any other design inspiration website that you like and go through beautiful designs. Maybe try incorporating the previous bonus tip and recreate one of those designs. This will develop your eye for good design and soon you will begin to see the quality of your own designs go up.
So, here is the summary of how you can become a UI design pro with 7 simple easy to use tricks:
- Use a single font family only
- Use ample negative space
- Use colors sparingly
- Beautiful Hero section
- Use grids
- Learn from the masters
- Go through design inspiration websites daily
Thank you for reading this article. If I was able to deliver even a tiny bit of value to you please do press that Like button, it would mean the world to me.