MODULE UI AND

UX BASICS
THREE.
USER INTERFACE
DESIGN
The importance of user
interface design cannot be
overstated because it can make
or break your customer base.
USER INTERFACE
DESIGN
It reduces issues, increases
user participation, improves
functionality, and establishes
a strong connection between
your customers and your
website.
UI ELEMENTS
ACCORDION
UI ELEMENTS
MENU
UI ELEMENTS
BREADCRUMBS
UI ELEMENTS
BUTTON
UI ELEMENTS
CARDS
UI ELEMENTS
CAROUSEL
UI ELEMENTS
CHECKBOX AND RADIOBUTTON
UI ELEMENTS
COMMENT
UI ELEMENTS
TYPES OF MENUS
UI ELEMENTS
FORMS
UI ELEMENTS
ICON
UI ELEMENTS
LOADERS
UI ELEMENTS
MODALS
UI ELEMENTS
NOTIFICATION
UI ELEMENTS
PAGINATION
UI ELEMENTS
PICKER
UI ELEMENTS
PROGRESS BAR
UI ELEMENTS
SIDEBAR
UI ELEMENTS
SLIDER CONTROLS
UI ELEMENTS
STEPPERS
UI ELEMENTS
TAGS
UI ELEMENTS
TAB BAR
UI ELEMENTS
TOOLTIP
UI ELEMENTS
TOOGLE
GRID LAYOUT
is a set of intersecting
horizontal and vertical lines
that divide your pages into
countless columns and rows.
SYMMETRICAL
GRIDS
ASYMMETRICAL
GRIDS
UI COLOR
BASICS
• HUE
• SATURATION
• TONE
• TINT
UI COLOR
BASICS
• HUE
UI COLOR
BASICS
• SATURATION
UI COLOR
BASICS
• TONE
UI COLOR
BASICS
• TINT
UI COLOR
BASICS
MONOCHROMATIC
ANALOGOUS
COMPLEMENTARY
USER EXPERIENCE DESIGN

Its goal is to create positive

experiences that encourage
people to stick with a product
or brand.
WIREFRAMING AND
PROTOTYPING

This process allows all

stakeholders to agree on where
the information will be placed
before the developers build
the interface out with code.
LOW-FIDELITY WIREFRAMES
MID-FIDELITY WIREFRAMES
HIGH-FIDELITY WIREFRAMES
DACAL
SALAMAT!
MODULE 3. UI AND UX BASICS.