Sharpening the AxePreparation and planning are integral to successful design.

Dustin J CooperDrupal Designer@dustinjcooperdustin.cooper@mediacurrent.com

www.mediacurrent.com

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

-Lincoln

Actual Photo - circa 1840

Overview

● Introduction

● Discovery

● Sketching

● Wireframing

● Mockups

● Links

● Closing/Questions

Hello World! I'm 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 a student.

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.

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

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.

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 the same page.

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.

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.

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.

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 your clients to feel when

using your product?

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?

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?

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.

Discovery● Questions to ask: (Cont.)

○ When your typical customer visits the website what is the experience you would like them to have.

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?

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?

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?

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

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 is

cheaper than mockups.

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.

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

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

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 needed and what is not

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

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)

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.

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.

Wireframing

● Wireframe is a blueprint. You wouldn't want someone to build

your house without a blueprint would you?

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.

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.

● 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

What are some of your favorite wireframing tools?

● 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

● Use a grid - 960.gs FTW!

Wireframing

● Use a grid - 960.gs FTW!

● Your designs will look more professional when properly aligned

Wireframing

● 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

● 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

● 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-planning

Wireframing

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 your wireframe and draw on top of it. I use photoshop.

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/

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/

Sites● A beginner's guide to wireframing

http://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

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 Ebookshttps://shop.smashingmagazine.com/ebooks

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/

Thank You!

Questions

If you enjoyed this please let me know on twitter @dustinjcooper