1

JOUR260Computer Graphic Design & Publishing

Will W.K. Ma

2

Course Administration• How to login 209:

– Login: JO260xxx.wkm.stu– Password: XNXNXN

• Individual student homepage (URL):– http://stu.hksyu.edu/~jo260xxx/

• Course website– http://hknews.hksyu.edu/jour260

• User Login: 260jour • Password: (leave it blank))

• Instructor– http://stu.hksyu.edu/~wkma/

3

Course Outline

4

Course Aims• One semester introductory course

• To develop an understanding of the potential of computer applications to journalism students to produce professional publications.

• To explore issues that shape design:– design elements: typography, color and graphics;– how these elements combine – the essence of graphic design; – how the process of reproduction underpins every aspect of design.

• Applications:– Computer graphic design, desktop publishing and online publishing

• Adobe Web Premium Suite, including – Photoshop, Illustrator, InDesign, and Dreamweaver.

• Present in different forms in daily life, including – corporation logos, posters, and websites,

• To demonstrate understanding in the applications.

5

Course Objectives

• By the end of this course, you should be able to:

– Understand the broad issues in graphic design, editing and web publishing;

– Equip with basic computer skills to effectively prepare computer design work in both offline and online publications;

– Examine contemporary design work from different perspectives.

6

Teaching Approach

• 1st period:– lectures; – group discussions;

• 2nd period:– demonstrations, hands-on coaching and practice;

• Continuous Assessment:– weekly practical assignment;– individual project; – group project and presentation.

7

Assessment

• Continuous Assessment– Individual project 10%– Group project 20%– Written assignment 10%– Practical assignment 10%– Class participation 10%

• Examination– Mid-term exam 20%– Final exam 20%

• 100%

8

Class Participation

• Students are to form groups that work together throughout the semester and are expected to contribute to group discussion and class activities.

• Students will be assigned readings to discussion tasks.

• Students are strongly advised to complete assigned readings before each class.

• Attendance is an integral part of the course.

9

Hands-on Coaching & Practice

• There will be demonstrations in each class.

• Students will be required to complete a variety of tasks and to submit before the next practical session.

10

Individual Project

• Personal profile poster:– Personal photograph, describing

himself/herself.

• Short brief (less than 100 words) to describe how the design fits the theme.

• Submit: A4 size hardcopy

11

Assessment

• Excellent: – Clear focus; – well-defined grid; – clear hierarchy - good repetition of graphic

elements; enough contrast to create hierarchy

– relevant typeface; – sharp graphics; – good mix of colour;– Strict alignment, appropriate proximity,

12

Mid-term Examination

• 50 MC Questions

13

Group Projects• Grouping: – 5-6 students

• Objectives: – select a media organization or a magazine, or a

newspaper to design an advertising package, including a logo, a poster, and a webpage for the organization or an event

• Assessment: – 50%: Rich content, layout & navigation design

achieving objectives– 50%: Computer Skills: competence and

relevance• One-page written proposal:

– Objectives, rationale, design specifications and the computer skills involved.

• Presentation: 20-min PowerPoint presentation

14

Individual Written Assignment: Website Site Critique

• One offline (a magazine cover) >500 words;• One online (a page of a media website)

publication work - >500 words– Use the design analysis framework and concepts

learnt during the course to evaluate their chosen design works.

• One-page proposal:– name and web address of the chosen publication

work, – a copy of the offline publication work and – a screen capture of the online publication work

15

Assessment

• Excellent:– Explain in good details of all key terms in d

esign;– An analysis of all key terms in design in goo

d details, including screen capture, figures, in both table summary and in text description;

– Message/focus, layout, grids, hierarchy, 3 core design elements (typography, colour, graphics), 4 design principles (alignment, proximity, repetition, contrast), conclusion

16

Final Examination

• 50 MC Questions (50%)

• Practical (50%):– Photoshop (25%):

• 10 tasks

– Dreamweaver (25%): • Basic web site design• Insert multimedia elements• Hyperlinks

17

Principal Reading

– Dabner, D. (2004). Graphic Design School: The Principles & Practices of Graphic Design, Thames & Hudson: London, U.K.

– Bhaskaran, L. (2004). Size Matters, RotoVision: Mies, Switzerland.

18

Session Outline

• Theory: – Introduction to Computer Graphic Desi

gn: What it is, its definition, and its functions

• Practical: – An Introduction to Photoshop Selection

and Drawing Tools

19

What is Graphic Design?

• It is all around us, imposing meaning on the world, by;– explaining, – decorating, – identifying:

• – Sorts and differentiates– Informs– Provides sentiments

20

Function versus aesthetics

• The model of the artist

• The model of the artisan

21

Definitions

Graphic design is the business of making or choosing marks and arranging them on a surface to convey an idea. – Richard Hollis

22

Definitions

• ...graphic design, in the end, deals with the spectator, and because it is the goal of the designer to be persuasive or at least informative, it follows that the designer’s problems are twofold: to anticipate the spectator’s reactions and to meet his own aesthetic needs. – Paul Rand

23

What is a graphic designer? • First, "making sense"

• Second, "creating difference"

24

Three Core Graphic Design Elements

• Typography– the mechanical arrangement of text

• Color– create contrast and sentiment

• Graphics– photographs and illustrations

25

Browsing contemporary works• Corporation Logo

– -McDonald’s (http://www.mcdonalds.com/);– -Google (http://www.google.com)

• Posters– -Café Deco Website (

http://www.cafedecogroup.com/general_news.asp )

– -Brokerback Mountain Postcard

• Website Banner– -Sun Hung Kai Properties (http://

www.shkp.com.hk/en/scripts/main/main.php)

26

Browsing contemporary works• Corporation Logo

– -McDonald’s (http://www.mcdonalds.com/);

– -Google (http://www.google.com)

27

Café Deco Website

28

Café Deco Website

29

Café Deco Website

30

Brokerback Mountain Postcard

31

Assessment Criteria –Analysis Framework

• Overall– Message; Focus

• Layout– Grid; Hierarchy

• Core Design Elements– Typography; Color (Color Psychology,

Color Strategies); Graphics

• 4 Design Principles– Alignment; Proximity; Contrast; Repetition

32

Class Exercise

• A survey of listing companies logo.

• HKNews (http://hknews.hksyu.edu) - 資料館• Task

– Check listing companies logo from their websites;– Create (copy, crop, save) logo jpg / gif files, save w

ith StudID-Description (no chinese, no space, no cap. letter);

– Upload onto ftp site: ftp://hknews.hksyu.edu– Add link to the corresponding company page: http:/

/hknews.hksyu.edu/media/filename

33

Trouble-shooting – uploading files to HKNews• Link:

– ftp – to upload files– http – to browse web page– “Media” folder

• Flash animation /movie: SWF– Not to be able to right click to save– PrintScreen >> Photoshop >> New file >> P

aste (Ctrl + V)

• Filename– No space, no chinese, no capital

34

Photoshop• Tasks:

– To create a new image / save changes

– Correct color and tone• Image / adjustment

– Select areas in an image– Create an image using layers

• Move Tool• Marquee Tool• Lasso Tool• Magic Wand• Crop Tool• Slice Tool

35

In Class Exercise

• Create a web banner 800x100 and upload onto your page at HKNews

• Save file in jpg, with StudID_description

• Upload onto ftp://hknews.hksyu.edu

• Create link as http://hknews.hksyu.edu/media/filename

36

Session Outline

37

Objectives

• Theory: Layout, grids and hierarchies

• Practical: understanding layers and channels

38

Layout

• Seeing

• Perception

• Symmetrical: calmer, more peaceful

• Asymmetrical: more dynamic

39

Layout

• Layout: – the way in which we organize the disparate

material that makes up the content of a design

• Aim:– Present information in a logical, coherent

way– Make important elements stand out

• Use grid, hierarchy

40

Layout

• 3 basic stages in producing layouts:– The brief– Practical factors: format, colour, hierarchies– The grid

41

Grid

• The invisible framework that organizes graphic material on a surface.

• Purposes:– Help choose how to arrange the elements

on each page, by limiting the choices– Bring a unity to a design, help look

coherent even while containing pages that are different from one another

42

Grid

• Horizontal

• Ratio in size

43

Grid

• Left & Right

• Dynamic

• Symmetry?

• Asymmetry?

44

Grid

• No clear grid

45

Hierarchies– Level of importance– An order, the one who came first– Maybe measured by size, length

• A hierarchy list:– Headings and titles;– The author’s name– Introduction / prefaces– Content pages– Introductory ‘stand-first’ that explains the article– Sub-heads– Captions– Chart titles

46

Hierarchies

• A level of order• Different levels of importance• Consistent, visually coherent, clear way• By means of choices in different:

– Typefaces,– Sizes,– Colors,– Textures,– Weights

47

Hierarchies

• Objective: consider how the information will be consumed

• Sole manipulation

• Typography: the structuring and arranging of the written word

• Modernists: “Less is more”

48

Hierarchies

Level 1 Level 2

Level 3

Level 4

Level 5

Level 6

Level 7

49

Grid Level 1

1 1a-110pt, 黑體1b-37pt, Arial

1c-28pt,

2 2a-16pt

2b-10pt

3 3a-11pt

3b-6pt, Bold

3c-6pt

ROCKY洛奇美國開畫

振奮

打不死 口碑凌厲

蘋果日報

50

Hierarchies

• Level 1• Level 2• Level 3• Level 4• Level 5• Size;• Spatial

arrangement;• Color / Graphic

51

Hierarchies

• Level 1– Bold – spatial arrangement

• Level 2– Size– Typeface

• Level 3– Size, – bottom

52

Class Exercise• A survey of listing companies logo.• HKNews - 資料館• Task

– Check listing companies logo from their websites;

– Create (copy, crop, save) logo jpg / gif files, save with StudID-Description (no chinese, no space, no cap. letter);

– Upload onto ftp site: ftp://hknews.hksyu.edu– Add link to the corresponding company pag

e: http://hknews.hksyu.edu/media/filename

53

PhotoshopPhotoshop

• Image

• Colour Mode– Gray/ RGB/

CMYK

• Adjustment– Hue, Saturati

on, Brightness

– Shadow / Brightness

• Image size

• Canvas size

54

Photoshop• Tasks:

– Layer Style• Drop Shadow / • Inner Shadow• Outer Glow / • Inner Glow• Bevel and Emboss• Satin• Color / gradient / pattern

overlay• Stroke

– Layer Mask– Merge Layer / Merge

Visible / Flatten Image

55

Photoshop

Tasks:• Colour Mode & Cha

nnels: – Gray: Gray– RGB: RGB, Red, Gr

een, Blue– CMYK: CMYK, Cya

n, Magenta, Yellow, BlacK

– Alpha Channel– Copy Channel, Add

filtering effect to channel

56

Graphic Types

• Rasterize: the process of converting a vector image into a bitmap image.

• Vector image: – Individual objects, defined by mathematical

statements– Vector graphics are resolution independent

-(scalable). – Common software applications:

• AI (Adobe Illustrator), CDR (CorelDRAW), SWF (Shockwave Flash), and DXF (AutoCAD and other CAD software).

– much smaller file sizes

57

Graphics• Bitmap (or raster) image:

– pixels in a grid. – Bitmap images have a fixed resolution -

cannot be resized without losing image quality.

– Common bitmap-based formats:• JPEG, GIF, TIFF, PNG, PICT, and BMP.

– much large file sizes

58

Alpha channel• for transparency information. • 32-bit graphics systems, four channels –

– 3 8-bit channels for R, G, B + 1 8-bit alpha channel.

• Alpha channel, a mask• define the alpha channel per object • Different parts of the object would have

different levels of transparency• This allows you to create rectangular objects

that appear as if they are irregular in shape• This is especially important for animation,

where the background changes from one frame to the next.

• Rendering overlapping objects - alpha blending

59

Color Model• Photoshop: [Image]>>[Mode]>>[Gray] /

[RGB] / [CMYK] / [Lab color] / [Index color]

• CMYK (Color model in offset printing): – Cyan-Magenta-Yellow-Black– four-color printing.

• RGB (Color model for display devices):– Red-Green-Blue. – looks the same as what appears on the

monitor.

60

Practical• Website Administration & HTML Basics (Dreamweaver)

• Add– Site / Site administration– Add / New site

• Local setting– Create and assignment folder– Make sure everything inside, not to link out of this root folder

• Remote setting– *FTP (file transfer protocol)

• **Server: stu.hksyu.edu• **Folder: public• **Account: jo260xxx• **Password: xnxnxn (all small letter)

61

In Class Exercise (cont’d)

• Create a web banner 800x100 and upload onto your page at HKNews

• Save file in jpg, with StudID_description

• Upload onto ftp://hknews.hksyu.edu• Create link as

http://hknews.hksyu.edu/media/filename

62

In Class Exercise

• Create a signature logo and upload onto your page at HKNews

• Save file in jpg, with StudID_description.jpg

• Upload onto ftp://hknews.hksyu.edu• Create link as

http://hknews.hksyu.edu/media/filename

63

Home assignment - selection

• Choose a photo of yourself,

• Use lasso tool to outline yourself

• Select “Inverse”

• Save the gif file and upload to ILN >> Task >> Photo Outline

64

Week 3

• Theory: Typography

• Practical: Colour & Adjustments

65

Typography

• Typeface – Definition: The style of type

– e.g., comic sans, calligrapher• Font

– Definition: The size of a typeface – e.g., 12 point

66

Typography• Sans serif: – (1) No short start or finish stroke; – (2) Make bolder headlines

– e.g. Arial;• Serif:

– (1) Short start or finish stroke; – (2) Easier to read for larger chunks of text

– e.g., Times New Roman; Courier New• Proportional:

– Use characters that take up only as much space as they require,

– e.g., Arial; • Monospaced:

– (1) Use the same fixed width for all characters; – (2) On only special occasions for designers,

– e.g., Courier New

67

Letterform• Key terms• There are over 25 terms applicable to a letterform.• It’s not necessary to know all of them but certain ones

are essential in order to make visual judgements about type.

• The principal terms that determine how letterforms differ are:– x-height,– serif,– counter,– descender,– ascender,– stress– (Other interesting terms include: loop, spur, tail, link, etc.)

68

The Anatomy of type

H f x g b p

Crossb

ar

Ste

m Term

inal B

ody size

Link C

ounter Ear A

scender B

ow

l

Cap-

height

X-

height

Descend

er

69

Impact of x-height

x x dp dpX-height is the height of a lower-case x and determines the visual size of type.

70

Typography

• Letter spacing– Kerning:

• allowing for individual reductions or increments to the letter spacing

– Tracking:• To increase or reduce space between

words

• widows or orphans– single words from the end of a

paragraph left at the end of beginning of a column of text

71

Typography

• Word spacing– With justified setting– With ranged-left setting

• Leading– the amount of spacing between lines of ty

pe– ascenders (e.g., the vertical stroke of a ‘k’

or ‘d’) and – descenders (e.g., the vertical stroke of a ‘

p’ or ‘q’)

72

Type as image

• Typefaces can convey personality and each face has its own characteristics.

73

Typeface• [Garamond] Italic is elegant;

• [Franklin Gothic] is powerful;• Meta is fashionable;• Helvetica is bland but safe;• Black Letter Gothic type is capable of conjuring an

atmosphere of fear and mystery;• Old English Text

• Serif fonts: – are generally used to achieve an elegant or classical look;– Banking industry: choose classic serif font such as

[Garamond] to convey dependability; – Calligrapher;

• Sans serif fonts: – can impart an appearance of confidence.– A more contemporary look: a sans serif such as Bank

Gothic;

74

Practical

• Colour Use in Photoshop

• Hue / Saturation / Brightness

• RGB

75

In Class Exercise (cont’d)

• Create a web banner 800x100 and upload onto your page at HKNews

• Save file in jpg, with StudID_description

• Upload onto ftp://hknews.hksyu.edu

• Create link as http://hknews.hksyu.edu/media/filename

76

In Class Exercise

• Create a signature logo and upload onto your page at HKNews

• Save file in jpg, with StudID_description.jpg

• Upload onto ftp://hknews.hksyu.edu

• Create link as http://hknews.hksyu.edu/media/filename

77

Color• Never be an arbitrary decision

• Purposes:– Enhance designs– Enhance the layout– Create a visual impact

• Consider:– Pay close attention to colour relationships– Potential for creating different emotional an

d psychological responses– Never add more colours than needed

78

Dimensions to describe a colour

• Hue, Tone, Saturation

• Hue– A pure colour– Name of the colour– Distinguish one from another– E.g., red, blue, green

79

Dimensions to describe a colour

• Hue, Tone, Saturation• Tone (or value)

– Variations of pure colour– From light to dark, relative lightness or

darkness of a colour– E.g.,

• 10 percent – a very page version; • 90 percent- almost the full value; • 100 percent – ‘solid’

80

Dimensions to describe a colour

• Hue, Tone, Saturation

• Saturation (or chroma, intensity)– Variations of brightness– Full intensity to low intensity– From brightness to greyness– High intensity – bright colour– Low intensity – a dull colour

81

Colour

• Temperature– Colours appear Hotter as yellow dimini

shes and red increases– E.g., blue – very cold; green – slightly

warmer

82

Colour• Colour wheel• Primary colour

– Red, yellow, blue

• Second colour– Mix any two primary colours– E.g., orange, green, violet

• Tertiary colour– Mix primary with secondary colour nearest t

o it– E.g., red-orange; yellow-orange; yellow-gre

en; yellow-green; blue-violet; red-violet

83

Colour

• Subtractive primaries– Primaries used in printing– When combined, make black– E.g., Cyan (C), Magenta (M), Yellow (Y), Bl

acK (K)

• Additive primaries– On computers, TV – projection of light– When combined, in white light– E.g., red, green, blue

84

Colour

• Advancing– Come forward the viewer– red, orange,

• Receding– Recede when next to advance colours– blue, green

• Weight– Lighter – blue-greens– Stronger, heavier - red

85

Colour psychology

• Wilhelm Ostwald, Nobel Prize-winning chemist

• People responded to colours emotionally, from an objective biological viewpoint

• Colour works in language, signs, different cultures and religions and create emotional response

86

Colours in culture• Mourning, death

– Black in the west,– China and India?

• Mailbox– US - blue, UK / Sweden – red– HK?

• Red– Stop – automobiles

• Green– 19th C – arsenic, poison– Now?

87

Colour in emotions• Warm (?)

– Exciting feelings of stimulation, cheeriness, good health, aggression

– Increase body hear and raise blood pressure

• Cool / Cold (?)– Calmness, peace, safety, depression, relaxing

effect

• Dark– Night, fear, mystery

• Intensity– High intensity – dynamic, a feeling of movement

88

Colours in language

• He turned purple with rage

• I’m feeling blue.

• She turned green with envy.

89

Red

• Associated with fire

• Intense, vibrant, advancing, aggressive character

• Positive– Love, red roses, sexiness, festivity (Santa

Claus), luck

• Negative– Devil, debt, revolution (red flag),

bureaucracy (red tape), danger

90

Yellow

• Associated with the sun, light

• Negative– Illness, jaundice, cowardice

• Positive– Hue of happiness, sun, gold, hope

91

Green

• Associated with spring, youth, environment, help to feel calm (used in hospital), relaxing

• Negative– Envy, nausea (A feeling of sickness in the

stomach characterized by an urge to vomit; strong aversion, disgust), poison, decay

92

Blue

• Associated with the sky, water, brightness, spirituality

• Clear, cool, transparent qualities

• Detachment, peace, distance

• Negative– Depression, cold, introversion

93

Colour systems

• Comprehension, understanding, contrasting differences– Signage– Maps– Financial matters– Catalogues & Books– Web design

94

Technical considerations

• Complementary– Yellow & black– Blue and yellow– Bland page and a color logo

• Clash– Too many different colors,– Yellow and white– Black and red (students’ typical problem)

• Color-blind– Problems recognizing red and green

95

Technical considerations

• Web-safe palette– 216 colors (out of 256 colors)– Javascript, html incompatible with different browser

s– Inconsistencies between colors on Mac or Window

s based systems– 216 overlap and are safe to use

• If no such color in palette– Dithered: two or more colors are mixed in a pattern;– Converting a color to the nearest shade within that

palette

96

Colour Mode - RGB• Red, green and blue values mix to form every

color in monitor• Depends on no. of bits• Each spot, one pixel each for red, green and

blue• Range from 0 (no color) to 255 (max. amount

of that color)• Black (no color – 0 for each); White (full color –

255 for each)• Hexadecimals: 0-9 & A-F (i.e., 10-15) to

represent RGB values• Black- 000000; white- FFFFFF; unmixed red-

FF0000; yellow mixing red and green-FFFF00

97

Technical considerations

• No. of colors, color depth– Increasing no. of information in form of bits,

increases the range of color exponentially– 21 – 1-bit, 2 colors, on/off, black/white– 28 – 8-bit, 256 colors (0-255)– 216 – 16-bit, High color, 64K color– 224 – 24-bit, full color, 16.7 million hues– 32-bit, 36-bit, 48-bit

98

Technical consideration

• Monitor display resolution

• VGA – 640x480

• SVGA – 800x600

• XGA – 1024x768

• 1280x1024

99

Color strategies• Use color to direct focus

– The selection of color mix to focus attention on the product, not the surroundings

– Make the product of service the focus– E.g., a palette of neutral colors, white walls,

muted colors, clean, simple design– Check palette for:

• New York Times (http://www.nyt.com )• Barnes and Noble (

http://www.barnesandnoble.com )• Apple Inc. (http://www.apple.com )

100

Color strategies• Use color to organize

– To present the same information with the same color code

– To give each level a sense of place– To provide visitors with the subtle cues– How?

• Use color to separate the space• To code each section with same color• Color section titles• N.B. How to simply the color use? (Typical

students’ problem)

101

Color strategies• Use color to simplify

– Reducing the number of colors to reduce visual noise in order to direct visitors the focus to the message

– How?• Change full color photographs to two-tone

photographs, or duotones, eliminate some of the noise

– E.g., color palette: white, black, and red – the best colors, striking, readable, in perfect contrast (Designer Roger Black)

– E.g., red, black, pale green, yellow – http://www.newsweek.com

102

Color strategies• Create a one-of-a-kind color palette

– Discard Ready to use color palette– Design your own unique palette, based on the

context and relevance to the message– Reference: Pantone Digital Color Guide (

http://www.pantone.com/allaboutcolor/allaboutcolor.asp?ID=34 ) – colors in print, ink color, RGB value, HTML code

– “PrintScreen” – capture screen color and check in Photoshop (eyedropper)

103

Graphic types• GIF

– Lossless compression– Redundant colors are calculated by a mathematical

formula– Restricted to 256 colors– Complex images such as photographs

• GIF format is larger than JPEG format

– Large area of simple colors such as logo / buttons• GIF format is smaller, sharper, clearer

– Save for GIF animation– Save for transparent background– Wrong: because of lossless, therefore better for

photographs (typical students’ mistake)

104

Graphic types• PNG

– Short for Portable Network Graphics (pronounced ping)

– a new bit-mapped graphics format similar to GIF. – PNG was approved as a standard by the World Wide

Web consortium (http://www.w3c.org) to replace GIF because GIF uses a patented data compression algorithm called LZW.

– PNG is completely patent- and license-free. – Browser support PNG– Preserving Photoshop-like layers– JPEG-style compression rates and colors (24-bit color)

105

Graphic types

• Other formats– Flash (SWF) – graphics, animation, movie,

vector format, required flash player– Scalable Vector Graphics (SVG), open form

at– Proprietary formats: CorelDraw (cdr); Photo

shop (psd)

106

Graphics• Web design for graphics:

– Speed– Image size– Download time

• Avoid too many images, too large file size• Compression

– Reduce File size– Reduce quality

• Slicing (ImageReady (Photoshop); Fireworks)– Slice complex graphics, compress different sections

at different rates

107

Graphic types

• JPEG / JPG– Lossy compression– Discard information, flattening areas of simil

ar color into one– As aggressively as possible– Can display 24-bit full color– Useful for full color images, photographs

108

Graphic types• JPEG2000

– a standard for image compression method and file format.

– successor of traditional JPEG format – written by the ISO group Joint Photographic Experts G

roup.  – uses compression techniques based on wavelet techn

ology. – architecture lends itself to a wide range of uses from p

ortable digital cameras to advanced pre-press, medical imaging and other key sectors.

– Compared to JPEG, JPEG2000 offers higher compression without compromising quality, progressive image reconstruction, lossy and lossless compression, and the JP2 file format (.jp2) is XML based metadata.

109

Graphic Types

• Rasterize: the process of converting a vector image into a bitmap image.

• Vector image: – Vector graphics are made up of many individual object

s. – Each of these objects can be defined by mathematical

statements and has individual properties assigned to it such as color, fill, and outline.

– Vector graphics are resolution independent because they can be output to the highest quality at any scale (scalable).

– Common software applications: • AI (Adobe Illustrator), CDR (CorelDRAW), SWF (Shockw

ave Flash), and DXF (AutoCAD and other CAD software).

– Vector graphics tend to have much smaller file sizes than raster-based bitmaps.

110

Graphics• Bitmap (or raster) image:

– Bitmap-based images are comprised of pixels in a grid.

– Each pixel or "bit" in the image contains information about the color to be displayed.

– Bitmap images have a fixed resolution and cannot be resized without losing image quality.

– Common bitmap-based formats:• JPEG, GIF, TIFF, PNG, PICT, and BMP.

– Most bitmap images can be converted to other bitmap-based formats very easily.

– Bitmap images tend to have much large file sizes than vector graphics and they are often compressed to reduce their size.

111

Alpha channel

• In graphics, a portion of each pixel's data that is reserved for transparency information.

• 32-bit graphics systems contain four channels -- three 8-bit channels for red, green, and blue (RGB) and one 8-bit alpha channel.

• The alpha channel is really a mask -- it specifies how the pixel's colors should be merged with another pixel when the two are overlaid, one on top of the other.

• Typically, you wouldn't define the alpha channel on a pixel-by-pixel basis, but rather per object.

112

Alpha channel

• Different parts of the object would have different levels of transparency depending on how much you wanted the background to show through.

• This allows you to create rectangular objects that appear as if they are irregular in shape -- you define the rectangular edges as transparent so that the background shows through.

• This is especially important for animation, where the background changes from one frame to the next.

• Rendering overlapping objects that include an alpha value is called alpha blending.

113

Color Model• Photoshop: [Image]>>[Mode]>>[Gray] / [RGB] /

[CMYK] / [Lab color] / [Index color]• CMYK (Color model in offset printing):

– Short for Cyan-Magenta-Yellow-Black, and pronounced as separate letters.

– CMYK is a color model in which all colors are described as a mixture of these four process colors.

– CMYK is the standard color model used in offset printing for full-color documents.

– Because such printing uses inks of these four basic colors, it is often called four-color printing.

• RGB (Color model for display devices):– stands for Red-Green-Blue. – One of the most difficult aspects of desktop

publishing in color is color matching -- properly converting the RGB colors into CMYK colors so that what gets printed looks the same as what appears on the monitor.

114

Week 6

• Basic Design Principles

115

Four Basic Design Principles

• Alignment

• Proximity

• Repetition

• Contrast

116

Alignment• “Alignment means that items on the page

are lined up with each other.”– Lack of alignment is the single most prevalent

problem on web pages– Also a big problem on printed pages– Align items on the

• Left side• Right side• Centered: balanced, symmetrical, calm, formal

– Align text away from the edge– If indent text (“block quote”); indent also the

right edge

117

Proximity • “The relationships that items develop when they

are close together, in close proximity.”– Close – have a relationship– Far away – don’t have a relationship– Consider:

• Headline / subhead and text• Caption and picture

– Create appropriate spatial arrangement;– Prevent inappropriate relationships– Prevent widow:

• The last line of a paragraph that appears alone at the top of the next page

– Prevent orphan:• The first line of a paragraph that appears alone at the bottom

of a page

118

Repetition• Repeat certain elements• Purpose:

– Tie all the disparate parts together– Unify the entire design piece

• Aim:– Look like the same web site, same company, same

concept

• Advantage:– A repetitive (consistent) navigation system– Help visitor– Don’t have to learn

• How?– Colors, style, illustrations, format, layout, typography

119

Repetition

120

Repetition

• When?

• How?

121

Repetition

• Meaning

122

Repetition

• Web

• Why?

• Too much information

• Too small the screen

• Cannot flip the page physically

123

Contrast• Create a hierarchy of information• Create a focal point

– Create a dominant force, the other elements follow a hierarchy from that point down

• Enable readers to pick what they need• How?

– Different types, different styles: Bolder, different size: bigger, different texture, different colors, different graphic signposts, different spatial arrangement,

– To be effective: must be strong, make them very different

• Only if necessary– Not for continuous text, e.g., a novel– Be bland, uninterrupted, start at the beginning and

continue to the end– Note: a link is also a form of contrast (color,

underline, interruptive status)

124

Contrast

• Focal point?

125

Contrast

• Strong?

126

Contrast

127

Week 7

• Design Project Planning:– Structure

• Bhaskaran (2004). “Size Matters”

– Logo Design Process

128

Structure

• Case: – LettError Book; – Open Road Tour; – Fabrica Files (Benetton); – Rock Style; – Fraccija; – Labour Party Manifesto; – Annual Reports; – Hours Diary / Minutes Diary

129

Structure

• Planning + Production

• Planning:– Time schedules

• Pre-production– Methods of cataloging information

• Production– Grids– Style sheets

130

Structure

• Large-project content– A table of contents– Listing the divisions– Hierarchies of information

131

Structure

• Time schedule of work:– Start with an estimation of time needed

for various stages– Constantly refer to and update it

throughout the project– Keep track of progress (monitoring)– Re-allocation of resources

132

Structure

• Style sheets– An excellent and much underused

means of ensuring continuity throughout a large project

– Text is styled and preset, or globally altered later on, in terms of

• Headings, subheadings, introductory and body text

– Save time, minimize error

133

Structure

• Grid– One of the most effective means of

organizing space and bringing a visual consistency to the overall design

– E.g., newspaper• Uses a tight grid• To speed up production process• To reassure its audience

134

Grid

• Explain– “what grid is; what functions grids

provide; when to use strict/tight grid; why designer see grids as a constraint”

135

Structure

• “Implementing a clear structure as early as possible provides the space, both physically and mentally, to not only manage the information but also come up with a creative design solution as a result.”

136

Logo Design Process – 1. Gather Information• What is the average age of your target market?• What level of education do they have?• What gender is the majority of your target market?• Is there a certain ethnic group you’re targeting?• Describe the benefits of your company/product.• What is the most important benefit to your customer?• What is your unique selling point?• What are the strengths & weaknesses of your

competitors?• What images/symbols do you want to be associated with?• What images/symbols do you NOT want to be associated

with?• Do you want a logo (graphic) or an all text logo?• When someone looks at your logo, what is the first thing

you want them to think?• How will the logo be used? (in print, on the web?)

137

Logo Design Process –2. Pick a font• Have a print out of the fonts• Looking through all the fonts• Write down names of the ones that is

appropriate• Start setting the company name: in all

caps; in lowercase and caps; as many variations as possible

• Assign selected fonts to the variations• Check and decide with the hardcopy

print outs

138

Logo Design Process

• Sketch thumbnails

• Pick top three thumbnails

• Get on the computer

• Refine, refine, refine– Graphic; font; style; size (2”-4”)

• Get colorful

139

140

Name Card Analysis

141

Practical

• Computer Editing

• InDesign

• CUP page 2– Grids– Hierarchies: Number of levels (Style sh

eets)

142

Week 12

• Navigation

• Symbolism

• Information design

143

Navigation

• “Plotting and following a logical course to get from one point to another”– A successful navigation system can mean the

difference between success and failure for a designer.

– A huge difference to the user’s experience– Creating the optimal user experience is key

• Must design to cater to many different types of people.– E.g., Google vs Yahoo!– E.g., new user vs experienced user – Linear vs non-linear– Strict hierarchical structure vs no structure

144

Navigation

• Successful navigation:– Overview– System of signs

• Overview– A Site map on the map;– A Venue map at museum entrance;– A table of contents in a book or magazine

• Purpose:– Enabling the designer to develop a logical structure

to the organization of large content.

145

Navigation

• How?– Consistent hierarchies

• Creating a style sheet• Creating a comprehensive graphics spec sheet

– Have a complete understanding of the user’s requirement:

• Who are the main users?• In what order will they require the information?• On what level will they require the information?

– Effective hierarchy of information

146

Navigation

• Procedures:– In the planning process, Mapping all routes

and possible destinations– Highlight key information and decision-

making points– Ascertain the different levels of information

required– Note differences between physical space

(exhibition, museum) and on-screen

147

Navigation

• Viewing ergonomics– Preparing preliminary mock-ups– Print to scale, test in position– Assess legibility, lighting, reading heights,

distances

148

Navigation

1. Corporation logo 2. Site Menu

3. Page menu

3. Page location

4. Page title

5. Side link

149

Symbolism

• Graphic icons and symbols– One of the most important form of visual

communication;– One of the most complex

• Have the ability to independently navigate foreign territories:– E.g., hospital, museum, airports, using

maps, guide books, TV guides,

150

Symbolism

• Whatever the individual format, representing systems of information visually requires:– “The designers to distill large amount of

information to the bare minimum in order to effectively communicate them to the user.”

• The results often appear very simple; the thinking behind is all the hard work.

151

Symbolism

• Historical background– Symbols have been used as a form of

communication for as long as history records;

• In response to ever-changing world:– Daily life continues to increase in pace;– Advances in technology communicate

faster and more efficiently than ever before new graphic language evolve

152

Symbolism

• Readability is increasingly being achieved through the use of graphic symbols:– E.g., General operational symbols imposed

by mobile phone manufacturers;– E.g., Graphic language developed

independently through the increased use of text messaging and email;

– E.g., readers can interpret signs and symbols on bills and bank statements almost without thinking;

153

Symbolism • Bridge the gap between different

cultures and countries;• Allow us to communicate simply and

effectively without worrying about the language barriers;

• E.g., – 1972, Pioneer 10 mission sent graphic

symbol messages to Jupiter to unknown cultures;

– e.g., Point It

154

Point IT – A Traveller’s Language kit

• Editorial Reviews– The Linguist, Summer, 1999,

England• "Compact, pocket-sized and

very light, it contains pictures of anything you might need."

– Evening Standard, London, February 17, 1999

• "Help is finally at hand for frustrated tourists in London who don't speak a word of English or Brits abroad who are too lazy to learn the language. Instead of struggling with awkward pronunciations, all you have to do, thanks to a revolutionary picture guide-book called Point It, is to point to a picture of what you want."

Product Details: Paperback: 64 pages Publisher: Graf Editions; 5th rev. edition (April 6, 1999)

155

Symbolism

• Symbol is Contextualized:– We often respond to symbol without

thinking twice;– Symbol’s meaning is not intrinsic to the

design: It has to be learnt– What meanings we attach to these symbols

form part of our identity, and reliant to a number of factors, including race, religion and age

156

Application of symbols

• Big content: – e.g., Harry Beck’s London Underground ma

p - a map of a large amount of information;– e.g., Michael Johnsons’ (johnson banks con

sultancy) the Rewind book (of symbols) and exhibition – visual glue for a large exhibition (http://www.adobe.com/studio/features/johnson/page2.html )

–

157

THINK LONDON

• “We were struggling a bit with Think London’s symbol until, slightly desperately, we turned London’s famous skyline literally upside down. Then we started to build a ‘new’ city out of all the other reasons to live and work there. ‘Hey,’ said one of the designers, ‘that’s clever, it looks like a reflection.’ ‘You’re absolutely right,’ I said. All we had to do then was keep the river running through it and we were home and dry.”

• “Think London’s job is to encourage world businesses to set up their European headquarters in London (not Paris or Berlin or anywhere else). The symbols represent all aspects of London life, such as the arts, restaurants, entertainment, transport, technology, creative industries, and environment.”

158

Symbolism

• Systems of symbols– A Coherent look– Treated consistently in terms of size,

placement, and rendering

159

Symbolism • Signage

– A key role in physical world– Guide us through unfamiliar surroundings

• E.g., road signs, navigational signage,

– Projects take the longest amount of time to complete due to:

• the detailed planning process; • the amount of money invested in them; • the need for total accuracy; • the results are likely to be around for many years; leaving no

room for error

– The split second for the user to receive information;• E.g., Directing a worried relative in a hospital;• E.g., A museum visitor in an exhibition;

160

Symbolism• Now

– Graphic literacy: • As a society we are becoming ever more graphically litera

te;• The need to understand and interpret information in graph

ical form is more relevant;– Globalization demand universal understanding acr

oss countries:• Cheaper transportation; worldwideweb; globalization of co

mmerce– E.g., Alexander Gelman created a universal symbo

ls for Seiko Epson to be used on control panel and remote controls of LCD projectors (http://www.designmachine.net/gelman.html )

– In 2001, the Museum of Modern Art listed Alexander Gelman as one of the “world’s most famous modern and contemporary artists in all media”

161

Symbolism

• Designer & Symbolism

– Traditionally – where content meets form (see newspaper and magazine);

– Now – be brought in at a much earlier stage in order to develop the most effective design possible

162

Information Design

• Forms for information design:– Information kiosks, data displays, listings,

charts, diagrams, schedules, timetables, forms, reports, manuals

– All involve large amounts of complex data

• Purpose:– To transform the data into easily digestible

units, thus optimizing the user experience

163

Information design

• Information designers are:– Have a mastery of all the skills and talents

of a designer– Combine with the rigor and problem-solving

ability of a scientist or a mathematician– Bring the curiosity, research skills, and

doggedness of a scholar to their work– (Terry Irwin, design consultant and

educator)

164

Information design

• Think innovatively and systematically at the same time

• Designer: presenting information in a form that is attractive and functional, by– Think beyond the accepted norm by

developing graphic systems,– Being Fresh and modern,– To Challenge convention– And to Achieve primary objective

• E.g., Economic Times (presenting charts)

165

Information design

• Be aware of simple, repetitive, daily life tasks:– Bills, train or bus timetables, street map– Without design of information, is information anxiet

y

• Choice of format:– Broadband TV – e.g., NOW, HKBN

• information interactively on-screen, use only the remote control

– Annual report• A-Z editions of online annual report

– Newspaper, printed vs online• The way information is accessed and consumed on the w

eb is a completely different experience

166

Information design

• Designing for the web:– Preparing and working to a comprehensive

brief– Accurately assessing and preparing a time

schedule for the production process– A web style sheet showing key information

• Ensure all technical aspects have been covered before design process begins

• e.g., max. file size, text, graphics, background, hyperlinks, browsers

167

Information design

• Information architecture– New field in web design

• From a strategic perspective, from an implementation point of view

• Focuses on structure– Defining the content and functionality of a site

• Developing organizational systems

– Working with visual designer to develop the interface

• Use wireframes, without showing the distracting aesthetics of the visual design

• Wireframes indicate all the interface elements (e.g., buttons, links, content); their relationship

• Solely focus on the structure and design of the user interface

168

Information design

• Communication of data is crucial:– Readability– Legibility

• Information design:– Start at the beginning of a project– Providing them with necessary time to fully

understand the information– Then, execute it