VISUALWEB DESIGN PROCESS

.web101

Nov 4th, 2014

HELLO.

.web101

raleighfelton

raleighfelton

.web101

Director of Design

SmashingBoxes.com

BELIEVE INTHE PROCESSAlthough it is forever changing

THERE ARE NO HARD & FAST RULESOnly a Road map

RESEARCH& ASSESSMENT

Example Questions

Why was the company created?

What do your users watch, what do they read, where do they browse?

How do you measure success?

Place yourself in the future. If your company could do anything or be anything, what would it be?

If you could communicate a single message about your company, what would it be?

THINK ABOUT CONTENTWhat are we trying to solve.

Je�erey Zeldman

CONTENT PRECEDES DESIGN. DESIGN IN THE ABSENCE OF CONTENT IS NOT DESIGN, IT’S DECORATION.

Answer these in writing:

1. What is the purpose of the design?

2. What do we want to get across to the users?

3. Does/Can the design have a motif?

4. What story are we trying to tell?

STARTPULLINGINSPIRATIONMood Board

Where From? Anywhere really...

Dribbbledribbble.com

Pinterestpinterest.com

Designspirationdesignspiration.net

Mood Board

Mood Board

OVERALLSTYLEStyle Tile

Start Styling

Typography (Headline, Subhead and body)

Color Palette (use color theory)

Design Elements (buttons, forms, models, drop-downs, etc...)

Iconography Style

Photography

Typography

fontsquirrel.com

google.com/fonts

typekit.com

fonts.com/web-fonts

Color Palette

Dribbbledribbble.com/colors/

Adobe Kulercolor.adobe.com

Design Elements

Iconography

thenounproject.com

Photography

tumblr.com / unsplash.com

Style Frame

styletil.es/

SKETCHSketching is for mistakes

Loose Sketches / Final Comps

DESIGNINGWhere To Begin?

Our Mindset

Challenge Ourselves

Pay attention to the details

Don't be married to your design

Bring Developers into the project

Design comes first (not just visual design)

Is it responsive?

Is it responsive for Browser, Tablet, Mobile?

If yes, is it mobile first?

If yes, design for small screen first.

GRID?Yes, but rules are meant to be broken...

Blank Document: Grid (my preference)

http://www.w3schools.com/browsers/browsers_display.asp

16 Column(browsers)

10 Column(mobile)

960px

DEFINING STUFFSetting Styles

http://css3.mikeplate.com/

Template of each page

Template of each page

Tell A Story

Photography Icons/Copy

Illustration

THEN...

COLLABORATE WITH DEVS

FEEDBACK AND REVISION AND FEEDBACK AND REVISION

AND FEEDBACK AND...

IT'S NEVER GOOD ENOUGH.

R. Buckminster Fuller

WHEN I AM WORKING ON A PROBLEM, I NEVER THINK ABOUT BEAUTY BUT WHEN I HAVE FINISHED, IF THE SOLUTION IS NOT BEAUTIFUL, I KNOW IT IS WRONG.

MAKE GOOD INTERNETS...

Q&A

The Visual Design Process Workshop

1. Create Mood Board This should only shape your inspiration on how you want your site to feel.

2. Start Defining StylesChoose Color Palette

Choose Fonts

Pull Photography Style/Illustration

Create UI elements (buttons, forms, etc...)

.web101

raleighfelton

raleighfelton

THANK YOU