Scribd
Upload
11 views

User-Interface-and-User-E.9279038.powerpoint

Uploaded by

Blerta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

User-Interface-and-User-E.9279038.powerpoint

Uploaded by

Blerta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

UI/ UX Design Basics

UI AND UX

UX refers to the term User Experience while


UI stands for User Interface. But despite
their closeness, there are lot more to their
execution process and design discipline.
UX design relates to the overall user interaction and
experience with an application or a website. It is well known
that great user experience results in return customers and
great app usage.

Typically, the UX Design process include research, design,


prototyping, testing and measurement. Lot of factors
influence UX process such as usability, utility, accessibility,
design/aesthetics, performance, ergonomics, overall
human interaction and marketing.
On the other hand, User Interface (UI) is more about
visual design and information design around
screens. Though a lot of process go into this graphical
element, UI as the name implies, about the things the
user will actually see and interact. It delivers tangible
results and focuses on how an app or product surface
look and functions.
ce D es i gn
er Inter fa
U s Part I
UI Design Basics
Section 1
Introduction
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:


1. Interaction Design
2. Visual Design and
3. Information Architecture
1. Interaction Design
Interaction design is an important component within the
giant umbrella of user experience (UX) design.

- Interaction design focuses on creating engaging


interfaces with well thought out behaviors.

- Understanding how users and technology communicate


with each other is fundamental to this field.

- With this understanding, you can anticipate how


someone might interact with the system, fix problems
early, as well as invent new ways of doing things.
Best Practices for Designing Interactions

Consider these qualities and associated questions when creating


digital products that have an interactive element:

Questions to Consider when Designing for Interaction


• Define How Users Can Interact with the Interface
• Give Users Clues about Behavior before Actions are Taken
• Anticipate and Mitigate Errors
• Consider System Feedback and Response Time
• Strategically Think about Each Elements
• Simplify for Learnability
2. Visual Design
Visual design focuses on the
aesthetics of a site and its related
materials by strategically
implementing images, colors, fonts,
and other elements.

A successful visual design does not


take away from the content on the
page or function.

Instead, it enhances it by engaging


users and helping to build trust
and interest in the brand.
12 Visual Hierarchy Principles
12 Visual Hierarchy Principles…
12 Visual Hierarchy Principles…
12 Visual
Hierarchy
Principles…
Basic Elements of Visual Design
The basic elements that combine to
create visual designs include the
following:
• Lines

• Shapes

• Color

• Texture

• Typography

• Form
Principles for Creating a Visual Design
A successful visual design applies the following
principles to elements noted above and
effectively brings them together in a way that
makes sense. When trying to figure out how to
use the basic elements consider:
• Unity
• Gestalt
• Space
• Hierarchy
• Balance
• Contrast
• Scale
• Dominance
Example of Putting it all together
3. Information Architecture
Information architecture (IA) focuses on organizing,
structuring, and labeling content in an effective and
sustainable way.

The goal is to help users find information and complete


tasks.

To do this, you need to understand how the pieces fit


together to create the larger picture, how items relate to
each other within the system.

Why a Well Thought Out IA Matters

The purpose of your IA is to help users understand where


they are, what they’ve found, what’s around, and what to
expect.
3. Information Architecture
Why a Well Thought Out IA
Matters
The purpose of your IA is to help
users understand:
• where they are
• what they’ve found
• what’s around and
• what to expect
What You Need to Know
To be successful, you need a diverse understanding of industry
standards for creating, storing, accessing and presenting
information.
The main components of IA:
• Organization Schemes and Structures: How you categorize and
structure information
• Labeling Systems: How you represent information

• Navigation Systems: How users browse or move through


information
• Search Systems: How users look for information

You might also like