UX DESIGN 3

DESN 458

SYLLABUS

and stuff.

Sketching Tools

Pencils
Black marker
Red marker
Paper. Lots of paper.

Textbook

Buy from EWU Bookstore, Rosenfeld or Amazon
Any format of your choice

Required Services

Double-check you have the following accounts active and working properly.

Subscribe to free-plans only.

Sketch app license from Bohemian Coding for $99 per year

Optional

Journal

20-page Journal provided by Instructor
Write. Sketch. Diagram.
- From Yesterday
- Today
- For Tomorrow

...

OVERVIEW

(game plan subject to change).

MODULES

UX Portfolio
Advanced User Interface Design w/ Pattern Libraries
Advanced Research & Metrics
A/B Testing & Prototyping
Physical Interactions

A continuation of UX 1 and UX 2.

PROJECTS

P1: UX Portfolio
P2-A: Course Evaluation (pick-one)
P2-B: Book Ordering (pick-one)
P3: Physical Interaction
P4 (Final): Children's Toy/Game

The application of Concepts, Lecture, and Exercises.

...

PROCESS

(Thinking fast, and slow).

Design is the entire Process

Define

Research

Prototype

Build

Evaluate

refine

UX PORTFOLIO

more than screenshots.

Part 1 : The Content

COMPONENTS

Domain Name
Bio
Projects with
- metadata
- images
- process descriptions
Prototypes
Inventing on Principle
UX Team of One

TEXTBOOK

Chpt. 3: Principles over Process
Chpt. 7: Design Brief
Chpt. 7: Sketching
Chpt. 9: Mini Case Studies

DOMAIN NAME

Register a domain name with Hover.com
Make use of the "ridiculous" new TLD (top-level domains)
Purchase 1-year of service

Extremely useful and can point to anywhere.

Biography

Endlessly useful. Write it now, and copy/paste for future use
Who are you?
What have you done?
What would you like to do?
What are your Principles?

Not a cover letter. Not a formality. Not to be overlooked.

Collection of Work

Create an InVision Board to collect all this content
Boards
- metadata
- images
- Case Studies
- Bio
- Prototypes
  - InVision or elsewhere

Part 2 : The Design

Sketching

Sketch for content, visual design, and interactions.
Repeat. Sketch for content, design, and interactions.
Method #15: Sketching from textbook

In user experience design, sketching refers to the point in the process when you begin to explore different potential forms. This is an important step before beginning detailed designs.

Sketching Cont.

Explore and iterate. Many versions.
Explore constraints and tradeoffs.
Stop perfecting. Start iterating.
Good pens. Cheap paper. Stop sketching on nice paper.

Strategies

Set goal for number of options.
- e.g. 5 options for this homepage
Set fixed time to minimize wandering
Sketch with words and descriptors
Apply Atomic Design

Style Tile

First Style Tile then Pattern Library
Personal Branding
Style Tile Size:
- Any size. Single page.
Artboard Size:
- Portfolio in tabloid landscape
- 1224 by 792 pixels

Components

Typography
Colors
Iconography
Imagery
- e.g. treatments, consistency, sizes, borders, etc.
Grid System
Decorative Elements

3. The Delivery

Static Formats

PDF for easy distribution, offline viewing, printing, & archival
Compliment to portfolio
11" by 17" inches landscape suggested
Optionally: Print to nice paper for in-person/offline viewing

Dynamic Formats

Where you Domain Name points to
Demonstrations of Medium to High fidelity prototypes
Ability to show more information, animation, movies, etc.
Showcase of: research, process, metrics, etc.

PDF Examples

Why Again?

Own your content.
Present it how you want to.
Stop relying on the platform to do it for you -- cause it can
Work will not sell itself (more later)

Platforms

Whichever platform, link to prototypes.

DIY Website -- see Web 1, 2, and 3
Website template
Slides.com / Google Slides.
Behance

4. The Sell

You.

Your work.

How you work.

Why you work.

Will not sell itself --

to who you will work with.

Textbook

Chapter 4: Growing Yourself and your Career

National Groups

Too many to list.
Have a set reputable favorites.
See textbook

Local Groups

Your Brand

Solidify your strengths and areas of interests
Have a Social Media strategy
References. Who can vouch for you?
Is your UX Portfolio up to date?
Are you in control of your Brand?

Salaries

Textbook
- "Getting Paid"
- What is your hourly rate for work?
What are local, regional, and national salaries?
Where do you want to work?
What type of UX work do you want to do?

...

ADVANCED UI DESIGN

...with Pattern Libraries.

Symbols and Styleguides

by Jans Losert

SVG Workflow Overview

Why?

Designer handoff to Developers
UI are heavily used icons.
More easily iterate. Reduce complexity.
File size is your problem.
Page load is everybody's problem.
Fewer cross-platform display issues
Atomic Design process says improve at atom level first.

Pennies add up. Quickly.

Save seconds now.

Save hours later.

Devil in the details.

SVG Refresher

Drawing with math versus pixels
Device and resolution independent
Sharper shapes, lines, and gradients
Made up many parts
HTML under-the-hood
Not a replacement for JPG or PNG or TIFF

Exporting Refresher

(Quick) Exporting
- Canvas
- Artboards
- Layers
- Slices
Reference
- Sketch - Exporting

SVGO Plugin

Optimizes SVG to
- reduce file size
- remove unused components
- exports for production
SVGO Plugin

Part 1: Artboards, Names, & Layer Groups

Best Practices Pt. 1

Use Artboards for all icons
Don't be lazy. Use semantic and clear layer names.
Ungroup layers
Example: Best Practices

Apple Example

Visual Format Language
Design focus on design
Developer look at code

IBM Example

IBM visual language
Download icons and see how IBM is
- not using folders
- consistant naming
- exporting at multiple formats

Pt 2: Vector Shapes & Borders

Download: Best Practices

The most convenient way to create something in Sketch may not result in the most efficient or reliable SVG

Flatten Transforms

Sketch main transform features adds unnecessary code and increases the file size
Flatten it.

Version Control

Version Control is preferred method
Note: Flattening is a destructive (permanent) process. Consider creating a hidden duplicate of your transformed layer for later

Borders

SVG stroke and "a border" in practice -- the same
Sketch allows you to create inside, outside, or centered borders. But SVG strokes can only be centered.
2 reliable ways that your inside or outside borders can be converted into an SVG

Sometimes preferred or required to have all borders as a single path
- For ease and consistency when adapting colors
- See: Noun Project
- See: Icon Monstr
TLDR: Let Sketch handle it.

Method 1: Convert to Outlines

Turns borders into vector paths that use a fill instead of a border
Pros:
- Can be combined with other layers that use a fill
- SVG will very reliably match it

Cons:
- Outlining at least doubles the number of vector points
- Thickness of the border/stroke is no longer editable

Method 2:

Reposition vector points to use a centered border
Pros:
- Default of Sketch starting at v43
- Follows SVG spec
- Currently, no other software does this

Cons:
- Can be time consuming
- Situations where creating a path through the middle of an inside/outside border is mathematically impossible

Pt 3: Layer Styles, Shadows, & Blend Modes

Repeat: The most convenient way to create something in Sketch may not result in the most efficient or reliable SVG

Multiple Fills

Sketch allows you to add multiple fills or borders to the same layer, but....
SVG elements only support one fill and one stroke per element
Always try to merge or reduce multiple fills into just one.

Sketch can handle multiple borders with a combination of inside, outside, and centered borders...but
Try to reduce how many borders you have, and rely mostly on centered borders rather than inside/outside

Borders

Blend Modes

Sketch allows you to add multiple fills or borders to the same layer, but....
SVG elements only support one fill and one stroke per element
Always try to merge or reduce multiple fills into just one

SVG doesn’t natively support shadows, so Sketch writes a custom “SVG Filter” effect during export
Shadows ca be replaced by creating a new layer filled with a semi-transparent linear or radial gradient

Shadows & Blurs

Pt. 4: SVG to Code

DOWNLOADS

SVG Markup Basics
Sample: SVG Device Icon

UTILITIES

SVG OMG by Jake Archibald

Exports

Edit > Copy SVG Code
Note: small differences between Copy SVG Code and the Export button in the Inspector
"Why does this matter again?". Designers handoff SVG code to Developers.

Use Artboards

Use for all SVG
Copy SVG code from Artboards
Repeat: Copy SVG code from Artboards

Download Sprite Sheet

SVG Spritemap (CodePen)

Pt 5: Checklist

Layers, Artboards, Groups

[ ] Use Artboards and keep sizes consistent
[ ] Avoid bitmap images. It's an SVG
[ ] Use unique and semantic layer names
[ ] Ungroup all layers -- before export

Shapes, Strokes, Shadows, Blend Modes

[ ] Flatten layers with flip or rotate transforms
[ ] Reconstruct masks with Boolean operations
[ ] Only use Convert to Outlines on borders if absolutely necessary
[ ] Merge multiple fills on the same layer
[ ] Replace non-Normal blend modes with new filled shapes
[ ] Consider replacing shadows with gradients when possible

Export and Code

[ ] Export or Copy SVG Code on the Artboard—not layers or slices

[ ] Optimize afterwards (install plugin) with SVGOMG

[ ] Include recommended declarations at the top of the SVG, if it will be used as an independent graphic

[ ] If using multiple inline SVGs on a webpage, ensure that none of their elements have the same ID