UI Design

User Interface design

UX UI
User experience design (UXD or UED) is the process of enhancing customer User Interface Design is its compliment, the look and feel, the presentation and
satisfaction and loyalty by improving the usability, ease of use, and pleasure interactivity of a product.
provided in the interaction between the customer and the product. User
Experience is a conglomeration of tasks focused on optimization of a product for
effective and enjoyable use

Strategy and Content: Look and Feel:

• Competitor Analysis • Customer Analysis
• Customer Analysis • Design Research
• Product Structure/Strategy • Branding and Graphic Development
• Content Development • User Guides/Storyline
Wireframing and Prototyping: Responsiveness and Interactivity:
• Sketch • UI Prototyping
• Wireframing • Interactivity and Animation
• Mockup • Adaptation to All Device Screen Sizes
• Prototyping • Implementation with Developer
• Testing/Iteration
• Development Planning
Execution and Analytics
• Coordination with UI Designer(s)
• Coordination with Developer(s)
• Tracking Goals and Integration
• Analysis and Iteration

https://www.quora.com/UX-UI-Design-What-is-done-first-between-UI-and-UX
UX/UI, Which one come first?

https://www.quora.com/UX-UI-Design-What-is-done-first-between-UI-and-UX
What is UI design?
• User interface (UI) design is about building interfaces with a focus on
styling and interactivity. The UI designer’s goal is to create an
interface the user finds easy to use and aesthetically pleasing.
• A UI designer explores all the interactions and behaviors a user takes
with a product to create an interface that best adapts to the user’s
needs.
• When we talk about UI design, we talk about the stylistic choices a
designer makes when creating a product, e.g., an image, button,
menu bar, or footer. All of these elements will affect the user’s
interaction, and so, must be planned accordingly.
The rules of user interface design
1. Make user interfaces consistent
Consistent UI means using similar design patterns, identical terminology in prompts, homogenous menus and screens, and consistent commands throughout the
interface.

2. Allow users to navigate easily via shortcuts

Expert users, or users who frequent your website or use your product regularly, need shortcuts to move quickly through the interface. You need to make navigation and
operating user interfaces easy through shortcuts.

3. Provide informative feedback

For example, when users are asked to create a password, your UI should offer information on how strong it should be by either giving an example of a strong password or
using symbols that demonstrate how strong the user’s password currently is.

4. Design dialog to yield closure

A great example is taking users to a Thank You page with a summary after they complete an order, informing them it’s confirmed.

5. Prevent error as much as possible

Make the UI as easy to use as possible by preventing serious user errors.
So from greying out menu items that are not available to preventing users from typing in alphabets in fields that ask for phone numbers, try to prevent error as much as
possible.

6. Allow users ways to reverse their actions easily

If someone has accidentally added the wrong information in a multi-page form, allow them to go back to that page and rectify their mistake easily without having to start
all over again.

7. Support internal locus of control

A great example of keeping users in control is when someone is about to exit Microsoft Office and is asked by the system if they’re sure they want to exit without saving
their work. Not only does this make the user feel in control, but it also ensures that in case of an accidental exit, their work is not lost.

8. Minimize memory load

A key rule for making user interfaces easy for people to use is minimizing cognitive load. Cognitive load (or memory load) can reduce a user’s capacity to perform
important tasks, so it’s critical that computers take over the burden of memory from them as much as they can.
https://maze.co/collections/ux-ui-design/ui-design-principles/#golden-rules-of-user-interface-design
6 key UI design principles
1. Clarity
So when you create your product, ask yourself the following questions:
1. Is your navigation intuitive? Are users directed and encouraged to move from one
page to the next with ease?
2. Have you used highly visible buttons that prompt users into clicking them?
3. Is the purpose of each element on your product, website or application, clear and easy
to understand?
6 key UI design principles
2. Familiarity
Do you automatically look for the menu at the top of the homepage of a new website? Why?
Because that’s where we perceive the menu to be.
There are several benefits of incorporating the UI design principle of familiarity in your product:
• Increases user retention
• Easier for UI designers
• Reduces the learning curve for users
6 key UI design principles
3. User Control
• As an example, whenever you’re creating forms, allow users to click the <Back> button and
go back to the page they were last on. Don’t take them all the way back to the homepage or
the start of the form.
• Similarly, when using overlays on your website, make sure the exit button {x} is clear.
Otherwise, users might click the back button on the browser and go back two steps instead
of just exiting the overlay.
6 key UI design principles
4. Hierarchy
Strong visual hierarchy is a core design principle of a successful user interface. It consists of arranging visual elements in a way that explains
the level of importance of each element and guides users to take the desired action. As a designer, your job is to organize UI design
elements in a way that makes it easy for users to navigate within your product.
It ensures that users see the most important information first, then the next, and so on, and is established through various elements. Some
of them include:
Color:
The first and one of the most important elements of establishing visual hierarchy is color. Bright colors stand out the most and can be used
in muted color schemes to direct users to take a certain action.
Size
Size matters a lot in UI design, especially when establishing visual hierarchy. The bigger the element is, the more visible it is. Smaller
elements are usually those of less importance. So, as a designer, try to make important things (like headlines or CTAs) bigger and bolder.
Fonts
Play around with different sizes, weights and styles of fonts to establish visual hierarchy. While the CTA is of smaller font size, it’s highlighted
through a coloured box to ensure that the audience’s eyes are drawn to it immediately after reading the headline.
6 key UI design principles
5. Negative space
Give your elements some breathing room - don’t cram all the objects and
elements together on the screen. Negative space makes important elements
pop and stand out. Swaggar makes great use of negative space on their
website’s main page.

Swagger uses negative

space in a great
manner to highlight
its various features
and main message
6 key UI design principles
6. Flexibility
You not only need to make your user interface learnable for new users, but it should also have
accelerators that help expert users speed up their processes. From novices to experts, ensure
your product is flexible and efficient for all kinds of users.
Some examples of a flexible UI design include:
• Shortcuts for performing frequently used steps with a single click
• Advanced search features
• Incorporating filter bars

And think multi-modal.

A multimodal user interface allows users to interact with the system through multiple modes,
such as speech, text touch, vision. As a designer, you need to be mindful of all these modes.
Also, design the user interface keeping in mind that your audience might use it via mobile,
tablet, laptop, or a rusty old computer.
 10 UI design guidelines
1. Visibility of system status: Systems should offer appropriate feedback within reasonable time. For example:
when a user clicks on a button, it changes its background color as well as its font.
2. Match between system and the real world: Use familiar language your target audience can understand.
Design your UI using symbols and objects that relate to the real world. For example: add a magnifying glass
icon to a search bar.
3. User control and freedom: Give users space to go back and undo or redo previous actions.
4. Consistency and standards: Standardize every UI element to guarantee consistency throughout your system.
5. Error prevention: Reduce any potential errors in your system, and flag them when they happen so the user
can fix the issue right away.
6. Recognition rather than recall: Minimize the amount of information a user needs to remember by offering
help within the specific context in which a user is. Avoid giving them long tutorials upfront.
7. Flexibility and efficiency of use: Let users customize or tailor their interface to suit their needs so that
frequent actions can be achieved through shortcuts and touch gestures.
8. Aesthetic and minimalist design: Keep both your content and visual design simple. The user shouldn't get
distracted or confused by unnecessary elements that get in their way.
9. Help users recognize, diagnose and recover from errors: Highlight your error messages and use plain language
that give specific solutions to your user's problems.
10. Help and documentation: Ensure your documentation is easy to find and understand. Present the
documentation in context right at the moment that the user requires it and make it actionable.
A step-by-step look at the UI design process
The user interface design process happens during the later stages of
the product development process after a team of designers,
developers, and product manager carries out extensive user research.
In this sense, the UI design process builds upon what the UX design
process has defined, adding the right styles and interactions to create
an ideal user experience.
Understand the problem you are trying to
solve
• The UI design process starts by defining the problem your team needs to achieve. For
that, design teams use design briefs, which provide a general understanding of what the
design project is all about.
• The design brief helps UI designers understand the context of their work as their job
comes after the user experience has been defined and developed. It also facilitates the
definition of responsibilities and deadlines, and the discussion of the project as a whole.
• Inside the brief, you will see what the project is all about, including:
• Background: What's the cause behind the project? What is it about? What does it entail?
• Goals: What are you trying to get from this project? How does it benefit the user? How does it
benefit the company?
• Success criteria: What metrics, KPIs, and OKRs are you using to define the project's success?
• Target audience: Who is this project targeting?
• Team structure: Who's involved in this project? What are the responsibilities for each member?
Who are the stakeholders involved?
• Scope: What is the team required to do to complete the project?
• Deadline: When will this project be delivered?
 What should be included in a design brief?
For a design brief to be effective, it needs to be clear and concise while including all the relevant information
to give a good overview of the project. A brief can vary depending on your specific project, but in general, it
should include:
1.

1. An overview of the business: This section gives designers an understanding of the client—their company, industry,
market, and design needs
2. Project overview and scope: In this section, you can see what work the design team will do for their client
3. Information about the target audience: Relevant information might include age, gender, habits, preferences, needs,
and more
4. Competitor information: Noting down what competitors are doing will give you insights into your customer’s
expectations and help you identify what makes you unique
5. The goals of the project: This section focuses on the problem to be solved and the desired outcomes
6. A project timeline or schedule: Having a schedule will help you set the right expectations and keep the project on
track
7. Take inventory of what you already have: Maybe they already have a logo design they want to use or a specific page
layout implemented in a previous design. Also they will probably have a typeface, brand colors, and general brand
guidelines.
8. The project budget: This section should include the estimated budget for each task in the project.
9. Sum it all up: Finally, make sure you end the design brief with an executive summary. It may seem a bit redundant,
but it's good to have an outline that includes all essential information mentioned throughout the brief. Offering a
cliff-notes version at the end allows the client to review and sign-off on the project easily.
https://maze.co/blog/design-brief/
Implement competitor benchmarking
You want to see what UI designer used to present a screen, interaction, or user
flow. Usually, you’ll be looking at companies in your industry to create design
benchmarks.
Once your team has gathered some ideas, you can create an interface inventory.
An interface inventory is a directory that defines all the UI elements you could use,
including files from a design tool like Figma or screenshots taken from different
sites, including your competitors.

In your interface inventory, you want to categorize each UI element in large groups such as:
• Animations
• Color
• Information architecture structures
• Input components (e.g., buttons, toggles, etc.)
• Informational components (e.g., tooltips, message boxes, etc.)
• Typography