Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Wireframing 
Smarter 
Garret Voorhees 
SENIOR DESIGNER, CHAPTER THREE 
BADCAMP / NOVEMBER 9, 2014
chapter_three
Wireframes.
Why-erframes?
✓ Explore iterations quickly 
✓ Allows focus on usability before design 
✓ Serve as a technical reference for developers 
...
Why not dive right 
in to design? 
www.flickr.com/photos/61615889@N00/539312776/
Footer 
Header 
Primary 
Navigation 
Sidebar 
Carousel 
Slider 
Wireframes are 
the blueprint 
of your website. 
www.flick...
Paper is important. 
(seriously)
Meet your new best friend.
About Faculty News Locations Log In Department of Urology 
Patient Care Research Education Make An Appointment Refer A Pat...
About Faculty News Locations Log In Department of Urology 
Patient Care Research Education Make An Appointment Refer A Pat...
About | Locations | Events | Volunteer Blog | English | Español 
Harvest of 
the Month 
Our 
Programs 
In The 
Classroom 
...
About | Locations | Events | Volunteer Blog | English | Español 
Harvest of 
the Month 
Our 
Programs 
In The 
Classroom 
...
(graph paper rules!)
Solving a Real-World Fraction Division 
Problem 
16:9 
0:00 / 4:59 
Raising the Bar on Instruction 
21st Century Learning ...
Solving a Real-World Fraction Division 
Problem 
16:9 
0:00 / 4:59 
Raising the Bar on Instruction 
21st Century Learning ...
Keep it simple.
Your wireframes 
should be ugly.
Your wireframes 
should be ugly. ! 
ruggedly functional.
Wireframes 
Just use Helvetica 
and call it a day. 
http://www.flickr.com/photos/85888233@N00/2744476573/
(or even Comic Sans!)
hey, check out these 
beauuuutiful wireframes 
I made for you guys 
…what the 
?!$@# is this? 
Manage 
expectations.
Minimize your 
color palette.
Use color to communicate 
functionality. 
Links can be blue. 
Cancel buttons buttons can be red. 
Otherwise, stick to blac...
ChemSystems Programs Training About Contact Search 
Advanced Search 
Industries 
Refine Your Search 
Analysis Type 
Capaci...
Don’t be afraid to use 
placeholder copy. 
www.meettheipsums.com
Meet The Ipsums www.meettheipsums.com
Hipster Ipsum 
Single-origin coffee pork belly, Banksy selvage scenester 
pop-up tousled selfies vinyl VHS you probably ha...
Riker Ipsum 
Commander William Riker of the Starship Enterprise. 
I suggest you drop it, Mr. Data. We could cause a diplom...
OmniGraffle 
omnigroup.com/omnigraffle
https://www.flickr.com/photos/justin_case/2741082045/
Graffletopia Stencils.io 
www.graffletopia.com stencils.io 
✓ $24/year for access (some 
individual stencils cost more) 
✓...
Format Font Size A ab 
i B u 123 
enter text 
Button Button Button Button 
Button Button Button Button 
Button Button Butt...
Twitter Bootstrap 
www.viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2 
Section 1 Section 2 Section 3 
Un...
Label 
Inline Label 
Nav Item 1 Navigation 2 Navigation 3 Navigation 2 
Text Area label Radio Button 
Inline Label 
Radio ...
Refine Your Search 
Analysis Type 
Capacity Share 
Product Family 
Styrenics 
Product 
Styrene 
Geography 
By Region By Co...
Sketch 
bohemiancoding.com/sketch
A napkin Sketch 
Other Software 
Axure 
LucidChart 
Balsamiq 
Visio 
Keynote 
InDesign 
Fireworks 
Illustrator 
HotGloo 
P...
✓ Paper is important 
✓ Keep it simple. 
✓ Your wireframes should be ruggedly functional 
✓ Minimize your color palette 
✓...
Chapter Three Services Work About Blog Contact 
Some key messaging goes here that 
should be no more than two lines long. ...
Chapter Three 
Wireframing Template v2.0 
! tiny.cc/c3wireframetemplate 
it’s free! 
(with bonus Chapter Three v5.0 Wirefr...
chapter_three
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Wireframing Smarter (BADcamp 2014)
Upcoming SlideShare
Loading in …5
×

Wireframing Smarter (BADcamp 2014)

830 views

Published on

As the sites we build get increasingly complicated, the wireframing phase is increasingly important. Solving high-level usability challenges early in the process is saves time and money for you and your clients!

In this talk, I'll share the techniques and tools we use at Chapter Three to quickly produce high-quality wireframes and maintain your UX sanity.

WE'LL ALSO DISCUSS:
- How wireframing can be a vacation from designing
- Using wireframes to test the usability of your website
- Creating wireframes for responsive websites
- Why paper is the most important tool
- How you can learn to stop worrying and love Helvetica (again)

https://2014.badcamp.net/session/wireframing-smarter

Published in: Design
  • Be the first to comment

Wireframing Smarter (BADcamp 2014)

  1. 1. Wireframing Smarter Garret Voorhees SENIOR DESIGNER, CHAPTER THREE BADCAMP / NOVEMBER 9, 2014
  2. 2. chapter_three
  3. 3. Wireframes.
  4. 4. Why-erframes?
  5. 5. ✓ Explore iterations quickly ✓ Allows focus on usability before design ✓ Serve as a technical reference for developers ✓ Saves time and effort ✓ Very testable!
  6. 6. Why not dive right in to design? www.flickr.com/photos/61615889@N00/539312776/
  7. 7. Footer Header Primary Navigation Sidebar Carousel Slider Wireframes are the blueprint of your website. www.flickr.com/photos/63631877@N00/3168068107/
  8. 8. Paper is important. (seriously)
  9. 9. Meet your new best friend.
  10. 10. About Faculty News Locations Log In Department of Urology Patient Care Research Education Make An Appointment Refer A Patient Make A Gift Home > News News & Highlights 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 here July 10, 2012 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. View Archived News Filter By Topic Patient Care Research Education Cancer Adult (Non-Cancer) Children PATIENT CARE RESEARCH Title of the news article goes here July 10, 2012 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. PATIENT CARE Title of the news article goes here July 10, 2012 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. RESEARCH, PEDIATRIC Title of the news article goes here July 10, 2012 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. PATIENT CARE Title of the news article goes here July 10, 2012 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. Media Contact UCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 goldfienk@urology.ucsf.edu Follow us on Twitter @ucsfurology
  11. 11. About Faculty News Locations Log In Department of Urology Patient Care Research Education Make An Appointment Refer A Patient Make A Gift Home > News News & Highlights 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 here July 10, 2012 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. RESEARCH PATIENT CARE RESEARCH, PEDIATRIC PATIENT CARE 1 2 3 4 5 6 ... 21 22 Next View Archived News Filter By Topic Patient Care Research Education Cancer Adult (Non-Cancer) Children PATIENT CARE Title of the news article goes here July 10, 2012 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 the news article goes here July 10, 2012 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 the news article goes here July 10, 2012 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 the news article goes here July 10, 2012 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. Media Contact UCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 goldfienk@urology.ucsf.edu Follow us on Twitter @ucsfurology About Make Appointment Refer A Patient Make A Gift Log In yt t
  12. 12. About | Locations | Events | Volunteer Blog | English | Español Harvest of the Month Our Programs In The Classroom In Your Home In Your Community In The Garden 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. Youth Showcase Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque. How to Volunteer Make a Donation "I loved working with Project EAT and look forward to volunteering more in the future!" Maria L., Hayward Share your testimonial Related Events Related Blog Posts Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Community Champions Title of the post about this champion person A snippet of the article should go in this space but probably just a few lines like this. Title of the post about this champion person A snippet of the article should go in this space but probably just a few lines like this. Title of the post about this champion person A 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 here By 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 here By 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 here By Christine Boynton A snippet of the article should go in this space but probably just a few lines like this.
  13. 13. About | Locations | Events | Volunteer Blog | English | Español Harvest of the Month Our Programs In The Classroom In Your Home In Your Community In The Garden 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. Related Events Related Blog Posts Jobs | Media | Donate Some text that indicates the relationship with the Alameda County of Education Youth Showcase Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque. How to Volunteer Make a Donation "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 here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Title of the event goes here June 17, 2012, 2–5 pm Chapter Three Offices, San Francisco Community Champions Title of the post about this champion person A snippet of the article should go in this space but probably just a few lines like this. Title of the post about this champion person A snippet of the article should go in this space but probably just a few lines like this. Title of the post about this champion person A 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 here By 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 here By 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 here By Christine Boynton A snippet of the article should go in this space but probably just a few lines like this.
  14. 14. (graph paper rules!)
  15. 15. Solving a Real-World Fraction Division Problem 16:9 0:00 / 4:59 Raising the Bar on Instruction 21st Century Learning Standards Search ! Classroom Video You can calculate the volume of a cone easily once you know its height and radius and can plug those measurements into the formula for finding the volume of a cone. The formula for finding the volume of a cone is v = hπr2/3. Download Audio (150 MB) Download Transcript (PDF) " " Add to My Favorites Share # 5 comments License information Featuring Brett Mosely, Eliza Hart Spalding School of Math and Technology, Boise, ID
  16. 16. Solving a Real-World Fraction Division Problem 16:9 0:00 / 4:59 Raising the Bar on Instruction 21st Century Learning Standards Search ! Classroom Video You can calculate the volume of a cone easily once you know its height and radius and can plug those measurements into the formula for finding the volume of a cone. The formula for finding the volume of a cone is v = hπr2/3. Download Audio (150 MB) Download Transcript (PDF) " " Add to My Favorites Share # 5 comments License information Featuring Brett Mosely, Eliza Hart Spalding School of Math and Technology, Boise, ID
  17. 17. Keep it simple.
  18. 18. Your wireframes should be ugly.
  19. 19. Your wireframes should be ugly. ! ruggedly functional.
  20. 20. Wireframes Just use Helvetica and call it a day. http://www.flickr.com/photos/85888233@N00/2744476573/
  21. 21. (or even Comic Sans!)
  22. 22. hey, check out these beauuuutiful wireframes I made for you guys …what the ?!$@# is this? Manage expectations.
  23. 23. Minimize your color palette.
  24. 24. Use color to communicate functionality. Links can be blue. Cancel buttons buttons can be red. Otherwise, stick to black and white.
  25. 25. ChemSystems Programs Training About Contact Search Advanced Search Industries Refine Your Search Analysis Type Capacity Share Product Family Styrenics Product Styrene Geography By Region By Country Global My Profile (VERTICAL) 22 / 30 Refine Search Annual Styrene Capacity Share In Western Europe, 2013 Thousand Tons Medium Oil Scenario As Reflected By Plant Owner Units Tons Pounds Process Styrene Plant Type Leader Laggard Monetary Basis Current Constant Currency € Euros $ USD Currency Base Year 2013 Refine Results Update Search Table Data Label goes here Ending Quarter 3 End Year Download Excel Print PDF Brief description text that should be about a sentence or two and talk about what this grouping means. Welcome back, Gregg! First Name Elliott # 1 2 # Add Fractions with Unlike Units Using the Strategy of Creating Equivalent Fractions # Add Fractions with Unlike Units Using the Strategy of Creating Equivalent Fractions Download Excel Print PDF @Twitter @elliottmunoz @hellokv @toddmoy Single year Range of years Start year Last Name Muñoz Vigneault Moy Kevin Todd 3 Date Download latest Macro-economic Data (.xls) 2009 2013 About Faculty News Locations Log In Department of Urology Patient Care Research Education Make An Appointment Refer A Patient Make A Gift 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 Cancer Adult (Non-Cancer) Children What Is Urology? Education Residency Fellowships CME, Conferences & Events Research Cancer Adult (Non-Cancer) Children Research 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 Mission Statement 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 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. Favorites ! Identifying Proportional and Non-Proportional Relationships in Graphs " Factored Form of a Quadratic Function Gregg Turkington Teacher $ Edit Profile Delete Delete Delete ! Identifying Proportional and Non-Proportional Relationships in Graphs " Factored Form of a Quadratic Function Delete Delete Delete Raising the Bar on Instruction 21st Century Learning Standards Search % % % % % %
  26. 26. Don’t be afraid to use placeholder copy. www.meettheipsums.com
  27. 27. Meet The Ipsums www.meettheipsums.com
  28. 28. Hipster Ipsum 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. www.hipsteripsum.me
  29. 29. Riker Ipsum 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. Smooth as an android's bottom, eh, Data? I'd like to think that I haven't changed those things, sir. Worf, It's better than music. It's jazz. www.rikeripsum.com
  30. 30. OmniGraffle omnigroup.com/omnigraffle
  31. 31. https://www.flickr.com/photos/justin_case/2741082045/
  32. 32. Graffletopia Stencils.io www.graffletopia.com stencils.io ✓ $24/year for access (some individual stencils cost more) ✓ Huge library of quality stencils ✓ Search and browse by category ✓ Lots of content that can be found for free elsewhere ✓ Free (as in beer)! ✓ Limited library of stencils (but has some great ones) ✓ Lacks search/browse by category ✓ No account required
  33. 33. Format Font Size A ab i B u 123 enter text Button Button Button Button Button Button Button Button Button Button Button Button Label Label Label Label Label Label Tab Tab Tab Tab Cancel OK agriculture 12 autos 72 cities 65 companies 254 business 345 Button Button 888 Select a date S 6 F 5 December 2008 T 4 W 3 T M 1 2 S 30 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 Select Today Konigi Wireframe Stencils www.konigi.com/tools/omnigraffle-wireframe-stencils
  34. 34. Twitter Bootstrap www.viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2 Section 1 Section 2 Section 3 Unchecked Checked Unselected Selected Label Search Label @ 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. × Default Primary Info Success This is a Warning Danger Primary Action Primary Action Primary Action Default Primary Info Success Warning Danger Checkout Delete Refresh × Protip : Try resizing only this table cell. The header "x" and footer buttons should stay in the proper place without distorting. Cancel Save Modal Header @Twitter @elliottmunoz @hellokv @toddmoy Last Name Muñoz Vigneault Moy First Name Elliott Kevin Todd # 1 2 3
  35. 35. Label Inline Label Nav Item 1 Navigation 2 Navigation 3 Navigation 2 Text Area label Radio Button Inline Label Radio Button Checkbox Checkbox + This is a dropdown Sub Nav Item 1 Sub Nav Item 1 Sub Nav Item 1 Sub Nav Item 1 Filter: All Active Pending Suspended Simple Tab 1 Simple Tab 2 Simple Tab 3 Vertical Tabs 1 Vertical Tabs 2 Vertical Tabs 3 Vertical Tabs 4 Regular 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 Foundation www.zurb.com/playground/foundation-stencil-sets
  36. 36. Refine Your Search Analysis Type Capacity Share Product Family Styrenics Product Styrene Geography By Region By Country Global Refine Search Annual Styrene Capacity Share In Western Europe, 2013 Thousand Tons Medium Oil Scenario As Reflected By Plant Owner Units Tons Pounds Process Styrene Plant Type Leader Laggard Monetary Basis Current Constant Currency € Euros $ USD Currency Base Year 2013 Refine Results Update Search Table Data Label goes here Ending Quarter 3 End Year Download Excel Print PDF @Twitter @elliottmunoz Single year Range of years Start year Last Name First Name Muñoz Elliott # 1 Date Download latest Macro-economic Data (.xls) 2009 2013
  37. 37. Sketch bohemiancoding.com/sketch
  38. 38. A napkin Sketch Other Software Axure LucidChart Balsamiq Visio Keynote InDesign Fireworks Illustrator HotGloo Pencil FlairBuilder
  39. 39. ✓ Paper is important ✓ Keep it simple. ✓ Your wireframes should be ruggedly functional ✓ Minimize your color palette ✓ Use color to communicate functionality ✓ Don’t be afraid to use placeholder copy ✓ Maybe try out Sketch on your next project?
  40. 40. Chapter Three Services Work About Blog Contact Some key messaging goes here that should be no more than two lines long. Chapter Three Services Work About Blog Contact Chapter Three Services Work About Blog Contact Strategy Some key messaging goes here that should be no more than two lines long. Training Privacy Policy Newsletter Careers Credits Development LinkedIn FB Twitter G+ Flickr Our content analysis and research process lets us create custom websites that are tailored to your workflow and resources. We love wrestling with complex problems. Our custom development projects enable us to push boundaries and grow Drupal. Design We integrate beautiful design with strategic functionality, creating dynamic projects that work well and look stunning. Services Customized training gives our clients the skills and resources to thrive after launch and make the most of their Drupal site. Support We provide three levels of support to provide maximum flexibility in coverage for your Drupal site “Chapter Three has been a great collaborative partner. They listen and understand our needs. They go above and beyond on a regular basis and are always a pleasure to work with.” John Kealy, UCSF Key CTA Strategy Research One line summary of this service that’s concise and gets you all pumped up. Goals One line summary of this service that’s concise and gets you all pumped up. Personas One line summary of this service that’s concise and gets you all pumped up. Page Tables One line summary of this service that’s concise and gets you all pumped up. Content Modeling One line summary of this service that’s concise and gets you all pumped up. Mobile Strategy One line summary of this service that’s concise and gets you all pumped up. Ongoing Content Management One line summary of this service that’s concise and gets you all pumped up. More Services + x + + + + + We begin every project by defining objectives through business and site maintenance lenses. These goals guide the project and inform all decisions. We help you define Key Performance Indicators (KPIs) to measure the success of your website after launch. Related Link to related blog post Link to related case study Link to related miscellaneous page Chapter Three Services Work About Blog Contact Blog Topics Announcements Case Study Content Strategy Design Development Drupal Events How to Mobile Presentation Theming User Experience Videos Title of blog post goes here Title of blog post goes here Chapter Three Services Work About Blog Contact Title of blog post goes here June 17, 2013 Title of the blog post goes here 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. Title of blog post goes here 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. Title of blog post goes here Title of blog post goes here Title of blog post goes here 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. 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. Privacy Policy Newsletter Careers Credits LinkedIn FB Twitter G+ Flickr 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. Author Name June 17, 2013 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. Author Name June 17, 2013 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. Author Name June 17, 2013 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. Author Name June 17, 2013 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. Author Name June 17, 2013 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. Author Name June 17, 2013 1 2 3 4 5 6 ... 21 22 Next Author Name June 17, 2013 Nica Lorber Job Title Goes Here Topics: Announcements, Drupal, Presentation Social Media Links Related Content Title of a related content blog post Title of a related content blog post Title of a related content blog post Nunc eleifend ligula eros, sit amet pharetra ligula viverra eget. Cras ut scelerisque turpis. Ut eget purus tellus. Nunc eleifend ligula eros, sit amet pharetra ligula viverra eget. Cras ut scelerisque turpis. Ut eget purus tellus. Nunc eleifend ligula eros, sit amet pharetra ligula viverra eget. Cras ut scelerisque turpis. Ut eget purus tellus. About Some key messaging goes here that should be no more than two lines long. See our values Drupal Give Drupal is our DNA Under one roof Here for you long term Firstname Job Title Firstname Job Title Firstname Job Title Firstname Job Title Firstname Job Title Our Team Firstname Job Title Firstname Job Title Firstname Job Title Firstname Job Title Firstname Job Title Filter: All Developers Designers Managers Board Sales
  41. 41. Chapter Three Wireframing Template v2.0 ! tiny.cc/c3wireframetemplate it’s free! (with bonus Chapter Three v5.0 Wireframes!)
  42. 42. chapter_three

×