Web Design vs. GUI Design

1
GUI Design

• Web Design vs. GUI Design
• Designing for the Web the designer has to
• give up full control of the design
• In traditional design, you control every screen
  pixel
• you know what system you are designing for
• what fonts are installed
• how large the screen typically will be
• you have the system vendor's styleguide
• the rules for combining the interaction
• On the Web
• user accessing through
• traditional computers
• Web TV
• pen-based hand-held device
• cellphone
• laptops

2
GUI Design

• Web Design vs. GUI Design
• Traditional design
• difference in screen area between a laptop and a
  high-end workstation is a factor of six.
• On the Web
• a factor of 100 in screen area between handhelds
  and workstations
• a factor of 1,000 in bandwidth between modems
  and T-3 connections.
• Any Web design will look different on this
  variety of devices
• The more specialized or low-end the device, the
  stricter the requirements for Web content to
  morph into something suited for the platform.
• The only way to make this happen is for
  designers to give up full control
• let the presentation of their pages be
  determined by an interplay of page specifications
  and the preference settings (and other
  characteristics of the client device)
• share responsibility with users and client
  hardware/software

3
GUI Design

• Web Design vs. GUI Design
• Similarities between Web and traditional UI
  design
• are interactive systems
• are software designs
• require distinct requirements identification
• require the development process/methodology

4
GUI Design

• Device Diversity
• Designing an abstract UI specification that is
  different for each platform is difficult.
• The basic principles of HTML take the designer a
  long way toward the ideal, but not all the way
• Recommendation
• separate meaning (what) and presentation (how)
• use style sheets
• specify presentation
• informational content than for interactions

5
GUI Design

• Effective Use of Style Sheets
• separation of presentation and content
• The Web is the ultimate cross-platform system
• Hardware platforms
• Operating Systems
• Networks
• Content presented on such a variety of devices
• pages should specify the meaning of the
  information
• leave presentation details to
• site-specified style sheets
• user's preferences
• The ability to introduce new page designs by
  creating a single style sheet file rather than by
  modifying thousands of content pages

6
GUI Design

• Implementation Advice
• Pages must continue to work when style sheets are
  disabled
• do not use tricks where the same words are
  repeated multiple times with small offsets to
  create shadow effects
• Do not use more than two fonts (plus possibly a
  third for special text like computer code)
• using a lot of fonts simply because you can will
  result in a ransom-note look
• one typeface for body text and another face for
  headings
• use a long list of alternate fonts in the style
  sheet specification for a given class of text

7
GUI Design

• Do not use absolute font sizes
• specify all text relative to the base font size
  defined by the user's preference setting
• text could be defined as "200
• Do not use the !important attribute to override
  the user's settings
• Home Page design rule more is less
• the more buttons and options you put on the home
  page, the less users are capable of quickly
  finding the information they need

8
GUI Design

• Cascading Style Sheets (CSS)
• Hypertext Markup Language (HTML)
• Basic web markup language

• Styles
• A collection of the attributes (font, size,
  bold, etc.)
• Identified and named
• Gives documents a Common look

• Cascading Style Sheets
• A collection of the attributes (font, size,
  bold, etc.)
• May be set in a central location to affect
  entire documents
• Not HTML
• CSS Properties (DHTML/CSS page 7)

• CSS Rule
• A single description of the properties for every
  occurrence of a specific tag

9
GUI Design

• CSS Placement
• Link to a CSS document
• Used to affect an entire web site
• Create external text file
• Standard CSS rules applied in external document
• File extension of .css
• Filename.css
• Format
• ltHEADgtltlink relstylesheet hreffilename.css
  gtltlink relstylesheet hreffilename.cssgtlt/HE
  ADgt
• Inserts the CSS into the document
• Affects the entire document doing the link

10
GUI Design
Style-Sheet Strategies
Place style in external style sheets (.css
files) Place styles in a common place (directory
location) Easier to locate for updates Define a
global.css style sheet Common to ALL web
pages Define section.css style sheets Use with
specific areas of a web page Create different
.css files for distinctive uses Split the .css
files into smaller files Larger files take
longer to download Import/Link .css files as
needed Save download time Avoid using styles
directly (inline) in the tags
11
GUI Design

• Presenting Text on the Web
• HTML TextPros Easy to edit Fast to
  download Adjusts to the width of the screen
• Cons Text control is by the visitors
  machine Limited to fonts available on visitors
  machine Text limited for special-effects
• Graphic TextIs a graphic (.gif or .jpg) that has
  textIs a picture not textCan use any
  fontSlower to downloadMay not fit on the
  visitors screen
• Vector GraphicEasy to changePosition itself
  dynamically (fit the screen)Apply special
  effects easilyUse any font.svg file typesNot
  an accepted standardCurrently Micromedia Flash
  is only vector graphicsRequire Micromedia Flash
  plug-in