small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

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

<p>Published on <a href="http://ift.tt/2qEMvai">| Prototyping: From UX to Front End &mdash; Medium</a> Designlab <img alt="" src="http://ift.tt/2rmUH35">Illustration: Patrick Multani / Text: Andrew Wilshere</p>
<p><strong>In Part 1 of this series, we explored the history of user interface design, from MS-DOS and Windows 1 through to iOS and Material Design.</strong></p>
<p>In this second installment, we take a look at what UI design means in today’s market, and examine what separates good and bad interfaces. We also discuss why looks aren’t everything. Finally, we sneak a peek at some of the new patterns emerging in UI design — including Google’s “Fuchsia” and Microsoft’s “Fluent Design”, and point you to a bunch of great resources to help you get started in UI Design.</p>
<p><strong>Read Part 1 here:</strong> <a href="http://ift.tt/2r9yoP8">From MS-DOS to Material Design — A Brief History of User Interfaces</a></p>
<h3>4. What does UI design mean today?</h3>
<p>Today’s UI designers are usually already designing interfaces for apps <em>within</em> an operating system. Many of the parameters of a user interface are therefore outside of the designer’s control. For example, if a UI designer is working on an Android app, they have no say over the screen size and resolution of the user’s device; of how the user has set up their notifications; or of whether they’ve installed another app to reprofile the color on the device’s display.</p>
<p>UI designers who are working on apps are, instead, usually trying to work creatively within the constraints of a given device and its OS. What’s more, their job is often to comply or cohere with the guidelines of the OS developer (Google for Android, Apple for iOS). Apple publishes list of <a href="http://ift.tt/1mKzt4e">UI dos and don’ts for developers</a>, as well as a detailed set of <a href="http://ift.tt/2gyVeKn">Human Interface Guidelines</a>, and Google has a comprehensive visual and UI style guide called <a href="http://ift.tt/1UczPTO">Material Design</a>. Check out Google’s explainer video here:</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FrrT6v5sOwJg%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DrrT6v5sOwJg&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FrrT6v5sOwJg%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2sljNws">http://ift.tt/2sljNws</a></iframe></p>
<p>It’s partly because of these constraints that the focus of today’s UI designers is often on the fine detail of how screen layouts are designed, and how smoothly a user can move through stages in their journey through an app or website. Feeling short of time is an almost universal experience in modern life, and users have very little patience with interfaces that feel slow, clunky, or hard to understand.</p>
<h4>Here are a few typical features of visual user interfaces today.</h4>
<p>We can understand many UI elements as <em>invitations</em> to the user to interact with the app or device in a particular way.</p>
<p><img alt="" src="http://ift.tt/2rmUEEr"></p>
<p><strong>Text input &amp; cursor</strong> invite the user to type in some text, and a <strong>Submit</strong> <strong>button</strong> invites the user to click or tap to proceed.</p>
<p><img alt="" src="http://ift.tt/2slhFES"></p>
<p><strong>A toggle,</strong> here represented by a sliding switch, invites the user to enable or disable an option.</p>
<p><img alt="" src="http://ift.tt/2rndf2Z"></p>
<p><strong>An icon </strong>invites the user to click or tap to open another app or function.</p>
<p><img alt="" src="http://ift.tt/2sl6fRJ"></p>
<p>When selected, perhaps using a <strong>hamburger button</strong>…</p>
<p><img alt="" src="http://ift.tt/2rn58Up"></p>
<p>…a <strong>menu</strong> appears and invites the user to choose from extra options.</p>
<p><img alt="" src="http://ift.tt/2sl6hsP"></p>
<p><strong>A slider </strong>invites the user to tap/click and drag to change a setting like screen brightness.</p>
<p><img alt="" src="http://ift.tt/2rn9DOO"></p>
<p><strong>A dropdown menu</strong> invites the user to click or tap, and then to select an option from a list.</p>
<p>These are just a few examples of UI elements, and there are lots more where they came from. But they give you an idea of the patterns that today’s designers use when crafting user interfaces, as they seek to add to a product’s value by designing a pleasant and efficient front-end user experience.</p>
<h3>5. UI: the good, the bad, and the ugly</h3>
<p>You’ll already have worked out that good UI design isn’t all about making something look pretty. UI design can be effective without being aesthetically beautiful, and gorgeous visual design and snazzy effects all too often conceal an unusable product.</p>
<p>Let’s take a look at a some mockups of good and bad UI design. Then we’ll look at a (slightly) ugly one… which is important too (you’ll see why!).</p>
<h4>Good UI</h4>
<p>…is designed around a thorough understanding of the user, their needs, and the range of journeys they might need to follow through an app, website, or other product. That’s why we say that UI design is an aspect of UX design.</p>
<p>A good interface will be as simple as possible, <em>while still</em> giving the user all the information they need for the task at hand. The navigation is typically short and flat (no sub-sub-sub-sections in menus), it takes a minimum number of steps to complete a task (e.g. checkout), and the options presented on each screen are clear.</p>
<p><img alt="" src="http://ift.tt/2sl3jV8"></p>
<p>In this app mockup, the UI presents the user with three options: search for takeouts using their current location, search “manually” by zip code, or tap the hamburger button for more options.</p>
<h4>Bad UI</h4>
<p>…tends to prioritise the developer’s or product’s priorities over the needs of the user. Symptoms of bad UI include excessive data entry, long forms, buttons that are too small to tap on accurately, too much text, text that is too small to read easily, use of jargon instead of plain English (e.g. “Bad credentials” instead of “That username and password didn’t work”), and use of intrusive dialog boxes instead of the notification bar.</p>
<p><img alt="" src="http://ift.tt/2rmPdFy"></p>
<p>Does this look familiar? In this mockup, a dialog box from a background app interrupts the active app and demands a response before the user can continue what they were doing. If the user was typing but not looking at the screen, they might lose work. The buttons are small and hard to tap accurately. The error message “unknown error” is meaningless to the user and does not help them to investigate or address its cause.</p>
<h4>Ugly UI</h4>
<p>…is an interesting one. Some of the most effective UI out there, on the face of it, violates UI designers’ general preference for simplicity. Consider Amazon’s website, which has a busy appearance to say the least:</p>
<p><img alt="" src="http://ift.tt/2sln6np"></p>
<p>But, as we know from Amazon’s market share, this UI works brilliantly for their customers. One of the secrets to its success is to have made improvements to the site very gradually and incrementally, meaning that there was no disruption in the user’s experience of the site.</p>
<p>As a customer, I’ve been visiting Amazon for years, and have never consciously noticed any change in its look and feel, or in the way I need to interact with it. And yet… this is how its front page looked 10 years ago (according to the <a href="http://ift.tt/2rmKWSn">WayBackMachine</a>):</p>
<p><img alt="" src="http://ift.tt/2sl6hZR"></p>
<h3>6. What does the future hold for UI design?</h3>
<p>The most important change currently happening in UI design is probably the development of voice interfaces. These already feature in every mainstream operating system, though, at the time of writing, few people use voice interfaces on their phones and computers with any regularity. If you’re interested in reading more about our predictions for the future role of voice interfaces, check out our recent article, <a href="http://ift.tt/2nRSMjl">“Where Will UX Design Be In 5 Years?”</a></p>
<p>Although new forms of user interface are emerging, sophisticated visual UI is likely to remain users’ primary mode of interaction with most devices. But there is, of course, plenty of scope for innovation and optimisation in “conventional” UI design.</p>
<p>Unsurprisingly, big players like Microsoft and Google invest significant resources in behind-the-scenes experiments with new UI aesthetics and interaction patterns.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FvcBGj4R7Fo0%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvcBGj4R7Fo0&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvcBGj4R7Fo0%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2slu3EK">http://ift.tt/2slu3EK</a></iframe></p>
<p>In the past few months, we’ve been hearing more about Microsoft’s upcoming <a href="http://ift.tt/2r6dXz6">“Fluent Design”</a>, which aims to integrate greater visual depth and motion, as well as Google’s experimental OS, <a href="http://ift.tt/2pYWdWd">codenamed “Fuchsia”,</a> which attempts to do away with homescreens and icon grids.</p>
<p><strong>What do you think the future holds for UI design? Let us know in the comments!</strong></p>
<h3>7. How to get started in UI design</h3>
<p>If this week’s posts have piqued your interest in user interface design, why not make a start with some of these resources and design challenges?</p>
<h4>Read up on typography in UI design:</h4>
<ul>
<li>Design Instruct: <a href="http://ift.tt/rnEdOP">The Basics of Typography</a></li>
<li>Viljami Salminen’s: <a href="http://ift.tt/28Mkje6">Typography for User Interfaces</a></li>
</ul>
<h4>Read up on color in UI design:</h4>
<ul>
<li>99Designs: <a href="http://ift.tt/2m3Gzu1">The fundamentals of understanding color theory</a></li>
<li>Erik D. Kennedy: <a href="http://ift.tt/2iMdgpd">Color in UI Design: A (Practical) Framework</a></li>
</ul>
<h4>Understand the difference between UX and UI:</h4>
<ul>
<li>Erik Flowers: <a href="http://ift.tt/Wy6W4z">UX is not UI</a></li>
<li>Amanda Cline: <a href="http://ift.tt/1DZzZZ2">The difference between UX and UI design</a></li>
</ul>
<h4>List a few websites or apps whose UI design you love.</h4>
<ul>
<li>For each one, write up a description of their UI design, paying attention to typography, color, layout, etc.</li>
<li>Try reproducing a one of these UIs in your preferred design tool (Sketch, Illustrator, Photoshop, etc.)</li>
</ul>
<h4>List a few websites or apps whose UI design you find clunky or frustrating.</h4>
<ul>
<li>For each one, write up a description of their UI design, paying attention to typography, color, layout, etc.</li>
<li>Pick one of these examples, and have a go at sketching some possible redesigns on paper. You could focus on just one page or screen, or make it into a bigger project.</li>
</ul>
<h4>Explore some further reading</h4>
<ul>
<li><a href="http://ift.tt/1Wr4WJG">The Core Principles of UI design</a>, by Jane Portman.</li>
<li>Google’s <a href="http://ift.tt/1UczPTO">Material Design guidelines</a> for the UI of apps being developed to run on Android. They also have a UI best practice guide for Android developers.</li>
<li>Apple’s latest UI <a href="http://ift.tt/1mKzt4e">dos and don’ts</a> for iOS developers.</li>
<li>Paul Boag explains how the <a href="http://ift.tt/1zCzUGk">bad UI design</a> of his bank’s mobile app made him switch banks.</li>
<li>Jon Yablonksi on <a href="http://ift.tt/2rn5xGn">reducing complexity in UI design</a>.</li>
<li>User Interface <a href="http://ui-patterns.com/">design patterns</a> are available over at UIPatterns.</li>
<li><a href="http://emptystat.es/">Emptystates</a> showcases the best UI design of pages that have no information to convey to the user. It’s a reminder to UI designers that every part of the user journey needs designing — even including the error messages!</li>
</ul>
<h3>Looking for more?</h3>
<p>The links and resources above are just a teaser of what you’ll be able to learn in our new 4-week, mentor-led course in UI Design.</p>
<p>We’re currently preparing a new 4-week, mentor-led course that could be just what you’re looking for. Sign up for notifications below, and get access to exclusive pre-enrollment bonuses.</p>
<p><iframe src="http://ift.tt/2sgCrp4" width="760" height="500" frameborder="0"><a href="http://ift.tt/2sljHEZ">http://ift.tt/2sljHEZ</a></iframe><img src="http://ift.tt/2rnc97J" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2sld4T3">How To Get Started In User Interface (UI) Design</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


How To Get Started In User Interface (UI) Design

How To Get Started In User Interface (UI) Design

Top Stories