Wireframing Smarter (BADcamp 2014)

  • Published on
    02-Jul-2015

  • View
    485

  • Download
    1

DESCRIPTION

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

Transcript

  • 1. WireframingSmarterGarret VoorheesSENIOR DESIGNER, CHAPTER THREEBADCAMP / NOVEMBER 9, 2014

2. chapter_three 3. Wireframes. 4. Why-erframes? 5. Explore iterations quickly Allows focus on usability before design Serve as a technical reference for developers Saves time and effort Very testable! 6. Why not dive rightin to design?www.flickr.com/photos/61615889@N00/539312776/ 7. FooterHeaderPrimaryNavigationSidebarCarouselSliderWireframes arethe blueprintof your website.www.flickr.com/photos/63631877@N00/3168068107/ 8. Paper is important.(seriously) 9. Meet your new best friend. 10. About Faculty News Locations Log In Department of UrologyPatient Care Research Education Make An Appointment Refer A Patient Make A GiftHome > NewsNews & HighlightsCAROUSELTitle of the carousel itemgoes in this spotSubtext for the carousel item goes righthere and it's very comfortable in thisspace. 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 definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.View Archived NewsFilter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)ChildrenPATIENT CARERESEARCHTitle of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.PATIENT CARETitle of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.RESEARCH, PEDIATRICTitle of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.PATIENT CARETitle of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.Media ContactUCSF Department of UrologySan Francisco, CA 94143-1695415/476-8843goldfienk@urology.ucsf.eduFollow us on Twitter@ucsfurology 11. About Faculty News Locations Log In Department of UrologyPatient Care Research Education Make An Appointment Refer A Patient Make A GiftHome > NewsNews & HighlightsCAROUSELTitle of the carousel itemgoes in this spotSubtext for the carousel item goes righthere and it's very comfortable in thisspace. 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 definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.RESEARCHPATIENT CARERESEARCH, PEDIATRICPATIENT CARE1 2 3 4 5 6 ... 21 22 NextView Archived NewsFilter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)ChildrenPATIENT CARETitle of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or definedautomatically by the first paragraph of the body or a character/word count. Probably not morethan three lines or so for this list view.Media ContactUCSF Department of UrologySan Francisco, CA 94143-1695415/476-8843goldfienk@urology.ucsf.eduFollow us on Twitter@ucsfurologyAbout Make Appointment Refer A Patient Make A Gift Log In yt t 12. About | Locations | Events | Volunteer Blog | English | EspaolHarvest ofthe MonthOurProgramsIn TheClassroomIn YourHomeIn YourCommunityIn TheGardenIn Your CommunityThis is some intro text for this section. I would expect this to be maybe a medium to longparagraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, incum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quasreformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe amedium 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 longparagraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, incum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quasreformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe amedium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.Youth ShowcaseVis ne fugit menandri. Quiagam assum constituto ne.Cu ius odio iisque.How to VolunteerMake a Donation"I loved working withProject EAT and lookforward to volunteeringmore in the future!"Maria L., HaywardShare your testimonialRelated Events Related Blog PostsTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoCommunity ChampionsTitle of the post about thischampion personA snippet of the article should goin this space but probably just afew lines like this.Title of the post about thischampion personA snippet of the article should goin this space but probably just afew lines like this.Title of the post about thischampion personA snippet of the article should goin this space but probably just afew lines like this.Youth Showcase Our Stories Community ResourcesTitle of the blog post goes hereBy Christine BoyntonA snippet of the article should goin this space but probably just afew lines like this.Title of the blog post goes hereBy Christine BoyntonA snippet of the article should goin this space but probably just afew lines like this.Title of the blog post goes hereBy Christine BoyntonA snippet of the article should goin this space but probably just afew lines like this. 13. About | Locations | Events | Volunteer Blog | English | EspaolHarvest ofthe MonthOurProgramsIn TheClassroomIn YourHomeIn YourCommunityIn TheGardenIn Your CommunityThis is some intro text for this section. I would expect this to be maybe a medium to longparagraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, incum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quasreformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe amedium 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 longparagraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, incum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quasreformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe amedium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.Related Events Related Blog PostsJobs | Media | DonateSome text that indicates the relationship with the Alameda County of EducationYouth ShowcaseVis ne fugit menandri. Quiagam assum constituto ne.Cu ius odio iisque.How to VolunteerMake a Donation"I loved working withProject EAT and lookforward to volunteeringmore in the future!"Maria L., HaywardShare your testimonialTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoTitle of the event goes hereJune 17, 2012, 25 pmChapter Three Offices, SanFranciscoCommunity ChampionsTitle of the post about thischampion personA snippet of the article should goin this space but probably just afew lines like this.Title of the post about thischampion personA snippet of the article should goin this space but probably just afew lines like this.Title of the post about thischampion personA snippet of the article should goin this space but probably just afew lines like this.Youth Showcase Our Stories Community ResourcesTitle of the blog post goes hereBy Christine BoyntonA snippet of the article should goin this space but probably just afew lines like this.Title of the blog post goes hereBy Christine BoyntonA snippet of the article should goin this space but probably just afew lines like this.Title of the blog post goes hereBy Christine BoyntonA snippet of the article should goin this space but probably just afew lines like this. 14. (graph paper rules!) 15. Solving a Real-World Fraction DivisionProblem16:90:00 / 4:59Raising the Bar on Instruction21st Century Learning StandardsSearch! Classroom VideoYou can calculate the volume of a cone easily once youknow its height and radius and can plug thosemeasurements into the formula for finding the volumeof a cone. The formula for finding the volume of a coneis v = hr2/3.Download Audio (150 MB)Download Transcript (PDF)""Add to My FavoritesShare# 5 commentsLicense information FeaturingBrett Mosely, Eliza Hart Spalding School of Math and Technology, Boise, ID 16. Solving a Real-World Fraction DivisionProblem16:90:00 / 4:59Raising the Bar on Instruction21st Century Learning StandardsSearch! Classroom VideoYou can calculate the volume of a cone easily once youknow its height and radius and can plug thosemeasurements into the formula for finding the volumeof a cone. The formula for finding the volume of a coneis v = hr2/3.Download Audio (150 MB)Download Transcript (PDF)""Add to My FavoritesShare# 5 commentsLicense information FeaturingBrett Mosely, Eliza Hart Spalding School of Math and Technology, Boise, ID 17. Keep it simple. 18. Your wireframesshould be ugly. 19. Your wireframesshould be ugly. !ruggedly functional. 20. WireframesJust use Helveticaand call it a day.http://www.flickr.com/photos/85888233@N00/2744476573/ 21. (or even Comic Sans!) 22. hey, check out thesebeauuuutiful wireframesI made for you guyswhat the?!$@# is this?Manageexpectations. 23. Minimize yourcolor palette. 24. Use color to communicatefunctionality.Links can be blue.Cancel buttons buttons can be red.Otherwise, stick to black and white. 25. ChemSystems Programs Training About Contact SearchAdvanced SearchIndustriesRefine Your SearchAnalysis TypeCapacity ShareProduct FamilyStyrenicsProductStyreneGeographyBy Region By CountryGlobalMy Profile (VERTICAL) 22 / 30Refine SearchAnnual Styrene Capacity Share In Western Europe, 2013Thousand TonsMedium Oil ScenarioAs Reflected By Plant OwnerUnitsTonsPoundsProcessStyrenePlant TypeLeaderLaggardMonetary BasisCurrentConstantCurrency Euros$ USDCurrency Base Year2013Refine ResultsUpdate SearchTable DataLabel goes hereEnding Quarter 3End YearDownload Excel Print PDFBrief description text that should beabout a sentence or two and talk aboutwhat this grouping means. Welcome back, Gregg!First NameElliott#12# Add Fractions with Unlike Units Using theStrategy of Creating Equivalent Fractions# Add Fractions with Unlike Units Using theStrategy of Creating Equivalent FractionsDownload Excel Print PDF@Twitter@elliottmunoz@hellokv@toddmoySingle year Range of yearsStart yearLast NameMuozVigneaultMoyKevinTodd3DateDownload latestMacro-economic Data (.xls)20092013About Faculty News Locations Log In Department of UrologyPatient Care Research Education Make An Appointment Refer A Patient Make A GiftCAROUSELTitle of the carousel itemgoes in this spotSubtext for the carousel item goes righthere and it's very comfortable in thisspace. But probably only a few lines.Patient CareCancerAdult (Non-Cancer)ChildrenWhat Is Urology?EducationResidencyFellowshipsCME, Conferences & EventsResearchCancerAdult (Non-Cancer)ChildrenResearch OpportunitiesThe UCSF Department of Urology is committed tooffering the best urologic care, the most productiveand innovative research programs, and anoutstanding educational program that trains thefuture 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 careprograms. This is evidenced by our US News and World report rankingas one the very best programs in the country. In addition, UCSFMission StatementWe are one of the most productive urology departments in thenation, concentrating our efforts on a wide variety of research andclinical care programs. This is evidenced by our US News andWorld report ranking as one the very best programs in thecountry. In addition, UCSF Urology is the fifth highest recipient ofNational Institutes of Health funding reflecting the productivity andinnovation of our research mission.Our residency program is one of the best in the country, attractingBrief description text that should beabout a sentence or two and talk aboutwhat this grouping means.Brief description text that should beabout a sentence or two and talk aboutwhat this grouping means.Favorites! Identifying Proportional and Non-ProportionalRelationships in Graphs" Factored Form of a Quadratic FunctionGregg TurkingtonTeacher$ Edit ProfileDeleteDeleteDelete! Identifying Proportional and Non-ProportionalRelationships in Graphs" Factored Form of a Quadratic FunctionDeleteDeleteDeleteRaising the Bar on Instruction21st Century Learning StandardsSearch%%%%%% 26. Dont be afraid to useplaceholder copy.www.meettheipsums.com 27. Meet The Ipsums www.meettheipsums.com 28. Hipster IpsumSingle-origin coffee pork belly, Banksy selvage scenesterpop-up tousled selfies vinyl VHS you probably haven'theard of them meh DIY pickled. Synth bitters you probablyhaven't heard of them, fixie photo booth organ...