page screen design l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
page / screen design PowerPoint Presentation
Download Presentation
page / screen design

Loading in 2 Seconds...

play fullscreen
1 / 56

page / screen design - PowerPoint PPT Presentation


  • 311 Views
  • Uploaded on

page / screen design lay-out perceptual variables: color, size, shape, orientation, movement web design = design of pages page layout typography illustrations page lay-out first 10 cm should be enogh to know if you want to read this, or to skip top: title / identification / identity;

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'page / screen design' - Gabriel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
page screen design
page / screen design
  • lay-out
  • perceptual variables:
    • color, size, shape, orientation, movement

web design = design of pages

  • page layout
  • typography
  • illustrations

OIS Utrecht 2010

page lay out
page lay-out
  • first 10 cm should be enogh to know if you want to read this, or to skip
  • top: title / identification / identity;
  • main navigation
  • bottom: web master/author, date, site map, etc.

OIS Utrecht 2010

layout
Layout

in our western world we read from left to right and from top to bottom

OIS Utrecht 2010

layout10
Layout

in our western world we read from left to right and from top to bottom

most important items top left

reading: max. 40-60 char. per line

  • newspaper columns (8 cm)
  • longer lines enforce head movement

OIS Utrecht 2010

layout12
Layout

what screen size to expect?

different browsers

people use only part of screen for browser

some options:

  • Cascading Style Sheets
  • image maps for text labels

OIS Utrecht 2010

cascading style sheets
Cascading Style Sheets

separation of text and layout

OIS Utrecht 2010

text in image
text in image
  • designer is in full control
  • takes time to download
  • some people do not want pictures

OIS Utrecht 2010

slide15

Image maps:

controle of font and layout;

multiple links

OIS Utrecht 2010

design crowded real estate
design – crowded real estate
  • designers like “white space”,
  • real estate is expensive, so people use all (newspapers, Las Vegas, Times Square)
  • typografic rule of thumb: fill 70% max
  • Psychological rule fo thumb (Fitts’ Law): use simpel “grid”

OIS Utrecht 2010

typography
Typography
  • contrast between text and background
  • goal is readability

OIS Utrecht 2010

slide20

reading is recognition of words, not characters:

All Capitals spoils the word profiles:

capitals have meaning for names and start of sentences:

OIS Utrecht 2010

fonts
Fonts
  • fonts are graphical elements, aiming at meaning first, but, additionally, style
  • balance between resolution, space, tradition, uniqueness

OIS Utrecht 2010

consistency
Consistency

important characteristic of good design

  • recognizability
  • easy reading
  • carefull, style

OIS Utrecht 2010

hints
hints
  • line space not too low (> font size)
  • restrictred variation in font size (10-14)
  • maximum of 2 fonts
  • use of font variables (color) mainly for destinction of headers, not within text

OIS Utrecht 2010

slide27

useit.com: usable information technology

after 6 years ....

Permanent Content

Alertbox

Jakob's column on Web usability

Informational Articles Must Ask For the Order (Aug. 23) Unless you have explicit links to product pages from article content, users who visit articles directly from search engines might never realize that you sell related products.

Search Engine Behavior (Aug. 16) Information Scent (Aug. 2) Card Sorting (July 19)

All Alertbox columns from 1995 to 2004

useit.com: Jakob Nielsen's Website

OIS Utrecht 2010

background
background

contrast is of main importance:

  • dark text on light background or vice versa
  • no contrast within background

OIS Utrecht 2010

color
color
  • supports organization of page
  • creates harmonic balance

OIS Utrecht 2010

slide33

Colors can support understanding ....

if conform to cultural or educational habits

OIS Utrecht 2010

slide34

... or confuse,

even if perceptual quality (including contrast) is identical

OIS Utrecht 2010

slide35

Colour

  • Harmonious colour combination
  • Contrast
  • Legibility
  • Colour blindness
  • Culture / education

OIS Utrecht 2010

slide36

Colour Contrast

OIS Utrecht 2010

bitmaps of vector graphics
Bitmaps of vector graphics

bitmaps (raster graphics)

  • gif, jpeg
  • for photographs

vector graphics

  • Postscript, Flash, VML (vector mark-up language)
  • line drawings, cartoons, fonts
  • resolution independent

OIS Utrecht 2010

gif graphic interchange format
GIF: Graphic Interchange Format
  • bitmap
  • compressed without loss
  • transparency, animation

OIS Utrecht 2010

pictures
pictures
  • if relevant
  • restrict colors
  • test alternatives

OIS Utrecht 2010

role of images
Role of images
  • Image and information
  • Image and emotion
  • Image and memory
  • Image and culture
  • Convicing viewers

OIS Utrecht 2010

use graphics and images to
use graphics and images to ...
  • Show who
  • Show what (portrays, describes physical objects)
  • Show what’s inside
  • Show where
  • Show when (time)
  • Show how it works
  • Show how to do it (e.g steps in a task)
  • Show examples (instances of a general category or idea)
  • Show what can not been seen
  • Show comparison

OIS Utrecht 2010

use visuals to show46
where

when

use visuals to show:

OIS Utrecht 2010

slide47

images can show how it works

time as well as three dimensions on a flat surface:

The solar system, William Pearson, 1820

OIS Utrecht 2010

slide50

useit.com: usable information technology

Permanent Content

Alertbox

Jakob's column on Web usability

Informational Articles Must Ask For the Order (Aug. 23) Unless you have explicit links to product pages from article content, users who visit articles directly from search engines might never realize that you sell related products.

Search Engine Behavior (Aug. 16) Information Scent (Aug. 2) Card Sorting (July 19)

All Alertbox columns from 1995 to 2004

useit.com: Jakob Nielsen's Website

OIS Utrecht 2010

slide51

Navigation

· Main Navigation· Bread crumbs· Double tab· Meta Navigation· Split Navigation· Repeated Menu· Faceted Navigation· Teaser Menu· Header-less Menu· Fly-out Menu· Directory· Trail Menu· Scrolling Menu· Shortcut Box· Image Menu· Guided Tour

Searching

· Simple Search· Advanced Search· Search Results· Search Area· Sitemap· Topic Pages· Search Tips· Site Index· Help Wizard· FAQ

Web Design patterns

Site Types

  • · My Site· Portal· Commerce Site· Community Site· Branded Promo Site· Corporate Site· News Site· Museum Site· Automotive Site· Web-based Application· Travel/booking Site· Multinational Site· Artist Site

User Experiences

  • · Shopping· Community· Learning

Page Elements

· News box· Home· Language

OIS Utrecht 2010

sketching in industrial practice example
sketching in industrial practice, example

Critical Safety System (CSS)

design company Seibersdorf (Vienna, Austria)

production by Philips Austria

Clients: Austrian banks, railways, power plants

Users: employees of these clients

example of envisioning screen design:

OIS Utrecht 2010

the current css display too much messages sorted by time that scroll off the screen
The current CSS display: too much messages, sorted by time, that scroll off the screen

OIS Utrecht 2010

alternative 1 information wall operators were not convinced too sophisticated
alternative 1: information wall: operators were not convinced, “too sophisticated”

OIS Utrecht 2010

alternative 2 building layout represented messages sorted by type only fire alarms can be seen
alternative 2: building layout represented, messages sorted by type (+), only fire alarms can be seen (-)

OIS Utrecht 2010

alternative 3 messages sorted by type fire intrusion elevators each sorted by priority
Alternative 3: messages sorted by type: fire, intrusion, elevators …, each sorted by priority

OIS Utrecht 2010