Sharpening the Axe

85
Sharpening the Axe Preparation and planning are integral to successful design. Dustin J Cooper Drupal Designer @dustinjcooper [email protected] www.mediacurrent.com

description

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.

Transcript of Sharpening the Axe

Page 1: Sharpening the Axe

Sharpening the AxePreparation and planning are integral to successful design.

Dustin J CooperDrupal [email protected]@mediacurrent.com

www.mediacurrent.com

Page 2: Sharpening the Axe

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

-Lincoln

Page 3: Sharpening the Axe

Actual Photo - circa 1840

Page 4: Sharpening the Axe

Overview

● Introduction

● Discovery

● Sketching

● Wireframing

● Mockups

● Links

● Closing/Questions

Page 5: Sharpening the Axe

Hello World! I'm Dustin Cooper.

A ProudDrupal Designer @Mediacurrent.

Page 6: Sharpening the Axe

Introduction● Working with Drupal for 4 years now.

Page 7: Sharpening the Axe

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

Page 8: Sharpening the Axe

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

Page 9: Sharpening the Axe

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.

Page 10: Sharpening the Axe

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

Page 11: Sharpening the Axe

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.

Page 12: Sharpening the Axe
Page 13: Sharpening the Axe
Page 14: Sharpening the Axe
Page 15: Sharpening the Axe
Page 16: Sharpening the Axe

Discovery

Page 17: Sharpening the Axe

Discovery

● Initial meeting between you and client.

Page 18: Sharpening the Axe

Discovery

● Initial meeting between you and client.

● Sets the tone for project. Establish rapport.

Page 19: Sharpening the Axe

Discovery

● Initial meeting between you and client.

● Sets the tone for project. Establish rapport.

● You and client get on the same page.

Page 20: Sharpening the Axe

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.

Page 21: Sharpening the Axe

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.

Page 22: Sharpening the Axe

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.

Page 23: Sharpening the Axe

Discovery● Questions to ask:

○ What are you looking to accomplish with this project?

Page 24: Sharpening the Axe

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?

Page 25: Sharpening the Axe

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?

Page 26: Sharpening the Axe

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?

Page 27: Sharpening the Axe

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.

Page 28: Sharpening the Axe

Discovery● Questions to ask: (Cont.)

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

Page 29: Sharpening the Axe

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?

Page 30: Sharpening the Axe

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?

Page 31: Sharpening the Axe

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?

Page 32: Sharpening the Axe

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

Page 33: Sharpening the Axe

Sketching

Page 34: Sharpening the Axe

Who hear sketches first?

Page 35: Sharpening the Axe

Sketching

● Ideally you want to always start with a sketch

Page 36: Sharpening the Axe
Page 37: Sharpening the Axe

Sketching

● Ideally you want to always start with a sketch

● Sketching is cheaper to iterate than wireframing which is

cheaper than mockups.

Page 38: Sharpening the Axe
Page 39: Sharpening the Axe

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.

Page 40: Sharpening the Axe
Page 41: Sharpening the Axe

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

Page 42: Sharpening the Axe
Page 43: Sharpening the Axe

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

Page 44: Sharpening the Axe
Page 45: Sharpening the Axe

Wireframing

Page 46: Sharpening the Axe

Wireframing

● Purpose of the wireframe

○ Its about layout and interaction. Function over form.

Page 47: Sharpening the Axe

Wireframing

● Purpose of the wireframe

○ Its about layout and interaction. Function over form.

○ Helps identify what is needed and what is not

Page 48: Sharpening the Axe

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

Page 49: Sharpening the Axe

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)

Page 50: Sharpening the Axe

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.

Page 51: Sharpening the Axe

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.

Page 52: Sharpening the Axe
Page 53: Sharpening the Axe
Page 54: Sharpening the Axe
Page 55: Sharpening the Axe
Page 56: Sharpening the Axe
Page 57: Sharpening the Axe

Wireframing

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

your house without a blueprint would you?

Page 58: Sharpening the Axe

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.

Page 59: Sharpening the Axe

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.

Page 60: Sharpening the Axe

● 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

Page 61: Sharpening the Axe
Page 62: Sharpening the Axe
Page 63: Sharpening the Axe
Page 64: Sharpening the Axe

What are some of your favorite wireframing tools?

Page 65: Sharpening the Axe

● 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

Page 66: Sharpening the Axe

● Use a grid - 960.gs FTW!

Wireframing

Page 67: Sharpening the Axe
Page 68: Sharpening the Axe

● Use a grid - 960.gs FTW!

● Your designs will look more professional when properly aligned

Wireframing

Page 69: Sharpening the Axe

● 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

Page 70: Sharpening the Axe
Page 71: Sharpening the Axe

● 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

Page 72: Sharpening the Axe

● 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

Page 73: Sharpening the Axe

Mockups

Page 74: Sharpening the Axe

Mockups

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

Page 75: Sharpening the Axe

Mockups

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

● This is the time for all the detailed stuff

Page 76: Sharpening the Axe

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.

Page 77: Sharpening the Axe

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/

Page 78: Sharpening the Axe

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/

Page 79: Sharpening the Axe
Page 80: Sharpening the Axe
Page 81: Sharpening the Axe
Page 83: Sharpening the Axe

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

Page 84: Sharpening the Axe

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/

Page 85: Sharpening the Axe

Thank You!

Questions

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