UX

Research

Set problem hypothesis
- Try to write down your problem hypothesis in less than 10 words

Set customer hypothesis
- Create a proto persona with the Persona Canvas

Test hypothesis
- Talk to people to test your problem and customer hypothesis

Interview tips
- Talk to your target
- 1-1
- Define your goals and keep them in mind
- Get ready to hear things you don't want to hear
- Ask open ended questions
- Rephrase what people tell you
- Look for insights and write them down
- Validate with currency

Analyze learnings and Refine
- Analyze what you've learned during your conversation
- Sort what's validated and invalidated
- Refine persona
- Start over with new hypothesis

Find a lot of solutions
- Write everything down and keep thinking, focus on quantity and withhold
criticism
- Do a semantic exploration (sun with 10 branches)
- Look at other products that solve similar problems
- Look at common human behaviors when trying to solve a similar problem
- Think about what your target is already using
- Think about the key issues that affect the problem
- Try to solve the opposite problem
- Solve a similar problem in a different field
- Brainstorm with monetization in mind

Find THE solution
- Prioritize your ideas by asking which ones are the most efficient and the most
feasible
- Get out of the building to get feedback on these ideas
- Pick the main feature, what all the app will be focused and oriented towards
- Only keep the sub-features that are needed to make the main feature work

Write User Narratives

- The persona is the voice of the story
- Start with a goal story
As [user persona] I want to [accomplish something] so that [some benefit happens]
- Break into smaller stories
- Write the stories on post its and stick them to the wall
- Remove as much friction as we can, make the first steps of the flow very easy

Use the Desire Engine
- Trigger: something that triggers the use of the product. External (like an email or a
notification) then Internal.
- Action: what the user does with your product
- Variable reward: give the user a reward that varies after he has done the action to
get him hooked
- Commitment: action that makes the user more likely to come back and that
improves the service for the next go around

Mockups

Definition
- Mockups (or wireframes) = blueprint of your app
- Mockups allows you to create a layout that serve your content.
For each screen you're designing ask yourself what the user is going to do with the
content.
Most common actions with content: create, consult, share and edit

Building your mockups
- Plan the flow according to your user stories
- Not more than 1 or 2 steps in a screen
- Below each screen write in 1 or 2 sentences what the user is supposed to do in the
screen

Visual concept

Inspiration
- Don't be afraid to steal ideas.
- Collect inspiration all the time. Use Gimmebar
- Inspiration sources:
http://dribbble.com/
http://www.behance.net/
http://pttrns.com/
http://www.mobile-patterns.com/
http://uxarchive.com/
http://www.android-app-patterns.com/
http://androidniceties.tumblr.com/
http://androidux.com/


Typography basics
- Typography is both verbal and visual

- Elements of a typeface
Type size (cap height): overall height of capital letters
Ascender: upward tail on letters like h, l, t, b, d, and k
Descender: downward tail for letters like g, q, and y
Counter: white space located inside letters like o and p
X Height (corpus size): height of the letter x
Baseline: the line upon which most letters "sit"

- Kerning: space between individual characters

- Tracking (letter spacing): space between letters in a line/block of text

- Leading: vertical space between lines of text
Body text: 1.2-1.5x size of the font
Title: 1.1-1.2x size of the font

- Text Alignement
Left: default, easiest to use
Center: for titles
Right: for buiness cards or letters
Justified: alignment on the left and right sides. Be careful of rivers of white
space (reduce tracking).

- The Measure: optimum width of a paragraph: 52-78 characters
Small measure less leading, wide measure more leading.

- Typeface (font): design for a set of characters

Font: specific size, weight and style of a typeface

- Typefaces families
Serif: typeface with serifs (small lines attached to the end of a stroke in a
letter or a symbol) + combination of thin and thick strokes. Easy to read
Sans Serif: typeface without serif and with even strokes. Easy to read
Script: typeface that imitates handwriting. Only for titles

Mixing Typefaces
- Avoid using fonts from the same family
- Play with size, weight, color

- Mobile apps
One typeface for the text
One typeface for the title/logo

Color picker
-> Subtractive colors
- When light hits an object, you attribute it a color depending on what part of the
color spectrum the object absorbs or reflects.
- Primary subtractive colors: Cyan, Magenta and Yellow

-> Additive colors
- Objects that generate light, like digital screens, create colors by mixing Red, Green
and Blue lights
- Primary additive colors: Red, Green and Blue (RGB model)

-> RGB Model
- Intensity of each color ranges from 0 (no light) to 255 (full intensity)
- A Hexadecimal value is a number between 1 and 16 represented by a number or
letter from 0 to F (0123456789ABCDEF)
- Hex code: each color intensity is represented by 2 hex values -> #FF0000 = pure
red

-> HSB model
- Hue: a color in its purest form
The Hue scale ranges from 0 to 360
- Saturation: purity of the hue
0% (desaturated) to 100% (fully saturated)
x axis of the color picker
- Brightness: how light or dark a hue is
0% (dark) 100% (bright)
y axis of the color picker

-> Alpha: opacity of the color

0% (full transparency) 100% (full opacity)

Color Theory
- Color theory was developed by painters therefore relies on the subtractive color
system
- Primary colors for color theory: Blue, Red and Yellow
- Secondary colors are created by mixing primary colors 2 by 2 Orange, Green and
Purple
- Tertiary colors are created by mixing a primary color to a tertiary color, e.g red-
orange

-> Tints, shades and tones
- tint : add light to a hue
- shade: add black to a hue
- tone : add grey to a hue

-> Color Scheme
- Choice of colors used in the designs
- Framework to come up with color schemes
1. Select a base color
2. Select secondary colors using harmony principles
3. Adjust tints, shades and tones

Colors meanings
- Warm colors: red, orange and yellow
Arousing and stimulating. Advance to the foreground
- Red: fire & blood, love & passion, Energy, strength, power, romance, determination,
action, confidence, courage, vitality, desire, danger
- Yellow: sunshine, hope, joy, cheerfulness, wisdom, intellectual energy
good to get attention
- Orange: energy, joy, tropics, enthusiasm, creativity, success, determination,
attraction, encouragement, stimulation, strength
good to get attention

- Cool colors: green, blue and purple
Calming and relaxing. Tend to recede
- Blue: sky, sea, stability, depth, expertise, trust, intelligence, calm
- Green: nature, growth, renewal, fertility, freshness, and hope, healing, wealth,
money, stability, endurance, harmony, safety
used a lot to signify validation
- Purple: royalty, power, nobility, luxury, wisdom, ambition, extravagance, creativity,
mystery, magic

- Neutral colors: Black, White, Grey
often served as the backdrop, combined with brighter colors

- Black: death, darkness and mystery, power, strength, authority, prestige.

Good anchor color for media content. Don't use it if you have a lot of text
Use Dark grey instead of pure black for text.
- White: cleanliness, purity, perfection, space, objectivity, goodness, innocence,
purity, virginity, health
White and light grey is great as a background color if you have a lot of content.

Mixing colors

-> Traditional color schemes
- Monochromatic scheme: different tones, shades and tints within a specific hue
- Complementary scheme: colors opposite to each other on the color wheel
- Split complementary scheme: one hue plus two others equally spaced from its
complement
- Analogous scheme: colors adjacent to each other on the color wheel
- Triadic scheme: colors that are evenly spaced around the color wheel
- Tetradic scheme: four colors arranged into two complementary pairs

-> Create a color scheme
- Use Kuler
- 2 easy and effective ways to create a color scheme
1. 1 color + shades/tints of this color + 1 color at least three spaces away on
the color wheel
2. 1 color + shades/tints of this color to create neutral colors

Interface design


Retina / non-retina
- 1pt = 1px non retina = 4px retina
- 1x = design non retina / 2x = design retina
- Check resolution: http://screensiz.es/
- Convert dimensions: http://www.teehanlax.com/blog/density-converter/


Layout / Visual hierarchy
- Use grey rectangles to create the layout of your app and make sure the visual
hierarchy is well balanced
- Position everything carefully
- Once your pleased with your layout, replace the grey rectangles by the real
elements


Preview your designs on the device youre designing for
- Use Sketch Mirror (built in Sketch)
- Or Skala: http://bjango.com/mac/skalapreview/


Sketch Shortcuts
See the Sketch Keyboard Shortcuts file.

- Hold alt when an element is select and hover over another element to display the
distance between the two


Effects
- How to give a recess look:
gradient with the darkest color at the bottom
glow (white shadow) at the bottom
inner shadow (dark) at the top and the bottom

- Make an object come out of the screen
dark shadow at the bottom
white inner shadow at the top

- Gradient
light color at the top and dark color at the bottom: convex
dark color at the top and light color at the bottom: concave

- Use icons from templates and icons set

- Flatten the icon before your resize it

Boolean
- You can create almost any graphic representation by assembling simple shapes
- Use boolean operations to combine shapes
- Boolean operations in sketch are non destructive
- Union: merges shapes
- Subtract: subtracts the shapes at the top from the one below it
- Intersect: displays the intersection between the shapes
- Difference: remove the overlapping part

- Use the pixel view if you need to be more precise
- View > Show pixels

Vector edit mode
- double click on a shape to make the vector points appear, or hit enter if the shape
is selected
- hold cmd + click to add a vector point in the middle of a segment

Vector tool
- Click anywhere on the canvas to add a first vector point
- Add another vector point and a line will connect bothe points
- Hold down the mouse and drag away when you add a point to draw a curve
- The two small dots connected to the new point are called control points. Their
position determines the exact curve between the main points.
- Hold shift to align the new point at a 45 angle
- Hold the alt key, to make a circle appear, you can place your new point anywhere
on the circle
- Use the arrows on the keyboard to move the control point to be more precise, and
count
- Close the path by selecting the first point again. Or press Enter or Escape if you
dont want to close the path

Point modes
- Straight: no control points and therefore just straight lines.
- Mirrored: Control points mirror each other; they are opposite each other and at the
same distance from the main point. If a vector point is not straight, this is the
default.
- Asymmetric: Distance between the control points and the main point is
independent, but they do mirror each other.
- Disconnected: Control points are completely independent of each other.
- Rounded: The point is rendered as a rounded corner with a specific radius, that
you can change here

Scissor tool
- If you dont have it in your tool bar, right click > customize toolbar

- Allows you to cut a segment between 2 vector points

Masks
- Masks are used to selectively show parts of other layers
- Right click on the layer you want to use as a mask
- All the layers above the mask will be affected
- Unless you right click on them and select ignore underlying mask
- Or unless you put the mask and the layers you want clipped inside a group


- Content -> Padding -> Border -> Margin

Style guide and exporting

Talk with the developer before exporting

Export file
- Collect bricks: design elements you and your team can use to build the screens of
the app
- Prepare slices: Slices of elements from a same category have to have the same size

Style Guide
- Document everything from colors to typography, buttons, content, margins,
- This style guide is for the developer
- And for you and your team to keep the consistency of the design

Export
- Select a layer or a group of layers, go to file>add slices for selection
- Entre the export mode by clicking the export button in the toolbar on the right
- You can create new slices and edit existing ones in the export mode
- Export slices as PNGs
- The slide preview can be dragged outside sketch to export
- If you dont want to export everything thats inside the slice, check only include
the following, uncheck everything in the menu below, and recheck what you want
to keep.
- Trim transparent pixels will reduce the size of the slice by removing the unused
pixels
- Also export as Double size if designing 1x or Half size if designing 2x
- @2x naming convention for retina files



App icon

- Find one simple graphic element that represents your app
- If you can't find any graphic element, use the first letter of the name of your app
- Export without the mask