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

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 Symbols &, Icons, and Pictograms 4/07 Printed media, effects, and materials 4/14 Design for Dynamic Display / Web 4/21 Workshop II: Web design 4/28 Critique Interface Aesthetics 04/14/08 5/05 Synthesis 5/12 Exhibition

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 Symbols &, Icons, and Pictograms 4/07 Printed media, effects, and materials 4/14 Design for Dynamic Display / Web 4/21 Workshop II: Web design 4/28 Critique Interface Aesthetics 04/14/08 5/05 Synthesis 5/12 Exhibition

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 Symbols &, Icons, and Pictograms 4/07 Printed media, effects, and materials 4/14 Design for Dynamic Display / Web 4/21 Workshop II: Web design 4/28 Critique Interface Aesthetics 04/14/08 5/05 Synthesis 5/12 Exhibition

INTERFACE AESTHETICS Course exhibition 1. Artifact 2. Print media Interface Aesthetics 04/14/08

INTERFACE AESTHETICS 1. Artifact Website or a physical artifact you are working on. Be prepared to discuss your design decisions. Interface Aesthetics 04/14/08

INTERFACE AESTHETICS 2. Print media Describe both the project and the design process. Interface Aesthetics 04/14/08

DesignfortheWeb Interface Aesthetics » 2008 Daniela K. Rosner | UC Berkeley School of Information

72 dots per inch

0x3FF7F

0x3FF7F

Courier

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

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

ihatecomicsans.com body text can be diffjcult to read as body text, particularly on low resolution screens Comic Sans, Courier, Arial, Georgia, Impact, Tahoma, body text Times New Roman, Helvetica , Trebuchet, Veranda, Geneva body text reserve for titiling

Clearly Convey your Site’s Purpose Reveal Site Content Formatting

Clearly Convey your Site’s Purpose [Adapted from J. Nielsen] http://www.useit.com/alertbox/20020512.html

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

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

Clearly Convey your Site’s Purpose Use Description Describe your site’s purpose and Use a descriptive Window Title (for search engines and bookmark lists)

http://www.fmickr.com/

http://leckerundecht.de/

http://www.nextchoice.com/

Clearly Convey your Site’s Purpose Guide People to Relevant Content Group all related information in separate, distinct places.

http://www.facebook.com/

Clearly Convey your Site’s Purpose Use Visual Emphasis Emphasize important information, such as your resume or recent projects

http://www.wishlistr.com/

http://www.gettrashy.ca/

Clearly Convey your Site’s Purpose Navigation Make navigation simple and visible

http://leckerundecht.de/

http://leckerundecht.de/

http://leckerundecht.de/

http://tellart.com/index.php

http://tellart.com/index.php

Clearly Convey your Site’s Purpose Simplify Content Hierarchy Don’t over-complicate the site’s hierarchy

http://www.ringvemedia.com/

http://www.ringvemedia.com/

http://www.barackobama.com

http://www.barackobama.com

http://www.barackobama.com

http://www.barackobama.com

http://www.barackobama.com

http://www.barackobama.com

http://www.barackobama.com

Reveal Site Content

Clearly Convey your Site’s Purpose Reveal Site Content Use the Grid Organize your site’s content (graphics, text, etc.) according to a sensible grid.

http://tellart.com/index.php

http://www.nextchoice.com/

http://www.nextchoice.com/

http://www.nextchoice.com/

http://www.nextchoice.com/

Clearly Convey your Site’s Purpose Reveal Site Content Reveal Recency Make it easy to access recent content

http://www.bbc.co.uk

http://www.tillymoss.com/

Clearly Convey your Site’s Purpose Reveal Site Content Reveal Site Content Lead by Example Include descriptive graphics/images to illustrate examples of work.

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

http://leckerundecht.de/

http://leckerundecht.de/

Formatting

Clearly Convey your Site’s Purpose Reveal Site Content Formatting Format With Reason Do not over-format important text.

http://www.selljewelrynow.com

http://www.facebook.com/

http://www.gettrashy.ca/

http://www.gettrashy.ca/

Clearly Convey your Site’s Purpose Reveal Site Content Formatting Animate With Reason Do not over-animate important graphics.

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

http://www2.telemaz.tv/

http://www.thealamobasement.com/

Clearly Convey your Site’s Purpose Reveal Site Content Formatting User Flexiblility Allow users to adjust the size of the page. Allow users to change the size of the text on the page.

Clearly Convey your Site’s Purpose Reveal Site Content Formatting Use Meaningful Graphics Use images, illustration and other media that communicate content

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

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

Clearly Convey your Site’s Purpose Reveal Site Content Formatting Describe Include descriptive graphics or images to illustrate examples of your work.

http://tellart.com/index.php

http://tellart.com/index.php

http://tellart.com/index.php

Clearly Convey your Site’s Purpose Reveal Site Content Formatting Bringing it all together... if (form == function) {

http://www2.telemaz.tv/

http://www2.telemaz.tv/

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

http://www.vermeersch.ca/

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

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

Clearly Convey your Site’s Purpose Reveal Site Content Formatting } else {

http://www.amazon.com/

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

Clearly Convey your Site’s Purpose Reveal Site Content Formatting }

Deconstructing Web Typography

http://webtypography.net/

Deconstructing Web Typography How Should Labels be Aligned? Top Right Left