{"id":9025,"date":"2017-05-08T10:48:30","date_gmt":"2017-05-08T09:48:30","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=9025"},"modified":"2020-09-22T09:16:35","modified_gmt":"2020-09-22T08:16:35","slug":"can-master-design-must-first-master-fundamentals","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/","title":{"rendered":"Before You Can Master Design, You Must First Master the Fundamentals"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Last week, one of my readers sent in a question: <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">How do I become a better visual designer?<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Language is a way that people communicate concepts to one another. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Visual design is a visual language.<\/strong> And learning visual design is no different from learning a new language.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Good visual designs aren\u2019t born. They are made. <\/strong>The key to becoming a better visual designer is rigor. You will only improve as a visual designer if you make a conscious effort.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Good visual designs aren\u2019t born. They are made.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here are some fundamentals you should master so you can take your visual design to the next level.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Fundamental #1: Go back to the basics with\u00a0type<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can tell a lot about a designer by looking at their typography. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is because type is a fundamental basis for design.<\/strong><\/p>\n<div id=\"attachment_9054\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-JS9qoaHxjQDrOzMevwT64g.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9054\" class=\"size-full wp-image-9054\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-JS9qoaHxjQDrOzMevwT64g.png\" alt=\"Type as\u00a0imagery\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-JS9qoaHxjQDrOzMevwT64g.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-JS9qoaHxjQDrOzMevwT64g-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-JS9qoaHxjQDrOzMevwT64g-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-9054\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/1829402-Discount-Logotype\">Type as\u00a0imagery<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Develop a vocabulary for describing type. Learn about what terms like tracking, kerning, and leading mean. The article <a class=\"link link--blue fontWeight-4\"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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Then, if you want a comprehensive understanding of how to apply typography to the web, read <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/webtypography.net\/toc\/\">Web Typography: The Elements <em>of<\/em> Typographic Style Applied to the Web<\/a>.<\/p>\n<div id='gallery-1' class='gallery galleryid-9025 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vpYtKQ-Dpf74I697FrWTZQ.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"1127\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vpYtKQ-Dpf74I697FrWTZQ.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-1-9055\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vpYtKQ-Dpf74I697FrWTZQ.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vpYtKQ-Dpf74I697FrWTZQ-600x483.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vpYtKQ-Dpf74I697FrWTZQ-768x618.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-9055'>\n\t\t\t\t<a href=\"https:\/\/www.behance.net\/gallery\/35768979\/Typography-Google-Fonts-Combinations\">Font pairing can make or break a\u00a0design<\/a>\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Finally, learn how to pair fonts together. A great resource for this is <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.typewolf.com\/site-of-the-day\/fonts\/circular\">FontWolf<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/fontpair.co\/\">FontPair<\/a>. Being able to pair fonts together will dramatically change the dynamics of your design.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For a more in depth exploration of typography, you can read my article: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@JonathanZWhite\/typography-can-make-your-design-or-break-it-7be710aadcfe\">Typography can make your design\u2026 Or break it.<\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Fundamental #2: Use space to create\u00a0balance<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Spacing helps establish vertical and horizontal motion in your designs. It\u2019s pivotal for creating visual hierarchy and forming association between elements.<\/p>\n<div id=\"attachment_9056\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-Go7ZCGcIMD8t4W-XQ9M8fA.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9056\" class=\"wp-image-9056 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-Go7ZCGcIMD8t4W-XQ9M8fA.jpeg\" alt=\"Create balance and visual\u00a0harmony\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-Go7ZCGcIMD8t4W-XQ9M8fA.jpeg 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-Go7ZCGcIMD8t4W-XQ9M8fA-600x450.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-Go7ZCGcIMD8t4W-XQ9M8fA-768x576.jpeg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-9056\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/3318361-Weekly-Mixtape-08-Margin\">Create balance and visual\u00a0harmony<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can always look at sites like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.behance.net\/\">Behance<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/\">Dribbble<\/a> for inspiration on how to space elements. But <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">it\u2019s important to develop your own intuition for using space to create balance and visual harmony.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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 class=\"link link--blue fontWeight-4\"href=\"http:\/\/type.method.ac\/#\">KernType<\/a>, a game where you compare your kerning solution to a typographer\u2019s solution.<\/p>\n<div id=\"attachment_9057\" style=\"width: 1312px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-8BkonUnCDEgfhmwxESTI7g.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9057\" class=\"size-full wp-image-9057\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-8BkonUnCDEgfhmwxESTI7g.png\" alt=\"Simplification of award winning poster by Craig\u00a0Welsh\" width=\"1302\" height=\"838\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-8BkonUnCDEgfhmwxESTI7g.png 1302w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-8BkonUnCDEgfhmwxESTI7g-600x386.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-8BkonUnCDEgfhmwxESTI7g-768x494.png 768w\" sizes=\"auto, (max-width: 1302px) 100vw, 1302px\" \/><\/a><p id=\"caption-attachment-9057\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.howdesign.com\/design-competition-galleries\/poster-design-awards\/poster-design-winners\/\">Simplification of award winning poster by Craig\u00a0Welsh<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Fundamental #3: Use size to establish visual hierarchy<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When it comes to creating visual hierarchy, sizing is second to none. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">By using size to convey visual relationships between elements, you can establish flow.<\/strong><\/p>\n<div id=\"attachment_9058\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-vzUuGyuZAkjNL01dUxKj0Q.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9058\" class=\"size-full wp-image-9058\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-vzUuGyuZAkjNL01dUxKj0Q.png\" alt=\"Sizing is one of the reasons why grids are\u00a0useful\" width=\"1600\" height=\"1267\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vzUuGyuZAkjNL01dUxKj0Q.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vzUuGyuZAkjNL01dUxKj0Q-600x475.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vzUuGyuZAkjNL01dUxKj0Q-768x608.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-vzUuGyuZAkjNL01dUxKj0Q-1500x1188.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-9058\" class=\"wp-caption-text\">Sizing is one of the reasons why grids are\u00a0useful<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sizing is one of the reasons why grids are useful. You can use grids to help you size elements using ratios to convey importance.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once you have determined a size for an element, keep it the same across all instances of it. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In design, consistency is king.<\/strong><\/p>\n<div id=\"attachment_9059\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-De1u6HLHDzrq1Y_uosNguQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9059\" class=\"size-full wp-image-9059\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-De1u6HLHDzrq1Y_uosNguQ.png\" alt=\"Use size to establish visual hierarchy\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-De1u6HLHDzrq1Y_uosNguQ.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-De1u6HLHDzrq1Y_uosNguQ-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-De1u6HLHDzrq1Y_uosNguQ-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-9059\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2475367-Intercom-s-Developer-Hub\">Use size to establish visual hierarchy<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s an exercise that will help develop your eye for\u00a0sizing.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The key is asking for feedback.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When doing this exercise, keep the following questions in mind:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>What is the conversion goal of the landing page? How can you optimize to meet your goal?<\/li>\n<li>What is the relationship between different elements? What elements do you want to emphasize?<\/li>\n<li>Does your layout successfully guide a user\u2019s eye through the page?<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Fundamental #4: Use color to convey\u00a0meaning<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Color plays many roles. It conveys meaning, creates emotional resonance, and brings unity to designs.<\/p>\n<div id=\"attachment_9060\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-BzRqDemAU1GJnv-IZQ46jQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9060\" class=\"size-full wp-image-9060\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-BzRqDemAU1GJnv-IZQ46jQ.png\" alt=\"Color helps convey meaning in\u00a0design\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-BzRqDemAU1GJnv-IZQ46jQ.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-BzRqDemAU1GJnv-IZQ46jQ-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-BzRqDemAU1GJnv-IZQ46jQ-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-9060\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/3302492-Desktop-Search-Results\">Color helps convey meaning in\u00a0design<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For a deep dive into color, you can read my article <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.freecodecamp.com\/designing-in-color-abd358660a7b\">Designing in Color<\/a>. Here are a few key points from the article.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Identify the purpose of your design before choosing a color palette. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Good design align its color palette with its purpose.<\/strong><\/li>\n<li>Identify your audience. People perceive colors differently. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When choosing a color palette, simplicity is key.<\/strong> 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>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once you have a good grasp on the basics of color theory, color comes down to experimentation and iteration. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Actively try break out of your comfort zone and try new color palettes.<\/strong><\/p>\n<div id=\"attachment_9061\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-mNh06wbZh_pWx55ZHb0C7g.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9061\" class=\"size-full wp-image-9061\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/05\/1-mNh06wbZh_pWx55ZHb0C7g.png\" alt=\"Movies and shows are a great source of color inspiration\" width=\"1600\" height=\"900\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-mNh06wbZh_pWx55ZHb0C7g.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-mNh06wbZh_pWx55ZHb0C7g-600x338.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-mNh06wbZh_pWx55ZHb0C7g-768x432.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-mNh06wbZh_pWx55ZHb0C7g-1500x844.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-9061\" class=\"wp-caption-text\">Movies and shows are a great source of color inspiration<\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Here\u2019s an exercise that will help develop your eye for\u00a0color.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Take note of how it changes the mood and tone of the design. Does it change the meaning as well?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Rely on yourself to be the motivation to become a better designer.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What are you strategies for improving as a designer? Leave me a note or send me a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/jonathanzwhite\">tweet<\/a> on Twitter.<br \/>\nIf you enjoyed this article, you might also enjoy <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@JonathanZWhite\/css-in-javascript-the-future-of-component-based-styling-70b161a79a32\">CSS in Javascript with Aphrodite, a library by Khan Academy<\/a>.<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/medium.freecodecamp.com\/css-in-javascript-the-future-of-component-based-styling-70b161a79a32\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">CSS in JavaScript: The future of component-based styling<br \/>\n<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">This week, I want to introduce you to the concept of CSS in Javascript with Aphrodite by Khan Academy. Aphrodite lets\u2026<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can find me on Medium where I publish every week. Or you can follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/JonathanZWhite\">Twitter<\/a>, where I post non-sensical ramblings about design, front-end development, and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\">virtual reality<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/mrwhite.space\/signup\">Subscribe to my personal email list<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.freecodecamp.com\/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda\">Jonathan's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":22,"featured_media":9053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-9025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Before You Can Master Design, You Must First Master the Fundamentals | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"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... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-08T09:48:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-22T08:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-CL91MC3Ou2BnxeMzDBZ4uQ.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1322\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/1-CL91MC3Ou2BnxeMzDBZ4uQ.png\",\"width\":2000,\"height\":1322,\"caption\":\"Type as\\u00a0imagery\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/\",\"name\":\"Before You Can Master Design, You Must First Master the Fundamentals | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#primaryimage\"},\"datePublished\":\"2017-05-08T09:48:30+00:00\",\"dateModified\":\"2020-09-22T08:16:35+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\"},\"headline\":\"Before You Can Master Design, You Must First Master the Fundamentals\",\"datePublished\":\"2017-05-08T09:48:30+00:00\",\"dateModified\":\"2020-09-22T08:16:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/can-master-design-must-first-master-fundamentals\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\",\"name\":\"Jonathan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4d601181a5f57aac710c98e229d6a88d13ef8a8916903d5fb633c7283bbcc14b?s=96&d=mm&r=g\",\"caption\":\"Jonathan\"},\"description\":\"Bringing design thinking to engineering, closing the gap between the qualitative and quantitive. Follow me on Twitter or follow my writing on Medium.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/9025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=9025"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/9025\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/9053"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=9025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=9025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=9025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}