ux %2f ui -why the cool kids use it-
TRANSCRIPT
UX / UI “Why The Cool
Kids Use It”
Hello!I am Angel Banks
UX Designer | UI Developer You can find me at @angelmbanks
1.UI & UX
Which is what?
Is there really a difference?
What is UI Design?
User Interface Design▣ What you see, read, and the choices you make ▣ What it looks like (colors, branding and etc.)▣ With Siri (voice) and Echo...it may not be just
screens in future▣ Ensures the UI visually communicates the path
UI designers are typically responsible for creating a style guide to ensure a consistent design language is applied across the product.
What is UX Design?
User eXperience Design▣ Guides us to understand problems to solve▣ Empathizes to learn user painpoints▣ Guides the team to discover solutions
to user problems▣ Identifies verbal and non-verbal stumbling
blocks, refines, and iterates to create the "best" user experience
UI is not UX
UX
UI
UX UX designers are concerned with the overall feel of the product and are particular about how the product is laid out.
How UX and UI are different
UIUI designers are in charge of designing the screens with which the user interacts while following the path laid out by the UX designer.
The boundary between UI and UX designers is blurred and it is common for companies to combine these roles.
UX vs UI
Source: Great Infographic: UX Designer Vs UI Designer
UX design is not these
UI developer Responsible for creating a functional implementation through code of the UI design and motion design interactions.
Digital DesignCreates visuals using images and words to convey information for all types for computers, tablets, and mobile devices.
Visual DesignLike in digital design, visual design uses images and typography but is also focused on the look and feel of the product and brand.
Web DesignThe process of planning and building a collection of electronic files that determine layout, colors, text styles, structure, graphics, and images for websites.
Motion Graphics/interactive DesignSame as Digital Design but includes visuals and interactions required for motion implementations.
PrototyperBuild “working” implementations (that require less time to build the real thing, so you can get feedback quickly). They take the wires and flows from UX and make them interactive.
2.My Process
Plan for success
Process
Strategy
▣ Business requirements▣ Stakeholder interviews▣ Competitive analysis▣ Analytics review
Research
▣ Contextual inquiry▣ Surveys▣ Content audit ▣ User interviews
Analysis
▣ Personas▣ Journeys and use cases▣ Heuristic review▣ Participatory design sessions
Design
▣ Brainstorming▣ Workflow diagrams▣ Sitemaps▣ Wireframes▣ Prototypes▣ UI copy edit
Production
▣ Track metrics▣ Refine▣ Repeat
3.Tools of the
Trade
Get to know these tools
Adobe Photoshop & Adobe Illustrator
▣ Great for graphics, photos and typography
▣ Integrated stock image library
▣ No UI kits or libraries▣ Robust features - not
the easiest to learn ▣ $20 per month
Balsamiq
▣ Great for low-fidelity wireframes
▣ Built-in UI components and icons
▣ Very user-friendly
▣ Easy to learn ▣ Desktop app = $90 ▣ Web app = $12/mth
Sketch
▣ An interface design app▣ Alternative to Photoshop
and Illustrator▣ User-friendly
▣ Easy to learn▣ Growing list of features▣ UI kits and templates ▣ Plugins ▣ Only $99
Axure
▣ Desktop app for wireframes, prototypes, and diagrams
▣ Large collection of libraries and widgets
▣ Great for interactivity ▣ Shareable links to
clickable prototypes▣ Steep learning curve▣ Starts at $500
OmniGraffle
▣ Can do it all: wireframes, prototypes, diagrams, and more…
▣ UI competent library for quick wireframes
▣ Can't do interactivity▣ Not easy to learn▣ Mac only▣ $100 - $200
Microsoft Visio
▣ Desktop app great for flowcharts and diagrams
▣ Large library of templates and shapes
▣ Diagrams can be linked to data sources
▣ PC only▣ $300
4.UX Success
Stories
UX makes a difference
Yahoo News Digest
Place your screenshot here
Place your screenshot here
Airbnb
5.UX Fails
Bad UX also makes a difference
Place your screenshot here
Appropriate messaging
Place your screenshot here
Clear, simple path
More bad UX…IRL!
‘’Some people think design means how it looks but of course, if you dig deeper it’s really how it works.
-Steve Jobs
