SlideShare una empresa de Scribd logo
1 de 78
Descargar para leer sin conexión
!""#$%%




DESIGNING OUTSIDE
THE BROWSER
Allow myself to introduce... myself.
!""#$%%




          ?
Goals
Identify design challenges in other types of media

Show how solutions from other media relate to web design

Get inspired!
!"#"$%&'(


                      BOOKS   VIDEO GAMES    THEATRE
                                            SET DESIGN

POSTERS
POSTERS
Posters: Challenge
Grab the viewer, make an impact

Communicate a simple message... quickly

Follow that simple message with supporting details
(Some) Solutions
Simplicity

Color and contrast
Simplicity is about subtracting the obvious and adding the
meaningful.


- John Maeda, The Laws of Simplicity
http://www.ttthings.com/shop
http://wilsonminer.com
http://digitalmash.com
http://www.seedconference.com
http://carsonified.com/
http://carsonified.com/mission/
http://carsonified.com/events/
http://carsonified.com/contact/
!"#"$%&'(
Magazines: Challenge
Retain readership (and advertising dollars)


Create incentives to purchase and read the magazine, rather than
get the content elsewhere
Is the web so different?
RSS Readers

Instapaper (http://instapaper.com)

Readability (http://lab.arc90.com/experiments/readability/)
(One) Solution
Focus on design and interesting layouts that engage the reader
with the content and forge a connection with the magazine’s
brand.
Writers don’t like you. They treat
you as an enemy, because they
believe in words and they believe
you’re cutting the words... The
future of media is where people
realize that how content is sold to
the reader is equally important.
Jacek Utko

http://www.ted.com/talks/jacek_utko_asks_can_design_save_the_newspaper.html
http://blog.ted.com/2009/04/the_fate_of_the.php
From: http://www.gr2.fi/g2sivut/sanoja_ray_gun.html
http://abriefmessage.com/2007/12/05/twemlow/
http://abriefmessage.com/2007/09/21/lukas/
http://abriefmessage.com/2007/09/18/walker/
http://jasonsantamaria.com/articles/on-the-subject-of-design/
http://jasonsantamaria.com/articles/what-the-world-needs/
http://jasonsantamaria.com/articles/pretty-sketchy/
http://dustincurtis.com/you_should_follow_me_on_twitter.html
http://dustincurtis.com/to-fasten-your-seatbelt.html
http://dustincurtis.com/how_niko_tinbergen_reverse_engineered_the_seagull.html
http://trentwalton.com/2009/08/22/a-fresh-coat-of-paint/
http://trentwalton.com/2009/06/26/content-karma/
http://trentwalton.com/2009/09/17/css3-and-me/
BOOKS
Books: Challenge
Making reading as effortless and enjoyable as possible


Use design subtly to support the text
In a well-made book, where designer, compositor and printer
have all done their jobs, no matter how many thousands of
lines and pages they must occupy, the letters are alive. They
dance in their seats. Sometimes they rise and dance in the
margins and aisles.


Robert Bringhurst
(Some) Solutions
Typography, typography, typography

Choose a typeface (that you can bring to life)
Michael Bierut’s Thirteen Ways of
Looking at a Typeface
Because it works.               Because it’s beautiful.
Because you like its history.   Because it’s ugly.
Because you like its name.      Because it’s boring.
Because of who designed it.     Because it’s special.
Because it was there.           Because you believe in it.
Because they made you.          Because you can’t not.
Because it reminds you of
                                http://www.designobserver.com/observatory/
something.
                                entry.html?entry=5497
http://www.newyorker.com
http://bobulate.com
The lovely typeface is Skolar, which was designed by David
Březina and is distributed by TypeTogether. It was designed with
“scholarly and multilingual publications in mind. It incorporates
a subtle personal style, neither neutral nor conspicuous,” exactly
what Bobulate portends to do.


Liz Danzico, Bobulate.com
http://www.snook.ca
VIDEO GAMES
Video Games: Challenge
Keep players aware of ambient information, but not distract from
primary gameplay experience
(One) Solution
Using information overlays, HUDs, or toolbars
THEATRE
SET DESIGN
Set Design: Challenge
Achieve appearance of expansive three-dimensional space with
the constraint of limited depth on stage
(One) Solution
Use of “flats” set in front and behind one another along with
faked perspective
http://www.flickr.com/photos/tobysimkin/3816299983/
http://www.flickr.com/photos/tobysimkin/3817130032/
http://vecface.com/ma/
http://vecface.com/ma/
http://www.taptaptap.com
http://www.taptaptap.com
http://www.huddletogether.com/projects/lightbox/
http://www.panic.com/coda/
http://www.tapbots.com
Conclusion
Look beyond CSS galleries.


Look at what challenges designers face in other media and what
techniques are being used to solve those challenges.


Get inspired!


                                  Richard Powell, @misterpowell

Más contenido relacionado

Similar a Designing Outside the Browser: Inspiration from Books, Games, Posters & More

Blogres2007
Blogres2007Blogres2007
Blogres2007eirikso
 
Digital trends that will transform your business
Digital trends that will transform your businessDigital trends that will transform your business
Digital trends that will transform your businessPer Axbom
 
New media studio 2 veerle van der sluys
New media studio 2   veerle van der sluysNew media studio 2   veerle van der sluys
New media studio 2 veerle van der sluysMADNewMedia
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
IxDA Chicago Interaction 12 recap
IxDA Chicago Interaction 12 recapIxDA Chicago Interaction 12 recap
IxDA Chicago Interaction 12 recapNikola Ranguelov
 
Let's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinkingLet's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinkingAndy Kirk
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Meagan Fisher
 
10 best uses of the internet in teaching
10 best uses of the internet in teaching10 best uses of the internet in teaching
10 best uses of the internet in teachingTerica Elaine
 
Technology and Transmedia
Technology and TransmediaTechnology and Transmedia
Technology and TransmediaMichael Annetta
 
Dispensa software per la stampa 3D (in italiano)
Dispensa software per la stampa 3D (in italiano)Dispensa software per la stampa 3D (in italiano)
Dispensa software per la stampa 3D (in italiano)Carlo Fonda
 
Final factual proposal
Final factual proposalFinal factual proposal
Final factual proposalKieranJohnson6
 
Digital Fabrication Studio 0.3 Media, Business, Platform, Economy
Digital Fabrication Studio 0.3 Media, Business, Platform, EconomyDigital Fabrication Studio 0.3 Media, Business, Platform, Economy
Digital Fabrication Studio 0.3 Media, Business, Platform, EconomyMassimo Menichinelli
 
Starting With Bad Power Point: Handout
Starting With Bad Power Point: HandoutStarting With Bad Power Point: Handout
Starting With Bad Power Point: HandoutFred Johnson
 
01 DIGI CREATIVE history
01 DIGI CREATIVE history01 DIGI CREATIVE history
01 DIGI CREATIVE historySheSaysCREATIVE
 
Principles of Design for Web (2006)
Principles of Design for Web (2006)Principles of Design for Web (2006)
Principles of Design for Web (2006)Matteo Wyllyamz
 

Similar a Designing Outside the Browser: Inspiration from Books, Games, Posters & More (20)

Blogres2007
Blogres2007Blogres2007
Blogres2007
 
Digital trends that will transform your business
Digital trends that will transform your businessDigital trends that will transform your business
Digital trends that will transform your business
 
New media studio 2 veerle van der sluys
New media studio 2   veerle van der sluysNew media studio 2   veerle van der sluys
New media studio 2 veerle van der sluys
 
Design Presentation
Design PresentationDesign Presentation
Design Presentation
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
IxDA Chicago Interaction 12 recap
IxDA Chicago Interaction 12 recapIxDA Chicago Interaction 12 recap
IxDA Chicago Interaction 12 recap
 
Let's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinkingLet's do some thinking about data visualisation thinking
Let's do some thinking about data visualisation thinking
 
Social Media is ...
Social Media is ...Social Media is ...
Social Media is ...
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3
 
Making A Coffee Table
Making A Coffee TableMaking A Coffee Table
Making A Coffee Table
 
10 best uses of the internet in teaching
10 best uses of the internet in teaching10 best uses of the internet in teaching
10 best uses of the internet in teaching
 
Technology and Transmedia
Technology and TransmediaTechnology and Transmedia
Technology and Transmedia
 
Dispensa software per la stampa 3D (in italiano)
Dispensa software per la stampa 3D (in italiano)Dispensa software per la stampa 3D (in italiano)
Dispensa software per la stampa 3D (in italiano)
 
Final factual proposal
Final factual proposalFinal factual proposal
Final factual proposal
 
Digital Fabrication Studio 0.3 Media, Business, Platform, Economy
Digital Fabrication Studio 0.3 Media, Business, Platform, EconomyDigital Fabrication Studio 0.3 Media, Business, Platform, Economy
Digital Fabrication Studio 0.3 Media, Business, Platform, Economy
 
Starting With Bad Power Point: Handout
Starting With Bad Power Point: HandoutStarting With Bad Power Point: Handout
Starting With Bad Power Point: Handout
 
The Art Direction Gap
The Art Direction GapThe Art Direction Gap
The Art Direction Gap
 
01 DIGI CREATIVE history
01 DIGI CREATIVE history01 DIGI CREATIVE history
01 DIGI CREATIVE history
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Principles of Design for Web (2006)
Principles of Design for Web (2006)Principles of Design for Web (2006)
Principles of Design for Web (2006)
 

Último

Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryrioverosanniejoy
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一Fi L
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一Fi ss
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 

Último (20)

Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 

Designing Outside the Browser: Inspiration from Books, Games, Posters & More