Language is a way that people communicate concepts to one another. Visual design is a visual language. And learning visual design is no different from learning a new language.Good visual designs aren’t born. They are made. The key to becoming a better visual designer is rigor. You will only improve as a visual designer if you make a conscious effort.

Design as language

<ul><li>You can tell a lot about a designer by looking at their typography. This is because type is a fundamental basis for design.</li><li>Use space to create balance Spacing helps establish vertical and horizontal motion in your designs.</li><li>Use size to establish visual hierarchy. When it comes to creating visual hierarchy, sizing is second to none. By using size to convey visual relationships between elements, you can establish flow.</li><li>Use color to convey meaning. Color plays many roles. It conveys meaning, creates emotional resonance, and brings unity to designs.</li></ul>

Mastering the fundamentals

<ul><li>Identify the purpose of your design before choosing a color palette. Good design align its color palette with its purpose.</li><li>Identify your audience. People perceive colors differently. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences.</li><li>When choosing a color palette, simplicity is key. Choose a neutral background color. Then choose a primary and secondary accent color. Finally based on your other colors, choose an error and success color for your different UI states.</li></ul>

Using colors

<figure><img alt="" src="https://miro.medium.com/max/500/1*CL91MC3Ou2BnxeMzDBZ4u" width="785" height="519"></figure><img alt="Jonathan Z. White" src="https://miro.medium.com/max/500/1*XEyMr6O5q12Uq0e9HrQvJQ" width="48" height="48">Last week, one of my readers sent in a question: How do I become a better visual designer?As I was thinking about how to answer this question, my mind wandered to my experience with learning Mandarin Chinese. Recently, I decided to teach myself Mandarin. When it comes to learning a new language, you first have to start with the fundamentals. Nouns, pronouns, and verbs form the basis for conveying more complex ideas.Language is a way that people communicate concepts to one another. Visual design is a visual language. And learning visual design is no different from learning a new language.Good visual designs aren’t born. They are made. The key to becoming a better visual designer is rigor. You will only improve as a visual designer if you make a conscious effort.Here are some fundamentals you should master so you can take your visual design to the next level.<h1 data-selectable-paragraph="">Fundamental #1: Go back to the basics with type</h1>You can tell a lot about a designer by looking at their typography. This is because type is a fundamental basis for design.<figure><img alt="" src="https://miro.medium.com/max/500/1*JS9qoaHxjQDrOzMevwT64g.png" width="680" height="510"><figcaption class="jz ka cs cq cr kb kc bp b fr br gt" data-selectable-paragraph="" dir="ltr"><a href="https://dribbble.com/shots/1829402-Discount-Logotype" class="bv kd" rel="noopener" dir="ltr">Type as imagery</a></figcaption></figure>You can create entire designs with just type. You can also base designs on type, taking subtle queues from the fonts that you choose. In order to improve the typography in your designs, first start by learning the basics.Develop a vocabulary for describing type. Learn about what terms like tracking, kerning, and leading mean. The article <a href="https://designschool.canva.com/blog/typography-terms/" rel="noopener" dir="ltr">A Beautifully Illustrated Glossary Of Typographic Terms You Should Know</a> is a great visual resource for learning those terms.Then, if you want a comprehensive understanding of how to apply typography to the web, read <a href="https://webtypography.net/toc/" rel="noopener" dir="ltr">Web Typography: The Elements of Typographic Style Applied to the Web</a>.<figure><img alt="" src="https://miro.medium.com/max/500/1*vpYtKQ-Dpf74I697FrWTZ" width="785" height="632"><figcaption class="jz ka cs cq cr kb kc bp b fr br gt" data-selectable-paragraph="" dir="ltr"><a href="https://www.behance.net/gallery/35768979/Typography-Google-Fonts-Combinations" class="bv kd" rel="noopener" dir="ltr">Font pairing can make or break a design</a></figcaption></figure>Finally, learn how to pair fonts together. A great resource for this is <a href="https://www.typewolf.com/site-of-the-day/fonts/circular" rel="noopener" dir="ltr">FontWolf</a> and <a href="http://fontpair.co/" rel="noopener" dir="ltr">FontPair</a>. Being able to pair fonts together will dramatically change the dynamics of your design.For a more in depth exploration of typography, you can read my article: <a rel="noopener follow" href="https://medium.com/@JonathanZWhite/typography-can-make-your-design-or-break-it-7be710aadcfe" dir="ltr">Typography can make your design… Or break it.</a><h1 data-selectable-paragraph="">Fundamental #2: Use space to create balance</h1>Spacing helps establish vertical and horizontal motion in your designs. It’s pivotal for creating visual hierarchy and forming association between elements.<figure><img alt="" src="https://miro.medium.com/max/500/1*Go7ZCGcIMD8t4W-XQ9M8fA.jpeg" width="680" height="510"><figcaption class="jz ka cs cq cr kb kc bp b fr br gt" data-selectable-paragraph="" dir="ltr"><a href="https://dribbble.com/shots/3318361-Weekly-Mixtape-08-Margin" class="bv kd" rel="noopener" dir="ltr">Create balance and visual harmony</a></figcaption></figure>You can always look at sites like <a href="https://www.behance.net/" rel="noopener" dir="ltr">Behance</a> and <a href="https://dribbble.com/" rel="noopener" dir="ltr">Dribbble</a> for inspiration on how to space elements. But it’s important to develop your own intuition for using space to create balance and visual harmony.When studying typography, you may have noticed the importance of spacing in type. Adjusting the kerning and leading for fonts is a great exercise for developing your eye for spacing. For this reason, I recommend you try <a href="http://type.method.ac/#" rel="noopener" dir="ltr">KernType</a>, a game where you compare your kerning solution to a typographer’s solution.<figure><img alt="" src="https://miro.medium.com/max/500/1*8BkonUnCDEgfhmwxESTI7g.png" width="680" height="438"><figcaption class="jz ka cs cq cr kb kc bp b fr br gt" data-selectable-paragraph="" dir="ltr"><a href="http://www.howdesign.com/design-competition-galleries/poster-design-awards/poster-design-winners/" class="bv kd" rel="noopener" dir="ltr">Simplification of award winning poster by Craig Welsh</a></figcaption></figure>Another exercise that will help develop your eye is the following: Take an existing design, draw an x and y axis, simplify the design into basic shapes, analyze how the design is balanced, and then rearrange the elements. Pay close attention to how negative space affects the balance of the elements.<h1 data-selectable-paragraph="">Fundamental #3: Use size to establish visual hierarchy</h1>When it comes to creating visual hierarchy, sizing is second to none. By using size to convey visual relationships between elements, you can establish flow.<figure><img alt="" src="https://miro.medium.com/max/500/1*vzUuGyuZAkjNL01dUxKj0Q.png" width="680" height="539"><figcaption dir="auto">Sizing is one of the reasons why grids are useful</figcaption></figure>Sizing is one of the reasons why grids are useful. You can use grids to help you size elements using ratios to convey importance.Once you have determined a size for an element, keep it the same across all instances of it. In design, consistency is king.<figure><img alt="" src="https://miro.medium.com/max/500/1*De1u6HLHDzrq1Y_uosNguQ.png" width="680" height="510"><figcaption class="jz ka cs cq cr kb kc bp b fr br gt" data-selectable-paragraph="" dir="ltr"><a href="https://dribbble.com/shots/2475367-Intercom-s-Developer-Hub" class="bv kd" rel="noopener" dir="ltr">Use size to establish visual hierarchy</a></figcaption></figure><h2 data-selectable-paragraph="">Here’s an exercise that will help develop your eye for sizing.</h2>The key is asking for feedback.Sketch or wireframe a landing page. Then ask a friend to look at your design. Get them to circle the elements that stand out the most. Afterwards, have them number the circled elements based on visual weight. Are the results what you expected?When doing this exercise, keep the following questions in mind:<UL><LI>What is the conversion goal of the landing page? How can you optimize to meet your goal?</LI><LI>What is the relationship between different elements? What elements do you want to emphasize?</LI><LI>Does your layout successfully guide a user’s eye through the page?</LI></UL><h1 data-selectable-paragraph="">Fundamental #4: Use color to convey meaning</h1>Color plays many roles. It conveys meaning, creates emotional resonance, and brings unity to designs.<figure><img alt="" src="https://miro.medium.com/max/500/1*BzRqDemAU1GJnv-IZQ46jQ.png" width="680" height="510"><figcaption class="jz ka cs cq cr kb kc bp b fr br gt" data-selectable-paragraph="" dir="ltr"><a href="https://dribbble.com/shots/3302492-Desktop-Search-Results" class="bv kd" rel="noopener" dir="ltr">Color helps convey meaning in design</a></figcaption></figure>For a deep dive into color, you can read my article <a href="https://medium.freecodecamp.com/designing-in-color-abd358660a7b" rel="noopener" dir="ltr">Designing in Color</a>. Here are a few key points from the article.<UL><LI>Identify the purpose of your design before choosing a color palette. Good design align its color palette with its purpose.</LI><LI>Identify your audience. People perceive colors differently. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences.</LI><LI>When choosing a color palette, simplicity is key. Choose a neutral background color. Then choose a primary and secondary accent color. Finally based on your other colors, choose an error and success color for your different UI states.</LI></UL>Once you have a good grasp on the basics of color theory, color comes down to experimentation and iteration. Actively try break out of your comfort zone and try new color palettes.<figure><img alt="" src="https://miro.medium.com/max/500/1*mNh06wbZh_pWx55ZHb0C7g.png" width="680" height="383"><figcaption dir="auto">Movies and shows are a great source of color inspiration</figcaption></figure><h2 data-selectable-paragraph="">Here’s an exercise that will help develop your eye for color.</h2>Spend time compiling color palettes for things around you like photographs, magazines, and your favorite shows. Then take an existing design and apply new color palettes to it.Take note of how it changes the mood and tone of the design. Does it change the meaning as well?Treat your work as a craft, in that there is always something that you can improve. Rely on yourself to be the motivation to become a better designer.What are you strategies for improving as a designer? Leave me a note or send me a <a href="https://twitter.com/jonathanzwhite" rel="noopener" dir="ltr">tweet</a> on Twitter.You can find me on Medium where I publish every week. Or you can follow me on <a href="https://twitter.com/JonathanZWhite" rel="noopener" dir="ltr">Twitter</a>, where I post non-sensical ramblings about design, front-end development, and virtual reality.P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.<figure><img alt="" src="https://miro.medium.com/max/500/1*mxQhZLqG7l5dMLvxYAklg" width="388" height="210"></figure><figure><img alt="" src="https://miro.medium.com/max/500/1*UOsjAdUZ9O0QSyfXOpQPb" width="387" height="210"></figure>

As I was thinking about how to answer this question, my mind wandered to my experience with learning Mandarin Chinese. Recently, I decided to teach myself Mandarin. When it comes to learning a new…

product

Product & Design

Last week, one of my readers sent in a question: How do I become a better visual designer?

As I was thinking about how to answer this question, my mind wandered to my experience with learning Mandarin Chinese. Recently, I decided to teach myself Mandarin. When it comes to learning a new language, you first have to start with the fundamentals. Nouns, pronouns, and verbs form the basis for conveying more complex ideas.

Language is a way that people communicate concepts to one another. Visual design is a visual language. And learning visual design is no different from learning a new language.

Good visual designs aren’t born. They are made. The key to becoming a better visual designer is rigor. You will only improve as a visual designer if you make a conscious effort.

Here are some fundamentals you should master so you can take your visual design to the next level.

Fundamental #1: Go back to the basics with type

You can tell a lot about a designer by looking at their typography. This is because type is a fundamental basis for design.

You can create entire designs with just type. You can also base designs on type, taking subtle queues from the fonts that you choose. In order to improve the typography in your designs, first start by learning the basics.

Develop a vocabulary for describing type. Learn about what terms like tracking, kerning, and leading mean. The article <a href="https://designschool.canva.com/blog/typography-terms/">A Beautifully Illustrated Glossary Of Typographic Terms You Should Know </a>is a great visual resource for learning those terms.

Then, if you want a comprehensive understanding of how to apply typography to the web, read <a href="https://webtypography.net/toc/">Web Typography: The Elements of Typographic Style Applied to the Web </a>.

Finally, learn how to pair fonts together. A great resource for this is <a href="https://www.typewolf.com/site-of-the-day/fonts/circular">FontWolf </a>and <a href="http://fontpair.co/">FontPair </a>. Being able to pair fonts together will dramatically change the dynamics of your design.

For a more in depth exploration of typography, you can read my article: <a href="https://medium.com/@JonathanZWhite/typography-can-make-your-design-or-break-it-7be710aadcfe">Typography can make your design… Or break it. </a>

Fundamental #2: Use space to create balance

Spacing helps establish vertical and horizontal motion in your designs. It’s pivotal for creating visual hierarchy and forming association between elements.

You can always look at sites like <a href="https://www.behance.net/">Behance </a>and <a href="https://dribbble.com/">Dribbble </a>for inspiration on how to space elements. But it’s important to develop your own intuition for using space to create balance and visual harmony.

When studying typography, you may have noticed the importance of spacing in type. Adjusting the kerning and leading for fonts is a great exercise for developing your eye for spacing. For this reason, I recommend you try <a href="http://type.method.ac/#">KernType </a>, a game where you compare your kerning solution to a typographer’s solution.

Another exercise that will help develop your eye is the following: Take an existing design, draw an x and y axis, simplify the design into basic shapes, analyze how the design is balanced, and then rearrange the elements. Pay close attention to how negative space affects the balance of the elements.

Fundamental #3: Use size to establish visual hierarchy

When it comes to creating visual hierarchy, sizing is second to none. By using size to convey visual relationships between elements, you can establish flow.

Sizing is one of the reasons why grids are useful. You can use grids to help you size elements using ratios to convey importance.

Once you have determined a size for an element, keep it the same across all instances of it. In design, consistency is king.

Here’s an exercise that will help develop your eye for sizing.

Sketch or wireframe a landing page. Then ask a friend to look at your design. Get them to circle the elements that stand out the most. Afterwards, have them number the circled elements based on visual weight. Are the results what you expected?

When doing this exercise, keep the following questions in mind:

<ul><li>What is the conversion goal of the landing page? How can you optimize to meet your goal? </li><li>What is the relationship between different elements? What elements do you want to emphasize? </li><li>Does your layout successfully guide a user’s eye through the page? </li> </ul>

Fundamental #4: Use color to convey meaning

Color plays many roles. It conveys meaning, creates emotional resonance, and brings unity to designs.

For a deep dive into color, you can read my article <a href="https://medium.freecodecamp.com/designing-in-color-abd358660a7b">Designing in Color </a>. Here are a few key points from the article.

<ul><li>Identify the purpose of your design before choosing a color palette. Good design align its color palette with its purpose. </li><li>Identify your audience. People perceive colors differently. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences. </li><li>When choosing a color palette, simplicity is key. Choose a neutral background color. Then choose a primary and secondary accent color. Finally based on your other colors, choose an error and success color for your different UI states. </li> </ul>

Once you have a good grasp on the basics of color theory, color comes down to experimentation and iteration. Actively try break out of your comfort zone and try new color palettes.

Here’s an exercise that will help develop your eye for color.

Spend time compiling color palettes for things around you like photographs, magazines, and your favorite shows. Then take an existing design and apply new color palettes to it.

Take note of how it changes the mood and tone of the design. Does it change the meaning as well?

Treat your work as a craft, in that there is always something that you can improve. Rely on yourself to be the motivation to become a better designer.

What are you strategies for improving as a designer? Leave me a note or send me a <a href="https://twitter.com/jonathanzwhite">tweet </a>on Twitter.

You can find me on Medium where I publish every week. Or you can follow me on <a href="https://twitter.com/JonathanZWhite">Twitter </a>, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.

Before you can master design, you must first master the fundamentals

Design as language

Mastering the fundamentals

Using colors

CURATED BY

Related collections

More like this