A wise man once said "If I had 8 hours to chop down a tree, I'd spend 6 sharpening my axe." Preparation and planning are integral to successful design. Taking the time to define the problem, frame out potential solutions and stoking your creative fire will give you the edge needed to create solid and successful designs. Discovery: Asking the who, what and why's. Sketching: Why you do not want to skip this step. Wireframing: Laying out the foundation for your design. Mockups: Bringing it all together with color, texture and more. Who is this session for: Mostly beginner freelance designers and front-end devs. Shop designers and front-end devs that work on a team may also find this presentation valuable. Along with project managers and other team members involved in the discovery phase.

1. Sharpening the Axe
Preparation and planning are integral to successful design.
Dustin J Cooper
Drupal Designer
@dustinjcooper
dustin.cooper@mediacurrent.com
www.mediacurrent.com

2. "If I had 8 hours to chop down a tree, I'd
spend 6 sharpening my axe."
-Lincoln

3. Actual Photo - circa 1840

4. Overview
● Introduction
● Discovery
● Sketching
● Wireframing
● Mockups
● Links
● Closing/Questions

5. Hello World!
I'm Dustin Cooper.
A Proud
Drupal Designer
@Mediacurrent.

6. Introduction
● Working with Drupal for 4 years now.

7. Introduction
● Working with Drupal for 4 years now.
● I sketch, create wireframes/mockups and write front end code.

8. Introduction
● Working with Drupal for 4 years now.
● I sketch, create wireframes/mockups and write front end code.
● Forever a student.

9. Introduction
● Working with Drupal for 4 years now.
● I sketch, create wireframes/mockups and write front end code.
● Forever a student.
● Favorite tools - omnigraffle, photoshop, illustrator, sublime,
sass/compass.

10. Introduction
● Working with Drupal for 4 years now.
● I sketch, create wireframes/mockups and write front end code.
● Forever a student.
● Favorite tools - omnigraffle, photoshop, illustrator,
sass/compass.
● I also like beer, long walks on the beach and ...

11. Introduction
● Working with Drupal for 4 years now.
● I sketch, create wireframes/mockups and write front end code.
● Forever a student.
● Favorite tools - omnigraffle, photoshop, illustrator,
sass/compass.
● I also like beer, long walks on the beach and ....
● Growing my beard.

16. Discovery

17. Discovery
● Initial meeting between you and client.

18. Discovery
● Initial meeting between you and client.
● Sets the tone for project. Establish rapport.

19. Discovery
● Initial meeting between you and client.
● Sets the tone for project. Establish rapport.
● You and client get on the same page.

20. Discovery
● Initial meeting between you and client.
● Sets the tone for project. Establish rapport.
● You and client get on the same page.
● Get clear on what the goals are.

21. Discovery
● Initial meeting between you and client.
● Sets the tone for project. Establish rapport.
● You and client get on the same page.
● Get clear on what the goals are.
● Ask lots of questions. Take good notes.

22. Discovery
● Initial meeting between you and client.
● Sets the tone for project. Establish rapport.
● You and client get on the same page.
● Get clear on what the goals are.
● Ask lots of questions. Take good notes.
● Read functional spec. thoroughly.

23. Discovery
● Questions to ask:
○ What are you looking to accomplish with this project?

24. Discovery
● Questions to ask:
○ What are you looking to accomplish with this project?
○ What kind of emotions do you want your clients to feel when
using your product?

25. Discovery
● Questions to ask:
○ What are you looking to accomplish with this project?
○ What kind of emotions do you want your clients to feel when
using your product?
○ What is it that makes your product better than your
competitors?

26. Discovery
● Questions to ask:
○ What are you looking to accomplish with this project?
○ What kind of emotions do you want your clients to feel when
using your product?
○ What is it that makes your product better than your
competitors?
○ Who is your target market?

27. Discovery
● Questions to ask:
○ What are you looking to accomplish with this project?
○ What kind of emotions do you want your clients to feel when
using your product?
○ What is it that makes your product better than your
competitors?
○ Who is your target market?
○ Describe your typical customer and why they are your typical
customer.

28. Discovery
● Questions to ask: (Cont.)
○ When your typical customer visits the website what is the
experience you would like them to have.

29. Discovery
● Questions to ask: (Cont.)
○ When your typical customer visits the website what is the
experience you would like them to have.
○ Do you have an established brand? If so, what are the
guidelines set for the brand?

30. Discovery
● Questions to ask: (Cont.)
○ When your typical customer visits the website what is the
experience you would like them to have.
○ Do you have an established brand? If so, what are the
guidelines set for the brand?
○ Color preferences? Any colors to avoid?

31. Discovery
● Questions to ask: (Cont.)
○ When your typical customer visits the website what is the
experience you would like them to have.
○ Do you have an established brand? If so, what are the
guidelines set for the brand?
○ Color preferences? Any colors to avoid?
○ What adjectives would you use to describe your product?

32. Discovery
● Josh Estep, developer at Mediacurrent, did a great blogpost on
discovery, check it out here:
http://www.mediacurrent.com/blog/help-ensure-your-website-
project-success

33. Sketching

34. Who hear sketches first?

35. Sketching
● Ideally you want to always start with a sketch

37. Sketching
● Ideally you want to always start with a sketch
● Sketching is cheaper to iterate than wireframing which is
cheaper than mockups.

39. Sketching
● Ideally you want to always start with a sketch
● Sketching is cheaper to iterate than wireframing which is
cheaper than mockups.
● During this time you want to stoke your creative fire, do lots of
research.

41. Sketching
● Ideally you want to always start with a sketch
● Sketching is cheaper to iterate than wireframing which is
cheaper than mockups.
● During this time you want to stoke your creative fire, do lots of
research.
● I like to do some mind mapping

43. Sketching
● Ideally you want to always start with a sketch
● Sketching is cheaper to iterate than wireframing which is
cheaper than mockups.
● During this time you want to stoke your creative fire, do lots of
research.
● I like to do some mind mapping
● Sketch everything you can think of, even the dumb stuff

45. Wireframing

46. Wireframing
● Purpose of the wireframe
○ Its about layout and interaction. Function over form.

47. Wireframing
● Purpose of the wireframe
○ Its about layout and interaction. Function over form.
○ Helps identify what is needed and what is not

48. Wireframing
● Purpose of the wireframe
○ Its about layout and interaction. Function over form.
○ Helps identify what is needed and what is not
○ Sets priority for features, blocks and other elements

49. Wireframing
● Purpose of the wireframe
○ Its about layout and interaction. Function over form.
○ Helps identify what is needed and what is not
○ Sets priority for features, blocks and other elements
○ You and client are free from distractions
(color, type, images, textures and more)

50. Wireframing
● Purpose of the wireframe
○ Its about layout and interaction. Function over form.
○ Helps identify what is needed and what is not
○ Sets priority for features, blocks and other elements
○ You and client are free from distractions
(color, type, images, textures and more)
○ Cheap to iterate. More malleable than a mockup.

51. Wireframing
● Purpose of the wireframe
○ Its about layout and interaction. Function over form.
○ Helps identify what is needed and what is not
○ Sets priority for features, blocks and other elements
○ You and client are free from distractions
(color, type, images, textures and more)
○ Cheap to iterate. More malleable than a mockup.
○ Wireframes allow you to discover issues/problems sooner
rather than later. Easier to work out during this phase.

57. Wireframing
● Wireframe is a blueprint. You wouldn't want someone to build
your house without a blueprint would you?

58. Wireframing
● Wireframe is a blueprint. You wouldn't want someone to build
your house without a blueprint would you?
● Might skip a sketch, but never a wireframe.

59. Wireframing
● Wireframe is a blueprint. You wouldn't want someone to build
your house without a blueprint would you?
● Might skip a sketch, but never a wireframe.
● Find Inspiration - look at how other websites are laid out. Search
Flickr for wireframes.

60. ● I use omnigraffle as my wireframing tool of choice
● Other popular tools include:
○ Balsalmiq
○ Cacoo.com
○ Adobe Fireworks
○ Adobe Illustrator
○ Adobe InDesign
○ Adobe Photoshop
● Find examples on Flickr
http://www.flickr.com/search/?q=wireframes
Wireframing

64. What are some of your favorite
wireframing tools?

65. ● Get some stencils
● Omnigraffle has great stencils. Download additional stencils fro
Graffletopia - https://www.graffletopia.com/
● Yahoo stencil set is great too. Has many versions/formats
available including Illustrator.
http://developer.yahoo.com/ypatterns/about/stencils/
● Zurb Foundation
http://www.zurb.com/playground/foundation-stencil-sets
Wireframing

66. ● Use a grid - 960.gs FTW!
Wireframing

68. ● Use a grid - 960.gs FTW!
● Your designs will look more professional when properly aligned
Wireframing

69. ● Use a grid - 960.gs FTW!
● Your designs will look more professional when properly aligned
● Omega and other themes use a grid so it just makes sense
Wireframing

71. ● Use a grid - 960.gs FTW!
● Your designs will look more professional when properly aligned
● Omega and other themes use a grid so it just makes sense
● Grids provide structure, crucial for a good design
Wireframing

72. ● I did a blogpost on wireframe, check it out here
http://www.mediacurrent.com/blog/wireframing-worth-it
● Co-worker Jeff Diecks has a post also along these lines
http://www.mediacurrent.com/blog/rational-redesigns-visual-
planning
Wireframing

73. Mockups

74. Mockups
● Time to get creative - Add color, type, texture, patterns

75. Mockups
● Time to get creative - Add color, type, texture, patterns
● This is the time for all the detailed stuff

76. Mockups
● Time to get creative - Add color, type, texture, patterns
● This is the time for all the detailed stuff
● Bring in your wireframe and draw on top of it. I use photoshop.

77. Mockups
● Time to get creative - Add color, type, texture, patterns
● This is the time for all the detailed stuff
● Bring in your wireframe and draw on top of it. I use photoshop.
● Color
○ Adobe Kuhler
○ Colour Lovers - http://www.colourlovers.com/

78. Mockups
● Time to get creative - Add color, type, texture, patterns
● This is the time for all the detailed stuff
● Bring in your wireframe and draw on top of it. I use photoshop.
● Color
○ Adobe Kuhler
○ Colour Lovers - http://www.colourlovers.com/
● Typography (limit to 2-3 non-standard fonts)
○ Google Fonts - http://www.google.com/fonts/
○ Font Squirrel - http://www.fontsquirrel.com/

82. Sites
● A beginner's guide to wireframing
http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-
beginners-guide-to-wireframing/
● 20 Steps to a better wireframe
http://blog.teamtreehouse.com/20-steps-to-better-wireframing
● Smashing Magazine Wireframing Kits
http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-
web-design-wireframing-kits-resources-and-source-files/
● Tuts Premium
https://tutsplus.com/
● Speed Art - Website Mockup
http://www.youtube.com/watch?v=ZzJkjW9m2B0

83. Books
● Designing for Emotion
http://www.abookapart.com/products/designing-for-emotion
● Communicating Design
http://communicatingdesign.com/
● Don't Make Me Think
http://www.amazon.com/Dont-Make-Me-Think-
Usability/dp/0321344758
● Smashing Magazine Ebooks
https://shop.smashingmagazine.com/ebooks

84. Podcasts
● Shop Talk
http://shoptalkshow.com/
● Big Web Show
http://5by5.tv/bigwebshow
● The Creative Process
http://www.lullabot.com/blog/podcasts/the-creative-process
● Drupal Easy
http://drupaleasy.com/
● Accidental Creative
http://www.accidentalcreative.com/

85. Thank You!
Questions
If you enjoyed this please let me know on twitter
@dustinjcooper