Garret Voorhees Senior Designer, Chapter Three

Wireframing Smarter

Wireframes.

Why-erframes?

✓ Explore iterations quickly

✓ Allows focus on usability before design

✓ Serve as a technical reference for developers

✓ Saves time and effort

✓ Very testable!

Why not dive right in to design?

www.flickr.com/photos/61615889@N00/539312776/

mmm…wireframes…

Footer

Header

Primary Navigation

Sidebar

Carousel Slider

Wireframes arethe blueprintof your website.

www.flickr.com/photos/63631877@N00/3168068107/

Paper is important.

(seriously)

Meet your new best friend.

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

News & HighlightsHome > News

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

2 3 65 ... 2241 Next21

Filter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)Children

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH, PEDIATRIC

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Media ContactUCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 goldfienk@urology.ucsf.edu

View Archived News

Follow us on Twitter@ucsfurology

About Make Appointment Refer A Patient Make A Gift Log In tyt

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

News & HighlightsHome > News

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

2 3 65 ... 2241 Next21

Filter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)Children

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH, PEDIATRIC

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Media ContactUCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 goldfienk@urology.ucsf.edu

View Archived News

Follow us on Twitter@ucsfurology

About Make Appointment Refer A Patient Make A Gift Log In tyt

Harvest ofthe Month

OurPrograms

In TheClassroom

In YourHome

In YourCommunity

In TheGarden

About | Locations | Events | Blog | Volunteer English | Español

Jobs | Media | Donate

Some text that indicates the relationship with the Alameda County of Education

In Your Community

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

How to Volunteer

Make a Donation

Youth Showcase

Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque.

"I loved working with Project EAT and look

forward to volunteering more in the future!"

Maria L., Hayward

Share your testimonial

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Related Events Related Blog Posts

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Community ChampionsTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Youth Showcase Our Stories Community Resources

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Harvest ofthe Month

OurPrograms

In TheClassroom

In YourHome

In YourCommunity

In TheGarden

About | Locations | Events | Blog | Volunteer English | Español

Jobs | Media | Donate

Some text that indicates the relationship with the Alameda County of Education

In Your Community

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

How to Volunteer

Make a Donation

Youth Showcase

Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque.

"I loved working with Project EAT and look

forward to volunteering more in the future!"

Maria L., Hayward

Share your testimonial

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Related Events Related Blog Posts

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Community ChampionsTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Youth Showcase Our Stories Community Resources

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Keep it simple.

Your wireframesshould be ugly.

Your wireframesshould be ugly.!

ruggedly functional.

Just use Helvetica and call it a day.

Wireframes

http://www.flickr.com/photos/85888233@N00/2744476573/

(or even Comic Sans!)

Manage client expectations.

here are somewireframes they’re pretty

great as you can see…the fuck is this?

Minimize yourcolor palette.

Use color to communicate functionality.

Links can be blue.Cancel buttons buttons can be red.Otherwise, stick to black and white.

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Patient Care

CancerAdult (Non-Cancer)ChildrenWhat Is Urology?

Education

ResidencyFellowshipsCME, Conferences & Events

Research

CancerAdult (Non-Cancer)ChildrenResearch Opportunities

The UCSF Department of Urology is committed to offering the best urologic care, the most productive and innovative research programs, and an outstanding educational program that trains the future leaders in the field.

We are one of the most productive urology departments in the nation, concentrating our efforts on a wide variety of research and clinical care programs. This is evidenced by our US News and World report ranking as one the very best programs in the country. In addition, UCSF Urology is the fifth highest recipient of National Institutes of Health funding reflecting the productivity and innovation of our research mission.

We are one of the most productive urology departments in the nation, concentrating our efforts on a wide variety of research and clinical care programs. This is evidenced by our US News and World report ranking as one the very best programs in the country. In addition, UCSF Urology is the fifth highest recipient of National Institutes of Health funding reflecting the productivity and innovation of our research mission.

Our residency program is one of the best in the country, attracting the finest applicants available. The department enjoys the strong support of the Medical Center, School of Medicine and patient advocates who have made resources available to support our academic activities. Members of the department have helped develop multidisciplinary research and patient care programs in key areas throughout the UCSF Campus.

Mission Statement

Peter Carroll, MD, MPHProfessor and Chair of UrologyKen and Donna Derr-Chevron Distinguished Professor

Learn More

About Make Appointment Refer A Patient Make A Gift Log In tyt

Brief description text that should be about a sentence or two and talk about what this grouping means.

Brief description text that should be about a sentence or two and talk about what this grouping means.

Brief description text that should be about a sentence or two and talk about what this grouping means.

www.meettheipsums.com

Don’t be afraid to use placeholder copy.

www.meettheipsums.com

Single-origin coffee pork belly, Banksy selvage scenester pop-up tousled selfies vinyl VHS you probably haven't heard of them meh DIY pickled. Synth bitters you probably haven't heard of them, fixie photo booth organic street art irony. Ethical Terry Richardson High Life, Pinterest meh Wes Anderson try-hard irony bicycle rights dreamcatcher Portland twee bespoke. Beard, meh kitsch twee artisan paleo Banksy. Fap freegan artisan, mumblecore PBR post-ironic photo booth fingerstache roof party lo-fi. Before they sold out 90's jean shorts, blog photo booth Truffaut bitters Etsy. Chambray kale chips slow-carb hella, PBR trust fund selfies disrupt aesthetic cray letterpress.

www.hipsteripsum.me

www.rikeripsum.com

Commander William Riker of the Starship Enterprise. I suggest you drop it, Mr. Data. We could cause a diplomatic crisis. Maybe we better talk out here; the observation lounge has turned into a swamp. A lot of things can change in twelve years, Admiral. Computer, belay that order. I'd like to think that I haven't changed those things, sir. Your head is not an artifact! In all trust, there is the possibility for betrayal. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. Worf, It's better than music. It's jazz. Smooth as an android's bottom, eh, Data? This should be interesting. Damage report!

OmniGraffle

(it’s pretty awesome)

Stencils rock!

www.flickr.com/photos/bright/77128247/

www.graffletopia.com

iB u 123

A abFormat Font Size

enter text

Label

LabelLabel

Label

Label Label

TabTabTabTab

agriculture 12 autos 72

business 345

cities 65 companies 254

Cancel OK

ButtonButton Button Button

ButtonButton Button Button

ButtonButton Button Button

ButtonButton

888 Select a date

30 329 1 231282421 23 25 272622

201814 17 191615129 1187 10 13

S6

F5

T4

W3

T21

M30S

December 2008

Select Today

Konigi Wireframe Stencilswww.konigi.com/tools/omnigraffle-wireframe-stencils

Section 3Section 2Section 1

Label

Search

Label @

Unchecked Checked

Unselected Selected

Oh Snap! Change a few things and try submitting again.

×

Well Done! You successfully read this important alert message.

×

Heads Up! This alert needs your attention, but it's not super important.

×

Primary Action

Primary Action

Primary Action

Default

Primary

This is a Warning

Info

Success

Danger

Default

Primary

Info

Success

Warning

Danger

Checkout

Delete

Refresh

×

Cancel Save

Protip : Try resizing only this table cell. The header "x" and footer buttons should stay in the proper place without distorting.

Modal Header

@toddmoy

@hellokv

@Twitter

@elliottmunoz

Moy

Vigneault

Last Name

Muñoz

Kevin

Todd

Elliott

First Name

3

2

1

#

Twitter Bootstrapwww.viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2

Inline Label

Label

Inline LabelText Area label Radio Button

Radio Button

Checkbox

Checkbox+

This is a dropdown

Sub Nav Item 1

Sub Nav Item 1

Sub Nav Item 1

Sub Nav Item 1

Nav Item 1 Navigation 2 Navigation 3 Navigation 2

Filter: Active Pending Suspended All

Simple Tab 1 Simple Tab 2 Simple Tab 3

Vertical Tabs 1

Vertical Tabs 2

Vertical Tabs 3

Vertical Tabs 4Regular Label Secondary Label

Success Label Error Label

Regular Button »

Regular Button »

Regular Button »

Regular Button »

Button »

Button »

Button »

Button »

HOME / FEATURES / GENE SPLICING / HUMAN CLONING

This is a right tooltip!

Zurb Foundationwww.zurb.com/playground/foundation-stencil-sets

Other Software

Axure

LucidChart

Balsamiq

Visio

Keynote

InDesign

Fireworks

IllustratorHotGloo

Pencil

FlairBuilder

A napkin

Chapter ThreeWireframing Template

CAROUSEL

Giving design feedback is hard, but with a few quick tips you do it like a pro. The Design Feedback Sandwich. The best way to keep designers happy and your project on track is to use what I call the Design Feedback Sandwich. Start by telling your designer a few things you like about the design.

Read More

< >

Contact Privacy Policy Careers Newsletter Signup Videos Drupal Give Support RSS

Twitter

Facebook

OUR IDEAS

How to Give Design Feedback Like a Pro

Nica LorberJune 13, 2013

2

COMPANY FACTS CLIENTS

LOGO LOGO

LOGO LOGO

LOGO LOGO

LOGO LOGO

Websites launched150People trained2000Years of Drupalexpertise100Bicycles per person1.98

Site Name AboutWork Services Blog Contact

BlogHome > Blog

Top KeywordsDrupalBest PracticesDesignHow ToDevelopment

Site Name AboutWork Services Blog Contact

Contact Privacy Policy Careers Newsletter Signup Videos Drupal Give Support RSS

Twitter

Facebook

8065422513

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes hereAuthor NameJune 17, 2013

2

Read More

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes hereAuthor NameJune 17, 2013

2

Read More

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes hereAuthor NameJune 17, 2013

2

Read More

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes hereAuthor NameJune 17, 2013

2

Read More

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes hereAuthor NameJune 17, 2013

2

Read More

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes hereAuthor NameJune 17, 2013

2

Read More

2 3 65 ... 2241 Next21

Presentations

Title of presentation goes herePresenter Name

Upcoming Past

Title of presentation goes herePresenter Name

Title of presentation goes herePresenter Name

See all

What We've Coded

Module name goes herePresenter Name

Module name goes herePresenter Name

Module name goes herePresenter Name

See all

Title of the blog post goes hereHome > Blog > Title of the blog post goes here

Top KeywordsDrupalBest PracticesDesignHow ToDevelopment

Site Name AboutWork Services Blog Contact

Contact Privacy Policy Careers Newsletter Signup Videos Drupal Give Support RSS

Twitter

Facebook

8065422513

Presentations

Title of presentation goes herePresenter Name

Upcoming Past

Title of presentation goes herePresenter Name

Title of presentation goes herePresenter Name

See all

What We've Coded

Module name goes herePresenter Name

Module name goes herePresenter Name

Module name goes herePresenter Name

See all

Comments

John SmithFri, 08/05/2011 - 16:51Permalink

Comment title one

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

delete edit reply

John SmithFri, 11/05/2011 - 12:23Permalink

Reply title one

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

reply

Jane DoeFri, 08/05/2011 - 18:51Permalink

Comment title two

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Log in or register to post comments

Add new comment

Your name John Smith

Subject

Comment *

Save Preview

Filtered HTMLText format

• Web page addresses and e-mail addresses turn into links automatically.• Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>• Lines and paragraphs break automatically.

More information about text formats

Cauliflower radicchio bunya nuts broccoli rabe quandong collard greens coriander. Coriander mustard summer purslane dandelion daikon squash collard greens tatsoi peanut. Beet greens watercress artichoke epazote swiss chard daikon maize chickpea napa cabbage jícama kakadu plum bamboo shoot cucumber gourd water spinach endive desert raisin cress.

Melon watercress arugula coriander leek beet greens napa cabbage catsear soko potato tomato dandelion mung bean corn prairie turnip. Eggplant arugula pumpkin groundnut avocado chickweed courgette radicchio tomato water spinach burdock watercress. Courgette beet greens burdock summer purslane chickweed squash radicchio daikon welsh onion desert raisin epazote bitterleaf courgette spinach gourd. Summer purslane mung bean wakame beetroot zucchini soko fennel gourd scallion tomato napa cabbage azuki bean groundnut squash catsear kombu green bean parsley. Broccoli lettuce scallion carrot spring onion nori prairie turnip courgette asparagus bunya nuts onion.

Nica LorberJune 13, 2013 - 10:30 am

2

Tags: Drupal, best practices, design, development

Beet greens pumpkin seakale black-eyed pea wattle seed aubergine soybean water chestnut ricebean maize. Shallot chickpea bitterleaf spinach silver beet chickweed kombu fennel. Yarrow parsley pea amaranth bell pepper kale caulie soybean pumpkin.

Napa cabbage gourd welsh onion shallot taro swiss chard cucumber potato watercress garbanzo desert raisin melon avocado bamboo shoot water spinach radish kakadu plum tatsoi. Silver beet peanut celery swiss chard seakale kombu garlic chard water chestnut desert raisin salsify sweet pepper pea avocado. Seakale green bean cucumber asparagus chickweed artichoke wakame black-eyed pea rutabaga daikon welsh onion bunya nuts radicchio watercress bush tomato komatsuna.

Turnip bell pepper sorrel maize silver beet coriander rock melon wakame spinach lentil spring onion gourd. Parsley wakame radish bunya nuts cucumber peanut tatsoi broccoli rabe eggplant. Chickpea seakale tomatillo onion azuki bean welsh onion sorrel. Celtuce komatsuna green bean rutabaga dulse kohlrabi celery brussels sprout arugula water chestnut kakadu plum. Catsear corn groundnut onion catsear napa cabbage coriander collard greens brussels sprout tomatillo plantain gumbo endive.

Chapter ThreeWireframing Template

www.tiny.cc/c3wireframe! it’s free!

Questions?