UI design Developmemnt

1. What is User Interface Design?
User interface (UI) design is the process designers use to build interf=7 0ces in
software or computerized devices, focusing on looks or style. Designers aim to create
interfaces which users find easy to use and pleasurable. UI design refers to graphical
user interfaces and other forms—e.g., voice-controlled interfaces.
Designing User Interfaces for Users
User interfaces are the access points where users interact with designs. They come in
three formats:
1. Graphical user interfaces (GUIs)—Users interact with visual representations on
digital control panels. A computer’s desktop is a GUI.
2. Voice-controlled interfaces (VUIs)—Users interact with these through their voices.
Most smart assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.
3. Gesture-based interfaces—Users engage with 3D design spaces through bodily
motions: e.g., in virtual reality (VR) games.
To design UIs best, you should consider:
 Users judge designs quickly and care about usability and likeability.
 They don’t care about your design, but about getting their tasks done easily and with
minimum effort.
 Your design should therefore be “invisible”: Users shouldn’t focus on it but on
completing tasks: e.g., ordering pizza on Domino’s Zero Click app.
 So, understand your users’ contexts and task flows (which you can find from,
e.g., customer journey maps), to fine-tune the best, most intuitive UIs that deliver
seamless experiences.
 UIs should also be enjoyable (or at least satisfying and frustration-free).
 When your design predicts users’ needs, they can enjoy more personalized and
immersive experiences. Delight them, and they’ll keep returning.
 Where appropriate, elements of gamification can make your design more fun.
 UIs should communicate brand values and reinforce users’ trust.

2.  Good design is emotional design. Users associate good feelings with brands that speak
to them at all levels and keep the magic of pleasurable, seamless experiences alive.
Airbnb’s simple, inviting layout lets users satisfy their travel needs quickly, easily and
enjoyably.
UI vs. User Experience (UX) Design
Often confused with UX design, UI design is more concerned with the surface and
overall feel of a design. UI design is a craft where you the designer build an essential
part of the user experience. UX design covers the entire spectrum of the user
experience. One analogy is to picture UX design as a car with UI design as the driving
console.
“Interfaces get in the way. I don’t want to focus my energies on an interface. I want to
focus on the job.”
— Don Norman, Grand old man of UX design

3. How to make Great UIs
To deliver impressive GUIs, remember—users are humans, with needs such as
comfort and a limit on their mental capacities. You should follow these guidelines:
1. Make buttons and other common elements perform predictably (including
responses such as pinch-to-zoom) so users can unconsciously use them everywhere.
Form should follow function.
2. Maintain high discoverability. Clearly label icons and include well-
indicated affordances: e.g., shadows for buttons.
3. Keep interfaces simple (with only elements that help serve users’ purposes) and
create an “invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus on hierarchy and
readability:
1. Use proper alignment. Typically choose edge (over center) alignment.
2. Draw attention to key features using:
 Color, brightness and contrast. Avoid including colors or buttons excessively.
 Text via font sizes, bold type/weighting, italics, capitals and distance between letters.
Users should pick up meanings just by scanning.
5. Minimize the number of actions for performing tasks but focus on one chief
function per page. Guide users by indicating preferred actions. Ease complex tasks
by using progressive disclosure.
6. Put controls near objects that users want to control. For example, a button to
submit a form should be near the form.
7. Keep users informed regarding system responses/actions with feedback.
8. Use appropriate UI design patterns to help guide users and reduce burdens (e.g.,
pre-fill forms). Beware of using dark patterns, which include hard-to-see prefilled opt-
in/opt-out checkboxes and sneaking items into users’ carts.
9. Maintain brand consistency.
10.Always provide next steps which users can deduce naturally, whatever their
context.

4. On our courses webpage, colors, brightness and contrast draw attention to key
features.
User Interface Design Basics
User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that
the interface has elements that are easy to access, understand, and use to facilitate those actions.
UI brings together concepts from interaction design, visual design, and information architecture.
Choosing Interface Elements
Users have become familiar with interface elements acting in a certain way, so try to be
consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.
Interface elements include but are not limited to:
 Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes,
toggles, date field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons

5.  Informational Components: tooltips, icons, progress bar, notifications, message boxes,
modal windows
 Containers: accordion
There are times when multiple elements might be appropriate for displaying content. When this
happens, it’s important to consider the trade-offs. For example, sometimes elements that can
help save you space, put more of a burden on the user mentally by forcing them to guess what is
within the dropdown or what the element might be.
Best Practices for Designing an Interface
Everything stems from knowing your users, including understanding their goals, skills,
preferences, and tendencies. Once you know about your user, make sure to consider the
following when designing your interface:
 Keep the interface simple. The best interfaces are almost invisible to the user. They avoid
unnecessary elements and are clear in the language they use on labels and in messaging.
 Create consistency and use common UI elements. By using common elements in your UI,
users feel more comfortable and are able to get things done more quickly. It is also important
to create patterns in language, layout and design throughout the site to help facilitate
efficiency. Once a user learns how to do something, they should be able to transfer that skill
to other parts of the site.
 Be purposeful in page layout. Consider the spatial relationships between items on the page
and structure the page based on importance. Careful placement of items can help draw
attention to the most important pieces of information and can aid scanning and readability.
 Strategically use color and texture. You can direct attention toward or redirect attention
away from items using color, light, contrast, and texture to your advantage.
 Use typography to create hierarchy and clarity. Carefully consider how you use typeface.
Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and
readability.
 Make sure that the system communicates what’s happening. Always inform your users
of location, actions, changes in state, or errors. The use of various UI elements to
communicate status and, if necessary, next steps can reduce frustration for your user.
 Think about the defaults. By carefully thinking about and anticipating the goals people
bring to your site, you can create defaults that reduce the burden on the user. This becomes
particularly important when it comes to form design where you might have an opportunity to
have some fields pre-chosen or filled out.

6. Introduction
Welcome to day one of your five-day UI (user interface) design short course, and
congratulations on taking your first step towards becoming a fully-fledged UI designer!
As a complete beginner, consider this course your introduction to this exciting field.
Over the next five days, you’ll learn the fundamental skills of UI design—putting your
newfound knowledge from each tutorial into practice as you design your first-ever
climate change app from scratch.
Let’s take a look at what we’ll cover in today’s tutorial:
1. What does a UI designer do?
2. What are the skills required to become a UI designer?
3. What we’ll be learning over the next five days
4. Setting up your artboard in Adobe XD
Ready to get stuck in? Let’s go!
1. What does a UI designer do?
UI design refers to the visual design of a digital product’s interface. It’s the process of
creating interfaces (namely apps and websites) with a focus on look, style, and
interactivity. A UI designer will design the movement between different screens, and
create the visual elements—and their interactive properties—that facilitate user
interaction.
While UI design is largely a visual discipline, UI designers work on a vast array of
projects. In order to design accessible, user-friendly interfaces, UI designers bring
empathy into every stage of the design process—from designing screens, icons, and
interactions, to creating a style guide that ensures consistency and the proper
implementation of a visual language across an entire product. They also take great care
in making sure the product is accessible and inclusive for all users, as opposed to a
select few.
Think about your favorite app. When you first downloaded it, you didn’t spend hours
working out how to use it—you just started using it straight away. This is because the UI
designer uses stylistic elements like patterns, spacing, and color to guide the user in a
way that feels natural.

7. What’s the difference between UI design
and UX design?
UI design and UX (user experience) design are often used interchangeably. While they
both share the same end goal of providing a good experience for the user, UI designers
and UX designers work different sides of the same coin.
UX designers enhance user satisfaction by improving the usability and accessibility of a
product, while UI designers enhance user satisfaction by making the product’s interface
look and feel enjoyable for the user. UX designers draw out the map of the product,
which UI designers then flesh it out with visual and interactive touchpoints. UX and UI
designers often work in tandem to maximize the responsiveness, efficiency, and
accessibility of a website.

8. What does the UI design field currently look
like?
As you embark on this journey towards becoming a UI designer, it’s important to know
for sure whether you’ll be in demand—so let’s take a quick look at the facts.
UI design is widely considered to be one of the most fulfilling careers in tech—with even
senior product designers expected to have UI design skills in their arsenal. Promising
creativity, variety, and a competitive salary to boot, a career in UI design offers tech
hopefuls the opportunity to make a real impact on people’s lives. In 2020, there are just
shy of around 6,000 job listings associated with the search term “user interface
designer” on indeed.com (in the US). According to Glassdoor, the national average
salary for a user interface designer is $80,450 per year in the United States.
On this list of the 19 most in-demand digital creative talent for 2020, UI designer
ranks fourth. The best part? UI designers can work remotely from anywhere in the
world—with an increasing number of flexible and remote UI design roles cropping up
across job boards. It’s safe to say that UI design is here to stay, and the field is only
growing.
2. What are the skills required to
become a UI designer?
As with any career path, a career in UI design requires a strong grasp on both the
technical skills that you need in order to produce your designs, and the soft skills that
will see you excel in the workplace. Let’s take a quick look at the three main skills a UI
designer should have:
 A career in UI design requires a mastery of at least one of the popular industry-standard
tools, such as Sketch, Adobe XD, or Figma, and prototyping tools like InVision. These
tools are used across the board in any UI design role, and once you’ve gotten to grips
with one, it won’t take you long to settle into using another.
 A UI designer needs to be well versed in the fundamental methods, theories, and
practices of the field. This includes things like color theory, typography, and UI design
patterns, as well as fundamental design approaches such as the Gestalt
Principles that help you to gain a deeper insight into how users perceive and interpret
your work.
 Strong collaboration skills are a huge requirement for any UI designer. From
understanding the vision of the client to working with the wireframes provided by the UX
designer, to handing the final prototype over to the developers—UI designers collaborate
at every level. If you consider yourself a great collaborator in your current role, you’re
already off to a great start!

9. 3. What we’ll be learning over the
next five days
Now that we’re all caught up on what UI design actually is, let’s take a look at what we’ll
be learning over the next five days.
During this short course, you’ll use the fundamental pillars of UI design (wireframing,
symbols and buttons, color, typography, and hierarchy) to create your first ever app log-
in screen from scratch using industry-standard tool Adobe XD.
You’ll choose to design one of two different climate change apps:
 Activist App: the app that sees you foster conversations around environmental activism
with like minded peers, and
 Ethical Eater: the app that helps you track your meat consumption and share healthy
recipes with friends

10. We’ve created our own designs to use as a guideline, but you’ll have full creative
license to design your own version of whichever app screen you go for. You’ll go
through the exact same steps regardless of the app you choose.
Each tutorial will see you add new elements to your design, and by the end, you’ll have
a strong understanding of the methods and process involved in creating an app screen.
Let’s look at what you can expect from each tutorial.
 Today, you’ll set up your artboard on Adobe XD and play around with the tool to
familiarize yourself with its functions. You’ll choose which app screen to design, and
hopefully do some extra-curricular reading on a few of the topics we touched on earlier.
 Day two will see us learn about UI elements, and you’ll create a low-fidelity wireframe for
your app screen.
 On day three we’ll learn about symbols and basic shapes, and you’ll create buttons and
a logo for your app screen.
 On day four we’ll learn all about text and typography, and you’ll choose the font and
copy for your app’s tagline.
 On the fifth and final day, you’ll bring your app to life by choosing colors and imagery.
You’ll also learn how to export and share your work.
To put your newfound skills to the test, you’ll round off the course with a quiz on day six.
This will be your chance to recap on everything you learned over the week.
So, let’s get set up!
4. Setting up your artboard in
Adobe XD
First, let’s download and install Adobe XD. For the purposes of this short course, the
free version is fine to use. Once installed, open up the application to view the home
screen.

11. To get started, you’ll be presented with an array of artboard presets for iOS, Android,
iPad, and web screens. You can also create an artboard with custom width and height.
For this course, we’ll be using the artboard for iPhone X/XS/11 Pro (375 ✕ 812).

12. Once you’ve selected the correct artboard, you’ll be taken to XD’s ‘design mode’ where
you’ll be able to see everything you need to create an app screen. The image below
shows the artboard and the design settings/tools on the far right of the screen.
Think of your artboard as a canvas where you can add and style all of your user
interface elements. Once your artboard is set up, you’re good to go!
Summary
Today we learned what goes into being a UI designer, and where UI design skills can
take you. We looked at the project we’ll be working on over the next five days, and dove
into what we’ll be covering in each tutorial. Finally, we learned how to get set up with
Adobe XD and create our very first artboard. That’s pretty good progress for day one!
Tomorrow, we’ll get to grips with wireframing, shapes, and UI patterns. See you then!
Daily task
Set up and name your artboard with the correct dimensions in Adobe XD. Play around
with the functions to get familiar with the tool! You can refer to Adobe’s tutorial on
adding and editing artboards if you need more help.