introduction to information architecture and design - sva workshop 0929
Post on 18-Oct-2014
1.618 views
DESCRIPTION
Introduction to Information Architecture and Design - presented by Robert Stribley, 9/29/12, SVATRANSCRIPT
T Magazine
Introduction to Information Architecture & DesignSchool of Visual Arts | September 29, 2012Robert StribleyTapestry of the Thousand Longest Rivers in the World by Boetti, 1976-1982Introduction to Information Architecture & DesignSchool of Visual Arts | Winter 2010Robert StribleyMail Box Planes - Photo: Flickr.com/stribs
1Introduction
Todays presentation will be available on SlideShare following the workshop:
www.slideshare.net/stribs
Introduction
Aussie-Style LiquoriceAussie-Style Liquorice, Razorfish War Room3Chocolate display, Xocolatti, SoHo, New York
Aussie-Style Liquorice, Razorfish War Room4
Body Gel, Sabon, SoHo, New YorkAussie-Style Liquorice, Razorfish War Room5
Butterfly on the New York City HighlinePattern Recognition:
In cognitive psychology, the ability to identify familiar forms within a complex arrangement of sensory stimuliButterfly on the New York City HighlinePhoto: Flickr.com/stribs6
Butterflies at the American Museum of Natural HistorysButterfly Conservatory.Butterflies at the American Museum of Natural HistorysButterfly Conservatory. Photo: Flickr.com/stribs7Butterflies at the American Museum of Natural HistorysButterfly Conservatory.
Butterflies at the American Museum of Natural HistorysButterfly Conservatory. Photo: Flickr.com/stribs8IntroRobert Stribley
Im a senior information architect at Razorfish I write music and arts reviewsI photograph various thingsI drink coffeeIntroductionClients include:Bank of America, WachoviaJPMorgan, Morgan Stanley, Oppenheimer Funds, Smith Barney, T. Rowe Price Boston Scientific, NasonexChoice HotelsComputer Associates, EMCFordNextelRed CrossPearson, Travel Channel, Womens Wear DailyIntroAbout You
Whats your name?What do you do for work?What do you do for fun?Coffee, tea or bottled water?
IntroductionIntroGoals of this workshop
Understand the basic concepts of user experience designExperience the general process and techniques used on a design projectReview the basic deliverables an information architect develops within a projectIntroductionAgendaAgendaMorningBackgroundDesign ProcessOur ProjectUser ResearchCompetitive ReviewPersonas
LunchAgendaAgendaAfternoonCard SortingSite MapsPage TypesGridsNavigationSketchingWireframesQ&AAgendaBackgroundBackgroundinformation architecture n.Background: Defining IA
The combination of organization, labeling, and navigation schemes within an information system.The structural design of an information space to facilitate task completion and intuitive access to content.The art and science of structuring and classifying web sites and intranets to help people find and manage information.An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.Information Architecture for the World Wide Web (1st Edition), p . 4, Rosenfeld and MorvilleNavigationInteractionArt/ScienceDiscipline/ CommunityNavigation, interaction design, art/science, discipline/community16BackgroundIt's hard to say who really is an information architect. In some sense, we all are.Alex Wright, AuthorGlutBackground: Defining IA
Or not. 17userscontentcontextIABackground: Defining IAinterfaceinformation architectureBackground: Defining IA19skinskeletonBackground: Defining IASkin (appearance) vs skeleton (supportive)20
Design Processmetaphor: architectural plansFlickr.com: Cornell University LibraryBackground: Defining IAUsing architectural plans as a metaphor for an IAs work21
Background: History A Brief History of IA1975 Richard Saul Wurman coined the term information architecture to describe the field now more likely described as information design1994Formation of Argus Associates in Ann Arbor, WI, the first firm devoted to IA1998First edition of Peter Morville and Lou Rosenfelds Information Architecture for the World Wide Web, affectionately known as The Polar Bear book
Partially adapted from: A brief history of information architecture by Peter Morville and Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry MahonA Brief History of IA2000First IA Summit, Boston, MA Defining Information Architecture2002Boxes & Arrows, online journal for information architects goes live3 new books on IA published, including Jesse James Garretts The Elements of User Experience2013 14th Annual IA Summit held in Baltimore, MDBackground: History
The 2010 Summit is in Phoenix, AZPartially adapted from: A brief history of information architecture by Peter MorvilleInformation Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon23Design Process
satire on project phases by Harold KerznerDesign ProcessDiscoveryDefinitionDesignDevelopmentDesign Process1.DiscoveryStakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
2.DefinitionPersona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
3.DesignSitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps
4.DevelopmentFunctional Specifications, Quality Assurance Testing, Site development
Design ProcessDiscoveryDefinitionDesignDevelopment Stakeholder interviewers Business requirements Competitive & comparative audits User research Site inventoryDesign Process1.DiscoveryStakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
2.DefinitionPersona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
3.DesignSitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps
4.DevelopmentFunctional Specifications, Quality Assurance Testing, Site development
Design ProcessDiscoveryDefinitionDesignDevelopmentPersonasContent & meta data auditsCard sortsUse casesMood boardsSketchingSite mapsCreative briefUX briefDesign Process1.DiscoveryStakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
2.DefinitionPersona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
3.DesignSitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps
4.DevelopmentFunctional Specifications, Quality Assurance Testing, Site development
Design ProcessDiscoveryDefinitionDesignDevelopment Site maps Task flowsSketching Wireframes Stakeholder reviews Prototypes Usability testing Visual design Functional specifications
Design Process1.DiscoveryStakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
2.DefinitionPersona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
3.DesignSitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps
4.DevelopmentFunctional Specifications, Quality Assurance Testing, Site development
Design ProcessDiscoveryDefinitionDesignDevelopmentSite developmentUser acceptance testing (UAT)Quality assurance (QA)Usability testingDesign Process1.DiscoveryStakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
2.DefinitionPersona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
3.DesignSitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps
4.DevelopmentFunctional Specifications, Quality Assurance Testing, Site development
BackgroundIA Deliverables
site mapfeature/functionality inventorycomparative/competitive reviewrequirements documentpersonassketchesuse casesuser flowsprototypewireframesdiscoverdesigndefineexperience briefDeliverables30BackgroundIA Deliverables
site mapfeature/functionality inventorycomparative/competitive reviewrequirements documentpersonasuse casesuser flowsprototypewireframesdiscoverdesigndefineexperience briefvisual designsketchesDeliverables31Our Project
What to do? Our ProjectPhoto: Flickr.com/stribs
33Our ProjectEvents.com wants to revamp its website to become the go-to online resource for people wanting to attend or promote events across the United States.
Our ProjectDiscover
User ResearchUser Research in Copenhagens Elderly Homes User Research in Copenhagens Elderly Homes - http://www.localhiddenvariable.com/ciid/user-research-in-copenhagens-elderly-homes/36User ResearchThrough research, we aim to learn enough about the business goals, the users, and the information ecology to develop a solid strategy. Louis Rosenfield & Peter Morville Discovery: User ResearchUser ResearchMethodologyFocus GroupsSurveysInterviews
GoalsIdentify patterns and trends in user behavior, tasks, preferences, obstacles.
Discovery: User Research38User ResearchClass Exercise: Survey QuestionsHow do you learn about events in NYC? What type of events are you interested in?Whats more important to you: Price Type of Event Location Date How often do you attend the events?Do you ever need to promote an event?Do you ever invite people to an event?
Discovery: User Research39
Competitive Reviewimage by brandon schauerDiscovery: Competitive AuditThis type of assessment helps set an industry marker by looking at what the competition is up to, what features and functionalities are standard, and how others have solved the same problems you might be tasked with. Dorelle RabinowitzDiscovery: Competitive ReviewDiscovery: Competitive Review or Audit41Competitive ReviewMethodologyHeuristic EvaluationUsability CriteriaScorecard
GoalsReview and analyze competitor sites according to particular criteriaDraw key findings, which can influence and guide IA through the design phase
Also:Comparative ReviewsDiscovery: Competitive Review42Competitive ReviewHeuristic Evaluation
Ten Usability Heuristics by Jakob Nielsen
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation
Self Study:
For a more detailed explanation of these heuristics, see Nielsens explanation here: http://www.useit.com/papers/heuristic/heuristic_list.html Discovery: Competitive Review43Competitive ReviewExamples of Usability Criteria
Note: These examples are not intended to provide a comprehensive listing. Appropriate criteria may depend on the project to be completed.
Home PageAre home page elements appropriately weighted and distributed?Is information clustered in meaningful ways?NavigationIs the navigation structure concise and consistent?Are paths to important information intuitive and unobstructed?ContentIs content current? Are there visible indications of content freshness?Is content properly adapted for the Web? Is tone of voice consistent throughout content? Is content chunked appropriately?Are headings and titles scannable?DesignAre colors appropriate to the Web? Is white space used appropriately? Is text readable?SearchAre search results relevant and cleanly presented?FunctionalityAre functionality and forms efficiently designed?MessagingAre errors messages clear on the site? Is help readily available to users?Are there appropriate means for user feedback?Discovery: Competitive Review44Competitive ReviewCompetitors
Discovery: Competitive Review
Competitive Review: Flavorpill
Flavorpill loves culture. We embrace the high-brow, low-brow, underground, mainstream, and everything in between as long as it's good.
A city guide for those who like to go out, Flavorpill publishes a daily update of worthwhile cultural-event listings, from art exhibits and readings to concerts, plays, and festivals.http://flavorpill.com/aboutFlavorpillDiscovery: Competitive ReviewCompetitive Review: FlavorpillHome PageFeatured Event StripSearchFeatured EventWhats HappeningRecently AddedComing UpFeatured VenueGiveawaysNew York GuideDiscovery: Competitive ReviewNavigationPrimaryEventsEditor PicksFeatured VenuesGiveawaysUtilityCity DropdownLog In/Log OutSignUp/ ProfileSocial (Facebook, Twitter, Tumblr)iPhone AppSearchFeatures & FunctionalitySearchCalendarFilteringGoogle mapsCommentsProfile
UpcomingCompetitive Review: Going.comhttp://upcoming.yahoo.com/help/faq/Upcoming is a community for discovering and sharing events. It can help you find stuff to do, discover what your friends are doing, or let you keep private events online for your own reference.Discovery: Competitive Review
Home PageBrowse EventsEvent CarouselEvents ListingMy EventsCalendarPandora/iTunes/Last.fm integrationLink to Beta versionCompetitive Review: Going.comDiscovery: Competitive ReviewNavigationPrimaryMy EventsFriendsMoreAdd an EventSecondaryHelpMy AccountSearchSign in/Sign outFeatures & FunctionalitySearchCalendarProfiles CommentsEvent posting and promotingRSVP online/Buy ticketsEvent filtering/sortingYahoo! Maps
NYCgo.com
NYC & Company is New York Citys official marketing, tourism and partnership organization.
Our mission is to maximize travel and tourism opportunities throughout the five boroughs, build economic prosperity and spread the dynamic image of New York City around the world. http://nycgo.com/?event=view.footerArticle&id=49568Competitive Review: NYCgo.comDiscovery: Competitive ReviewCompetitive Review: NYCgo.comDiscovery: Competitive ReviewFunctionalitySearchGoogle mapsCalendarFind an eventFilteringMyNYC
NavigationPrimaryTop AttractionsWhat to DoWhere to StayPlan Your TripDealsBroadwayNYC for the HolidaysFreeNYC ShopSecondaryTravel TradeMeeting PlannersMembershipPressUtilitySearch Language SelectorTemperatureTwitter, Facebook, EmailHome PageSearchThis Week carouselNYC HighlightsEvents calendarTop 5 EventsPlan Your TripDeals & OffersCompetitive ReviewKey FindingsSearch placed prominently on each siteClear need for and emphasis upon filtering eventsCalendars provide obvious benefit, but arent always prominentProfiles and community features are also common, but handled with varying degrees of detail, successFree events are often highlightedEvent detail pages vary, may have maps, RSVP, sharing, rating, commenting functionalityDisplaying other venues and restaurants adds utilityMaps prove helpful, especially to out-of-townersThe ability to add or promote an event is not always present or prominentDiscovery: Competitive ReviewCompetitive ReviewWhat else have we learned?
Who are the audiences of these sites?What are the strengths of these sites?What are their weaknesses?How might another event site differentiate itself from these sites?Discovery: Competitive ReviewDefinePersonas
Created at Personas: http://personas.media.mit.edu Personas is a component of the Metropath(ologies) exhibit, recently on display at the MIT Museum by the Sociable Media Group from the MIT Media Lab . It uses sophisticated natural language processing and the Internet to create a data portrait of one's aggregated online identity. In short, Personas shows you how the Internet sees you.PersonasPersonas summarize user research findings and bring that research to life in such a way that everyone can make decisions based on these personas, not based on themselves. Steve Mulder
Definition: PersonasPersonasCharacteristics of Effective Personas
Varied and distinctDetailedNot weighed down with minutiaeTied into business-specific goalsBacked by dataDefinition: PersonasGoals and data from focus groups, stakeholder interviews, etc including user behaviors and opinions
57PersonasMethodologyCluster Analysis
GoalsCreate a narrative based on real data to illustrate user behavior, motivations, goalsDefinition: PersonasWikipedia: Cluster analysisorclusteringis the assignment of a set of observations into subsets (calledclusters) so that observations in the same cluster are similar in some sense
58
Small BudgetBig BudgetPlannerPromoterDefinition: Personas
As part of our analysis of the user research, we mapped the participants onto the behavioral matrix identified. The mapping revealed clusters of people with a similar observed behavior. These clusters helped us to determine key attributes for the personas.
59Definition: Personas
SabrinaJennyDonnyJerry60Sabrina, 27The party plannerLocation: Gramercy ParkAttitude: Organized, outgoingFinancial Perspective: Generous, bit of spendthriftOnline Habits: Avid user of social networking sites, Twitter, Facebook, etcEvents: Wine tastings, gallery openingsQuote: I love getting bunches of friends together to attend all these NYC events. Theres so much great stuff to do in this city!
Small BudgetBig BudgetPlannerPromoterPersonasDefinition: Personas
Jerry, 44The out-of-townerLocation:Cincinnati, OHAttitude: Casual, yet adventurousFinancial Perspective: Moderate spenderOnline Habits: Utilitarian use of the Web to research trips, read about the arts and pay billsEvents: Museums, visiting landmarks, toursQuote: Im visiting the Big Apple with my wife and we want to check out some art-related events.
Small BudgetBig BudgetPlannerPromoterDefinition: Personas
PersonasDonny, 38The local comedianLocation: East VillageAttitude: Laidback, loosely organizedFinancial Perspective: Frugal, paycheck to paycheckOnline Habits: Spends time networking, promoting his act online, haunts comedy sitesEvents: Comedy slams, variety showsQuote: I land a few comedy gigs around the city and I want to promote them better.
Small BudgetBig BudgetPlannedPromoter
Definition: Personas
Jenny, 33The professional promoterLocation: WilliamsburgAttitude: Busy, disciplined, professionalFinancial Perspective: Healthy budget for promotions andadvertisingOnline Habits: Heavy use of social networking sites both professionally and personally, shops onlineEvents: Small gigs, big concerts, DJ setsQuote:I manage a few bands and DJs and I have to ensure theyre listed in the right, targeted places.Personas
Small BudgetBig BudgetPlannedPromoterDefinition: Personas
Class Exercise: PersonasDefinition: PersonasIn regards to Events.com,What tasks might each persona attempt to complete on Events.com? What features can you imagine each persona might like on such a site?What obstacles or pain points might they encounter?
SabrinaJennyDonnyJerry65
Lunch BreakOrdering lunch on a Virgin America flight - http://www.flickr.com/photos/stribs/sets/72157603319502113/ - Photo: stribs66AgendaAfternoonCard SortingSite MapsPage TypesGridsNavigationSketchingWireframesQ&A
Agenda
Card Sortinghttp://www.flickr.com/photos/cannedtuna/68Card SortingThere are often better ways to organize data than the traditional ones that first occur to us. Each organization of the same set of data expresses different attributes and messages. It is also important to experiment, reflect, and choose which organization best communicates our messages. Nathan Shedroff, Experience StrategistDefinition: Card SortingNathan Shedroffis Program Director of the MBA in Design Strategy program at the California College of the Arts. His books includeExperience Design 1,Making Meaning,and contributing to Richard Saul Wurman'sInformation Anxiety 2. Advisor for Rosenfeld Media69MethodologyGrouping and labeling with index cards, post it notesTwo types:Open participants sort cards with no pre-established categories useful for new architecturesClosed participants sort cards into predetermined, provided groups useful for fitting content into existing architecturesOnline card sortsWebSort, OptimalSort, Socratic
GoalsOrganize content more efficientlyFind names for groups of content based on users perspectives
Self Study:"Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07Definition: Card Sortinghttp://websort.net http://www.optimalworkshop.com/70Case Studies:Wachovia Wealth Management GroupAmerican Red CrossAutomotive Manufacturer
Definition: Card Sorting71Class Exercise: Card Sorting
As individuals:
Take 5 minutes to think of all the events a person could attendWrite each event you come up with on a Post-It noteDefinition: Card SortingClass Exercise: Card Sorting
Now, as a group:
Take a few minutes to organize your events into categories (group & label them)Then well share some categoriesDefinition: Card SortingCard Sorting: Next Steps
With the results of a card sort we then can:
Build consensusRefine terminologyCreate a site mapHelp define navigationDefinition: Card SortingDesign
Site MapsConceptual DesignDesign: Site MapsA site map is a high level diagram showing the hierarchy of a system. Site maps reflect the information structure, but are not necessarily indicative of the navigation structure.- Step Two DesignsHome page, category page, details page/product page77Conceptual DesignDesign: Site Maps
Site map for Mens section of designer clothing siteHome page, category page, details page/product page78Conceptual DesignDesign: Site MapsBiocarta Site map, Fromson Consulting
Home page, category page, details page/product page79Conceptual DesignDesign: Site Maps
Site map by Kazi Shanto, Louise Blouin MediaHome page, category page, details page/product page80
Page TypesThe Mercator Atlas of EuropeFrom The British LibraryConceptual Design
Home PageCategory PageDetails PageDesign: Page Types Home page, category page, details page/product page82
NavigationNavigation Bridge, USS Enterprise by Serendigity, FlickrGridsTypes of Navigation
Site Structure major navHierarchical product familiesFunction sitemap privacyDirect banner ad/shortcutReference related linksDynamic search resultsBreadcrumb location Step Navigation sequence through forms/resultsFaceted Navigation filters resultsDesign: NavigationAreas of Navigation
Global universal header/footerLocal left nav/right navLocal content text links, buttons
Styles of Navigation
RolloverDropdownFlyoutTabsAccordion
Self Study: Want to know more?Adapted from Atsushi Hasegagwas The 7 Navigation Types of Web SitesAdapted from Atsushi HASEGAWAs The 7 Navigation Types of Web Siteshttp://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site84
GridsMega DropdownsDesign: Navigation
Adapted from Atsushi HASEGAWAs The 7 Navigation Types of Web Siteshttp://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site85GridsPower FootersDesign: Navigation
Adapted from Atsushi HASEGAWAs The 7 Navigation Types of Web Siteshttp://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site86
SketchingOrnithopter by Leonardo da Vinci, 1485-1487Design: Sketching
Design: Sketching
SketchingDesign: SketchingSketching
Any guesses what this is a sketch of?Design: Sketchingtwttr sketchTwitter.com
SketchingTwitter
[This sketch] has very special significance it's hanging in the office somewhere with one other page. Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down. Jack Dorsey, Twitter
Design: Sketching
SketchingThere are techniques and processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching. - Bill Buxton Design: SketchingBill BuxtonSketching User Experiences
Bill BuxtonSketching User Experiences
SketchingAttributes of a Sketch
QuickTimelyInexpensiveDisposablePlentifulClear vocabularyDistinct gestureMinimal detailAppropriate degree of refinementSuggest & explore rather than confirmAmbiguityDesign: SketchingSketchingMethodologyDrawLimit your timeDont worry about mistakes or style
GoalsBenefit from the participation of your colleaguesQuickly generate ideas and refine through iterationsDesign: Sketching95Design: SketchingClass Exercise: SketchingIn teams, sketch your ideas.
1) Create & Promote an Event
Design: SketchingDesign: SketchingClass Exercise: SketchingIn teams, sketch your ideas.
Create & Promote an EventTake 5 or so minutes first to discuss what features belong hereIs it a single page? Multiples steps? Time for silent sketchingTime for sharing your sketches
Design: SketchingDesign: Sketching
JennyDonnyDont forget to keep your personas in mind98Design: SketchingClass Exercise: SketchingIn teams, sketch your ideas.
1) Create & Promote an Event2) A Homepage
Design: Sketching----- Meeting Notes (2/11/12 16:59) -----Upon completing sketches: Any thoughts on how you could monetize this experience?99Design: Sketching
SabrinaJennyDonnyJerryDont forget to keep your personas in mind100Sketching Tools:
The following apps are all for the iPad
Adobe Ideas ($9.99)Bamboo Paper (Free)Muji Notebook ($4.99)Penultimate ($0.99)SketchBook Pro ($1.99)
InfoDesign: Sketching Tools
101
Wireframesphoto & sculpture by pollyverityWireframesWhat are wireframes?
Web site wireframes are blue prints that define a Web pages content and functionality. They do not convey design e.g. colors, graphics, or fonts.
- fatpurple Design: WireframesDesign: SketchingDesign: Wireframes - Examples
wireframe by matthieu mingasson
Design: SketchingDesign: Wireframes - Examplesscreencap from The Right way to Wireframe by Semantic WillDesign: SketchingDesign: Wireframes - Examples
iPad news app wire by F. Yamada
Design: SketchingDesign: Wireframes - ExamplesDesign: SketchingDesign: Wireframes - Examples
Design: SketchingDesign: Wireframes - Examples
Design: SketchingDesign: Wireframes - Examples
Wireframing/Prototype Tools:
Adobe InDesignAxureOmnigraffle (Mac)Microsoft VisioMockingbird (online, free)
Also:Adobe Proto (coming for iPad)BalsamiqiPlotziMockups (iPad)Omnigraffle (iPad)InfoDesign: Wireframing Tools
Self Study: Want to know more?Smashing Magazine: 35 Excellent Wireframing Resources111Design: SketchingClass Exercise: Final WireframeIn your teams, create your final deliverable.
Assign one of the following to a team member:
Create & Promote an EventEvent Detail3) Homepage
As an individual now, youll create a final wireframe, which incorporates your team mates designs and feedback.Design: Wireframes
GridsGridsThe true benefit of using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.Khoi Vinh, former design Director, NYTimes.com
Design: GridsGrids
Design: GridsGrids
Design: GridsGrids
Design: GridsGridsSelf Study: Want to know more?Learn more about design by grids:
960 Grid System960.gs
Design by Grid www.designbygrid.com
Hashgridwww.hashgrid.com
Design: GridsDesign: SketchingWireframe & Prototyping Tools
AxureDreamweaverInDesignVisioDesign: Wireframes
DevelopBooks:Information Architecture for the World Wide Web Louis Rosenfeld, Peter MorvilleInformation Architecture: Blueprints for the Web Christina Wodtke, Austin GovellaThe Elements of User Experience Jesse James GarrettDesigning Web Navigation: Optimizing the User Experience James Kalbach, Aaron GustafsonDesign of Everyday Things Donald Norman
Local Events:Dot Dot Dot, SVA Lecture SeriesIA Meetup
Web Sites:AlertboxA List ApartBoxes & Arrowswireframes.tumblr.comInfoAdditional ResourcesOrganizations:Human Computer Interactions (HCI)Interaction Designers Association (IxDA)Usability Professionals Association (UPA)
Further Studies:School of Visual Arts Continuing Ed classesMFA in Interaction DesignAdaptive PathThe Information Architecture InstituteThe IA Summit Pratt Course in Information DesignNielsen Norman GroupRosenfeld MediaUser Interface Engineering
Video:The Right Way to Wireframe by Russ Unger (YouTube)Q & ASlideshare address:http://www.slideshare.net/stribs
Additional credit:Thanks Anh Dang!InfoAdditional InfoDesign: SketchingWireframe & Prototyping Tools
AxureDreamweaverInDesignVisioDesign: Wireframes
Addendum:Design Principles Defining Wireframes vs. Sketches
Good design is
Good design is innovative.Good design makes a product useful.Good design is aesthetic.Good design makes a product understandable.Good design is unobtrusive.Good design is honest.Good design is long-lasting.Good design is thorough down to the last detail.Good design is environmentally friendly.Good design is as little design as possible.
Dieter Rams, amended March 2003 and October 2009Dieter Rams: 10 principles of good design
Head of design at Braun, the German consumer electronics manufacturer, DIETER RAMS (1932-) was one of the most influential industrial designers of the late 20th century124Design: SketchingDefining Wireframes versus SketchesTemplatesPagesApplyto many different pagesSpecific, may apply to a single pageExamples:basic pageproduct pageExamples:homepageecommerceor transactionalformSketchesWireframesQuickMore time-consumingFewdetailsVery detailedNottypically deliveredProfessional deliverable