2 Fastest ways to be a better Visual Designer
Originally published at rohanmishra.design on November 28, 2018.
Recently I met few UI/UX Designers, and they asked me about how to make a significant improvement in their Visual Design?Or how to learn it faster?
So, I asked them why do you think that you are not good at Visual Design?
They said oh! Rohan, we go to Dribbble and Behance and see such amazing designs with amazing layouts, typography, color combination, and it makes us feel that we aren’t capable of doing it on our own.
And fortunately, I have helped several people learning and improving the same. So, I know a few ways to learn Visual Design Faster. So, today I am going to share two of them with you all.
When I was starting out, I didn’t know anything about these 2 ways. I just tried, experimented and failed. I tried red Comic Sans on blue and all that kind of stuff. And later I learned it’s too bad and even later I learned that it can be used for the purpose of Chromostereopsis.
I failed to crack it in the earlier stage of my Design career, but with those experiments, I learned what does not work. So, what does?
I have shared some of the best resources to learn UI/UX Design in my full of resources articles. You can check that out as well.
Last time we discussed How to design for Voice User Interfaces. So moving on, In this article, I am going to share visual design principles, and the two ways to learn and Improve Visual Design. So that you can use it for yourself and can share with anyone who wants to brush up their skills in Visual Design.
Let’s first discuss
What is the meaning of Visual Design and Why should we care about it?
Visual Design is the first impression of your product on your users, and as they say, the first impression lasts. As most of the people consider User Interface as Visual Design, I am on the side of User Interface + Graphics Design = Visual Design. High Fidelity Designs (HFDs) are the visual designs.
In this time when every company is fighting for their user’s attention, they can’t get their first impression i.e. Visual Design wrong. The case with Visual Design is you if you get it right no one except designer notices, but if you get it wrong, immediately your users know there is something wrong. Something that doesn’t belong here.
When we talk about Visual Design, it’s personally very fascinating for me to talk about Typography, Color Schemes, White Space and Layout and so on. But at the very core Hierarchy and Contrast are the keys in any Visual Design. Rest everything can be classified into this, or we use them to achieve these two.
And as we are on the topic of discussing Hierarchy and Contrast. From here on you will read a lot about the elements. So, that means I am talking about heading, text, button, icon, and all other things that are integrated to make a gorgeous Visual Design.
3 Visual Design Principles
Let’s just discuss the three main principles as well.
The Size of the individual elements
The Size of the element in a design is one of the most important factors in a Design. Size helps us to drive focus on an element and develop a hierarchy in our Interface. The bigger the size of an element the more visual weight it creates and in turn more attention it gets.
Hierarchy in the visual is the most important thing as it helps in easing the navigation for a user. Also, it helps in easy retrieval of data from the interface. Like, let’s just take the example of Medium the Header has a bigger size of the Subheader and same for the body text because we want to grab attention to the title first and so on.
Most of the people believe contrast, has everything to do with colors and very little to do with Size. Anything can’t be farther away from the truth.
Pro tip: One of the best ways to select the size of fonts is Type Scale made by Jeremy Church. Also, there are other tools out there for the same. You can refer to the Google Material Design and Apple Human-Computer Interface guidelines for better hierarchy and pairing.
Also, the size is one the most important factor in accessibility. If its too small, people might not click it. So, as you can see the Size plays a crucial role in the Hierarchy and Contrast.
The Space between the elements
The space around the elements or white space is very important in any design. In the absence of sufficient white space, the UI will look too cluttered, and it will affect the readability, findability and likeability of the product.
You shouldn’t just use white space as it is one of the fanciest things in design, but because White space also brings sufficient clarity and order in the design.
I myself have been a culprit of not giving sufficient white space to the elements in the initial phase of my design career. White Space is like breathing space in design without that the elements will choke to death.
I started adding sufficient white space, but I come from an experimental mindset. So, I added so much white space that it again looked bad. So, white space helps establish hierarchy and contrast, but too much of it will definitely hurt your design’s composition.
The worst case of too much white space is when the two elements belong to the same group are so apart that they look like different groups.
This is most important for the content heavy websites as if you don’t give enough spaces people might not find what they are looking for, miss out on important information and so on. Blogs are one such example of the readability experience.
The sufficient the white space better the reading experience.
Pro tip: Smaller the font size more the line spacing.
That brings us to the color of the elements.
The Color of the elements
I know you all were waiting for this so here it comes: Colors. Colors are undeniable of the most important factor in the hierarchy and contrast. Remember active and inactive buttons on your navigation bar to indicate what has been selected?
Colors are a very strong medium when used correctly for showing current state, active state, an active element, hover effects. Primary actions have the primary accent color to help the users.
Google and Apple have their own color selection methods. You can check Google’s color selection methods here.
There should be only one color to indicate interactivity. The Contrast can be used by using complementary colors; selecting two contrasting colors to define the primary(interactive) and secondary(non-interactive) actions. Also, the colors should be limited to prevent the consistency and standards of the product.
Protip: Use the Contrast ratio tool by Lea Verou to check the high contrast colors.
Now, as we have discussed the main principles in Visual Design now let’s discuss the 2 Ways by which you can learn or improve your Visual Design.
Copywork: The Secret Weapon in a Master Designer’s Quiver
Now, asrtists copy; great artists steal.
~Pablo Picasso
Copyworking is a technique used by artists, and writers for 100s of years all over the world to learn the skills faster. It’s a process of taking a masterpiece and copying it inch by inch, pixel by pixel to make the exact copy of the art or a piece. For those of you who heard this for the first time, let me tell you right here it works like magic.
As NeinQuarterly stated it:
Copywork works because while you are copying them, let you absorb the decisions and you make all the small design decisions again like why this small, why this color and you end up stealing those processes. In the process of copying, you have to separate all of its parts and rebuild it, piece by piece.
Copying equips you to take all those decisions next time without looking at it. So, you can learn by copy and apply to innovate. So, you understand that with Copy Work you do not just copy it, you understand why things are as the way they are.
So, now let’s discuss the process. It might take you hours in the beginning, but as you get better at these skills, you will see a difference. And why not you are learning from the best designers out there.
How to Copywork?
Copywork- 4 step detailed process:
1. Choose a website to copy.
The first step is to pick a website or mobile app from Behance, Dribbble, and Awwwards or any live app or website.
What are some visual design websites for inspiration?
For Inspiration for your visual design, you can visit Behance, Dribbble, Awwwards.
2. Think all design decisions through.
Think about the reason for the design decisions made by the Designers. There is a high probability that if something is there, it’s there for a reason.
3. Copy it pixel by pixel.
Get down and start making it exactly like the website, match each and every pixel, space, font, font-size. Try to replicate it as much as you can.
4. Do it repeatedly.
As you might know that according to brain researchers the only way we learn after the age 7 is by doing things repeatedly. Visual Design is no different you have to keep doing it to get better.
DailyUI.co- Daily UI Design Challenge, Design Resources, Design Inspiration
DailyUI.co is a platform that sends you a new problem statement every day for 100 days and you have to take up the challenge and make a high-fidelity design every day.
DailyUI.co is suggested by designers at Adobe, Disney, Samsung, Netflix and more. And as you take up the challenge you get better at designing solutions both at the functional and visual level.
It also helps in time management, the more designs you practice the better and faster you become. Obviously, your design and thinking skills increase.
When you apply the principle learned from Copy Work process in these challenges you will be able to see the results, like how your powers to take these small detailed design decisions about elements has evolved.
Most noteworthy Do not put your work out there claiming it’s your original work, these methods are just for learning purposes.
Hope it helps you like the way it helped me and my mentees.
Thanks for sticking around till the end. You made my day.
What processes do you follow to improve your visual designs? Do let me know in the comments section below. Help others be a better designer.
Thanks for reading. 👏
Liked this article? Do 50 claps.
Please tell me some of your learnings in the comments or drop me a Mail.
Originally published at rohanmishra.design on November 28, 2018.
