{"id":73765,"date":"2019-12-04T04:19:38","date_gmt":"2019-12-04T11:19:38","guid":{"rendered":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/"},"modified":"2019-12-04T04:19:38","modified_gmt":"2019-12-04T11:19:38","slug":"get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/","title":{"rendered":"Get Started With UI Design With These Tips To Speed Up Your Workflow"},"content":{"rendered":"Get Started With UI Design With These Tips To Speed Up Your Workflow<\/title><\/p>\n<article>\n<header>\n<h1>Get Started With UI Design With These Tips To Speed Up Your Workflow<\/h1>\n<address>Tom\u00e1\u0161 ?aklo\u0161<\/address>\n<p> <time datetime=\"2019-12-04T10:00:00+00:00\">2019-12-04T10:00:00+00:00<\/time><time datetime=\"2019-12-04T10:00:00+00:00\">2019-12-04T11:06:35+00:00<\/time><\/header>\n<p>This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements in a user interface \u2014 and so you\u2019ll need to set some rules and boundaries, or else the design workflow might become an unpleasant chore. You might be struggling with all of the possibilities and trying to pick the best option among many \u201ccorrect\u201d options. By setting (and following) some basic rules, you will make your design look more consistent, too.<\/p>\n<p>This article is intended for beginner UI designers. You don\u2019t need a lot of experience in order to be able to follow the tips and tricks shared in it.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a31c658-f490-41df-8645-9652e8152e7d\/ui-design-tips-speed-up-workflow-01.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-01.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a31c658-f490-41df-8645-9652e8152e7d\/ui-design-tips-speed-up-workflow-01.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a31c658-f490-41df-8645-9652e8152e7d\/ui-design-tips-speed-up-workflow-01.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a31c658-f490-41df-8645-9652e8152e7d\/ui-design-tips-speed-up-workflow-01.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a31c658-f490-41df-8645-9652e8152e7d\/ui-design-tips-speed-up-workflow-01.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-01.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"setting limits and rules helps designing\"><\/a><figcaption>\n Having a system is important!<br \/>\n <\/figcaption><\/figure>\n<h3>The Importance of Making Your User-Interface Design Consistent<\/h3>\n<p>Let\u2019s start at the very beginning. You want your design to look good and trustworthy, and you need to avoid chaos at all costs. For this to happen, it\u2019s very important to have a <strong>system<\/strong> for your design work.<\/p>\n<p>Your developers will appreciate a system, too \u2014 they\u2019ll love the fact that your design has order, and that you are making their work easier.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>A System Of Resizing By A Predetermined Size<\/h3>\n<p>It doesn\u2019t matter whether you want to resize a text block, resize an image, or adjust some white space. You need to decide how big each element will be. And I\u2019ll bet you have been in this situation: Have you ever chosen a size for an element, and after five minutes, you change it, and then again, and maybe again and again?<\/p>\n<p>Which size is perfect? It could be one of the ones you tried, right? You need to avoid this endless time-wasting trap!<\/p>\n<h4>Start By Choosing The Basic Unit: The 8-Pixel Grid<\/h4>\n<p>To make the whole design look cleaner, it\u2019s helpful to first set the measurement value that will then determine all of the sizes. It is completely up to you what value you choose, but quite often, the best option is to stick to a few proven rules. And one of these rules is to resize and move elements by exactly <strong>eight<\/strong> pixels. This rule will streamline your decision-making.<\/p>\n<p>Aside on <code>px<\/code> versus <code>dp<\/code>: <a href=\"https:\/\/stackoverflow.com\/questions\/2025282\/what-is-the-difference-between-px-dip-dp-and-sp\/42586514\">In addition to pixels<\/a> (px), you may have heard of the term <code>dp<\/code> being used in screen design and prototyping. The <code>dp<\/code> unit is short for \u201cdensity-independent pixel.\u201d The unit is relative to a 160-dpi screen, so 1 dp is equal to 1 pixel on a 160-dpi screen, and equal 2 pixels on a 320-dpi screen, and so on. The <a href=\"https:\/\/medium.com\/mockingbot\/why-ui-designers-are-using-dp-instead-of-pixel-as-unit-to-design-mobile-app-2c080f90936b\">numeric value formula<\/a> is <code>px = dp * (dpi\/160)<\/code>.<\/p>\n<p><strong>Note<\/strong>: <em>If you work with smaller elements or objects, it\u2019s also OK to use 4-pixel increments, instead of 8 \u2014 occasionally, you can make further adjustments, when required.)<\/em><\/p>\n<h4>But Why Exactly 8 Pixels?<\/h4>\n<p>There are a few reasons why eight often works like a \u201cmagic number\u201d here:<\/p>\n<ul>\n<li>Eight pixels is a sufficient minimum \u201cjump\u201d.<\/li>\n<li>Eight is a great number because it is divisible by four and two.<\/li>\n<li>If you use eight, you can easily resize any element without ending up with half pixels, as 8 \/ 2 = 4, 4 \/ 2 = 2, and 2 \/ 2 = 1. If, on the other hand, you start with 10, you\u2019ll end up with 5 pixels, then 2.5 pixels, then 1.25 pixels. When designing for screen, you\u2019d like to avoid half pixels as much as possible. By using whole pixels, elements in the design will align to precise pixel boundaries, and so will look crisper.<\/li>\n<li>Multiples of eight (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc.) are intertwined with binary values (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, etc.).<\/li>\n<li>Finally, the numbers are easy to remember.<\/li>\n<\/ul>\n<h4>What Are The Advantages Of Using An 8-Pixel Grid?<\/h4>\n<ul>\n<li>As a designer, your decision time is precious. This will make you faster and more efficient.<\/li>\n<li>If you are working with a developer, you can create a system that will help you and your team. If the developer needs to make some quick changes, he can adjust the values by 8-pixel increments. This will ensure consistency and order.<\/li>\n<li>People using your website will feel comfortable when they visit it. They will trust the website, and it\u2019ll be easier for them to use the interface.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ec713d1-0246-450e-abce-3123889b5865\/ui-design-tips-speed-up-workflow-02.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-02.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ec713d1-0246-450e-abce-3123889b5865\/ui-design-tips-speed-up-workflow-02.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ec713d1-0246-450e-abce-3123889b5865\/ui-design-tips-speed-up-workflow-02.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ec713d1-0246-450e-abce-3123889b5865\/ui-design-tips-speed-up-workflow-02.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ec713d1-0246-450e-abce-3123889b5865\/ui-design-tips-speed-up-workflow-02.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-02.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"8 pixel grid\"><\/a><figcaption>\n An effective way of using the 8px grid<br \/>\n <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d7f4c930-10c9-436c-be8d-86f0459eb7da\/ui-design-tips-speed-up-workflow-03.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-03.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d7f4c930-10c9-436c-be8d-86f0459eb7da\/ui-design-tips-speed-up-workflow-03.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d7f4c930-10c9-436c-be8d-86f0459eb7da\/ui-design-tips-speed-up-workflow-03.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d7f4c930-10c9-436c-be8d-86f0459eb7da\/ui-design-tips-speed-up-workflow-03.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d7f4c930-10c9-436c-be8d-86f0459eb7da\/ui-design-tips-speed-up-workflow-03.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-03.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"using an 8 pixel grid\"><\/a><figcaption>\n The result of using an 8px grid<br \/>\n <\/figcaption><\/figure>\n<h3>Work With A Grid To Lay Out All Elements<\/h3>\n<h4>Horizontal Harmony<\/h4>\n<p>I\u2019m sure you have already used a grid when designing websites. Using a grid helps you to accurately place all elements on the digital canvas.<\/p>\n<p>The grid forms the skeleton of your interface and determines where you can place elements. The template holds the composition, and it defines clear boundaries so that your design will be more consistent. Now it will be easier for you to decide where to put the elements. As you gain more experience, you can update the boundaries as needed.<\/p>\n<p>But how do you create this grid? We will cover the specifics next. Basically, the number and size of columns may be random and depends on your needs. The more detailed your design, the more columns the grid will require. If you\u2019re hesitant, ask an experienced colleague for assistance.<\/p>\n<p>Also, I recommend that you read \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/comprehensive-guide-ui-design\/\">A Comprehensive Guide to UI Design<\/a>\u201d, which should help you understand user-interface design a bit more in depth.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9d0bab35-99e1-45c8-b527-2321a61b34ac\/ui-design-tips-speed-up-workflow-04.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-04.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9d0bab35-99e1-45c8-b527-2321a61b34ac\/ui-design-tips-speed-up-workflow-04.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9d0bab35-99e1-45c8-b527-2321a61b34ac\/ui-design-tips-speed-up-workflow-04.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9d0bab35-99e1-45c8-b527-2321a61b34ac\/ui-design-tips-speed-up-workflow-04.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9d0bab35-99e1-45c8-b527-2321a61b34ac\/ui-design-tips-speed-up-workflow-04.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-04.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"horizontal harmony\"><\/a><figcaption>\n Horizontal harmony<br \/>\n <\/figcaption><\/figure>\n<h4>Vertical Harmony<\/h4>\n<p>Similar to maintaining horizontal harmony, it is important to keep vertical distances consistent in a design as well. Like the rows in a spreadsheet, they help you to keep text at evenly spaced intervals.<\/p>\n<p>How big should these rows be? Again, it\u2019s up to you. However, I recommend using 8 pixels or multiples of 8 (such as 16). Redefine boundaries where elements or text are to be aligned.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33ff648f-d01f-449a-a483-cb004c067372\/ui-design-tips-speed-up-workflow-05.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-05.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33ff648f-d01f-449a-a483-cb004c067372\/ui-design-tips-speed-up-workflow-05.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33ff648f-d01f-449a-a483-cb004c067372\/ui-design-tips-speed-up-workflow-05.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33ff648f-d01f-449a-a483-cb004c067372\/ui-design-tips-speed-up-workflow-05.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33ff648f-d01f-449a-a483-cb004c067372\/ui-design-tips-speed-up-workflow-05.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-05.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"vertical harmony\"><\/a><figcaption>\n Vertical harmony<br \/>\n <\/figcaption><\/figure>\n<h3>Picking Font Sizes The Right Way<\/h3>\n<p>If you look at some well-crafted designs, you will see consistency in font sizes. This is for a reason.<\/p>\n<p><strong>Note<\/strong>: <em>Keep in mind also that you need only <a href=\"https:\/\/www.lifewire.com\/use-fewer-fonts-1074171\">two, maybe three, fonts<\/a> in your design. However, selecting the right typefaces and making them work together is beyond the scope of this tutorial.<\/em><\/p>\n<p>Begin by defining a few key font sizes to use throughout the project. (For example, it would be foolish to use 30, 31, and 32 pixels. Rather, combine these three very similar sizes into one.)<\/p>\n<div><\/div>\n<h4>Standard Font Sizes Bring Two Benefits:<\/h4>\n<ul>\n<li>Your design will be more consistent and more elegant.<\/li>\n<li>It will speed up the design process and make you more efficient.<\/li>\n<\/ul>\n<h4>Font Sizes<\/h4>\n<p>When you are defining font sizes, make sure not to increase sizes by the same increment. When you are enlarging text, it should be non-linear. This means that the larger the text you are creating, the larger the increment should be.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/eda0d185-3635-41b5-902a-e8e40362083e\/ui-design-tips-speed-up-workflow-06.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-06.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/eda0d185-3635-41b5-902a-e8e40362083e\/ui-design-tips-speed-up-workflow-06.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/eda0d185-3635-41b5-902a-e8e40362083e\/ui-design-tips-speed-up-workflow-06.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/eda0d185-3635-41b5-902a-e8e40362083e\/ui-design-tips-speed-up-workflow-06.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/eda0d185-3635-41b5-902a-e8e40362083e\/ui-design-tips-speed-up-workflow-06.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-06.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"system in font sizes\"><\/a><figcaption>\n Having a system in font sizes<br \/>\n <\/figcaption><\/figure>\n<p>Let\u2019s say you have a text block with a 12-pixel font size, and you want to enlarge it. You try 14 pixels, and you are satisfied. But then imagine that you have a large headline (40 pixels) and you want to make it bigger. Would you increase the size by only 2 pixels, from 40 to 42? Of course not. Optically, the text requires a much bigger change. You might need to increase it by 24 pixels, giving you a bigger 64-pixel headline.<\/p>\n<p>In short, this means that the bigger you want the text to be, the larger the increment you will need to use. This very simple principle applies not only to text, but also to the size of buttons, white space, and everything else.<\/p>\n<p>It is typically based on a geometric progression. Here is a very useful chart demonstrating font scale:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e32d673f-354b-48f4-a809-5109970b2250\/ui-design-tips-speed-up-workflow-07.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-07.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e32d673f-354b-48f4-a809-5109970b2250\/ui-design-tips-speed-up-workflow-07.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e32d673f-354b-48f4-a809-5109970b2250\/ui-design-tips-speed-up-workflow-07.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e32d673f-354b-48f4-a809-5109970b2250\/ui-design-tips-speed-up-workflow-07.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e32d673f-354b-48f4-a809-5109970b2250\/ui-design-tips-speed-up-workflow-07.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-07.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"geometric progression\"><\/a><figcaption>\n Geometric progression<br \/>\n <\/figcaption><\/figure>\n<p>However, for typography, one proven scale is used with font sizes that you will want to stick with forever. The scale is 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/83724939-7105-4dba-99bf-4823c1b60c21\/ui-design-tips-speed-up-workflow-08.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-08.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/83724939-7105-4dba-99bf-4823c1b60c21\/ui-design-tips-speed-up-workflow-08.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/83724939-7105-4dba-99bf-4823c1b60c21\/ui-design-tips-speed-up-workflow-08.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/83724939-7105-4dba-99bf-4823c1b60c21\/ui-design-tips-speed-up-workflow-08.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/83724939-7105-4dba-99bf-4823c1b60c21\/ui-design-tips-speed-up-workflow-08.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-08.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"typography scale\"><\/a><figcaption>\n Proven typography scale for sizes<br \/>\n <\/figcaption><\/figure>\n<h4>Text Line Height<\/h4>\n<p>Once you have defined all font sizes, you will want to take care of line spacing. For line height, use increments of 4 pixels again. For example, for 16-pixel text, let\u2019s set the line height to 24 pixels. If you want the text to breathe more, then increase the row height by 4 pixels to 28.<\/p>\n<div><\/div>\n<h3>Define Your Project\u2019s Colors<\/h3>\n<p>Do you know how many color combinations exist? A lot! You will waste too much time if you don\u2019t predefine shades of color. You can\u2019t limit yourself to black, white, and, say, blue. For each color, you will need other shades, and it is important to set them in advance, so that the shades are consistent throughout your design project. We don\u2019t want to create chaos in the design. Aim for 5 to 10 shades for each color. I prefer to define 9 shades for each color.<\/p>\n<p>Let\u2019s take a closer look at color shades.<\/p>\n<h4>Why 9 Shades Of Each Color?<\/h4>\n<ul>\n<li>\n<p>The first advantage is color naming. Whether you are using a graphics editor or CSS code, you will definitely benefit from this tip. Each shade would be assigned a number, such as 100, 200, 300, 400, 500, 600, 700, 800, and 900. (Why hundreds? Typically, this is how <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-weight\">cuts of typefaces are also organized<\/a>.)<\/p>\n<\/li>\n<li>\n<p>Secondly, 9 is a handy number for defining colors. The best way to prepare these shades is to prepare a row of 9 squares and fill the squares with colors. The one in the middle will be the <strong>base color<\/strong>. Then, you define the lightest shade (at the far left) and the darkest shade (at the far right). The next step is to select the hues in between.<\/p>\n<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/356a7581-eefd-492a-b346-d5ab92f1fcc1\/ui-design-tips-speed-up-workflow-09.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-09.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/356a7581-eefd-492a-b346-d5ab92f1fcc1\/ui-design-tips-speed-up-workflow-09.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/356a7581-eefd-492a-b346-d5ab92f1fcc1\/ui-design-tips-speed-up-workflow-09.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/356a7581-eefd-492a-b346-d5ab92f1fcc1\/ui-design-tips-speed-up-workflow-09.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/356a7581-eefd-492a-b346-d5ab92f1fcc1\/ui-design-tips-speed-up-workflow-09.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-09.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"nine shades of each color\"><\/a><figcaption>\n Nine shades of each color<br \/>\n <\/figcaption><\/figure>\n<h3>Prepare The Different Sizes, Types, And States Of Elements<\/h3>\n<p>When working on a design, you will usually work with a countless number of icons, buttons, and other components. Again, it\u2019s a good idea to prepare in advance several sizes for them, and limit the options to as few as possible. During the design process, do not add other sizes, and don\u2019t try to adjust the size of components to suit your needs. Instead, just use the ones you have already defined, and the whole design will be more consistent and clean.<\/p>\n<p>Let\u2019s look at buttons as an example. When you begin, you\u2019ll need to define their hierarchical structure. To do so, make a button with a primary action, a button with a secondary action, and perhaps another button with a less important action. For each button, specify its status (active, inactive) and the color variant. Always try to reduce the number of elements to the most important ones.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ff68568-aad1-42c4-beea-76ab793021c2\/ui-design-tips-speed-up-workflow-10.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-10.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ff68568-aad1-42c4-beea-76ab793021c2\/ui-design-tips-speed-up-workflow-10.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ff68568-aad1-42c4-beea-76ab793021c2\/ui-design-tips-speed-up-workflow-10.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ff68568-aad1-42c4-beea-76ab793021c2\/ui-design-tips-speed-up-workflow-10.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0ff68568-aad1-42c4-beea-76ab793021c2\/ui-design-tips-speed-up-workflow-10.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-10.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"button styles\"><\/a><figcaption>\n An example of button styles<br \/>\n <\/figcaption><\/figure>\n<h3>Define Other Elements\u2019 Properties<\/h3>\n<p>User interface designers <a href=\"https:\/\/medium.com\/nyc-design\/how-to-make-ui-shadows-that-dont-suck-53827f2f2cb\">often use shadows in their design work<\/a>. However, for less-experienced designers, shadows can sometimes be a struggle. When creating a shadow, you must set the shadow\u2019s distance along the x-axis and y-axis, and also the blur radius, color, and transparency. Shadows can take a lot of time to fine-tune, which is why you\u2019ll want to prepare them before diving into the design. It is helpful to prepare a set of shadows (using the same method as for colors), and then just apply them throughout the design process.<\/p>\n<p>Also, be aware of all the other properties of elements that you will be working with, such as corner radius, transparency, and color gradients.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f860d393-406b-4510-adb3-201c1762985f\/ui-design-tips-speed-up-workflow-11.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-11.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f860d393-406b-4510-adb3-201c1762985f\/ui-design-tips-speed-up-workflow-11.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f860d393-406b-4510-adb3-201c1762985f\/ui-design-tips-speed-up-workflow-11.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f860d393-406b-4510-adb3-201c1762985f\/ui-design-tips-speed-up-workflow-11.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f860d393-406b-4510-adb3-201c1762985f\/ui-design-tips-speed-up-workflow-11.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-11.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"shadow styles\"><\/a><figcaption>\n An example of shadow styles<br \/>\n <\/figcaption><\/figure>\n<h3>White Space<\/h3>\n<p>Properly adjusting white space is important. Whether you offset elements from the outside (margin) or from the inside (padding), you should rely on the magic number of 8 again. Increase the offset by 8 pixels (4 for small elements). As with font size, the larger the gap you want, the larger the increment will have to be (again, you\u2019ll need to define these increments in advance).<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a70f40cf-a95e-4419-add7-287a747b9087\/ui-design-tips-speed-up-workflow-12.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-12.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a70f40cf-a95e-4419-add7-287a747b9087\/ui-design-tips-speed-up-workflow-12.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a70f40cf-a95e-4419-add7-287a747b9087\/ui-design-tips-speed-up-workflow-12.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a70f40cf-a95e-4419-add7-287a747b9087\/ui-design-tips-speed-up-workflow-12.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a70f40cf-a95e-4419-add7-287a747b9087\/ui-design-tips-speed-up-workflow-12.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-12.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"white space\"><\/a><figcaption>\n White space<br \/>\n <\/figcaption><\/figure>\n<h3>Conclusion<\/h3>\n<p>To make your designs clean and consistent, define some boundaries and a clear path through the process.<\/p>\n<p>When working on each element of your design, keep in mind the following:<\/p>\n<ul>\n<li>See whether you have used it already somewhere in your design. If so, you can simply copy that element.<\/li>\n<li>Follow a horizontal and vertical rhythm, and adjust the size of elements using the steps that you defined at the very beginning.<\/li>\n<li>Avoid complicated decisions and never-ending battles with pixels. Have a system in place.<\/li>\n<li>Do not create the same element twice. If there is order in your design, your work will be better and more efficient, you will be able to iterate faster, and you will be able to communicate with the developers more easily. The developers will set variables that follow your styles, so define them clearly. You\u2019ll get a clean design, and the developers will be able to create better and more sustainable code. Everyone will be happy.<\/li>\n<\/ul>\n<h4>Related Reading<\/h4>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2017\/12\/building-better-ui-designs-layout-grids\/\">Building Better UI Designs With Layout Grids<\/a>,\u201d Nick Babich, Smashing Magazine<\/li>\n<li>\u201c<a href=\"https:\/\/stackoverflow.com\/questions\/2025282\/what-is-the-difference-between-px-dip-dp-and-sp\/42586514\">What Is The Difference Between \u201cpx\u201d, \u201cdip\u201d, \u201cdp\u201d And \u201csp\u201d?<\/a>,\u201d Stack Overflow<\/li>\n<li>\u201c<a href=\"https:\/\/medium.com\/mockingbot\/why-ui-designers-are-using-dp-instead-of-pixel-as-unit-to-design-mobile-app-2c080f90936b\">Why UI Designers Are Using \u201cdp\u201d Instead Of \u201cpixel\u201d As The Unit To Design Mobile Apps?<\/a>,\u201d Kikahola, Medium<\/li>\n<li>\u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-weight\"><code>font-weight<\/code> CSS property<\/a>,\u201d Mozilla Developer Network web docs<\/li>\n<li>\u201c<a href=\"https:\/\/www.lifewire.com\/use-fewer-fonts-1074171\">Step Up Your Design Game By Using Fewer Fonts<\/a>,\u201d Jacci Howard Bear, Lifewire<\/li>\n<li>\u201c<a href=\"https:\/\/medium.com\/nyc-design\/how-to-make-ui-shadows-that-dont-suck-53827f2f2cb\">Creating UI Shadows That Don\u2019t Suck<\/a>,\u201d Anastasia Kas, Medium<\/li>\n<li>\u201c<a href=\"https:\/\/www.canva.com\/learn\/combining-fonts-10-must-know-tips-from-a-designer\/\">10 Golden Rules You Should Live By When Combining Fonts: Tips From A Designer<\/a>,\u201d Janie Kliever , Canva<\/li>\n<li>\u201c<a href=\"https:\/\/material.io\/design\/layout\/spacing-methods.html#baseline\">Material Design: 8 dp Grid, 4 dp Grid<\/a>,\u201d Google Help<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/why-some-designs-look-messy-and-others-dont-1755b8ce22ff\">Why Some Designs Look Messy, And Others Don\u2019t<\/a>,\u201d Reinoud Schuijers, UX Collective<\/li>\n<\/ul>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/logo-red-4.png?w=900&ssl=1\" alt=\"Smashing Editorial\"><span>(mb, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\" rel=\"noopener noreferrer\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Get Started With UI Design With These Tips To Speed Up Your Workflow Get Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00 This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can…<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":73766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-73765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-04T11:19:38+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-12-04T11:19:38+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#article\",\"name\":\"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies\",\"headline\":\"Get Started With UI Design With These Tips To Speed Up Your Workflow\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/ui-design-tips-speed-up-workflow-01.png?fit=400%2C200&ssl=1\",\"width\":400,\"height\":200},\"datePublished\":\"2019-12-04T04:19:38-07:00\",\"dateModified\":\"2019-12-04T04:19:38-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#listItem\",\"name\":\"Get Started With UI Design With These Tips To Speed Up Your Workflow\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#listItem\",\"position\":3,\"name\":\"Get Started With UI Design With These Tips To Speed Up Your Workflow\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/\",\"name\":\"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies\",\"description\":\"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\\u00e1\\u0161 ?aklo\\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/ui-design-tips-speed-up-workflow-01.png?fit=400%2C200&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#mainImage\",\"width\":400,\"height\":200},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\\\/#mainImage\"},\"datePublished\":\"2019-12-04T04:19:38-07:00\",\"dateModified\":\"2019-12-04T04:19:38-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies","description":"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#article","name":"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies","headline":"Get Started With UI Design With These Tips To Speed Up Your Workflow","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-01.png?fit=400%2C200&ssl=1","width":400,"height":200},"datePublished":"2019-12-04T04:19:38-07:00","dateModified":"2019-12-04T04:19:38-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#listItem","name":"Get Started With UI Design With These Tips To Speed Up Your Workflow"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#listItem","position":3,"name":"Get Started With UI Design With These Tips To Speed Up Your Workflow","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/","name":"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies","description":"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-01.png?fit=400%2C200&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#mainImage","width":400,"height":200},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/#mainImage"},"datePublished":"2019-12-04T04:19:38-07:00","dateModified":"2019-12-04T04:19:38-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies","og:description":"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/","article:published_time":"2019-12-04T11:19:38+00:00","article:modified_time":"2019-12-04T11:19:38+00:00","twitter:card":"summary","twitter:title":"Get Started With UI Design With These Tips To Speed Up Your Workflow | Design for Immersive Technologies","twitter:description":"Get Started With UI Design With These Tips To Speed Up Your WorkflowGet Started With UI Design With These Tips To Speed Up Your Workflow Tom\u00e1\u0161 ?aklo\u0161 2019-12-04T10:00:00+00:002019-12-04T11:06:35+00:00This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements"},"aioseo_meta_data":{"post_id":"73765","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 16:25:20","updated":"2026-09-02 15:37:28","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tGet Started With UI Design With These Tips To Speed Up Your Workflow\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Get Started With UI Design With These Tips To Speed Up Your Workflow","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/get-started-with-ui-design-with-these-tips-to-speed-up-your-workflow\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-jbL","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/ui-design-tips-speed-up-workflow-01.png?fit=400%2C200&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=73765"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/73766"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=73765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=73765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=73765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}