Download lecture

07
IAT 102 Graphic Design
Web Design
Web users don’t
like to
read…They want to
keep
moving and
clicking.
Jakob Nielsen
Web Design
Web Design
Web Design
Web Design
Web Design
Web Design
RGB
Hexadecimal or Hex Value
http://www.w3schools.com/tags/ref_colornames.asp
http://colorschemer.com - FREE download (15 days trial)
Bitmaps - are black + white images
Good for screens with a fixed size, but gives a “pixilated” appearance when scaled up
Vector - outline descriptions of characters
scalable
Improving Legibility on Screen
Anti-aliasing text
Anti-aliasing can soften edges so
much as to make text hard to read
(e.g. example of 18 pt font)
Anti-aliasing should be used only on
large display sizes.
Bolder fonts with more uniform
strokes can be anti-aliased at sizes
down to 18 point if desired, but smaller
sizes generally become too blurred.
Anti-aliasing, which uses shades of gray to create the illusion of
a curved edge, is effective for presenting text on screen at large sizes.
web
Interactive Design
Origins - early human computer interaction (HCI)
1960 1980
early users - technically proficient users
circa 1960s - 1980s
early HCI
Beyond the Desktop
broader context-of-use
circa 1990s - present
Static Interface
Early telephone with an analog, ‘static’ interface –
where all functions and features are displayed ‘at hand’.
Dynamic Interface
Digital phone with a computer-based, ‘dynamic’ interface –
where functions and features emerge over use and time
Dynamic vs Static
How people interact with digital artifacts is very different from
traditional products with analog interfaces (e.g. dials and knobs).
Software-driven products have dynamic interfaces, which means
that their functions unfold over use and time.
Context, Activity and Attention
Designs often require too much Attention
Use is often very Social
Behavior + User Experience
Designing for interactivity necessitates designers to think beyond
the physical form and to recognize that the software behaviour is
an integral part of the products’ user experience.
ec(h)o - is an example of a ‘tangible user interface’ (TUI) .
Go to http://echo.iat.sfu.ca and click on “video” to view
Lifestyle + Value
Which one of these products would you choose?
Moving to the “Upper Right”
Cagan & Vogel, 2002
Moving to the “Upper Right”
Mobile-Screen Design, some hints:
1) In Photoshop, 240x320px, use a simple grid
2) Typography
Use a sans serif
or a slab-serif font
(no thin serifs)
Use enough
linespacing
Do not go below
12 point size
3) Tracking
No negative tracking!!!
Here, slightly
positive tracking
helps readability
4) Strong colour contrasts
Use a strong
Colour contrast
5) Short texts
Avoid lengthy texts
Keep it short!
6) Repeat one element from poster design
Repeat colour
scheme
6) Repeat one element from poster design
Repeat typical
graphic elements
6) Repeat one element from poster design
Repeat
composition
-> Make a series of 3 subsequent screens
Our rules for mobile screen design:
•
Simple Grid
•
Typography: serif font, linespacing, >12 point
1) Positive tracking
2) Strong colour contrasts
3) Short texts
4) Repeat one graphic element
Graphic Design meets the Computer
Susan Kare - Macpaint - control panel, 1983
Susan Kare - Macpaint - interface, 1983
Susan Kare - icons, pictogram system c.1985
Rudy van der Lans – Émigré magazine – late 1980’s (Netherlands)
Emigre_magazine
Emigre Type Foundry
http://www.emigre.com
Rudy VanderLans
Zuzana Licko
Zur Anzeige wird der QuickTime™
Dekompressor „TIFF (Unkomprimiert)“
benötigt.
Zur Anzeige wird der QuickTime™
Dekompressor „TIFF (Unkomprimiert)“
benötigt.
David Carson, 1995, Ray Gun Magazine, the End of Print
Fuse 7 poster mid 1990’s
Ralph_Schraivogel_zurich_intl_jazz_1989– Swiss School
Paula_Scher_blah_blah_blah_1997 (American)
Paula_Scher_bring_in_da_noise_1996 (American)
Jean_Benoit_Levy_Bosch_watch_1997 – Man Ray / Émigré influences
Niklaus_Troxler_2001_echoes_of_techno (Swiss)
fin