communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design...
Transcript of communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design...
![Page 1: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/1.jpg)
communication design … and the web
John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University
17 November 2010
![Page 2: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/2.jpg)
John ZIMMERMAN communication design … and the web 2
goals for today
explore communication design
familiar with basic principles
examine some examples
![Page 3: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/3.jpg)
John ZIMMERMAN communication design … and the web 3
overview
what is design?
communication planning
key concepts typography
color
design systems
web design examples
![Page 4: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/4.jpg)
what is design?
![Page 5: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/5.jpg)
John ZIMMERMAN communication design … and the web 5
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 through reflection in and on action
![Page 6: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/6.jpg)
John ZIMMERMAN communication design … and the web 6
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
![Page 7: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/7.jpg)
John ZIMMERMAN communication design … and the web 7
designers struggle to
combine words, pictures, and other graphic elements to form a unified whole —communicative gestalt
![Page 8: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/8.jpg)
John ZIMMERMAN communication design … and the web 8
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
![Page 9: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/9.jpg)
John ZIMMERMAN communication design … and the web 9
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.
problem definition
implementation information gathering
idea finding
solution finding
![Page 10: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/10.jpg)
John ZIMMERMAN communication design … and the web 10
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
![Page 11: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/11.jpg)
John ZIMMERMAN communication design … and the web 11
three linked representations
user interface
information architecture
system architecture
![Page 12: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/12.jpg)
communication design planning
![Page 13: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/13.jpg)
John ZIMMERMAN communication design … and the web 13
project planning
resolve goals and objectives of client and stakeholders
select audience
sketch out experience goals and voice
budget and schedule
![Page 14: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/14.jpg)
John ZIMMERMAN communication design … and the web 14
technical planning
connection speed (mobile)
computer/device platform
display size and resolution (mobile)
browser support (mobile/TV)
![Page 15: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/15.jpg)
John ZIMMERMAN communication design … and the web 15
other considerations
copyright for words and images
accessibility — screen readers, color blindness, text size for low-vision
![Page 16: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/16.jpg)
John ZIMMERMAN communication design … and the web 16
challenge of user experience looking for desire within
![Page 17: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/17.jpg)
John ZIMMERMAN communication design … and the web 17
manifestations of desire
![Page 18: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/18.jpg)
John ZIMMERMAN communication design … and the web 18
very incomplete view
![Page 19: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/19.jpg)
John ZIMMERMAN communication design … and the web 19
see in past want to know desire in the future
![Page 20: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/20.jpg)
John ZIMMERMAN communication design … and the web 20
usability
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?
![Page 21: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/21.jpg)
basic communication design
![Page 22: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/22.jpg)
John ZIMMERMAN communication design … and the web 22
topics
typography
color
design systems
![Page 23: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/23.jpg)
John ZIMMERMAN communication design … and the web 23
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
![Page 24: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/24.jpg)
John ZIMMERMAN communication design … and the web 24
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
![Page 25: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/25.jpg)
John ZIMMERMAN communication design … and the web 25
more on type
two kinds of type, serif and sans serif
![Page 26: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/26.jpg)
John ZIMMERMAN communication design … and the web 26
more on type
the relationships between type and space around it makes paragraphs look different:
size of x-height
type size
leading
line length
![Page 27: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/27.jpg)
John ZIMMERMAN communication design … and the web 27
type x-height 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 (!gure 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)
![Page 28: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/28.jpg)
John ZIMMERMAN communication design … and the web 28
leading and line length Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (!gure 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 (!gure 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. exit.
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (!gure 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.
![Page 29: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/29.jpg)
John ZIMMERMAN communication design … and the web 29
alignments: flush left, flush right, centered, and justified
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (!gure 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 (!gure 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 (!gure 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 (!gure 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
![Page 30: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/30.jpg)
John ZIMMERMAN communication design … and the web 30
type “etiquette”
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!!!!
![Page 31: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/31.jpg)
John ZIMMERMAN communication design … and the web 31
choosing type for your design
take an inventory of text elements you need (ex: head, subhead, footnotes).
choose a type family or two to work with — no font salads make 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 look at short and long pieces of text
![Page 32: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/32.jpg)
John ZIMMERMAN communication design … and the web 32
working with type
use of ALL CAPS or all italic slows reading
readers pay attention to contrast among typographic elements changes 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
![Page 33: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/33.jpg)
color
![Page 34: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/34.jpg)
John ZIMMERMAN communication design … and the web 34
color basics
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
![Page 35: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/35.jpg)
John ZIMMERMAN communication design … and the web 35
color is difficult
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
![Page 36: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/36.jpg)
John ZIMMERMAN communication design … and the web 36
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).
![Page 37: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/37.jpg)
John ZIMMERMAN communication design … and the web 37
color wheel
![Page 38: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/38.jpg)
John ZIMMERMAN communication design … and the web 38
properties
hue, chroma
intensity, saturation
value, brightness
![Page 39: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/39.jpg)
John ZIMMERMAN communication design … and the web 39
hue
hue refers to the name of the color
one 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
![Page 40: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/40.jpg)
John ZIMMERMAN communication design … and the web 40
intensity / saturation
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
![Page 41: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/41.jpg)
John ZIMMERMAN communication design … and the web 41
value / brightness
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
![Page 42: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/42.jpg)
John ZIMMERMAN communication design … and the web 42
choosing color for your design
strategies primary/secondary/tertiary
warm /cool
triads
monochromatic
neutrals
complements/split complements
analogous
work from examples … collage what you like
![Page 43: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/43.jpg)
John ZIMMERMAN communication design … and the web 43
digital (screen) color
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 gloss black gloss print on matte black paper (can’t do this on the screen)
![Page 44: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/44.jpg)
John ZIMMERMAN communication design … and the web 44
![Page 45: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/45.jpg)
design systems
![Page 46: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/46.jpg)
John ZIMMERMAN communication design … and the web 46
design systems
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
![Page 47: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/47.jpg)
John ZIMMERMAN communication design … and the web 47
creating design systems
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
![Page 48: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/48.jpg)
John ZIMMERMAN communication design … and the web 48
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.
![Page 49: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/49.jpg)
John ZIMMERMAN communication design … and the web 49
MOM
![Page 50: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/50.jpg)
John ZIMMERMAN communication design … and the web 50
MOM
![Page 51: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/51.jpg)
John ZIMMERMAN communication design … and the web 51
![Page 52: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/52.jpg)
John ZIMMERMAN communication design … and the web 52
![Page 53: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/53.jpg)
John ZIMMERMAN communication design … and the web 53
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
![Page 54: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/54.jpg)
John ZIMMERMAN communication design … and the web 54
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.
![Page 55: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/55.jpg)
John ZIMMERMAN communication design … and the web 55
alignment
when forms, their edges, or their central axes align with one another, relationships and connections between them are established
Elements are Center
Aligned
Elements are Left Aligned
![Page 56: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/56.jpg)
John ZIMMERMAN communication design … and the web 56
proximity and correspondence
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 37 13
![Page 57: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/57.jpg)
John ZIMMERMAN communication design … and the web 57
design systems organizes a design, using 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
![Page 58: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/58.jpg)
John ZIMMERMAN communication design … and the web 58
![Page 59: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/59.jpg)
John ZIMMERMAN communication design … and the web 59
grids
http://www.thegridsystem.org/
![Page 60: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/60.jpg)
John ZIMMERMAN communication design … and the web 60
grids
allow layout to be codified across a series of pages, displays, etc.
based on columns and rows (vertical and horizontal alignment)
the more columns and rows, the more flexible the design … the more complicate
![Page 61: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/61.jpg)
John ZIMMERMAN communication design … and the web 61
grids
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
![Page 62: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/62.jpg)
John ZIMMERMAN communication design … and the web 62
design systems
structured and intentional: 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
![Page 63: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/63.jpg)
examples mine and yours
![Page 64: communication design … and the webbam/uicourse/08763fall10/files/lecture09...communication design … and the web 24 anatomy of a typeface a typeface is a set of type families of](https://reader034.fdocuments.net/reader034/viewer/2022042312/5edbe495ad6a402d666652d0/html5/thumbnails/64.jpg)
John ZIMMERMAN communication design … and the web 64
mine
http://www.potterybarn.com
http://www.kayak.com
http://www.google.com/
http://ebay.com