Transcript 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