Visual Design & Composition

Color

Learning from Others

Analyzing some websites

Announcements

1. Tutorial 3 and Homework 1 have been posted
2. Re: GitHub: You’ll be submitting GitHub links (and your source code) for the rest of the quarter.
1. If you had any trouble getting GitHub working, definitely attend office hours and I’ll get you squared away.

Outline

1. Principles of composition
2. Color
3. Fonts and Typography
4. Branding

3

Outline

• Principles of composition
• Color
• Fonts and Typography
• Branding

4

Composition

​

​

​

Using proximity, alignment, contrast, asymmetry, color,�and repetition to build hierarchy and enhance usability

5

Simple system, simple composition

Source: Ricky Holtz & Ellen Van Wyk

Complex system, simple composition

Source: Ricky Holtz & Ellen Van Wyk

Complex system, complex composition

Building Hierarchy for complex systems

proximity / repetition

proximity / repetition

contrast (color)

contrast (size)

alignment / asymmetry

Source: Ricky Holtz & Ellen Van Wyk

4 Principles of Composition (of many)

1. Proximity
2. Alignment
3. Repetition
4. Contrast

10

Proximity

11

Principle of Proximity

Physical closeness implies a relationship.

• Group related items together
• Separate items that are not related

​

How could you use the principle of proximity to redesign the example on the left?

13

Which is easier to scan and interpret?

14

What is the purpose of all this whitespace?

Use Whitespace

1. Helps to group items
2. Helps readers scan
3. Suggestions:
1. Put margins (white space) around all content.
2. Maintain a sense of proportion between the object and its surroundings.
3. Don’t crowd controls together (even if grouped).

​

​

​

16

Alignment

17

Principle of Alignment

• Nothing should be placed arbitrarily.
• Every item should have a visual connection with something else on the page.

18

Avoid center-aligned text

19

Alignment Summary

1. Main goal: unify and organize content
2. Be conscious of where you place items
3. Work within a grid

Avoid:

1. Using more than one text alignment
2. Use centered alignment consciously and for a purpose, not by default

21

Repetition

22

Principle of Repetition

1. Repeat some aspect of the design throughout the entire piece.
2. Unifies the design
3. Could be any aspect of the design�(fonts, colors, design elements, proximity, alignment)

23

What is repeating?

24

• Bold typeface
• Light typeface
• Square bullets
• Indents
• Spacing
• Left alignment

What is repeating?

25

• Left alignment
• Teacups
• Triangles
• Squares

(more about branding)

What is repeating?

26

Repetition Summary

1. Main goal: unify and provide visual interest.
2. Create repetition by
1. Strengthening repetitions that already exist
2. Creating new ones to enhance the design
3. Avoid over-repetition (sometimes less is more)

27

Contrast

28

Principle of Contrast

1. Contrast to draw a reader’s eye to certain parts of the page
2. Contrast can be created in many ways:
1. Size
2. Color (cool v. warm)
3. Whitespace
4. Asymmetry
3. Be bold!
• For contrast to be effective, it must be strong

29

Whis is easier to scan?

30

Whis is easier to scan?

31

Contrast Summary

Two main goals

• Create visual interest
• Effective information organization

Effective contrast is strong

• Elements have to be styled very differently
• Be bold!

32

Activity

33

CSS & Layouts

Layouts are the hardest thing about CSS for many reasons:

1. The language has many, many different layout ‘paradigms’ for doing the same thing.
2. Specifying the rules for arranging boxes the right way is difficult
3. You have to design for several different browser configurations (what looks good on a desktop doesn’t necessarily look good on mobile).
4. Everything has to be flexible and resizable so that it scales gracefully.

34

Activity: Composing a Layout in CSS

Let’s deconstruct this template website:

• How does this website instantiate the principles of:
• Proximity (think whitespace)
• Alignment (think grid)
• Repetition
• Contrast
• Let’s draw some boxes...
• Let’s think about how to create this layout. Some properties to highlight:
• “position: fixed”
• Margin and padding
• Grid

35

Outline

• Principles of composition
• Color
• Fonts and Typography
• Branding

36

3 Dimensions of Color

Source: Ricky Holtz & Ellen Van Wyk

Hue: The tint

Saturation: how intense the color is. When color is fully saturated, the color is considered in purest (truest) version

Value: lightness or darkness of a color

Monochromatic

Analogous

Complementary

Triadic

Tertiary

CSS Colors

RGB Hexadecimal

• Hexadecimal Digits (base-16)
• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f (0=0 and f=255)
• 2 digits for each color channel
• #33aaff (51 red; 170 green; 255 blue)
• Shorthand: #3af is the same as #33aaff

rgba(255, 255, 255, 0.5)

• allows transparency

Named colors

• hotpink, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, etc.

Resources: Color Palette Resources

1. Kuler
2. Colour Lovers
3. Coolors.co
4. ColorBrewer.org
5. Palette from image

​

46

Texture Resources

• https://www.transparenttextures.com/
• Using textures: some guidelines
• Websites that use textures

​

47

Outline

• Principles of composition
• Color
• Fonts and Typography
• Branding

48

Typography

Font families

Hierarchy

Body Copy

Conventions

Pairing fonts

49

Font Dimensions

50

Montserrat

x-height

ascent

descent

baseline

1 point = 1/72 vertical inch

12 point font = 1/6 vertical inch

mean line

Common Fonts

Examples:

Times New Roman, Caslon, Garamond, Palatino, Bembo

51

Common Fonts

Examples:

Didot, Bodoni

52

Common Fonts

Examples:

Rockwell, Memphis

53

Common Fonts

Examples:

Helvetica, Arial, Franklin Gothic, Avenir

54

Choosing Body Copy

1. Ideally choose a type designed for body (Georgia, Arial)
2. Has italic, bold-italic, and bold
3. Readable at 14-24 px… Check on your screen!

55

Open Sans has 10 variations

Source: Ricky Holtz & Ellen Van Wyk

Choosing a title font

56

Source: Ricky Holtz & Ellen Van Wyk

Type Setting

Avoid rivers

Mind line spacing and word spacing

57

Source: Ricky Holtz & Ellen Van Wyk

Ideally 50-60,75 characters/line

Other Conventions

1. Use smart quotes: “” not dumb quotes: ""
2. Avoid orphans and widows

​

​

58

Orphan

Widow

Source: Ricky Holtz & Ellen Van Wyk

Pairing Fonts: Contrast

1. Weight
2. Size
3. Style
4. Family

59

PT Sans and PT Serif. Same family, different style

Source: Ricky Holtz & Ellen Van Wyk

Pairing Fonts: Concordance

1. Look at the x height

60

Source: Ricky Holtz & Ellen Van Wyk

How to not pair fonts: Conflict

1. Too similar
2. Similar and different in the wrong ways

1. Too many

61

Different x height, similar serifs. What purpose is each serving?

Source: Ricky Holtz & Ellen Van Wyk

Font Selection Guidelines

Aim for simplicity and contrast

• Don't use more than 2 or 3 fonts
• One for body text, one for titles and headings

Use font features to create contrast

• Size, color, weight (e.g. bold), style (e.g. caps)

No more than 3-4 font varieties

• Don’t mix fonts that serve a similar purpose
• Don’t use two different serif fonts for body copy

62

Font Spacing Guidelines

Be generous with whitespace

• Always leave margins around body text
• Never pack it tightly against an edge

Use generous line height (but not too far away)

• Make sure body text is not crowded
• CSS: line-height: 120% or more

Keep text paragraphs narrow

• About 60 - 75 characters / 12 - 15 words
• Generally easier to read.

63

Resources: Google Fonts

https://fonts.google.com/

64

Resources: Google Font Pairings

65

Resources: Font Awesome Icons

1. https://codepen.io/vanwars/pen/wZyPLB?editors=1000
2. Enables icons to have font properties (so that you can color them and scale them easily)

66

Outline

• Principles of composition
• Color
• Fonts and Typography
• Branding

67

Visual design �can communicate values

68

69

70

71

74

75

Building a Brand Identity

76

Branding Kits

1. Selecting core values
2. Figuring out your primary mission
1. What is foreground?
2. What is background?
3. Figuring out a look-and-feel that communicates your values
4. How will you make use of colors, fonts, images, effects, etc. to instantiate your brand?

77

Branding Kits

• Many websites / apps / platforms publish their branding kits:
• Spotify
• UNC Asheville
• As you instantiate your frameworks, keep in mind that many larger companies have standardized widgets, stylesheets, and guidelines to ensure an integrated look-an-feel. Use them to get ideas.

​

78

Sample Style Guides

• Salesforce’s Lightning Design System
• Alibaba’s Ant Design
• Atlassian’s Design Guidelines
• Firefox’s Photon Design
• IBM’s Carbon Design
• Intuit’s Harmony Design
• Shopify’s Polaris

79

Sources of Inspiration

• dribbble.com
• Webby Awards
• And more!

​

For your tutorial this week...

Think about how you might visually instantiate a brand identity for your own personal website / online portfolio. What values you want �your site to embody?

81