SlideShare a Scribd company logo
1 of 54
Download to read offline
DESIGN TO
COMMUNICATE
Simon Collison
DIBI, Gateshead, April 2010
@simoncollison colly.com
This presentation is about starting points...
DESIGN
SQUARE
ONE
This presentation is not about...
HTML & CSS
JQUERY
PHOTOSHOPbecause these are just enablers
The screen brings with it different kinds of
challenges for visual design, some of which
occur exclusively in interactive media.
It’s unrealistic to think our old methods can
fill in all the gaps, but new interaction
patterns and visual languages emerge
everyday.
These are the building blocks for our new
design principles.
JASON SANTA MARIA
VISUAL
GRAMMAR
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
BALANCE
COMPOSITION
SYMMETRY
MOVEMENT
RHYTHM
REPETITION
PATTERNS
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
Design To Communicate
MENTAL
MODELS
The models people have of
themselves, others, the
environment, and the things
with which they interact.
MENTAL MODELS
Environment
Experience
Others
Me
Instruction
Interaction
MAPPING
The relationship between
two things.
Natural mapping leads to
immediate understanding.
MAPPING
Control Outcome
UnderstandingControl Outcome
SYSTEMS
We don’t design web pages.
We design systems.
ANDY CLARKE
Design To Communicate
MOTIVE
What are our motives,
and why do we go in one
particular direction?
MOTIVE
NOSTALGIA
A longing for the past, or
the ephemera of the olden
days, and the sense that
everything was better than
it is today.
NOSTALGIA
RHETORIC
The art of using language
effectively in order to persuade.
RHETORIC
VERNACULAR
The everyday language
through which a group,
community or regional
area communicates.
VERNACULAR
HUMOUR
The opportunity to present
and exploit wit in order to
communicate meaning.
HUMOUR
SEMIOTICS
The study of signs offering
an explanation of how people
extract meaning from words,
sounds and images.
SEMIOTICS
Symbol Icon Index
TYPOGRAPHY
By using typography
we give a written idea
a visual form.
TYPOGRAPHY
COLOUR
Colour can bring designs to
life, inform hierarchies, create
bonds between elements, add
pace or emotion.
COLOUR
100% yellow
100% yellow
20% black
100% yellow
50% black
100% yellow
80% black
80% yellow 70% yellow 50% yellow
RESTRAINT &
REDUCTION
Constructing immediate meaning
through economy of use.
RESTRAINT & REDUCTION
PLAY
PERSONALITY
SELF-EXPRESSION
COURAGE &
CONVICTION
THANKS
Simon Collison
@simoncollison colly.com

More Related Content

Similar to Design To Communicate

Web UI Design for the Human - Eye Colors, Space, Contrast
Web UI Design for the Human - Eye Colors, Space, ContrastWeb UI Design for the Human - Eye Colors, Space, Contrast
Web UI Design for the Human - Eye Colors, Space, Contrastuxpin
 
Service Design Conference - Side Effects Workshop
Service Design Conference - Side Effects WorkshopService Design Conference - Side Effects Workshop
Service Design Conference - Side Effects WorkshopFUNKY PROJECTS
 
David report5keytrends
David report5keytrendsDavid report5keytrends
David report5keytrendsTrendtail
 
Social Usability Workshop - Lift13
Social Usability Workshop - Lift13Social Usability Workshop - Lift13
Social Usability Workshop - Lift13Gianandrea Giacoma
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web InterfacesMark Wagner
 
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)Dave Hogue
 
New Vision for ux in South Africa
New Vision for ux in South AfricaNew Vision for ux in South Africa
New Vision for ux in South AfricaDavid du Plessis
 
Social Experience Design: one method, two tools, three business tips (2012)
Social Experience Design: one method, two tools, three business tips (2012)Social Experience Design: one method, two tools, three business tips (2012)
Social Experience Design: one method, two tools, three business tips (2012)Erin 'Folletto' Casali
 
Scenarios - Cortney Carlson
Scenarios - Cortney CarlsonScenarios - Cortney Carlson
Scenarios - Cortney Carlsoncortneydavid
 
Building the Instructional Designer's Relevance in 2012
Building the Instructional Designer's Relevance in 2012Building the Instructional Designer's Relevance in 2012
Building the Instructional Designer's Relevance in 2012Aaron Silvers
 
Social Experience Design
Social Experience DesignSocial Experience Design
Social Experience DesignUXconference
 
Enhancing innovation through virtual worlds
Enhancing innovation through virtual worldsEnhancing innovation through virtual worlds
Enhancing innovation through virtual worldsRobin Teigland
 
UX and Social Justice Workshop
UX and Social Justice  Workshop UX and Social Justice  Workshop
UX and Social Justice Workshop Danielle Ridenour
 

Similar to Design To Communicate (20)

Web UI Design for the Human - Eye Colors, Space, Contrast
Web UI Design for the Human - Eye Colors, Space, ContrastWeb UI Design for the Human - Eye Colors, Space, Contrast
Web UI Design for the Human - Eye Colors, Space, Contrast
 
Social Usability Workshop @ LIFT13
Social Usability Workshop @ LIFT13Social Usability Workshop @ LIFT13
Social Usability Workshop @ LIFT13
 
Service Design Conference - Side Effects Workshop
Service Design Conference - Side Effects WorkshopService Design Conference - Side Effects Workshop
Service Design Conference - Side Effects Workshop
 
The Pursuit of Magic
The Pursuit of MagicThe Pursuit of Magic
The Pursuit of Magic
 
5keydesigntrends
5keydesigntrends5keydesigntrends
5keydesigntrends
 
David report5keytrends
David report5keytrendsDavid report5keytrends
David report5keytrends
 
Social Usability Workshop - Lift13
Social Usability Workshop - Lift13Social Usability Workshop - Lift13
Social Usability Workshop - Lift13
 
Goodgreater
GoodgreaterGoodgreater
Goodgreater
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
 
New Vision for ux in South Africa
New Vision for ux in South AfricaNew Vision for ux in South Africa
New Vision for ux in South Africa
 
Social Experience Design: one method, two tools, three business tips (2012)
Social Experience Design: one method, two tools, three business tips (2012)Social Experience Design: one method, two tools, three business tips (2012)
Social Experience Design: one method, two tools, three business tips (2012)
 
Welcome to 3rd year
Welcome to 3rd yearWelcome to 3rd year
Welcome to 3rd year
 
Scenarios - Cortney Carlson
Scenarios - Cortney CarlsonScenarios - Cortney Carlson
Scenarios - Cortney Carlson
 
Building the Instructional Designer's Relevance in 2012
Building the Instructional Designer's Relevance in 2012Building the Instructional Designer's Relevance in 2012
Building the Instructional Designer's Relevance in 2012
 
Future of Web Design
Future of Web DesignFuture of Web Design
Future of Web Design
 
Social Experience Design
Social Experience DesignSocial Experience Design
Social Experience Design
 
Enhancing innovation through virtual worlds
Enhancing innovation through virtual worldsEnhancing innovation through virtual worlds
Enhancing innovation through virtual worlds
 
Designprinciples
DesignprinciplesDesignprinciples
Designprinciples
 
UX and Social Justice Workshop
UX and Social Justice  Workshop UX and Social Justice  Workshop
UX and Social Justice Workshop
 

More from Simon Collison

Elegance Without Compromise
Elegance Without CompromiseElegance Without Compromise
Elegance Without CompromiseSimon Collison
 
EE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet RevolutionEE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet RevolutionSimon Collison
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate PackageSimon Collison
 
Nailing Your Own Projects
Nailing Your Own ProjectsNailing Your Own Projects
Nailing Your Own ProjectsSimon Collison
 
High Noon Shoot Out - Design
High Noon Shoot Out - DesignHigh Noon Shoot Out - Design
High Noon Shoot Out - DesignSimon Collison
 
The Business Of Web Design
The Business Of Web DesignThe Business Of Web Design
The Business Of Web DesignSimon Collison
 

More from Simon Collison (10)

Notes from the Edge
Notes from the EdgeNotes from the Edge
Notes from the Edge
 
Elegance Without Compromise
Elegance Without CompromiseElegance Without Compromise
Elegance Without Compromise
 
Adaptive Systems
Adaptive SystemsAdaptive Systems
Adaptive Systems
 
EE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet RevolutionEE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet Revolution
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
Nailing Your Own Projects
Nailing Your Own ProjectsNailing Your Own Projects
Nailing Your Own Projects
 
The Process Toolbox
The Process ToolboxThe Process Toolbox
The Process Toolbox
 
High Noon Shoot Out - Design
High Noon Shoot Out - DesignHigh Noon Shoot Out - Design
High Noon Shoot Out - Design
 
The Business Of Web Design
The Business Of Web DesignThe Business Of Web Design
The Business Of Web Design
 
Knowing Your Audience
Knowing Your AudienceKnowing Your Audience
Knowing Your Audience
 

Recently uploaded

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Recently uploaded (19)

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Design To Communicate