Please enable JavaScript.
Coggle requires JavaScript to display documents.
UI/UX - Coggle Diagram
UI/UX
User flow
: series of step a user takes to achieve a meaningful goal
Name: clear and conveying a goal
Steps
Numbered
Descriptive: right amount of details
Can contain notes for desired patterns (e.g animations)
Direction: only one (no graph)
What is the goal
Who is doing it?
How the user does it?
Sitemaps
: Hierarchical diagram showing how pages are organized
Anatomy
Reference number (e.g. 0.0 for Home page)
Category
Primary (e.g
1
.1)
Secondary (sub-category 1.
1
)
Always start with the homepage
Flat: useful for simple products
max 2 levels from home screen
Deep: good for large products (e.g. large intitutional websites)
Value
Full overview
Navigation and hierarchies
Tips
Use userflows to help you build sitemaps
Use tools (Figma)
Use colors to highlighjt things visible to certain users
You don't need to finish your sitemaps to start wireframing (always Pareto principle!)
Wireframe
: Low-fidelity layout
Influenced by other artifacts (e.g. user flows)
Present pages outline
Blueprint of the product
Help understand and validate how users will navigate the product
Used to learn and get feedback
Build - Measure - Learn
Get feedback without building expensive prototypes
Present to customers and stakeholders
Clarity and common understanding within the team
How to create them
Keep it simple (pen & paper)
Consider business and user's expectations
Consult user flows and sitemaps
Tackle risky features first
Bring the whole team in the process
Visual design
Grids: skeleton for the layout :building_construction:
History
initially used for arrange handrwitten books
modern grids are based on the swiss system
Base unit :straight_ruler:
everything is multiple of the base unit
usually 8px
Padding: space between all of the elements
Anatomy :female-doctor:
Columns: vertical blocks
Gutter: gap betwen columns
Margin: space (mult. of base unit) between edge columns and container frame
Type of Grids
Column grid: classic grid dividable halves, thirds, fourths, sihxths
Modular grid: has both columns and rows
Baseline grid: horizontal rows - useful for typography
Grid behaviours
Fixed: grid columns do not move or stretch no matter the container frame sizre
Responsive: different grid configuration for different viewport sizes (e.g. small, medium, large, extra large)
grid configuratiion changes at specific breakpoints
Fluid: columns stretch as the the parent container size increrases
gutter and margin do not stretch
Guidelines :warning:
elements must always sit on columns
never leave elements within gutters
nested elements can have their own grids
only full bleed elements can not adhere to grids (hero, page headers)
do not use columns for padding
Typography :pen:
Serif: traditional feel
Old style (humanist year 1400)
Transitional: strokes are more pronounces (times new roman)
Modern: strokes are very contrasting
Slab: little to no contrast between thick and thin strokes
Sans serif: without serifs :smiley:
Grotesque: more contrast between strokes
Neo-Grotesque: more uniform with less contrast between strokes
Humanist: greater variation between different types of line width
Geometric: based off of geometric shapes
Display type faces: used for headlines/heros
Mono: letter are inside rectangles which always have the same dimensions - used for code
Picking a typeface
match the font with the type of project and the desired mood (e.g. charity, serious, cheerful)
try to match with company branding (e.g. logo)
Define a typography system
Identify all of the different types of texts that will be used inside the project
Headings
Body texts
Labels
Define all of the font properties for each text type
Style name, including size and line height (e.g. H1 / 40 px | 40 px)
Font size
Line height
Font weight
Sample
Colors :world_map:
Color schemes: create basis for color palette
Monochromatic: all colors share the same tint and are variations of it
used for minimimalistic usages
Analogous: based on 3 adjacent colors on the color wheel
Complimentary: colors sitting on opposite side of the palette
Split-Complimentary: one color + 2 colors adjacent to the color on the opposite side of the color wheel
Triangular: colors on the wheel form an equilater triangle
more vibrant but difficult to balance
Creating a color palette
Questions to ask :question:
What problem I am trying to solve? Brand personalities influence the color palette (e.g. more serious, cheerful)
who are the targeted users?
cultural aspects
gender
age
general color meaning (e.g. red for error, green for success)
follow color harmony
colors should be scalable and additive
tint your grays and blacks (pure grey or black might be too harsh)
create color styles that can be reused across the whole project
