Sharpening the AxePreparation and planning are integral to successful design.Dustin J CooperDrupal Designer@dustinjcooperd...
"If I had 8 hours to chop down a tree, Idspend 6 sharpening my axe."-Lincoln
Actual Photo - circa 1840
Overview● Introduction● Discovery● Sketching● Wireframing● Mockups● Links● Closing/Questions
Hello World!Im Dustin Cooper.A ProudDrupal Designer@Mediacurrent.
Introduction● Working with Drupal for 4 years now.
Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.
Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.● Forever...
Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.● Forever...
Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.● Forever...
Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.● Forever...
Discovery
Discovery● Initial meeting between you and client.
Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.
Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.● You and client get on t...
Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.● You and client get on t...
Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.● You and client get on t...
Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.● You and client get on t...
Discovery● Questions to ask:○ What are you looking to accomplish with this project?
Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want you...
Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want you...
Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want you...
Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want you...
Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like t...
Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like t...
Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like t...
Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like t...
Discovery● Josh Estep, developer at Mediacurrent, did a great blogpost ondiscovery, check it out here:http://www.mediacurr...
Sketching
Who hear sketches first?
Sketching● Ideally you want to always start with a sketch
Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeape...
Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeape...
Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeape...
Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeape...
Wireframing
Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.
Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.○ Helps identify what is neede...
Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.○ Helps identify what is neede...
Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.○ Helps identify what is neede...
Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.○ Helps identify what is neede...
Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.○ Helps identify what is neede...
Wireframing● Wireframe is a blueprint. You wouldnt want someone to buildyour house without a blueprint would you?
Wireframing● Wireframe is a blueprint. You wouldnt want someone to buildyour house without a blueprint would you?● Might s...
Wireframing● Wireframe is a blueprint. You wouldnt want someone to buildyour house without a blueprint would you?● Might s...
● I use omnigraffle as my wireframing tool of choice● Other popular tools include:○ Balsalmiq○ Cacoo.com○ Adobe Fireworks○...
What are some of your favoritewireframing tools?
● Get some stencils● Omnigraffle has great stencils. Download additional stencils froGraffletopia - https://www.graffletop...
● Use a grid - 960.gs FTW!Wireframing
● Use a grid - 960.gs FTW!● Your designs will look more professional when properly alignedWireframing
● Use a grid - 960.gs FTW!● Your designs will look more professional when properly aligned● Omega and other themes use a g...
● Use a grid - 960.gs FTW!● Your designs will look more professional when properly aligned● Omega and other themes use a g...
● I did a blogpost on wireframe, check it out herehttp://www.mediacurrent.com/blog/wireframing-worth-it● Co-worker Jeff Di...
Mockups
Mockups● Time to get creative - Add color, type, texture, patterns
Mockups● Time to get creative - Add color, type, texture, patterns● This is the time for all the detailed stuff
Mockups● Time to get creative - Add color, type, texture, patterns● This is the time for all the detailed stuff● Bring in ...
Mockups● Time to get creative - Add color, type, texture, patterns● This is the time for all the detailed stuff● Bring in ...
Mockups● Time to get creative - Add color, type, texture, patterns● This is the time for all the detailed stuff● Bring in ...
Sites● A beginners guide to wireframinghttp://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wir...
Books● Designing for Emotionhttp://www.abookapart.com/products/designing-for-emotion● Communicating Designhttp://communica...
Podcasts● Shop Talkhttp://shoptalkshow.com/● Big Web Showhttp://5by5.tv/bigwebshow● The Creative Processhttp://www.lullabo...
Thank You!QuestionsIf you enjoyed this please let me know on twitter@dustinjcooper
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Sharpening the Axe
Upcoming SlideShare
Loading in...5
×

Sharpening the Axe

1,122

Published on

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.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,122
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sharpening the Axe

  1. 1. Sharpening the AxePreparation and planning are integral to successful design.Dustin J CooperDrupal Designer@dustinjcooperdustin.cooper@mediacurrent.comwww.mediacurrent.com
  2. 2. "If I had 8 hours to chop down a tree, Idspend 6 sharpening my axe."-Lincoln
  3. 3. Actual Photo - circa 1840
  4. 4. Overview● Introduction● Discovery● Sketching● Wireframing● Mockups● Links● Closing/Questions
  5. 5. Hello World!Im Dustin Cooper.A ProudDrupal Designer@Mediacurrent.
  6. 6. Introduction● Working with Drupal for 4 years now.
  7. 7. Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.
  8. 8. Introduction● Working with Drupal for 4 years now.● I sketch, create wireframes/mockups and write front end code.● Forever a student.
  9. 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. 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. 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.
  12. 12. Discovery
  13. 13. Discovery● Initial meeting between you and client.
  14. 14. Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.
  15. 15. Discovery● Initial meeting between you and client.● Sets the tone for project. Establish rapport.● You and client get on the same page.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. Discovery● Questions to ask:○ What are you looking to accomplish with this project?
  20. 20. Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want your clients to feel whenusing your product?
  21. 21. Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want your clients to feel whenusing your product?○ What is it that makes your product better than yourcompetitors?
  22. 22. Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want your clients to feel whenusing your product?○ What is it that makes your product better than yourcompetitors?○ Who is your target market?
  23. 23. Discovery● Questions to ask:○ What are you looking to accomplish with this project?○ What kind of emotions do you want your clients to feel whenusing your product?○ What is it that makes your product better than yourcompetitors?○ Who is your target market?○ Describe your typical customer and why they are your typicalcustomer.
  24. 24. Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like them to have.
  25. 25. Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like them to have.○ Do you have an established brand? If so, what are theguidelines set for the brand?
  26. 26. Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like them to have.○ Do you have an established brand? If so, what are theguidelines set for the brand?○ Color preferences? Any colors to avoid?
  27. 27. Discovery● Questions to ask: (Cont.)○ When your typical customer visits the website what is theexperience you would like them to have.○ Do you have an established brand? If so, what are theguidelines set for the brand?○ Color preferences? Any colors to avoid?○ What adjectives would you use to describe your product?
  28. 28. Discovery● Josh Estep, developer at Mediacurrent, did a great blogpost ondiscovery, check it out here:http://www.mediacurrent.com/blog/help-ensure-your-website-project-success
  29. 29. Sketching
  30. 30. Who hear sketches first?
  31. 31. Sketching● Ideally you want to always start with a sketch
  32. 32. Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeaper than mockups.
  33. 33. Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeaper than mockups.● During this time you want to stoke your creative fire, do lots ofresearch.
  34. 34. Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeaper than mockups.● During this time you want to stoke your creative fire, do lots ofresearch.● I like to do some mind mapping
  35. 35. Sketching● Ideally you want to always start with a sketch● Sketching is cheaper to iterate than wireframing which ischeaper than mockups.● During this time you want to stoke your creative fire, do lots ofresearch.● I like to do some mind mapping● Sketch everything you can think of, even the dumb stuff
  36. 36. Wireframing
  37. 37. Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.
  38. 38. Wireframing● Purpose of the wireframe○ Its about layout and interaction. Function over form.○ Helps identify what is needed and what is not
  39. 39. 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
  40. 40. 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)
  41. 41. 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.
  42. 42. 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 soonerrather than later. Easier to work out during this phase.
  43. 43. Wireframing● Wireframe is a blueprint. You wouldnt want someone to buildyour house without a blueprint would you?
  44. 44. Wireframing● Wireframe is a blueprint. You wouldnt want someone to buildyour house without a blueprint would you?● Might skip a sketch, but never a wireframe.
  45. 45. Wireframing● Wireframe is a blueprint. You wouldnt want someone to buildyour house without a blueprint would you?● Might skip a sketch, but never a wireframe.● Find Inspiration - look at how other websites are laid out. SearchFlickr for wireframes.
  46. 46. ● 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 Flickrhttp://www.flickr.com/search/?q=wireframesWireframing
  47. 47. What are some of your favoritewireframing tools?
  48. 48. ● Get some stencils● Omnigraffle has great stencils. Download additional stencils froGraffletopia - https://www.graffletopia.com/● Yahoo stencil set is great too. Has many versions/formatsavailable including Illustrator.http://developer.yahoo.com/ypatterns/about/stencils/● Zurb Foundationhttp://www.zurb.com/playground/foundation-stencil-setsWireframing
  49. 49. ● Use a grid - 960.gs FTW!Wireframing
  50. 50. ● Use a grid - 960.gs FTW!● Your designs will look more professional when properly alignedWireframing
  51. 51. ● 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 senseWireframing
  52. 52. ● 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 designWireframing
  53. 53. ● I did a blogpost on wireframe, check it out herehttp://www.mediacurrent.com/blog/wireframing-worth-it● Co-worker Jeff Diecks has a post also along these lineshttp://www.mediacurrent.com/blog/rational-redesigns-visual-planningWireframing
  54. 54. Mockups
  55. 55. Mockups● Time to get creative - Add color, type, texture, patterns
  56. 56. Mockups● Time to get creative - Add color, type, texture, patterns● This is the time for all the detailed stuff
  57. 57. 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.
  58. 58. 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/
  59. 59. 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/
  60. 60. Sites● A beginners guide to wireframinghttp://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/● 20 Steps to a better wireframehttp://blog.teamtreehouse.com/20-steps-to-better-wireframing● Smashing Magazine Wireframing Kitshttp://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/● Tuts Premiumhttps://tutsplus.com/● Speed Art - Website Mockuphttp://www.youtube.com/watch?v=ZzJkjW9m2B0
  61. 61. Books● Designing for Emotionhttp://www.abookapart.com/products/designing-for-emotion● Communicating Designhttp://communicatingdesign.com/● Dont Make Me Thinkhttp://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758● Smashing Magazine Ebookshttps://shop.smashingmagazine.com/ebooks
  62. 62. Podcasts● Shop Talkhttp://shoptalkshow.com/● Big Web Showhttp://5by5.tv/bigwebshow● The Creative Processhttp://www.lullabot.com/blog/podcasts/the-creative-process● Drupal Easyhttp://drupaleasy.com/● Accidental Creativehttp://www.accidentalcreative.com/
  63. 63. Thank You!QuestionsIf you enjoyed this please let me know on twitter@dustinjcooper
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×