Le Wagon - UI and Design Crash Course

59
UI & Design Crash Course @bpapillard

Transcript of Le Wagon - UI and Design Crash Course

Page 1: Le Wagon - UI and Design Crash Course

UI & Design Crash Course

@bpapillard

Page 2: Le Wagon - UI and Design Crash Course

Why this workshop?

Design for non-Designers

Page 3: Le Wagon - UI and Design Crash Course

I hired the best UX designer for my mockup.

I paid 1000$ for this logo.

I need a web-designer for my graphical identity.

Page 4: Le Wagon - UI and Design Crash Course

This is

Page 5: Le Wagon - UI and Design Crash Course

DisclaimerDisclaimer

100+ design services every day

Page 6: Le Wagon - UI and Design Crash Course

Let’s check Design collections

Page 7: Le Wagon - UI and Design Crash Course

1) Find inspiration 2) Find assets 3) Design rules of thumb 4) Sketch demo

Roadmap

Page 8: Le Wagon - UI and Design Crash Course

1) Inspiration

We are not born designers, We just copy/paste find inspiration

Page 9: Le Wagon - UI and Design Crash Course

What are you looking for?

General inspiration UI components examples Website design examples

Page 10: Le Wagon - UI and Design Crash Course

Inspiration for everything

Page 11: Le Wagon - UI and Design Crash Course

Challenge #1 - Dribbble search

A wagon or van

A signup form

An icon set

A free food icon set

Page 12: Le Wagon - UI and Design Crash Course

Inspiration for UI

Page 13: Le Wagon - UI and Design Crash Course

Challenge #2 - CallToIdea search

A login form

A footer

A 404 page

Page 14: Le Wagon - UI and Design Crash Course

UI pre-requisite, you must read

http://www.goodui.org/

Page 15: Le Wagon - UI and Design Crash Course

Inspiration for Website design

Page 16: Le Wagon - UI and Design Crash Course

2) Resources

Page 17: Le Wagon - UI and Design Crash Course

What’s a graphical asset?

Colors Images Icons Fonts

Code Snippets Gradients

Page 18: Le Wagon - UI and Design Crash Course

Colors - color pickers

Sip ColorZilla

Page 19: Le Wagon - UI and Design Crash Course

Colors - resources

colorhunt.co coolors.co

Page 20: Le Wagon - UI and Design Crash Course

http://nathanspeller.com/color-pickers/Colors - trends

Page 21: Le Wagon - UI and Design Crash Course

Images - resources

flick.comexhaustive

pixels.comselective

unsplash.itfor prototypes

Page 22: Le Wagon - UI and Design Crash Course

Icons - resources

thenounproject.comhistoric (B&W)

iconstore.cofree icons sets

Page 23: Le Wagon - UI and Design Crash Course

Challenge #3 - IconStore search

Entertainment icons

Sport icons

Legal icons

Page 24: Le Wagon - UI and Design Crash Course

Fonts - tools

FontFaceNinja

Page 25: Le Wagon - UI and Design Crash Course

Fonts - resources

google.com/fontsfree

myfonts.compaid

Page 26: Le Wagon - UI and Design Crash Course

Challenge #3 - Fonts search

Montserrat on Google

Raleway on Google

Avenir on MyFonts

Page 27: Le Wagon - UI and Design Crash Course

Gradients - resources

Page 28: Le Wagon - UI and Design Crash Course

Code Snippets - resources

codepen.io

Page 29: Le Wagon - UI and Design Crash Course

Challenge #4 - CodePen search

Loading

Progress Bar

Beers animation

Page 30: Le Wagon - UI and Design Crash Course

3) Design Rules of Thumb

Page 31: Le Wagon - UI and Design Crash Course

#1 - One day to fix your identityDon’t beat around the bush

Page 32: Le Wagon - UI and Design Crash Course

Persian Red - #D23333

Quincy - #6C5145

Mine Shaft - #343434

Sea Blue - #006A9C

Example - Our Colors

Page 33: Le Wagon - UI and Design Crash Course

Example - Our Fonts

Page 34: Le Wagon - UI and Design Crash Course

Le Wagon

NOT

lewagon LeWagon leWagon le wagon le Wagon

Example - Our Spelling

Page 35: Le Wagon - UI and Design Crash Course

#2 - Font = ratios

Page 36: Le Wagon - UI and Design Crash Course

#3 - Don’t buy all Font suite

Buy desktop version (.ttf) and convert it for web

Page 37: Le Wagon - UI and Design Crash Course

#4 - Contrast your texts

Big Bold Black HeaderLight Small Grey sub-header

Page 38: Le Wagon - UI and Design Crash Course

#5 - Don’t play fancy with colors

Gray scale is your best friend Bring colors with small touches

Page 39: Le Wagon - UI and Design Crash Course

Gray scale + Green

Page 40: Le Wagon - UI and Design Crash Course

#6 - Design = Space

The space that surrounds an object is as important as the object itself.

Page 41: Le Wagon - UI and Design Crash Course

#4 - No more startup stocks

Make it personal

Page 42: Le Wagon - UI and Design Crash Course

#7 - Add filters & shadows

Page 43: Le Wagon - UI and Design Crash Course

Can’t read text

Page 44: Le Wagon - UI and Design Crash Course

Can read text

Page 45: Le Wagon - UI and Design Crash Course

Better with text shadow

Page 46: Le Wagon - UI and Design Crash Course

#8 - Good Design is the one you don’t notice

Page 47: Le Wagon - UI and Design Crash Course

Poor Radius

Page 48: Le Wagon - UI and Design Crash Course

Good Radius

Page 49: Le Wagon - UI and Design Crash Course

Poor Border

Page 50: Le Wagon - UI and Design Crash Course

Good Border

Page 51: Le Wagon - UI and Design Crash Course

Poor Shadow

Page 52: Le Wagon - UI and Design Crash Course

Good Shadow

Page 53: Le Wagon - UI and Design Crash Course

#9 - Think proportions Size doesn’t mean proportion

Page 54: Le Wagon - UI and Design Crash Course

Same Sizes

Page 55: Le Wagon - UI and Design Crash Course

Same Proportions

Page 56: Le Wagon - UI and Design Crash Course

4) Sketch Demo

Page 57: Le Wagon - UI and Design Crash Course

Challenge #5 - Sketch Sprint

Newsletter banner for Le Wagon London

Social icons resized and colored

Let’s build

Custom icons re-shaped

Page 58: Le Wagon - UI and Design Crash Course

RememberDesign is accessible

Page 59: Le Wagon - UI and Design Crash Course

Thank you!