<> UI/UX #1
UI Fundamentals
Presented by
Copyright By PowCoder代写 加微信 powcoder
UXUser Experience – The “usability” of an app.
Does the app feel logical?
– Who are the users?
– User research (interviews, tests)
UI User Interface – The graphics and copy-writing
– Visual design: colors, pixels, shadows, etc.
– The “branding” of an app
What’s the difference?
Aim of UI: Making apps easier
– ensuring users aren’t scared
(basic visual design principles)
– make it easier to find things
(visual hierarchy)
– make it easier to do something
(affordances)
Ensuring users aren’t scared: Graphic basics
Making your app less scary
Humans like like aligned, consistent patterns
Using a grid helps great alignment.
Having a consistent fonts reduces confusion
Less is more.
Using a harmonious set of colors can makes a design look right.
Use maths for colors that look great together.
Alignment in our World
Alignment: Grids
BBC.com – an example of modern grids:
BBC.com – an example of modern grids:
12 columns
16px gap between columns
12 columns is a common grid, because it can be divided into 1, 2, 3, 4 or 6 cleanly!
1200px limit (for readability)
content goes to the edge of columms, but not into the margins
Example of using a grid
Sketching out the basic design Aligned to a grid
Example of using a grid
Sketching out the basic design Aligned to a grid
Typography
1Less is more. Create consistency by limiting the number of different text stylings.
In particular, use at most 2 different font families. Choose a nice font or font pairing.
Creating a palette / table of types can ensure consistency throughout a project.
Example of a app color palette
Primary hue with variants, Secondary hue, Grayscales
Generally, apps have a constrained color palette. This creates a sense of cohesion. Choosing a palette of colors beforehand helps achieve that.
Harmonious Colors
Harmonious
pleasing variants, when you need a lighter/darker colors
Not Harmonious
distract users, because they don’t look like the same color
Great talk for more depth: https://www.youtube.com/watch?v=AS1OHMW873s
Harmonious Colors
209, 238, 252 25, 170, 238 0, 126, 182 RGB value 203, 221, 255 25, 170, 238 4, 55, 240
(= hex code)
Harmonious Not Harmonious
Who does the left look better?
Harmonious Colors
209, 238, 252 25, 170, 238 0, 126, 182
203, 221, 255 25, 170, 238 4, 55, 240
230, 100, 89 199, 86, 51 277, 96, 47 Not Harmonious
I.e. the HUEs are not the same
199, 86, 90
199, 86, 51 199, 100, 35 Harmonious
I.e. the HUEs are the same
Great talk for more depth: https://www.youtube.com/watch?v=AS1OHMW873s
So many great color (free) tools
Colorizer.org Paletton.com Adobe Color
Help people find things
We use visual hierarchy to make what’s most important stand out
Elements of Visual Hierarchy
1 – Size (bigger means important)
2 – Color (brighter means important)
3 – Contrast (contrasting things draw attention) 4 – Spacing (big margins create importance)
5 – Alignment (misaligned things draw attention) 6 – Repetition (puts things on the same level)
top headline is the biggest
repetition, alignment, small size
make these easy to ignore (for the better)
prioritizes “features” over “just in”
spacing & contrast
draws attention to the facebook banner
Part Three:
Helping people use things: A
What is an affordance?
An affordance is the visual properties of an element that let the user know they can do something with it.
E.g. a handle on a door. A button on a web page.
Some types of affordances
An explicit affordance tells people how to interact
“Click here” to do something.
A pattern affordance uses a common pattern to imply an interaction is possible.
Underlined, blue text implies a link.
Hamburger implies menu:
A false affordance looks like it would do something it can’t do.
False affordances should be avoided – they are confusing.
Alignment is important for a cohesive design, a grid is a way of achieving that.
Creating a font/color palette beforehand can create consistency
Use maths to choose harmonious colors.
Think about what’s most important, make it most visually important too (visual hierarchy).
Making possible interactions obvious (affordances).
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com