Wireframing Smarter [BADCamp 2013]

  • Published on
    06-Jul-2015

  • View
    828

  • Download
    1

Embed Size (px)

Transcript

  • 1. Wireframing Smarter Garret Voorhees Senior Designer, Chapter Three

2. Wireframes. 3. Why-erframes? 4. Explore iterations quickly Allows focus on usability before design Serve as a technical reference for developers Saves time and eort Very testable! 5. Why not dive right in to design?www.flickr.com/photos/61615889@N00/539312776/ 6. mmm wireframes 7. Wireframes are the blueprint of your website.HeaderPrimary NavigationSidebar Carousel SliderFooterwww.flickr.com/photos/63631877@N00/3168068107/ 8. Paper is important. (seriously) 9. Meet your new best friend. 10. Department of Urology Patient CareResearchEducationAboutFacultyMake An AppointmentNewsLocationsRefer A PatientMake A GiftHome > NewsNews & Highlights Title of the carousel item goes in this spot CAROUSELPATIENT CARETitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view. RESEARCHTitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.View Archived News Filter By Topic Patient Care Research Education Cancer Adult (Non-Cancer) Children Media Contact UCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 goldenk@urology.ucsf.eduPATIENT CARETitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view. RESEARCH, PEDIATRICTitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.PATIENT CARETitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.Follow us on Twitter @ucsfurologyLog In 11. AboutDepartment of Urology Patient CareResearchEducationFacultyMake An AppointmentNewsLocationsRefer A PatientLog InMake A GiftHome > NewsNews & Highlights 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.CAROUSELView Archived NewsPATIENT CARETitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view. RESEARCHTitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.Filter By Topic Patient Care Research Education Cancer Adult (Non-Cancer) Children Media Contact UCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 goldenk@urology.ucsf.eduPATIENT CARETitle of the news article goes here July 10, 2012Follow us on Twitter @ucsfurologyThis would be the snippet preview of the article that could either be set manually or dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view. RESEARCH, PEDIATRICTitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.PATIENT CARETitle 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 dened automatically by the rst paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.1About234Make Appointment56...Refer A Patient2122Make A GiftNextLog Inytt 12. VolunteerOur ProgramsHarvest of the MonthAbout|In The ClassroomLocations|In Your HomeEvents|Blog|English | EspaolIn Your CommunityIn The GardenIn Your Community Youth ShowcaseOur StoriesCommunity ResourcesYouth Showcase Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque.How to Volunteer Make a DonationThis 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 Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San Francisco Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San Francisco Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San Francisco Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, SanRelated Blog Posts"I loved working with Project EAT and look forward to volunteering more in the future!" Maria L., Hayward Share your testimonialCommunity ChampionsTitle of the blog post goes here By Christine BoyntonTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.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 BoyntonTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.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 BoyntonTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.A snippet of the article should go in this space but probably just a few lines like this. 13. VolunteerOur ProgramsHarvest of the MonthAbout|In The ClassroomLocations|In Your HomeEvents|Blog|English | EspaolIn Your CommunityIn The GardenIn Your Community Youth ShowcaseOur StoriesCommunity ResourcesYouth Showcase Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque.How to Volunteer Make a DonationThis 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 EventsRelated Blog PostsTitle of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San Francisco Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San Francisco Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San Francisco Title of the event goes here June 17, 2012, 25 pm Chapter Three Ofces, San FranciscoJobs|Media|"I loved working with Project EAT and look forward to volunteering more in the future!" Maria L., Hayward Share your testimonialCommunity ChampionsTitle of the blog post goes here By Christine BoyntonTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.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 BoyntonTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.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 BoyntonTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.A snippet of the article should go in this space but probably just a few lines like this.DonateSome text that indicates the relationship with the Alameda County of Education 14. Keep it simple. 15. Your wireframes should be ugly. 16. Your wireframes should be ugly. ruggedly functional. ! 17. Wirefra m Just use Helvetic and call a it a day.http://www.flickr.com/photos/85888233@N00/2744476573/es 18. (or even Comic Sans!) 19. here are some wireframes theyre pretty great as you can seethe fuck is this?Manage client expectations. 20. Minimize your color palette. 21. Use color to communicate functionality. Links can be blue. Cancel buttons buttons can be red. Otherwise, stick to black and white. 22. AboutDepartment of Urology Patient CareResearchEducationFacultyMake An AppointmentNewsLocationsRefer A PatientLog InMake A GiftTitle 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.CAROUSELPatient CareResearchEducationBrief 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.CancerCancerResidencyAdult (Non-Cancer)Adult (Non-Cancer)FellowshipsChildrenChildrenCME, Conferences & EventsWhat Is Urology?Research OpportunitiesThe 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 eld. 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 fth highest recipient of National Institutes of HealthMission 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 fth highest recipient of National Institutes of Health funding reecting the productivity and innovation of our research mission. Our residency program is one of the best in the country, attracting the nest applicants available. The department enjoys the strong 23. Dont be afraid to use placeholder copy. www.meettheipsums.com 24. www.meettheipsums.com 25. Single-origin coee 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 Truaut bitters Etsy. Chambray kale chips slow-carb hella, PBR trust fund selfies disrupt aesthetic cray letterpress. www.hipsteripsum.me 26. 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! www.rikeripsum.com 27. OmniGrale (its pretty awesome) 28. Stencils rock! www.graletopia.comwww.flickr.com/photos/bright/77128247/ 29. Konigi Wireframe Stencils www.konigi.com/tools/omnigrale-wireframe-stencilsButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonCancelTabFormatBOKFontuiTabSize1 2 3enter text888Select a date December 2008LabelLabelLabelLabelLabelLabelagriculture cities business65autos72companies12254S M 30 1T 2W 37910 11 12 138T 4F 5S 614 15 16 17 18 19 20 21 22 23 24 25 26 2734528 29 30 311Select Today23TabAabTab 30. Twitter Bootstrap www.viget.com/inspire/an-omnigrale-stencil-for-twitter-bootstrap-2Oh Snap! Change a few things and try submitting again.Well Done! You successfully read this important alert message.SuccessThis is a WarningWarningDangerSelectedInfoDangerCheckedUnselected Heads Up! This alert needs your attention, but it's not super important.UncheckedPrimaryInfoSection 3DefaultSuccessSection 2DefaultPrimarySection 1 LabelModal Header Label@Protip : Try resizing only this table cell. The header "x" and footer buttons should stay in the proper place without disto...