large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Saadia Minhas <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vRK83zc1sORMRlO6Pj92cA.jpeg"><a href="https://unsplash.com/">Unsplash</a></p>
<h3>What Are UI Guidelines?</h3>
<p>While working on UI design, few principles and guidelines are required to follow that help you design a standard and consistent experience throughout your products.</p>
<p>UI guidelines explain the best practices of UI components and understanding of their behavior by giving real examples.</p>
<p>These guidelines are usually defined at organization level and equally helpful for designers, developers and testers.</p>
<blockquote><p>“A guideline is a visual language communicating the design goals to the team, it is important to make sure that everyone can understand it and to enforce its usage.” — Yuki Gu</p></blockquote>
<p>Few popular organizations who are much concerned about user experience have published their guidelines on their websites.</p>
<p>This is helpful for companies as well as individuals who create apps and plug-ins for them. Also, anyone can customize and use these guidelines as per their requirements.</p>
<h3>Why UI Guidelines Are Important?</h3>
<blockquote><p>“User interface is easy to make a mess out of. You can start a project with one style and end with another. It doesn’t matter if you are a guru or just dabbling, inconsistencies in the design will most probably arise. Don’t Worry! There is an easy solution: UI guidelines.” — Yuki Gu</p></blockquote>
<p>Principles and guidelines are required to define and follow in UX design process due to several reasons.</p>
<ul>
<li>They enforce consistent experience throughout your products.</li>
<li>In addition to specs of UI components, guidelines also describe best practices. It makes easier for a reader to decide about the right choice.</li>
<li>They make learning easier. New members are trained about standards and behaviors with a little effort.</li>
<li>Designers don’t have to create specs each time they design a feature.</li>
<li>Developers don’t have to wait for specs and they can refer to guidelines and build interfaces.</li>
<li>It is convenient to update guidelines based on new standards and trends, and update your designs accordingly.</li>
</ul>
<p>Hence, if you want to design a cohesive and consistent experience among your products, then you must have a set of guidelines with you.</p>
<h3>Types of UI Guidelines</h3>
<p>Based on their usage, Guidelines can be categorized as follows.</p>
<h4>Style</h4>
<p>Style guidelines define the visual expression of an organization that it presents to the world. Every organization has its own style guide which they use to build logos, colors, icons and typography.</p>
<h4>Layout</h4>
<p>Layout guidelines define the overall structure of interface. UI can be designed using grid layout or list layout.</p>
<p>This section of guidelines also contains behavior of responsive design.</p>
<h4>UI Components</h4>
<p>These guidelines provide specs and usage of UI components that display on interface and a user interacts with them.</p>
<p>UI components include standard controls like input controls, windows, dialogs, panels, menus, views, scrollbars, buttons and many other similar items.</p>
<h4>Text</h4>
<p>Textual guidelines cover tone and style of text to be used on UI. Text should be understandable for different cultures and audience.</p>
<p>Text specs like font size, color, and style are part of these guidelines. Text displays on UI as fields, labels, messages, and information for user.</p>
<h4>Interaction And Behavior</h4>
<p>Types of interaction (click, gesture, voice) that a user performs with a design, and system response in return to these interactions are part of these guidelines.</p>
<h4>Platform</h4>
<p>Platforms are changing rapidly where softwares and apps are being developed for mobile, wearable and auto car in addition to conventional desktop systems.</p>
<p>The UI guidelines of an organization cover details of all types of supported platforms and resolutions.</p>
<h4>Accessibility</h4>
<p>Designing an accessible system requires specific set of guidelines for different types of disabled users, so that they can access the design like a normal user.</p>
<h4>Patterns</h4>
<p>Reusable design patterns are included in UI guidelines. These patterns define behavior for certain controls.</p>
<p>Few examples are navigation, search, forms, data formats, states, and pagination.</p>
<h4>Resources</h4>
<p>Guidelines have a collection of resources that can be used while designing a system.</p>
<p>These resources contain layout templates for multiple devices, icon sets, font libraries, UI components and color palettes.</p>
<h3>How To Create UI Guidelines?</h3>
<p>There are two approaches to create UI guidelines.</p>
<h4>1. Using Your Products</h4>
<p>If your organization has a detailed product, review it and extract guidelines from its design, and document them.</p>
<p>Add any required improvements in product behavior in guidelines. Later, existing products can be updated.</p>
<h4>2. Customizing Available Guidelines</h4>
<p>Use existing guidelines of an organization like Google or Microsoft, and customize them as per your design requirements.</p>
<h3>Collection of UI Guidelines</h3>
<p>Below is a collection of UI guidelines from few popular organizations that are helpful to make amazing interfaces.</p>
<h4>Microsoft</h4>
<p>Microsoft provides innovative experience to its users worldwide. It has published design guidelines for its various types of applications.</p>
<ul>
<li><a href="https://developer.microsoft.com/en-us/windows/desktop/design"><strong>Desktop design guidelines</strong></a> are helpful if you want to design beautiful and user-friendly desktop applications to be used on Windows operating system.</li>
<li>For fluent design system, Microsoft provides <a href="https://developer.microsoft.com/en-us/windows/apps/design"><strong>UWP Apps design guidelines</strong></a><strong> </strong>that use in designing beautiful UWP apps.</li>
</ul>
<h4>Apple</h4>
<p>Apple emphasizes user experience over other things and provides very innovative designs. Apple has published its design guidelines for all types of products on its website.</p>
<ul>
<li><a href="https://developer.apple.com/macos/human-interface-guidelines/overview/themes/"><strong>Desktop design guidelines</strong></a><strong> </strong>are helpful for designing applications for Mac system.</li>
<li>To design iOS apps, Apple provides a collection of<strong> </strong><a href="https://developer.apple.com/ios/human-interface-guidelines/overview/themes/"><strong>Mobile design guidelines</strong></a>.</li>
<li>In addition, UI guidlines for <a href="https://developer.apple.com/watchos/human-interface-guidelines/overview/themes/"><strong>Wearable devices</strong></a> (WatchOS)and <a href="https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/"><strong>iPhone X</strong></a><strong> </strong>are available on <a href="https://developer.apple.com/design/">Apple’s site</a>.</li>
</ul>
<h4>Google</h4>
<p>Google delivers a visual language for their users that defines principles of innovative design.</p>
<ul>
<li><a href="https://material.io/guidelines/"><strong>Material design</strong></a><strong> </strong>covers guidelines for both desktop web apps as well as Android apps.</li>
<li>Google UI guidelines for <a href="https://designguidelines.withgoogle.com/wearos/"><strong>WearOS</strong></a>, <a href="https://designguidelines.withgoogle.com/ar-design/"><strong>Augmented Reality Design</strong></a>, and <a href="https://designguidelines.withgoogle.com/android-auto/"><strong>Android Auto</strong></a> are available on its <a href="https://design.google/resources/">website</a>.</li>
</ul>
<h3>Final Thoughts…</h3>
<p>UI guidelines are common design concepts that are used to build engaging and unique user experiences. Following these guidelines helps you to enhance usability and beauty of your products.</p>
<p>Would love to hear your experience with UI guidelines while you work on your designs.</p>
<h4>Thanks for reading. You can also read more of my essays.</h4>
<ol>
<li><a href="https://uxplanet.org/how-to-standout-at-start-of-your-ux-career-12ee079754df">How to Standout at Start of your UX Career?</a></li>
<li><a href="https://uxplanet.org/16-quotes-you-need-to-read-as-ux-designer-e47f982e312c">16 Quotes You Need to Read as UX Designer</a></li>
<li><a href="https://blog.prototypr.io/what-makes-ux-design-your-passion-31a6fcf0da4f">What Makes UX Design Your Passion?</a></li>
<li><a href="https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457">All Caps on UI: Good or Bad?</a></li>
<li><a href="https://blog.prototypr.io/ux-designer-as-software-tester-enhanced-product-quality-e660535ec745">UX Designer As Software Tester — Enhanced Product Qualit</a>y</li>
</ol>
<h4>You can connect me on <a href="http://www.linkedin.com/in/saadia-minhas-69781547">Linkedin </a>or <a href="https://twitter.com/SaadiaUX">Twitter</a> to give your feedback.</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Fb3e808%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d380e407b759" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759">Why You Need UI Guidelines?</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Why You Need UI Guidelines?

Why You Need UI Guidelines?

What Are UI Guidelines?

Top Stories