Course schedule INTERFACE AESTHETICS Beyond desktop 2/04 Beyond - - PDF document

▶
course schedule
SMART_READER_LITE
LIVE PREVIEW

Course schedule INTERFACE AESTHETICS Beyond desktop 2/04 Beyond - - PDF document

Jan 26, 2023 225 likes •1.29k views

1/28 Introduction Course schedule INTERFACE AESTHETICS Beyond desktop 2/04 Beyond Desktop 2/11 Typography I 2/25 Typography II 3/03 Layout & the Grid 3/10 Workshop I: Type / Layout Graphic design basics 3/17 Color I 3/31

slide-1
SLIDE 1

Interface Aesthetics 04/14/08

Course schedule

INTERFACE AESTHETICS

Beyond desktop Graphic design basics

1/28 2/11 3/03 3/31 4/07 4/14 4/21 4/28 5/12 2/04 2/25 3/10 3/17 5/05

Introduction Beyond Desktop Typography I Typography II Layout & the Grid Workshop I: Type / Layout Color I Symbols &, Icons, and Pictograms Printed media, effects, and materials Critique Design for Dynamic Display / Web Workshop II: Web design Synthesis Exhibition

slide-2
SLIDE 2

Interface Aesthetics 04/14/08

Course schedule

INTERFACE AESTHETICS

Beyond desktop Graphic design basics

1/28 2/11 3/03 3/31 4/07 4/14 4/21 4/28 5/12 2/04 2/25 3/10 3/17 5/05

Introduction Beyond Desktop Typography I Typography II Layout & the Grid Workshop I: Type / Layout Color I Symbols &, Icons, and Pictograms Printed media, effects, and materials Critique Design for Dynamic Display / Web Workshop II: Web design Synthesis Exhibition

slide-3
SLIDE 3

Interface Aesthetics 04/14/08

Course schedule

INTERFACE AESTHETICS

Beyond desktop Graphic design basics

1/28 2/11 3/03 3/31 4/07 4/14 4/21 4/28 5/12 2/04 2/25 3/10 3/17 5/05

Introduction Beyond Desktop Typography I Typography II Layout & the Grid Workshop I: Type / Layout Color I Symbols &, Icons, and Pictograms Printed media, effects, and materials Critique Design for Dynamic Display / Web Workshop II: Web design Synthesis Exhibition

slide-4
SLIDE 4

Interface Aesthetics 04/14/08

Course exhibition

INTERFACE AESTHETICS

  • 1. Artifact
  • 2. Print media
slide-5
SLIDE 5

Interface Aesthetics 04/14/08

  • 1. Artifact

Website or a physical artifact you are working on. Be prepared to discuss your design decisions.

INTERFACE AESTHETICS

slide-6
SLIDE 6

Interface Aesthetics 04/14/08

  • 2. Print media

Describe both the project and the design process.

INTERFACE AESTHETICS

slide-7
SLIDE 7

Interface Aesthetics » 2008

Daniela K. Rosner | UC Berkeley School of Information

DesignfortheWeb

slide-8
SLIDE 8

72 dots per inch

slide-9
SLIDE 9

0x3FF7F

slide-10
SLIDE 10

0x3FF7F

slide-11
SLIDE 11

Courier

slide-12
SLIDE 12

Arial, Comic Sans, Courier, Georgia, Impact, Tahoma, Times New Roman, Helvetica, Trebuchet, Veranda, Geneva

slide-13
SLIDE 13

Arial, Comic Sans, Courier, Georgia, Impact, Tahoma, Times New Roman, Helvetica, Trebuchet, Veranda, Geneva

body text body text body text

slide-14
SLIDE 14

Arial, Comic Sans, Courier, Georgia, Impact, Tahoma, Times New Roman, Helvetica, Trebuchet, Veranda, Geneva

ihatecomicsans.com can be diffjcult to read as body text, particularly on low resolution screens reserve for titiling body text body text body text

slide-15
SLIDE 15

Clearly Convey your Site’s Purpose Reveal Site Content Formatting

slide-16
SLIDE 16

Clearly Convey your Site’s Purpose

[Adapted from J. Nielsen]

http://www.useit.com/alertbox/20020512.html

slide-17
SLIDE 17

http://www.letinedinburgh.co.uk/

slide-18
SLIDE 18

http://www.lucyblackmore.co.uk/

slide-19
SLIDE 19

Use Description

Describe your site’s purpose and Use a descriptive Window Title (for search engines and bookmark lists)

Clearly Convey your Site’s Purpose

slide-20
SLIDE 20

http://www.fmickr.com/

slide-21
SLIDE 21
slide-22
SLIDE 22

http://leckerundecht.de/

slide-23
SLIDE 23

http://www.nextchoice.com/

slide-24
SLIDE 24

Guide People to Relevant Content

Group all related information in separate, distinct places.

Clearly Convey your Site’s Purpose

slide-25
SLIDE 25

http://www.facebook.com/

slide-26
SLIDE 26
slide-27
SLIDE 27

Use Visual Emphasis

Emphasize important information, such as your resume or recent projects

Clearly Convey your Site’s Purpose

slide-28
SLIDE 28

http://www.wishlistr.com/

slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32

http://www.gettrashy.ca/

slide-33
SLIDE 33

Navigation

Make navigation simple and visible

Clearly Convey your Site’s Purpose

slide-34
SLIDE 34

http://leckerundecht.de/

slide-35
SLIDE 35

http://leckerundecht.de/

slide-36
SLIDE 36

http://leckerundecht.de/

slide-37
SLIDE 37

http://tellart.com/index.php

slide-38
SLIDE 38

http://tellart.com/index.php

slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42

Simplify Content Hierarchy

Don’t over-complicate the site’s hierarchy

Clearly Convey your Site’s Purpose

slide-43
SLIDE 43

http://www.ringvemedia.com/

slide-44
SLIDE 44

http://www.ringvemedia.com/

slide-45
SLIDE 45

http://www.barackobama.com

slide-46
SLIDE 46

http://www.barackobama.com

slide-47
SLIDE 47

http://www.barackobama.com

slide-48
SLIDE 48

http://www.barackobama.com

slide-49
SLIDE 49

http://www.barackobama.com

slide-50
SLIDE 50

http://www.barackobama.com

slide-51
SLIDE 51

http://www.barackobama.com

slide-52
SLIDE 52

Reveal Site Content

slide-53
SLIDE 53

Use the Grid

Organize your site’s content (graphics, text, etc.) according to a sensible grid.

Reveal Site Content Clearly Convey your Site’s Purpose

slide-54
SLIDE 54

http://tellart.com/index.php

slide-55
SLIDE 55
slide-56
SLIDE 56

http://www.nextchoice.com/

slide-57
SLIDE 57

http://www.nextchoice.com/

slide-58
SLIDE 58

http://www.nextchoice.com/

slide-59
SLIDE 59

http://www.nextchoice.com/

slide-60
SLIDE 60

Reveal Recency

Make it easy to access recent content

Reveal Site Content Clearly Convey your Site’s Purpose

slide-61
SLIDE 61

http://www.bbc.co.uk

slide-62
SLIDE 62

http://www.tillymoss.com/

slide-63
SLIDE 63

Reveal Site Content

Lead by Example

Include descriptive graphics/images to illustrate examples of work.

Reveal Site Content Clearly Convey your Site’s Purpose

slide-64
SLIDE 64

http://www.paplegtechnika.hu/site_eng/full.html

slide-65
SLIDE 65

http://leckerundecht.de/

slide-66
SLIDE 66

http://leckerundecht.de/

slide-67
SLIDE 67

Formatting

slide-68
SLIDE 68

Format With Reason

Do not over-format important text.

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-69
SLIDE 69

http://www.selljewelrynow.com

slide-70
SLIDE 70

http://www.facebook.com/

slide-71
SLIDE 71

http://www.gettrashy.ca/

slide-72
SLIDE 72

http://www.gettrashy.ca/

slide-73
SLIDE 73

Animate With Reason

Do not over-animate important graphics.

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-74
SLIDE 74

http://www.paplegtechnika.hu/site_eng/full.html

slide-75
SLIDE 75

http://www2.telemaz.tv/

slide-76
SLIDE 76

http://www.thealamobasement.com/

slide-77
SLIDE 77

User Flexiblility

Allow users to adjust the size of the page. Allow users to change the size of the text on the page.

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-78
SLIDE 78
slide-79
SLIDE 79
slide-80
SLIDE 80

Use Meaningful Graphics

Use images, illustration and other media that communicate content

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-81
SLIDE 81

http://www.lucyblackmore.co.uk/

slide-82
SLIDE 82

http://www.studioespace.co.jp/index.html

slide-83
SLIDE 83

Describe

Include descriptive graphics or images to illustrate examples of your work.

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-84
SLIDE 84

http://tellart.com/index.php

slide-85
SLIDE 85

http://tellart.com/index.php

slide-86
SLIDE 86

http://tellart.com/index.php

slide-87
SLIDE 87

Bringing it all together...

if (form == function) {

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-88
SLIDE 88

http://www2.telemaz.tv/

slide-89
SLIDE 89

http://www2.telemaz.tv/

slide-90
SLIDE 90

http://www.lucyblackmore.co.uk/

slide-91
SLIDE 91

http://www.vermeersch.ca/

slide-92
SLIDE 92

http://www.mariagrossmann.de/index2.html

slide-93
SLIDE 93

Do it concisely.

Use your graphics clearly and concisely to explain who you are and what you do.

slide-94
SLIDE 94

} else {

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-95
SLIDE 95

http://www.amazon.com/

slide-96
SLIDE 96

http://www.google.com/ig?hl=en

slide-97
SLIDE 97

}

Formatting Clearly Convey your Site’s Purpose Reveal Site Content

slide-98
SLIDE 98

Deconstructing Web Typography

slide-99
SLIDE 99

http://webtypography.net/

slide-100
SLIDE 100

How Should Labels be Aligned? Top Right Left

Deconstructing Web Typography

slide-101
SLIDE 101

Top Aligned Labels

Deconstructing Web Typography

slide-102
SLIDE 102

Formatting

Top Aligned Labels

Deconstructing Web Typography

[L. Wobrlewski]

slide-103
SLIDE 103

Top Aligned Labels

Deconstructing Web Typography

[L. Wobrlewski]

slide-104
SLIDE 104

Right Aligned Labels

Deconstructing Web Typography

[L. Wobrlewski]

slide-105
SLIDE 105

Left Aligned Labels

Deconstructing Web Typography

[L. Wobrlewski]

slide-106
SLIDE 106

Post a website with successful design. Drawing from the guidelines discussed in class, describe the elements that make the website successful.

Homework for next week