communication design slides by professor john zimmerman hci institute and the school of design,...
TRANSCRIPT
![Page 1: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/1.jpg)
communication design Slides by Professor John ZimmermanHCI Institute and the School of Design, Carnegie Mellon University
and Professor Steven DowHCI Institute
05-863 / 08-763 / 46-863: Introduction to Human Computer Interaction for Technology Executives
Lecture 5
1
![Page 2: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/2.jpg)
Announcements 10 (of 77) people who are registered didn’t
submit HW #1 yet Definitely worthwhile if in the course, since
generous late penalty http://www.cs.cmu.edu/~bam/uicourse/08763fall13/grading.html
Be sure to drop officially if you aren’t actually take the course
Sketching important for Part A of HW #2
© 2014 - Brad Myers 2
![Page 3: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/3.jpg)
goals for today
explore communication
design familiar with basic
principles examine some
examples
Copyright © 2014 - CMU 3
![Page 4: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/4.jpg)
overview
what is design?
communication
planning key concepts typography color design systems
web design examples
Copyright © 2014 - CMU 4
![Page 5: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/5.jpg)
what is design?
5
![Page 6: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/6.jpg)
design
Simon: design as focus on achieving a preferred state
Rittel: design inquiry as a means to address wicked problems (problems that cannot be broken down) through reframing
Schön: design inquiry as reframing throughreflection in and on action
Copyright © 2014 - CMU 6
![Page 7: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/7.jpg)
what is communication design?
act of creating a communicative artifact: print piece, web site, way finding system, data visualization, illustration, etc.
requires an awareness of the social and cultural systems within the context of use
intention of information transfer … both of text and subtext
intention of specific user action or other outcome
Copyright © 2014 - CMU 7
![Page 8: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/8.jpg)
designers struggle to
combine words, pictures, and other graphic elements to form a unified whole — communicative gestalt
Copyright © 2014 - CMU 8
![Page 9: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/9.jpg)
designers struggle to
find harmony between the needs and expectations of users (specific audience) and the goals (short term and longer term) of their client
must work to understand the needs and values of both and of other stakeholders
Copyright © 2014 - CMU 9
![Page 10: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/10.jpg)
design process
The design process is a series of events that begins when the designer receives an assignment. It continues until a correct solution is generated and implemented. The design process is not linear, but iterative.
Copyright © 2014 - CMU 10
![Page 11: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/11.jpg)
communication design and the web
early days (1995-2000), simply shovel print content onto web
today, often the primary communication
approach benefits production speed dynamic information update search interactivity (information retrieval and
transactions) moving to mobile … ubiquitous
Copyright © 2014 - CMU 11
![Page 12: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/12.jpg)
three linked representations
user interface
information architecture
system architecture
Copyright © 2014 - CMUCopyright © 2014 - CMU 12
![Page 13: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/13.jpg)
communication design planning
13
![Page 14: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/14.jpg)
What is communication design?
14Copyright © 2014 - CMU
![Page 15: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/15.jpg)
What is communication design?
15Copyright © 2014 - CMU
![Page 16: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/16.jpg)
What is communication design?
16Copyright © 2014 - CMU
![Page 17: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/17.jpg)
17Copyright © 2014 - CMU
![Page 18: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/18.jpg)
18Copyright © 2014 - CMU
![Page 19: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/19.jpg)
19Copyright © 2014 - CMU
![Page 20: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/20.jpg)
project planning
Copyright © 2014 - CMU
resolve goals and objectives of client and stakeholders
select audience
sketch out experience goals and
voice budget and schedule
20
![Page 21: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/21.jpg)
technical planning
Copyright © 2014 - CMU
connection speed
(mobile)
computer/device
platform
display size and resolution
(mobile) browser support
(mobile/TV)
21
![Page 22: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/22.jpg)
other considerations
Copyright © 2014 - CMU
copyright for words and images
accessibility — screen readers, color blindness, text size for low-vision
22
![Page 23: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/23.jpg)
challenge of user experience looking for desire within
Copyright © 2014 - CMU 23
![Page 24: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/24.jpg)
manifestations of desire
Copyright © 2014 - CMU 24
![Page 25: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/25.jpg)
very incomplete view
Copyright © 2014 - CMU 25
![Page 26: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/26.jpg)
see in pastwant to know desire in the future
Copyright © 2014 - CMU 26
![Page 27: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/27.jpg)
usability
Copyright © 2014 - CMU
primary audience, secondary audience … same goals?… should this be two sites or one site?
issues skill level familiarity with this site or similar sites professional tool (flow and efficiency) walk up and use once? 27
![Page 28: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/28.jpg)
basic communication design
28
![Page 29: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/29.jpg)
topics
Copyright © 2014 - CMU
typograph
y color
design systems
29
![Page 30: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/30.jpg)
typography
civilization relies on alphabet and numerals … in English, we mix Roman letters and Arabic numbers
typography taught as the visual art of communication
designer investigates by working with elements and spatial relationships
goal is to provide a voice (intention and tone of write)early systems:ALL•CAPs•WITH•BULLETS•BETWEEN•WORDS•AND•NO•PUNCTUATION SOMETIMES•EVEN•RUNNING•LEFT•TO•RIGHT•AND•THEN•BACK•TO LEFT
Copyright © 2014 - CMU 30
![Page 31: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/31.jpg)
anatomy of a typeface
a typeface is a set of type families of a unifying and distinctive design (for instance, Times Roman)
a font is one instance of that family (Times Roman light italic)
standard measuring unit is the point, measured from top of ascender to bottom of descender
Copyright © 2014 - CMU 31
![Page 32: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/32.jpg)
more on type
two kinds of type, serif and sans serif
Copyright © 2014 - CMU 32
![Page 33: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/33.jpg)
more on type
Copyright © 2014 - CMU
the relationships between type and space around it makes paragraphs look different:
size of x-height type size leading line length
33
![Page 34: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/34.jpg)
type x-height
Copyright © 2014 - CMU
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Bernhard Modern)
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Garamond)
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Taz)
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Gill Sans)
34
![Page 35: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/35.jpg)
leading and line length
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu displays the next stop (Figure 2F). At the end of the trip, commuters press a stop recording button (Figure 2F) as they exit.
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time.When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E).Once they board the bus, commutersindicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace.While tracing, Tiramisu displays the next stop (Figure 2F). At the end of the trip, commuters press a stop recording button (Figure 2F) as they exit.
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu displays the next stop (Figure 2F). At the end of the trip, commuters press a stop recording button (Figure 2F) as they exit.
Copyright © 2014 - CMU 35
![Page 36: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/36.jpg)
alignments: flush left, flush right, centered, and justified
Copyright © 2014 - CMU
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu
Tiramisu displays real-time arrival information when a
commuter is actively sharing GPS (figure 2C).
When this is not available, the system shows historic
arrival information, assuming the system has previous
trace data for this bus at this time.
When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival
time. In addition, the interface shows bus fullness
information, something currently not available as an
estimate in the schedule provided by the transit
service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E).Once they board the bus, commutersindicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace.While tracing, Tiramisu
Tiramisu displays real-time arrival information when
a commuter is actively sharing GPS (figure 2C).
When this is not available, the system shows historic arrival
information, assuming the system has previous trace
data for this bus at this time. When neither real-time nor
historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows
bus fullness information, something currently not
available as an estimate in the schedule provided by the
transitservice.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu
36
![Page 37: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/37.jpg)
type “etiquette”
Copyright © 2014 - CMU
larger x-heights are often easier to read at small sizes, but look dense when leading is tight
tight leading makes long bodies of text hard to read, especially if the line length is long
long lines of type (>70 characters) are hard to read
very short lines break up text into non-syntactic groups of 2-3 words
justified text often creates
river just don’t center!!!!
37
![Page 38: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/38.jpg)
choosing type for your design
look at short and long pieces of textCopyright © 2014 - CMU
take an inventory of text elements you need (ex: head, subhead, footnotes).
choose a type family or two to work with — no font saladsmake sure faces look good together and support intended voice
find suitable sizes for each of the elements create guidelines and maintain them
test line length and leading if applicable 38
![Page 39: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/39.jpg)
working with type
Copyright © 2014 - CMU
use of ALL CAPS or all italic slows reading
readers pay attention to contrast among typographic elementschanges in weight (bold, etc.) may be noticed more than changes in typeface
reversed type (white letters on a black or colored background) is a strong visual element and should be used sparingly
white space helps to create visual tension and clusters of related elements
39
![Page 40: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/40.jpg)
color
40
![Page 41: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/41.jpg)
Color is communication
41Copyright © 2014 - CMU
![Page 42: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/42.jpg)
Color is communication
42Copyright © 2014 - CMU
![Page 43: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/43.jpg)
Color matters!
43Copyright © 2014 - CMU
![Page 44: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/44.jpg)
Color matters!
44Copyright © 2014 - CMU
![Page 45: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/45.jpg)
color basics
Copyright © 2014 - CMU
colors we seen in nature are reflections of the visible light around us.
calls attention to or relate
elements creates an emotional
response carries semantic
meaning
45
![Page 46: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/46.jpg)
color is difficult
Copyright © 2014 - CMU
cultural differences – Kodak yellow, Coke
red highly subjective
relative – affected by light, context, environment, screen settings
simultaneous contrast – color is affected by what color is next to it
46
![Page 47: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/47.jpg)
print and screens
print and screens use different color models.
The additive model used by screen displays mixes colors with light (white).
The subtractive model used by print media and pigment mixes colors with ink (black).
Copyright © 2014 - CMU 47
![Page 48: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/48.jpg)
color wheel
Copyright © 2014 - CMU 48
![Page 49: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/49.jpg)
properties
hue, chroma
intensity,
saturation value,
brightness
Copyright © 2014 - CMU 49
![Page 50: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/50.jpg)
hue
Copyright © 2014 - CMU
hue refers to the name of the colorone hue can be varied to produce many colors: pink, rose scarlet, maroon, and crimson are all colors, but the hue in each case is red
50
![Page 51: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/51.jpg)
intensity / saturation
Copyright © 2014 - CMU
terms refer to the richness of a
color color is at full intensity
when there is no other pigment present in the
color (no black or white mixed in) when color has only two or fewer RGB
values
51
![Page 52: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/52.jpg)
value / brightness
Copyright © 2014 - CMU
lightness or darkness of a hue or color
CMYK: value can be affected by adding white or black paint to the color
RGB: value is changed by adding more or less light
52
![Page 53: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/53.jpg)
choosing color for your design
Copyright © 2014 - CMU
strategies primary/secondary/tertiary warm /cool triads monochromatic neutrals complements/split complements analogous
work from examples … collage what you like
53
![Page 54: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/54.jpg)
digital (screen) color
Copyright © 2014 - CMU
print uses CMYK or Pantone representations of color, and occasionally RGB
CMYK can give rich browns you cannot get
in RGB digital color is usually represented
as RGB values RGB can give intense blues
that are hard in CMYK hard to match
between print and screen
print allows matte and glossblack gloss print on matte black paper (can’t do this on the screen)
54
![Page 55: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/55.jpg)
Color contrasts
55Copyright © 2014 - CMU
![Page 56: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/56.jpg)
design systems
56
![Page 57: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/57.jpg)
design systems
Copyright © 2014 - CMU
create ordered and systematic designs using grids and visual hierarchy
functional and aesthetic benefits include: approachable – use immediately recognizable – easy to assimilate and
remember immediate – have a greater impact on the
viewer usable – prominent, easy to engage with
57
![Page 58: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/58.jpg)
creating design systems
Copyright © 2014 - CMU
assess component parts of a design and the relationships between those parts
train your eye to look for these relationships:
symmetry and asymmetry scale, contrast and proportion harmony alignment proximity and correspondence
58
![Page 59: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/59.jpg)
symmetry and asymmetry
symmetry is similarity of form or arrangement on either side of a dividing line or plane
a symmetric organization symbolizes a restive state, while asymmetry suggests energy
content drives designers’ choices about symmetry.
Copyright © 2014 - CMU 59
![Page 60: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/60.jpg)
John ZIMMERMAN communication design … and the web 49
MOM
Copyright © 2014 - CMU 60
![Page 61: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/61.jpg)
John ZIMMERMAN communication design … and the web 50
MOM
Copyright © 2014 - CMU 61
![Page 62: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/62.jpg)
John ZIMMERMAN communication design … and the web 52
Copyright © 2014 - CMU 62
![Page 63: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/63.jpg)
scale, contrast, and proportion
the scale of elements determines where the viewer looks first, and what is most important
large, powerful visual elements must be used sparingly
saturated color and high contrast areas are very visually attractive
Copyright © 2014 - CMU 63
![Page 64: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/64.jpg)
harmony and unity
establishing regular relationships (i.e., a pattern) allows the viewer to become comfortable with the design and move to a higher level of abstraction – the whole rather than the parts.Copyright © 2014 - CMU 64
![Page 65: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/65.jpg)
alignment
when forms, their edges, or their central axes align with one another, relationships and connections between them are established
Copyright © 2014 - CMU 65
![Page 66: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/66.jpg)
Copyright © 2014 - CMU
The scale of elements determines where the viewer looks first, and what is most important. Large, powerful visual elements must be used judiciously, particularly in interface design.
Scale, contrast, and proportion
66
![Page 67: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/67.jpg)
Copyright © 2014 - CMU
Harmony describes the effect, seen at the level of the whole, of the pleasing interaction of the parts.
Harmony
67
![Page 68: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/68.jpg)
Copyright © 2014 - CMU 68
When forms, their edges, or their central axes align with one another, relationships and connections between them are established.
Elementsare Center
Aligned
Elementsare LeftAligned
Alignment
![Page 69: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/69.jpg)
Copyright © 2014 - CMU 69
When forms are near to each other, the eye makes visual groupings of the information. Similar size, shape, color or texture can also cause groupings.
1 3 21 37 21 3713
Proximity and correspondence
![Page 70: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/70.jpg)
Copyright © 2014 - CMU 70
Symmetry is similarity of form or arrangement on either side of a dividing line or plane. A symmetric organization symbolizes a restive state, while asymmetry suggests energy. Content drives designers’ choices about symmetry.
Symmetry and asymmetry
![Page 71: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/71.jpg)
A design system is a comprehensive organization, utilizing repeated sizes, proportions, and design elements to maintain consistent functional and aesthetic qualities over a series of pages, screens, or artifacts.
Elements such as type sizes, styles, placement of elements, and colors are used consistently to unify a series of designs.
Design systems
71Copyright © 2014 - CMU
![Page 72: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/72.jpg)
Copyright © 2014 - CMU 72
Design systems are based on grids.
Design systems
![Page 73: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/73.jpg)
Copyright © 2014 - CMU
Grid systems allow the layout to be codified across a series of pages, displays, etc.
Grid systems are based on columns and rows.
The more columns and rows, the more flexible the design.
73
Design systems
![Page 74: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/74.jpg)
Copyright © 2014 - CMU
When a grid system is put to good use, it will create a regular and rhythmic design.
Consistent use of a grid, paired with visual elements, will create a consistent “look and feel” in a manual, web site, or GUI.
74
Design systems
![Page 75: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/75.jpg)
Copyright © 2014 - CMU
Why is it good to have a design system?
• Structured: the foundation on which the design is built
• Predictable: simplifies the task of communicating information to the user
• Efficient: the basic design work is complete, and the design can be repeated easily
75
Design systems
![Page 76: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/76.jpg)
Copyright © 2014 - CMU
Assess your communication goals. Where will the information be displayed? Who is the audience? What is the purpose of the communication?
Group each item of information into a small number (5-7) of categories according to origin or intended use.
Determine the rank or importance of each group. Organize into a smaller number (3-5) of echelons based on this ranking.
76
Creating a design system
![Page 77: Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University and Professor Steven Dow HCI](https://reader038.vdocument.in/reader038/viewer/2022110208/56649dc45503460f94ab73ec/html5/thumbnails/77.jpg)
Copyright © 2014 - CMU
Use appropriate variables to establish hierarchy. Large, bold type might be used for the most important information. A systemic location on the grid might be reserved for pictures.
Base your designs on a grid.
Use the squint test to make sure echelons are hanging together as a unit, but with enough difference to be visually separated from each other. 77
Creating a design system