<> UI/UX #2
Before you code
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?
Today’s focus: “before you code”
1 – UX: Problems from a user’s point of view 2 – Mockups: the bridge from UX to UI
3 – UI: How design systems will save you time
Why do we make apps?
We make apps to help users achieve their goal
different people
have different
expectations,
because they’re
familiar with
different things
(e.g. taxi apps in
different countries
cater to different
Grab (SEA)
Uber (5 eyes)
Matching the “mental model” of your users
“elements” in
Why do we make apps?
We make apps to help users achieve their goal
Putting the biggest user goal first
Canva – often making a design in one session =>
Homepage focus is _creating a new design_
Docs – making a doc takes a long time =>
Homepage focus is _recent docs_
User Stories: Format
As a
I want to
so that I can
User stories help us express requirements in a user-centered way – rather than programmer centered.
This helps us focus on the user’s point of view through a project.
The bridge between UX and UI
PLAN … making an APP without a mockup is a CRIME
write an essay without
Scale of Mockups
Whole flow Single Screen
Great article for more depth: https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
Fidelity of Mockups
Low Fi High Fi
sketches, wireframes, etc. pixel perfect
Great article for more depth: https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
How to do CRAZY 8s
11.Fold your paper into 8 parts 2.Draw 8 super quick UI ideas to solve your problem 3.Share + reflect
Max time: 5 minutes
When to do CRAZY 8s
Great for brainstorming UI/UX ideas, especially in a group or when you don’t feel like you’ve got a good option.
Draw on screenshots for quick mockups:
Or, paste screenshots on top of each other:
Use rectangles, screenshots and overlay text to quickly mockup your idea
Part Three:
How design systems will save you time
Fluent (microsoft) Material.io (google)
So many great design systems
atlasian.design Shopify Polaris IG
What’s in a design system?
For developers:
– UI component library
For designers:
– UI components
– Design/brand guidelines – Content guidelines
e.g. some of the components on material.io
e.g. some of the info on the material button component
Sticking to the design system components makes apps more familiar. Here’s a comparision:
Rotary dial
Unusual, unfamiliar Detracts from user’s task
List of items
Expected and easy to use Helps user focus on task
e.g. brand color usage e.g. some content writing guidelines from Shopify guidelines from gov.uk
1.UX – frame things like a user problem. Think about the WHO and WHY, consider phrasing your tasks in “user stories”.
2.Mockups – low fi mockups help you plan. Consider using pen&paper, crazy 8s or drawing on screenshots to make them fast.
3.UI – consider picking a design system for your project. Reference it while you’re building to create a consistent product.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com