Upload
garret-voorhees
View
836
Download
1
Tags:
Embed Size (px)
Citation preview
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 [email protected]
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 [email protected]
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
@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
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
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
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.
Questions?