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

http://www.forumone.com

Since 1996

2,000+ Projects

800+ Clients

85 Staff

Alexandria VA Washington DC Seattle WA

Seoul

London

NYCDC

SeattleRabat

Hanoi

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

https://www.youtube.com/watch?v=4Lv5Ag5hR98

Photo credit: Wikipedia

Mobility

Photo credit: WikipediaPhoto credit: The Times UK

http://www.thetimes.co.uk/tto/business/industries/technology/article3730183.ece

Mobility

Photo credit: WikipediaPhoto credit: Genius.com

http://genius.com/Steve-jobs-iphone-keynote-2007-annotated

Computing

Photo credit: Chilton Computing

http://www.chilton-computing.org.uk/ccd/literature/serc_annual_reports/serc_86-87.htm

Photo credit: Aram Bartholl

http://datenform.de/map.html

Big Data

Photo credit: Dezeen

http://www.dezeen.com/2016/02/12/noise-reduction-acoustics-scandinavian-interiors-stockholm-design-week-2016

Photo credit: CodeBaby

http://hub.codebaby.com/h/i/17353040-insights-on-how-augmented-reality-apps-can-revolutionize-the-way-we-live

Photo credit: WikipediaPhoto credit: Bicycling.com

http://www.bicycling.com/rides/art/become-strava-artist-these-gps-tips

Photo credit: Google

http://www.google.com/glass/

Photo credit: NextNature.net

https://www.nextnature.net/2008/04/fake-space-race/

Photo credit: CCT News

http://www.cctnews.com/oculus-to-launch-rock-band-game-for-vr/1955/

Photo credit: Technical University in Zvolen

https://www.youtube.com/watch?v=j59JxfbvxGg

Photo credit: Mechdyne Corporation

https://www.youtube.com/watch?v=ZAnVmYfWGpc

Photo credit: Gizmodo

http://io9.gizmodo.com/5273498/second-life-embraces-corporate-america-but-is-it-mutual

Photo credit: GridJumper.net

http://gridjumper.net/2010/08/29/architecture-for-the-virtual-environment/

Layering of complex systems

Interior of Notre Dame


Slide

Photo credit: WikipediaPhoto credit: Nam-ho Park


Jesse James Garrett

Lasagna

Photo credit: NYTimes Cooking

http://cooking.nytimes.com/recipes/9530-lasagna

Sequencing of experiences


Photo credit: Bernard Tschumi / Manhattan Transcripts

Slide





Photo credit: Forum One

Figuring out documentation

EMP

Photo credit: CCA

http://www.cca.qc.ca/en/collection/546-architectural-drawing-perspective-and-orthographic

EMP


Photo credit: Buildipedia

http://buildipedia.com/aec-pros/featured-architecture/cleveland-clinic-lou-ruvo-center-by-frank-gehry

EMP

Photo credit: Buildipedia

http://buildipedia.com/aec-pros/featured-architecture/cleveland-clinic-lou-ruvo-center-by-frank-gehry

Photo credit: Forum One

Home

!page%3!of!15

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

created,by,Kevin,Pi?man,[email protected],

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

Home

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

Terms

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)

2.0

5.0

4.0

3.0

1.0

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.

Terms

Learn

623,402 participants

All agesCode.org 1hr of Code

Level

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?

START

Language

Grade Level

All agesElementaryMiddle SchoolHigh SchoolCollege

1 Hour of code Beyond 1 Hour

1.0

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.


FACTS

Sign a Petition

Support a Local School

Washington 98107 Need tools for another area? Change location


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

2.0

3.0

4.0

5.0

1.0

Photo credit: Googled “Wireframes”

Power in the grid

Photo credit: Flickr / Thom McKenzie

https://www.flickr.com/photos/thom_mckenzie/3087863151/


Manhattan Grid

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

Photo credit: Cone Magazine

http://www.conemagazine.com/daily-overviews-stunning-photo-series/2-central-park-nyc-usa/

Photo credit: Erskine Design

http://erskinedesign.com/media/blog/maintainable-responsive-layouts/big/1.png

Photo credit: playbook.cio.gov

https://playbook.cio.gov/designstandards/grids/

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

Copyright © 2011 Dubberly Design Office2501 Harrison Street, #7San Francisco, CA 94110415 648 9799

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 × 4’s

2 × 4’s

2 × 3’s 2 × 3’s

2 × 3’s

2 × 3’s

2 × 3’s

2 × 3’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 1’s

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

Copyright © 2011 Dubberly Design Office2501 Harrison Street, #7San Francisco, CA 94110415 648 9799

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 × 4’s

2 × 4’s

2 × 3’s 2 × 3’s

2 × 3’s

2 × 3’s

2 × 3’s

2 × 3’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s

1 × 4’s2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

2 × 2’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 3’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 2’s

1 × 1’s

http://www.dubberly.com/concept-maps/3x4grid.html

Patterns everywhere




Slide


http://patternlab.io/about.html




Beauty in simplicity

Álvaro Siza, theatre in Llinars del Vallès, a village outside Barcelona / Photo credit: dezeen magazine

Ando


Slide




Gehry


Recognizing scale

Photo credit: ibiblio

Small town


Small town


Small town

Photo credit: WikipediaPhoto credit: wikipedia

Palladio


Le Corbusier / Golden Ratio / Vitruvian Man


Photo credit: Eames Office

Photo credit: Eames Office

Photo credit: Facebook

Photo credit: NASA

What Now?

Seattle Central Library



Photo credit: WikipediaPhoto credit: Emily Berkson

Now go enjoy your beer. Nam-ho Park | [email protected]
