what architecture taught me about information architecture (and ux)
DESCRIPTION
2014-02-20 World IA Day (Seattle)TRANSCRIPT
![Page 1: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/1.jpg)
Week 2 What Architecture Taught Me About Information Architecture
Photo credit: Nam-ho Park
![Page 2: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/2.jpg)
Preamble: my user experience journey (map)
![Page 4: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/4.jpg)
Since 1996
2,000+ Projects
800+ Clients
85 Staff
Alexandria VA Washington DC Seattle WA
![Page 5: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/5.jpg)
![Page 6: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/6.jpg)
Seoul
London
NYCDC
SeattleRabat
Hanoi
![Page 7: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/7.jpg)
Seoul 18.5 years
London 9 years
NYC 7 yearsDC
6 years
Seattle 4.5 years
Rabat 1 year
Hanoi 0.5 years
![Page 8: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/8.jpg)
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
![Page 9: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/9.jpg)
Designing Experiences
![Page 10: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/10.jpg)
Photo credit: Nam-ho Park
![Page 11: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/11.jpg)
![Page 13: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/13.jpg)
Photo credit: Wikipedia
![Page 14: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/14.jpg)
Mobility
Photo credit: WikipediaPhoto credit: The Times UK
![Page 15: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/15.jpg)
Mobility
Photo credit: WikipediaPhoto credit: Genius.com
![Page 16: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/16.jpg)
Computing
Photo credit: Chilton Computing
![Page 18: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/18.jpg)
Big Data
Photo credit: Dezeen
![Page 19: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/19.jpg)
Photo credit: CodeBaby
![Page 20: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/20.jpg)
Photo credit: WikipediaPhoto credit: Bicycling.com
![Page 26: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/26.jpg)
Photo credit: Gizmodo
![Page 27: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/27.jpg)
Photo credit: GridJumper.net
![Page 28: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/28.jpg)
Layering of complex systems
![Page 29: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/29.jpg)
Interior of Notre Dame
Photo credit: Nam-ho Park
![Page 30: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/30.jpg)
Slide
Photo credit: WikipediaPhoto credit: Nam-ho Park
![Page 31: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/31.jpg)
Photo credit: Wikipedia
Jesse James Garrett
![Page 33: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/33.jpg)
Sequencing of experiences
![Page 34: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/34.jpg)
Photo credit: Wikipedia
![Page 35: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/35.jpg)
Photo credit: Bernard Tschumi / Manhattan Transcripts
![Page 36: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/36.jpg)
Slide
Photo credit: WikipediaPhoto credit: Nam-ho Park
![Page 37: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/37.jpg)
Photo credit: Wikipedia
![Page 38: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/38.jpg)
Photo credit: Wikipedia
![Page 39: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/39.jpg)
Photo credit: Nam-ho Park
![Page 40: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/40.jpg)
Photo credit: Forum One
![Page 41: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/41.jpg)
![Page 42: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/42.jpg)
![Page 43: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/43.jpg)
Figuring out documentation
![Page 44: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/44.jpg)
EMP
Photo credit: CCA
![Page 45: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/45.jpg)
EMP
Photo credit: WikipediaPhoto credit: Nam-ho Park
![Page 46: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/46.jpg)
Photo credit: Buildipedia
![Page 47: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/47.jpg)
EMP
Photo credit: Buildipedia
![Page 48: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/48.jpg)
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
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
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.
Learn Teach Promote How to Help
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
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
422,402 participants
All ages Web BrowserSed luctus tincidunt elit, vel eleifend risus tincidunt ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CargoBot
200,831 participants
Ages 6-18 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.
Code Academy - Javascript
102,351 participants
Web BrowserAll ages
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
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus orci nec felis lacinia ultrices. Sed luctus tincidunt elit, vel eleifend risus tincidunt ut.
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
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
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.
Learn Teach Promote How to Help
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.
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
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
![Page 49: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/49.jpg)
Photo credit: Googled “Wireframes”
![Page 50: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/50.jpg)
Power in the grid
![Page 52: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/52.jpg)
Photo credit: Nam-ho Park
![Page 53: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/53.jpg)
Manhattan Grid
Photo credit: Nam-ho ParkPhoto credit: Nam-ho Park
![Page 54: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/54.jpg)
Photo credit: Cone Magazine
![Page 55: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/55.jpg)
Photo credit: Erskine Design
![Page 57: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/57.jpg)
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
![Page 58: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/58.jpg)
Patterns everywhere
![Page 59: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/59.jpg)
Photo credit: Nam-ho Park
![Page 60: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/60.jpg)
Photo credit: Nam-ho Park
![Page 61: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/61.jpg)
Photo credit: Nam-ho Park
![Page 62: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/62.jpg)
Slide
Photo credit: WikipediaPhoto credit: Nam-ho Park
![Page 65: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/65.jpg)
Beauty in simplicity
![Page 66: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/66.jpg)
Álvaro Siza, theatre in Llinars del Vallès, a village outside Barcelona / Photo credit: dezeen magazine
![Page 67: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/67.jpg)
Ando
Photo credit: Wikipedia
![Page 68: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/68.jpg)
Slide
Photo credit: WikipediaPhoto credit: Nam-ho Park
![Page 69: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/69.jpg)
Photo credit: Nam-ho Park
![Page 70: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/70.jpg)
Photo credit: Nam-ho Park
![Page 71: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/71.jpg)
Gehry
Photo credit: Nam-ho Park
![Page 72: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/72.jpg)
Recognizing scale
![Page 73: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/73.jpg)
Photo credit: ibiblio
![Page 74: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/74.jpg)
Small town
Photo credit: Nam-ho ParkPhoto credit: Nam-ho Park
![Page 75: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/75.jpg)
Small town
Photo credit: Nam-ho ParkPhoto credit: Nam-ho Park
![Page 76: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/76.jpg)
Small town
Photo credit: WikipediaPhoto credit: wikipedia
![Page 77: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/77.jpg)
Palladio
Photo credit: Nam-ho ParkPhoto credit: Nam-ho Park
![Page 78: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/78.jpg)
![Page 79: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/79.jpg)
Le Corbusier / Golden Ratio / Vitruvian Man
Photo credit: Wikipedia
![Page 80: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/80.jpg)
Photo credit: Eames Office
![Page 81: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/81.jpg)
Photo credit: Eames Office
![Page 82: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/82.jpg)
Photo credit: Facebook
![Page 83: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/83.jpg)
Photo credit: NASA
![Page 84: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/84.jpg)
What Now?
![Page 85: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/85.jpg)
Seattle Central Library
Photo credit: WikipediaPhoto credit: Nam-ho Park
![Page 86: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/86.jpg)
Photo credit: Wikipedia
![Page 87: What Architecture Taught Me About Information Architecture (and UX)](https://reader030.vdocument.in/reader030/viewer/2022012911/56d6bd711a28ab30168e0102/html5/thumbnails/87.jpg)
Photo credit: WikipediaPhoto credit: Emily Berkson