Talk I gave on the visual design process for designing for the web.

1. .web101
VISUAL
WEB
DESIGN
PROCESS
Nov 4th, 2014

2. HELLO.
.web101

3. raleighfelton
raleighfelton
.web101

4. Director of Design
SmashingBoxes.com

5. BELIEVE IN
THE PROCESS
Although it is forever changing

6. THERE ARE
NO HARD &
FAST RULES
Only a Road map

7. RESEARCH
& ASSESSMENT

8. 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?

9. THINK
ABOUT
CONTENT
What are we trying to solve.

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

11. 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?

12. START
PULLING
INSPIRATION
Mood Board

13. Where From? Anywhere really...
Dribbble
dribbble.com
Pinterest
pinterest.com
Designspiration
designspiration.net

14. Mood Board

15. Mood Board

16. OVERALL
STYLE
Style Tile

17. Start Styling
Typography (Headline, Subhead and body)
Color Palette (use color theory)
Design Elements (buttons, forms, models, drop-downs, etc...)
Iconography Style
Photography

18. Typography
google.com/fonts
fontsquirrel.com
fonts.com/web-fonts
typekit.com

19. Color Palette
Dribbble
dribbble.com/colors/
Adobe Kuler
color.adobe.com

20. Design Elements

21. Iconography
thenounproject.com

22. Photography
tumblr.com / unsplash.com

23. Style Frame
styletil.es/

24. SKETCH
Sketching is for mistakes

25. Loose Sketches / Final Comps

26. DESIGNING
Where To Begin?

27. 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)

28. Is it responsive?
Is it responsive for Browser, Tablet, Mobile?
If yes, is it mobile first?
If yes, design for small screen first.

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

30. Blank Document: Grid (my preference)
16 Column
(browsers)
http://www.w3schools.com/browsers/browsers_display.asp
10 Column
(mobile)
960px

33. DEFINING STUFF
Setting Styles

34. http://css3.mikeplate.com/

35. Template of each page

36. Template of each page

37. Tell A Story
Photography Icons/Copy
Illustration

38. THEN...

39. COLLABORATE WITH DEVS

40. FEEDBACK AND REVISION
AND FEEDBACK AND REVISION
AND FEEDBACK AND...

41. IT'S NEVER GOOD ENOUGH.

42. 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.
R. Buckminster Fuller

43. MAKE GOOD INTERNETS...

44. QA

45. 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 Styles
Choose Color Palette
Choose Fonts
Pull Photography Style/Illustration
Create UI elements (buttons, forms, etc...)

46. THANK YOU
.web101
raleighfelton
raleighfelton