Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cs413_design01.ppt 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.

Similar presentations


Presentation on theme: "Cs413_design01.ppt 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."— Presentation transcript:

1 Cs413_design01.ppt 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 GUI Design

2 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

3 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

4 Cs413_design01.ppt 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 GUI Design

5 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

6 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

7 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

8 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

9 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 Inserts the CSS into the document Affects the entire document doing the ‘link’

10 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

11 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


Download ppt "Cs413_design01.ppt 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."

Similar presentations


Ads by Google