<p>Published on <a href="https://blog.prototypr.io/the-10-commandments-of-ui-ux-design-290247dfec0f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Ankur Haruray <img alt="" src="https://cdn-images-1.medium.com/max/319/1*UnQz4ERzDS6Ayzw4dTeQww.png"></p>
<h3>1. Thou shall always use the GRID.</h3>
<p>Grids allow you to design with precision, to make sure that you’re using consistent sizes and positioning no matter if you’re designing for the web, mobile applications, or icons.</p>
<p>Sketch has support for two kinds of grids; a regular (square) grid and a layout grid. Depending on the kind of work you need to do in Sketch, you may want to use one or the other, although it’s possible to view both.</p>
<h4>Regular Grid</h4>
<p>The regular grid is a typical square grid, that has settings to adjust the size of the blocks, to determine how often thicker lines should appear, as well as the ability to change the color of both options.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/736/0*zVhLvhBVz7RBio_k.jpg"></p>
<h4>Layout Grid</h4>
<p>The layout grid lets you define columns and rows, and is ideal when you’re designing for the web.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/736/0*oXlnfOsXtLYwI9nN.jpg"></p>
<p>With the layout grid, you can display columns, and rows along with appropriate settings for each.</p>
<p>Column options offers the ability to adjust the total width, with additional column and gutter widths, the number of columns, and whether there should be an offset.</p>
<p>Row options allow you to adjust the height of the gutter, and how tall rows should be in relation to the gutter height. Visual settings that affect both columns and rows allow you to change the color, as well as determining how they should be displayed.</p>
<p>Grids can only be applied to Artboards, or a Page <em>if</em> no Artboards are set. You can edit the layout or grid for multiple Artboards at the same time.</p>
<blockquote><p>Note: When grids are enabled, any objects will snap to the grid when moved, and will ignore snapping to smart guides if the option is enabled.</p></blockquote>
<h3>2. Thou shall make symbols</h3>
<p>Symbols is a powerful feature in Sketch that allows you to reuse elements easily across Artboards and Pages.</p>
<p>As you create a Symbol, you can automatically send a Symbol’s master to the Symbols Page. When you make a change to a Symbol’s master, the changes are applied to all Artboards and Pages in your document. In addition, each instance of a Symbol can be customized with overrides.</p>
<p>A Symbol is a single layer that mirrors the content from its master. In the Layer List it is displayed with a purple icon with syncing arrows. A common example of a Symbol is an element that is re-used throughout your design such as buttons, or a cell in a table view.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/736/0*_39Yt7uZcsGvZOUG.jpg"></p>
<p>Not only that, Symbol instances can be individually resized, and you can apply smart resizing rules to layers inside the Symbol to determine how they should behave when resizing.</p>
<h3>3. Thou shall make Consistent Design</h3>
<p>Anyone who tells you their product was a success because of the intuitive design they created is overselling their skills. There’s no such thing as intuitive design. We are socialised to understand our experiences. Any “intuitive” design is simply a combination of <strong>signifiers and affordances</strong> we’ve come to understand from previous experiences.</p>
<p>When you have a consistent design, there’s no arguing about what something should look or feel like. This isn’t to say our designs should be inflexible, but there should be a defined reason behind the experiences we create.</p>
<p>Once we define a look and feel, it’s much easier to build off that core and adapt in the future while maintaining consistency. This means we spend less time in meetings and more time building. And when we sit down to build, it means spending less time trying to decide how to make things different for the sake of being different — and more time focused on building the product we envisioned.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/192/1*TjFKdehk_WA9nwXLb7z9Dw.png"></p>
<h3>How to be consistent</h3>
<p>Consistency should be built into the foundation of any design. Only the best designers will recognise what’s been done</p>
<p>Consistency, while incredibly valuable, isn’t difficult to achieve. One of my favorite e-courses on how to create great UI design is <a href="http://www.invisionapp.com/ecourses/fundamental-ui-design"><em>Fundamental UI Design</em></a> by <a href="http://blog.invisionapp.com/business-knowledge-for-designers/">Jane Portman of UI Breakfast</a>.</p>
<p>Here’s a few tips from the e-course on how to make your design consistent:</p>
<ul>
<li>Introduce strong visual hierarchy, with the most important things big and bold</li>
<li>Align everything nicely along the grid, or introduce any other kind of visual order</li>
<li>Use a consistent color scheme throughout the app</li>
<li>Keep the navigation consistent across all screens</li>
<li>Re-use the same elements for different situations. For example, design a sample notification and color-code it for different situations.</li>
<li>Consistency and structure will help the user feel at home</li>
</ul>
<blockquote><p><strong>“Consistency should be built into the foundation of any design. Only the best designers will recognise what’s been done, but everyone who enjoys the product will appreciate it — whether they notice it or not.”</strong></p></blockquote>
<h3>4. Thou shall honor whitespace.</h3>
<p>Whitespace, many times referred to as negative space, is the portion of a page left unmarked, the portion that is left blank, or (as Mark would quote) the empty space in a page. In web design terms, it’s the space between graphics, columns, images, text, margins and other elements. It is the space left untouched in order to smooth things out and transform a page into something elegant. It is also the blank space that reminds us that simpler designs are beautiful and that we don’t need to create a layout filled with text and graphical elements to deliver a clear and direct message.</p>
<h4>How to Use Whitespace</h4>
<p>Here is an example from <a href="http://alistapart.com/articles/whitespace">Mark Buton’s article</a> showing the difference between using more white space in a direct mail piece. As you can see, the result is nice and elegant.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/460/1*1N0RLOg5eit2yakU65q6nw.jpeg"></p>
<p>Another good example of an interesting use of whitespace is the <a href="http://www.madebysofa.com/">Made by Sofa</a>website. Their website commands attention through its simple and clear design. Their site’s layout shows that you can get a nice result by tastefully positioning elements while leaving blank space between them.</p>
<h3>5. Thos shall under no circumstance stretch a font.</h3>
<h4><em>Every time you stretch a font, somewhere, a designer cries</em></h4>
<p>Don’t Stretch Fonts: Being a designer, you need to learn the basics of typography. And use these when designing. Don’t stretch fonts. Or, more properly, don’t stretch fonts to the point where you can see it has been stretched. Trajan is a font that can be stretched quite well without it being obvious. On the other hand, a font with a circular “O” would not stretch well. Designers will obviously notice stretched fonts more than your average Joe Blow, but even if a designer notices it, you haven’t done your job well.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/944/1*2XtbPIWAUvshVCW4kmvjVQ.png"></p>
<p>Use of Helvetica Condensed or any wider fonts instead stretch/squeeze. But there is no rule against using them. Sometimes they are the perfect font. And there is a reason they are used so often — they are great, versatile fonts.</p>
<h3>6. Thou shall never use Comic Sans or Papyrus.</h3>
<p>Ask people to name a font they hate, and whether they’re a type sophisticate or a card-carrying member of the Helvetica hoi polloi, they’ll name Comic Sans or Papyrus.</p>
<p>These two typefaces bear an oversize portion of the internet’s<a href="http://www.papyruswatch.com/"> collective hate</a> so much so that they have even inspired <em>Rosemary’s Baby–</em>style unholy spawn, a mash-up typeface called<a href="https://creativemarket.com/benharman/229510-Comic"> Comic Papyrus</a>, which combines Comic Sans’ gee-willikers credulity with Papyrus’ tattered strokes and general odor of beach-town crystal shops.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/680/1*tc_FmTZbZz_xah8h8uHXKA.jpeg"></p>
<p>I’d be willing to bet, though, that there’s another font you subconsciously hate. It hasn’t garnered the same opprobrium that Comic Sans and Papyrus have, but type designers rank it up there when it comes to wide and profligate misuse.</p>
<p>So keep your eye out for Mistral. Not only is it so much more fun to hate than Comic Sans and Papyrus when it is misused, but it’s probably due for a revival. As <a href="https://www.typewolf.com/site-of-the-day/jeremiah-shoaf">Typewolf’s Jeremiah Shoaf</a> says, it’s a perfect font to see a resurgence in today’s brutalist design trends. “It’s a common font that is now considered tacky, but it has a rawness to it,” he says. “It would probably feel right at home next to Times on<a href="https://www.google.co.in/search?q=Kendrick+Lamar%E2%80%99s+DAMN&amp;rlz=1C5CHFA_enIN771IN771&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwip1ZHQlc3XAhUCf7wKHd21C5gQ_AUICygC&amp;biw=1600&amp;bih=759"> Kendrick Lamar’s <em>DAMN</em> album cover</a>.”</p>
<h3>7. Thou shall make minimal designs.</h3>
<blockquote><p>You’ve probably heard the term ‘minimalism’ thrown about here and there, particularly in the past few years, but what exactly is it and how can we get the most out of it?</p></blockquote>
<p>Minimalism can be described as the stripping away of all unnecessary elements and focusing on what needs to be there. In this sense, minimalism encourages purpose.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*WHAGtr_GvtbfGeb7S2bXfw.jpeg"></p>
<p>While minimalism often appears simple on the outside, a lot of thought, practice and time goes into the production and development of a minimalistic piece. So, here are some ways you can get the most out of minimalism.</p>
<p>When designers talk about minimalism, there’s often a “you’ll know it when you see it” attitude about the technique. There is no perfect formula that makes something minimal or not.</p>
<p>There are, though, some common attributes that most designers can agree on. Characteristics of a minimal design style include:</p>
<ul>
<li>Work that is stripped down to fundamental elements</li>
<li>Simple functionality and user interaction</li>
<li>Details that carry weight for the entire project</li>
<li>Plenty of open space</li>
<li>Simple or little color</li>
<li>Use of only one or two typefaces with clean strokes</li>
<li>Simplified content</li>
</ul>
<p>This is more than just a graphic design theory. Minimalism is used across a number of disciplines including art, music, fashion, home decorating and literature. Often when people talk about minimalism, the phrase “less is more” gets repeated. While this may sound cliché, it is used because it is one of the best ways to describe the minimal style.</p>
<h3><strong>8. Thou shall use proper colour scheme.</strong></h3>
<p><strong><em>Did you know that Facebook is blue because Mark Zuckerberg is red-green color blind?</em></strong></p>
<p>“Blue is the richest color for me; I can see all of blue” says Zuckerberg. While this choice of color doesn’t seem very scientific, it’s still proves that a lot of thought is put into the choice of color.</p>
<p>As <a href="https://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue">Buffer</a> writes, over 90% of our assessment of a product is made on color alone, so it makes sense that color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long.</p>
<p>To get you started on your own palette, we’ve gathered 50 beautiful websites with versatile color schemes you can take inspiration from. So without further ado, let’s get knee-deep in some beautiful colors.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zH9K5AGuzqUutm7MTOCpFQ.jpeg"></p>
<blockquote><p>Color can make or break your design, so it’s important to choose it wisely when designing anything, particularly websites. Figure out what emotions and ideas you want to capture and try to build or replicate a palette that you feel best suits that idea.</p></blockquote>
<h3><strong>9. Thou shall </strong>not disregard readability/legibility for aesthetic reasons.</h3>
<p>So, what hinders readability and legibility? Well, a number of things can affect how much effort your reader has to put in. A common example is too low of a contrast between the text and background, keep contrast high to prevent this issue.</p>
<p>Another common mistake is the overuse of capital letters. Not only do capital letters make the reader feel like they are being YELLED AT, they also hinder the eye’s ability to distinguish letterforms. This is because when executed in caps, each letter has the same x-height and block-like shape, whereas in lowercase, the letterforms are more uniquely shaped, allowing for the eye to more easily identify each letter and word.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/662/1*yTSAu3UUJ2nxMthg0065NQ.jpeg"></p>
<p>One other mistake is type size, the usual offender being type that is too small. Consider your audience, would they have a difficult time reading this type? If you’re unsure do test prints and ask for others’ opinions, while your eyes may read it perfectly fine, others may not.</p>
<p>The takeaway is predominantly that just because it looks good, doesn’t always mean it communicates well. Treat your type with care!</p>
<h3>10. Tho shall balance his/her designs.</h3>
<p>Isn’t everything in life a search for balance? Design is no different. Designers must constantly juggle different elements to find harmony in their design. Imagine an invisible set of scales in each design and make sure you don’t tip the scales by cloistering elements on one side of your grid. The website design above does this cleanly by marrying large type elements (“What We Do” “Our Works”) with smaller, equal-sized paragraphs of longer explanatory copy.</p>
<p>Keep in mind that in terms of composition, white space (or negative space) is also an element. White space gives our eyes paths to follow through the design. Give each element on the page some space to breathe and balance between positive and negative space will emerge organically. You can see how moving the elements in the web design above closer together (thus shrinking the negative space and disrupting the balance of the piece) makes the design claustrophobic and ultimately unsuccessful.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/930/1*Q-insMLqETKbbOSevqh57Q.png"><em>What happens when you don’t have any white space.</em><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=290247dfec0f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/the-10-commandments-of-ui-ux-design-290247dfec0f">The 10 Commandments of UI/UX Design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


The 10 Commandments of UI/UX Design

1. Thou shall always use the GRID.

Top Stories