Wireframing Smarter [BADCamp 2013]

Embed Size (px)

Text of Wireframing Smarter [BADCamp 2013]

  • 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 simpl