What Architecture Taught Me About Information Architecture (and UX)

Week 2What Architecture Taught Me About Information Architecture
Photo credit: Nam-ho Park

Preamble: my user experience journey (map)

Since
1996
2,000+
Projects
800+
Clients
85
Staff
Alexandria VA Washington DC Seattle WA

Seoul
London
NYC
DC
Seattle
Rabat
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-proﬁt
1 year
Urban Design
1 year
Teaching
3 years

Neo / Matrix
Photo credit: YouTube

Mobility
Photo credit: WikipediaPhoto credit: The Times UK

Mobility
Photo credit: WikipediaPhoto credit: Genius.com

Computing
Photo credit: Chilton Computing

Photo credit: WikipediaPhoto credit: Bicycling.com

Photo credit: Technical University in Zvolen

Photo credit: Mechdyne Corporation

Interior of Notre Dame

Slide
Photo credit: WikipediaPhoto credit: Nam-ho Park

Photo credit: Wikipedia
Jesse James Garrett

Lasagna
Photo credit: NYTimes Cooking

Photo credit: Bernard Tschumi / Manhattan Transcripts

EMP

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,kpi?man@forumone.com,
Version,2.3,published,Mon,Aug,19,2013
Home
Scaled!50%
Notes:
Layout!for!the!homepage!
which!centers!and!promotes!
the!pe>>on.!
1.0
Slider!could!contain!the!
code.org!video,!leader!board,!
featured!stories,!and!the!map.
2.0
Secondary!buCons!are!
grouped!and!added!to!the!
banner!space!in!this!version.!
3.0
Users!that!submit!the!pe>>on!
are!taken!to!the!zipGspeciﬁc!
promote!page.
4.0
Ques>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.0
Featured!students!added!to!
the!homepage!in!this!revision.
Learn Teach Promote How to Help
LIKE TWEET
f
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 District
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.
GOEmail ENTER ZIPName
SHARE
f TWEET
▪ Why it matters handout
▪ CSEdWeek posters
▪ Downloadable quotes
▪ Videos testimonials
From the Community
Partners
CS 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.0
The!feature!area!could!also!
feature!just!a!single!program!
for!even!more!exposure.
LIKE TWEET
f
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 ages
Code.org 1hr of Code
Level
Platform
Beginner
Intermediate
Advanced
Web Browser
Smart phone
Tablet
Offline Computer
No computer
Web Browser
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed
cursus orci nec felis lacinia
ultrices. Sed luctus tincidunt elit,
vel eleifend risus tincidunt ut.
Khan Acadamy - Web
Development
All ages Web Browser
Sed 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 Browser
Sed 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 ages
Elementary
Middle School
High School
College
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.0
What!exactly!this!data!will!be!
and!where!it!comes!from!is!
s<ll!TBD.
2.0
Secondary!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!preLﬁltered!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.0
Download!links!to!the!toolkits.
LIKE TWEET
f
About Partners Contact Terms
Promote Computer Science in Washington
POLICIES
5,000 Jobs
43,302 Students
52 Schools
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.
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
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
2.0
3.0
4.0
5.0
1.0

Photo credit: Googled “Wireframes”

Photo credit: Flickr / Thom McKenzie

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

Photo credit: playbook.cio.gov

Photo credit: Dubberly Design Ofﬁce
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, whichThomas Gaskin imported into Adobe
Illustrator to design the poster.
Rules for generating variations
The 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 sorting
The 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 more
Grids 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 Gaskin
Creative Direction: Hugh Dubberly
Algorithms: Patrick Kessler
Patent: William Drenttel + Jessica Helfand
Copyright © 2011
Dubberly Design Office
2501 Harrison Street, #7
San Francisco, CA 94110
415 648 9799
26 × Magenta
All three symmetries combined
Unchanged by horizontal reflection,
vertical reflection, or
180º rotation.
26 × Green
Rotational symmetry
Changed by horizontal and
vertical reflection.
61 × Blue
Top-bottom symmetry
Changed by horizontal reflection
and 180º rotation.
76 × Orange
Left-right symmetry
Changed by vertical reflection and
180º rotation.
703 × Black
Asymmetric
Changed by horizontal reflection,
vertical reflection, and
180º rotation.
Original
Horizontal
Reflection
Vertical
Reflection
180º
Rotation
R R R RR RR
8201 of
9105 of
1035of
116 of 121 of
1× 4’s
1× 4’s
1× 4’s
2 × 2’s
2 × 2’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 ×1’s
310 of
433 of
590 of
7232 of
8201 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’s2 × 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 × 2’s
1 × 2’s
1 × 2’s

http://patternlab.io/about.html

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

Gehry

Small town

Small town
Photo credit: WikipediaPhoto credit: wikipedia

Palladio

Le Corbusier / Golden Ratio / Vitruvian Man
Photo credit: Wikipedia

Seattle Central Library

Photo credit: WikipediaPhoto credit: Emily Berkson

Now go enjoy your beer | Nam-ho Park | npark@forumone.com

What Architecture Taught Me About Information Architecture (and UX)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie What Architecture Taught Me About Information Architecture (and UX)

Ähnlich wie What Architecture Taught Me About Information Architecture (and UX) (20)

Mehr von Nam-ho Park

Mehr von Nam-ho Park (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

What Architecture Taught Me About Information Architecture (and UX)