What Architecture Taught Me About Information Architecture (and UX)

Week 2 What Architecture Taught Me About Information Architecture

Photo credit: Nam-ho Park

Preamble: my user experience journey (map)

http://www.forumone.com

Since 1996

2,000+ Projects

800+ Clients

85 Staff

Alexandria VA Washington DC Seattle WA

London

SeattleRabat

Seoul 18.5 years

London 9 years

NYC 7 yearsDC

6 years

Seattle 4.5 years

Rabat 1 year

Hanoi 0.5 years

Architecture 10 years

User Experience 10 years

Digital Strategy 16 years

Teaching 2 yearsWeb Development

4 years

Non-profit 1 year

Urban Design 1 year

Teaching 3 years

Designing Experiences

Neo / Matrix

Photo credit: YouTube

Photo credit: Wikipedia

Mobility

Photo credit: WikipediaPhoto credit: The Times UK

Mobility

Photo credit: WikipediaPhoto credit: Genius.com

Computing

Photo credit: Chilton Computing

Photo credit: Aram Bartholl

Big Data

Photo credit: Dezeen

Photo credit: CodeBaby

Photo credit: WikipediaPhoto credit: Bicycling.com

Photo credit: Google

Photo credit: NextNature.net

Photo credit: CCT News

Photo credit: Technical University in Zvolen

Photo credit: Mechdyne Corporation

Photo credit: Gizmodo

Photo credit: GridJumper.net

Layering of complex systems

Interior of Notre Dame

Photo credit: WikipediaPhoto credit: Nam-ho Park

Jesse James Garrett

Lasagna

Photo credit: NYTimes Cooking

Sequencing of experiences

Photo credit: Bernard Tschumi / Manhattan Transcripts

Photo credit: Forum One

Figuring out documentation

Photo credit: CCA

Photo credit: Buildipedia

Photo credit: Forum One

!page%3!of!15

CSEdWeek.org,Wireframes,|,CSEdWeek.org,&,Code.org,Development,for,Code.org

created,by,Kevin,Pi?man,kpi?man@forumone.com,

Version,2.3,published,Mon,Aug,19,2013

Scaled!50%

Notes:

Layout!for!the!homepage!which!centers!and!promotes!the!pe>>on.!

1.0Slider!could!contain!the!code.org!video,!leader!board,!featured!stories,!and!the!map.

2.0Secondary!buCons!are!grouped!and!added!to!the!banner!space!in!this!version.!

3.0Users!that!submit!the!pe>>on!are!taken!to!the!zipGspecific!promote!page.

4.0Ques>on:!Are!these!pulled!from!another!site,!entered!as!just!links,!or!is!there!a!news!sec>on!on!the!csedweek.org!site!for!full!stories?

5.0Featured!students!added!to!the!homepage!in!this!revision.

Learn Teach Promote How to Help

LIKE TWEETf

Latest Highlights

About Partners Contact

16:9 have learned already.

View map of progress

Beyond 1 hour of code

Code.org brings CS Class to MLK High School in Seattle, WA.

Watch Ryan Seacrest learning to code on the TODAY show!

Woman Programs 180 Web Sites in 180 Days.

Read about our exciting new additions to the Code.org team!

12 Year old teaches his Dad to program

Teachers & Educators

▪ Find local volunteers▪ Promote computer

science education▪ Find CS curriculum

Advocacy Tools

Get Advocacy Tools

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus orci nec felis lacinia ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Get Involved

August 7 • New York Times

August 1 • NBC

July 24 • NPR

July 22 • Code.org Blog

June 22 • Code.org Blog

Learn an Hour of Code

1,700,000

Sign to Bring Computer Science to your DistrictLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus orci nec felis lacinia ultrices. Sed

luctus tincidunt elit, vel eleifend risus tincidunt ut. Aliquam et diam sed eros pellentesque blandit.

GOEmail ENTER ZIPName

SHAREf TWEET

▪ Why it matters handout▪ CSEdWeek posters▪ Downloadable quotes▪ Videos testimonials

From the Community

PartnersCS Ed Week thanks our core partners for their financial support of Computing in the Core.

Teach an hour of code in your class

Featured Students

Audrey (Portland, OR) Sarah (Austin, TX) Jessica (Boulder, CO)

Learn (alternate)

!page%6!of!15

Learn (alternate)

Scaled!50%

Notes:

Alterna5ve!layout!shows!how!the!1!Hour!of!code!and!Beyond!1!Hour!op5ons!could!be!navigated!with!tabs.!

1.0The!feature!area!could!also!feature!just!a!single!program!for!even!more!exposure.

LIKE TWEETf

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus orci nec felis lacinia ultrices. Sed luctus tincidunt elit, vel eleifend risus tincidunt ut.

About Partners Contact

1,700,00 have learned already.

623,402 participants

All agesCode.org 1hr of Code

Platform

BeginnerIntermediateAdvanced

Web BrowserSmart phoneTabletOffline ComputerNo computer

Web Browser

Khan Acadamy - Web Development

All ages Web BrowserSed luctus tincidunt elit, vel eleifend risus tincidunt ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CargoBot

Ages 6-18 Web Browser

Code Academy - Javascript

Web BrowserAll ages

Khan Acadamy - Web Development

22,402 participants

All ages Web BrowserSed luctus tincidunt elit, vel eleifend risus tincidunt ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CargoBot

10,831 participants

Ages 6-18 Web Browser

Code Academy - Javascript

2,351 participants

Web BrowserAll ages

No computer or smart phone?

Language

Grade Level

All agesElementaryMiddle SchoolHigh SchoolCollege

1 Hour of code Beyond 1 Hour

Promote CS in Area

!page%11!of!15

Promote CS in Area

Scaled!50%

Notes:

1.0What!exactly!this!data!will!be!and!where!it!comes!from!is!s<ll!TBD.

2.0Secondary!task,!but!changing!loca<ons!is!s<ll!available!if!needed.!Could!open!an!input!immediately!under!the!link?

3.0"Sign!a!Pe<<on"!buKon!opens!a!new!window!to!Change.org!showing!a!preLfiltered!list!of!relevant!pe<<ons!if!possible.

4.0"Support!a!Local!School"!opens!the!local!How!to!Help!page!(Bring!CS!to!a!school)!based!on!the!currently!shown!zip!code.

5.0Download!links!to!the!toolkits.

LIKE TWEETf

About Partners Contact Terms

Promote Computer Science in Washington

POLICIES

5,000 Jobs

43,302 Students

52 Schools

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus orci nec felis lacinia ultrices. Sed luctus tincidunt elit, vel eleifend risus tincidunt ut. Aliquam et diam sed eros pellentesque blandit.

Sign a Petition

Support a Local School

Washington 98107 Need tools for another area? Change location

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus orci nec felis lacinia ultrices. Sed luctus tincidunt elit, vel eleifend risus tincidunt ut. Aliquam et diam sed eros pellentesque blandit.

Petition to your state or local school board at change.org

Washington Toolkit

National Toolkit

How you can help

Pledge funds to a school in your area.

Download + Share

Photo credit: Googled “Wireframes”

Power in the grid

Photo credit: Flickr / Thom McKenzie

Manhattan Grid

Photo credit: Nam-ho ParkPhoto credit: Nam-ho Park

Photo credit: Cone Magazine

Photo credit: Erskine Design

Photo credit: playbook.cio.gov

Photo credit: Dubberly Design Office

The 892 unique ways to partition a 3 × 4 grid

This poster illustrates a change in design practice. Compu-tation-based design—that is, the use of algorithms to compute options—is becoming more practical and more common. Design tools are becoming more computation-based; designers are working more closely with program-mers; and designers are taking up programming.

Above, you see the 892 unique ways to partition a 3 × 4 grid into unit rectangles. For many years, designers have used grids to unify diverse sets of content in books, magazines, screens, and other environments. The 3 × 4 grid is a com-mon example. Yet even in this simple case, generating all the options has—until now—been almost impossible.

Patch Kessler designed algorithms to generate all the possible variations, identify unique ones, and sort them—not only for 3 × 4 grids but also for any n × m grid. He instantiated the algorithms in a MATLAB program, which output PDFs, which Thomas Gaskin imported into Adobe Illustrator to design the poster.

Rules for generating variationsThe rule system that generated the variations in the poster was suggested by Bill Drenttel and Jessica Helfand who noted its relationship to the tatami mat system used in Japanese buildings for 1300 years or more. In 2006, Drenttel and Helfand obtained U.S. Patent 7124360 on this grid system—“Method and system for computer screen lay-out based on recombinant geometric modular structure”.

The tatami system uses 1 × 2 rectangles. Within a 3 × 4 grid, 1 × 2 rectangles can be arranged in 5 ways. They appear at the end of section 6.

Unit rectangles (1 × 1, 1 × 2, 1 × 3, 1 × 4; 2 × 2, 2 × 3, 2 × 4; 3 × 3, 3 × 4) can be arranged in a 3 × 4 grid in 3,164 ways. Many are almost the same—mirrored or rotated versions of the same configuration. The poster includes only unique variations—one version from each mirror or rotation group. Colors indicate the type and number of related non-unique variations. The variations shown in black have 3 related versions; blue, green, and orange have 1 related version; and magenta variations are unique, because mirroring and rotating yields the original, thus no other versions. (See the table to the right for examples.)

Rules for sortingThe poster groups variations according to the number of non-overlapping rectangles. The large figures indicate the beginning of each group. The sequence begins in the upper left and proceeds from left to right and top to bottom. Each group is further divided into sub-groups sharing the same set of elements. The sub-groups are arranged according to the size of their largest element from largest to smallest. Squares precede rectangles of the same area; horizontals precede verticals of the same dimensions. Within sub-groups, variations are arranged according to the position of the largest element, preceding from left to right and top to bottom. Variations themselves are oriented so that the largest rectangle is in the top left. Black dots separate groups by size. Gray dots separate groups by orientation.

Where to learn moreGrids have been described in design literature for at least 50 years. French architect Le Corbusier describes grid systems in his 1946 book, Le Modulor. Swiss graphic designer Karl Gerstner describes a number of grid systems or “programmes” in his 1964 book, Designing Programmes. The classic work on grids for graphic designers is Josef Muller-Brockman’s 1981 book, Grid Systems.

Patch Kessler explores the mathematical underpinnings of grid generation in his paper “Arranging Rectangles”. www.mechanicaldust.com/Documents/Partitions_05.pdf

Thomas Gaskin has created an interactive tool for viewing variations and generating HTML. www.3x4grid.com

Design: Thomas GaskinCreative Direction: Hugh DubberlyAlgorithms: Patrick KesslerPatent: William Drenttel + Jessica Helfand

26 × MagentaAll three symmetries combinedUnchanged by horizontal reflection, vertical reflection, or180º rotation.

26 × GreenRotational symmetryChanged by horizontal and vertical reflection.

61 × BlueTop-bottom symmetryChanged by horizontal reflection and 180º rotation.

76 × OrangeLeft-right symmetryChanged by vertical reflection and 180º rotation.

703 × BlackAsymmetricChanged by horizontal reflection, vertical reflection, and 180º rotation.

OriginalHorizontal Reflection

Vertical Reflection

180º Rotation

R R R RR R R

310 of

433 of

590 of

7232 of

8201 of

9105 of

1035 of

116 of 121 of

23 of11 of

6175 of

3 × 4’s 3 × 3’s

3 × 3’s

3 × 3’s2 × 4’s

2 × 4’s

2 × 3’s 2 × 3’s

2 × 3’s

1 × 4’s

1 × 4’s2 × 2’s

2 × 2’s

1 × 3’s

1 × 2’s

1 × 1’s