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