Transcript Document

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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
Cs413_design01.ppt
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
<HEAD>
<link rel=“stylesheet” href=“filename.css”>
<link rel=“stylesheet” href=“filename.css”>
</HEAD>
•
Inserts the CSS into the document
•
Affects the entire document doing the ‘link’
Cs413_design01.ppt
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
Cs413_design01.ppt
GUI Design
Presenting Text on the Web
1. HTML Text
Pros:
Easy to edit
Fast to download
Adjusts to the width of the screen
Cons:
Text control is by the visitor’s machine
Limited to fonts available on visitor’s machine
Text limited for special-effects
2. Graphic Text
Is a graphic (.gif or .jpg) that has text
Is a picture not text
Can use any font
Slower to download
May not fit on the visitor’s screen
3. Vector Graphic
Easy to change
Position itself dynamically (fit the screen)
Apply special effects easily
Use any font
.svg file types
Not an accepted standard
Currently Micromedia Flash is only vector graphics
Require Micromedia Flash plug-in
Cs413_design01.ppt