ECA 228 InternetIntranet Design I Design Principles Design

  • Slides: 52
Download presentation
ECA 228 Internet/Intranet Design I Design Principles

ECA 228 Internet/Intranet Design I Design Principles

Design l Development Process 1. 2. 3. 4. 5. Planning: decide what needs to

Design l Development Process 1. 2. 3. 4. 5. Planning: decide what needs to be accomplished Analysis: identify solutions Design: organize the structure and layout Implementation: write and test the code Support: monitor use of finished product ECA 228 Internet/Intranet Design I

Planning l Know your audience – – – – – special requirements? socio-economic level?

Planning l Know your audience – – – – – special requirements? socio-economic level? reading level? geographic location: local, regional, national, international? primary language? new or old computer hardware and software? how do we inform visitors of site? what do visitors have in common? what are their expectations? how big is target market: is it big enough to justify time and financial investment? ECA 228 Internet/Intranet Design I

Planning l cont… What are characteristics, needs, demographics of visitors to the following sites?

Planning l cont… What are characteristics, needs, demographics of visitors to the following sites? – – – a site for persons with mental disabilities who are looking for social supports and resources an investment site for people looking to create a retirement account a site selling shoes online a site selling rare books online an online auction a discussion site for online gaming ECA 228 Internet/Intranet Design I

Planning concepts & guidelines l choice of URL – – l to find if

Planning concepts & guidelines l choice of URL – – l to find if a domain name is available – – l easy to remember similar to name of company whois. networksolutions. com prices range from $15 - $35 per year ECA 228 Internet/Intranet Design I

Planning concepts & guidelines l choice of host – l self-hosting reputable hosting service

Planning concepts & guidelines l choice of host – l self-hosting reputable hosting service – price l l ranges $7 - $20 per month additional costs for secure sites ECA 228 Internet/Intranet Design I cont…

Planning concepts & guidelines l choice of host – other characteristics: l l l

Planning concepts & guidelines l choice of host – other characteristics: l l l l l FTP access Support CGI bin Support for ASP, PHP, CF, etc Database support Access to change permissions Back-end control panel Server-side includes Unix vs Windows ECA 228 Internet/Intranet Design I cont…

Planning concepts & guidelines cont… Promoting the site l How do I promote and

Planning concepts & guidelines cont… Promoting the site l How do I promote and advertise? – Search engines l l – – – Do I have time to do it myself? Do I pay a service to do it for me? Online discussion groups, chat rooms, etc Reciprocal links Include URL on existing letterhead, business cards, advertising, etc ECA 228 Internet/Intranet Design I

Planning concepts & guidelines cont… Online Sales l Does the business intend to sell

Planning concepts & guidelines cont… Online Sales l Does the business intend to sell items online? – – Secure connections Credit card processing Current staff enough to process orders? What technology to use, how much money will it cost to implement? ECA 228 Internet/Intranet Design I

Planning concepts & guidelines E-info l Will the site require additional bells and whistles?

Planning concepts & guidelines E-info l Will the site require additional bells and whistles? – – Online newsletter Chat rooms Bulletin Board Form processing Who receives the information – In what format? – Connect to DB? – ECA 228 Internet/Intranet Design I cont…

Planning concepts & guidelines cont… Visualization l Visualize the website as if it is

Planning concepts & guidelines cont… Visualization l Visualize the website as if it is up and running. Imagine it from the point of view of a user. – – Is all the information there? Is anything missing Is it easy to use? Is the layout pleasing? ECA 228 Internet/Intranet Design I

Planning concepts & guidelines cont… Analyze similar websites l Visit similar websites. – –

Planning concepts & guidelines cont… Analyze similar websites l Visit similar websites. – – – Take note of items you like and don’t like. Avoid obvious problems. Look at the code that comprises the site. Analyze how the pages are laid out. Try to understand how the site is organized – draw flowcharts, reverse engineer. ECA 228 Internet/Intranet Design I

Elements of web design l consider the impact of the different levels of HTML

Elements of web design l consider the impact of the different levels of HTML / XHTML standards Accessibility – – – a measure of how easy it is for browsers to access and read web pages Specific application: visual or hearing impaired users General application: the more accessible, the easier the page will render well across browsers ECA 228 Internet/Intranet Design I

Elements of web design cont… Cross Browser Compatibility – – – Intranet vs Internet

Elements of web design cont… Cross Browser Compatibility – – – Intranet vs Internet Explorer and Netscape Navigator hold approximately 98% of market hundreds of other browsers older versions of IE and NN don’t support CSS, JS Recent browser data: 2004 IE 6 IE 5 O 7 MOZ NN 3 NN 4 NN 7 Other March 71. 8 11. 2 2. 0 9. 6 0. 4 1. 4 3. 2 ECA 228 Internet/Intranet Design I

Elements of web design cont… Cross Browser Compatibility – 2004 March Recent Operating System

Elements of web design cont… Cross Browser Compatibility – 2004 March Recent Operating System data: Win. XP W 2000 Win 98 Win. NT Win 95 46. 8 32. 2 9. 4 2. 6 ECA 228 Internet/Intranet Design I 0. 4 Linux Mac 2. 6 2. 4

Elements of web design Content: Text – – Layout Format l l – –

Elements of web design Content: Text – – Layout Format l l – – – Size Font-family Spacing Margins Wordiness ECA 228 Internet/Intranet Design I cont…

Elements of web design cont… Content: Colors – – Do colors on web page

Elements of web design cont… Content: Colors – – Do colors on web page reflect the colors used by the business? Do the colors create the intended tone or mood? Are some colors distracting? Do foreground and background colors make it difficult to read text? ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: Links – – The goal of good navigation

Elements of web design cont… Content: Links – – The goal of good navigation is to get around easily to all parts of the site, or jump between sites. 2 elements to consider when planning navigation: l Browser navigational elements Back, Forward buttons – Drop-down location menu – Scroll bars – l Web site navigational elements buttons, icons, bullets, arrows – menu bars – image maps – ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: Links – – Is it easy to navigate

Elements of web design cont… Content: Links – – Is it easy to navigate forwards and backwards across the site? Are links consistent and easily understood? Do the navigational elements appear in consistent places on every page? Do I force the visitor to rely on the browser’s navigational elements to move around the site? ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: Images – – Use the alt tag with

Elements of web design cont… Content: Images – – Use the alt tag with every image. Use height and width attributes with every image. Keep image file size as low as possible. Too many images may make load time too high. Content: Image Maps – – Use the alt tag. Provide support for non-graphical browsers. ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: Animation – Animated graphics may look cool, but

Elements of web design cont… Content: Animation – Animated graphics may look cool, but consider their use carefully. l l l Do they distract the visitor? Do they add to the overall aesthetics of the site? Is the file size prohibitive? Content: Frames – Test carefully l l Search engines may have difficulty indexing sites that use frames. All browsers do not implement frames equally. ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: Tables – – can be used effectively to

Elements of web design cont… Content: Tables – – can be used effectively to lay out your pages when nested, may slow down the load time for a web page Content: Forms – collect information from users l l process the information validate the information server-side using Java. Script – client side using PHP, ASP, PERL, etc. – ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: CSS – – – separate presentation from content

Elements of web design cont… Content: CSS – – – separate presentation from content add consistent style across the entire site browsers, especially older ones, may not fully support CSS. Content: Cookies – – – save information submitted by a user a small text file that contains information about the user, such as username, password, date of first visit, etc cookies can be written using Java. Script, PHP, ASP, etc ECA 228 Internet/Intranet Design I

Elements of web design cont… Content: Java. Script – – add interactivity to your

Elements of web design cont… Content: Java. Script – – add interactivity to your site support for Java. Script is not equal among all browsers l l image rollovers cookies form validation pop-up windows Content: Plug-ins – – small programs that must be accepted as downloads by your visitors to use Flash on a website, your visitor must have a Flash plug-in ECA 228 Internet/Intranet Design I

Layout design l l the first thing a visitor notices when a web page

Layout design l l the first thing a visitor notices when a web page loads, even before looking at the content, is layout can either enhance the user’s visit, or take away from it – – a cluttered and sprawling layout may give the user the impression that you are very disorganized page elements placed too closely together may be hard to read and irritating to the user ECA 228 Internet/Intranet Design I

Layout design cont … Organization Schemes – organize a site’s structure into logical sections,

Layout design cont … Organization Schemes – organize a site’s structure into logical sections, known as “chunking” l l l Alphabetical: names of people Chronologically: events, calendars, etc Geographical: weather maps, travel sites, etc Topical: services offered, departments of a company Task-oriented: collection of tasks or functions, eg, a tutorial Audience-specific: information relevant to a particular audience, eg, age, gender, membership, etc ECA 228 Internet/Intranet Design I

Layout design cont … Organization Structures – narrow and deep Level 1 Level 2

Layout design cont … Organization Structures – narrow and deep Level 1 Level 2 Level 3 Level 4 ECA 228 Internet/Intranet Design I Level 3

Layout design cont … Organization Structures – wide and shallow Index Page A Page

Layout design cont … Organization Structures – wide and shallow Index Page A Page F Page B Page C Page G ECA 228 Internet/Intranet Design I Page D Page E Page H

Layout design cont … Storyboarding – – a technique used by Hollywood filmmakers to

Layout design cont … Storyboarding – – a technique used by Hollywood filmmakers to plan their films, even before shooting any stock web designers can use a similar technique, using index cards or post-it notes l l l top-down approach bottom-up approach build-out approach ECA 228 Internet/Intranet Design I

Layout design cont … Storyboarding – – cont … use an index card or

Layout design cont … Storyboarding – – cont … use an index card or post-it to represent every page each page might contain: l l l description of page summary of content summary of layout what should the visitor know, do, or feel where should the visitor go next what options do visitors have on each page ECA 228 Internet/Intranet Design I

Layout design Storyboarding – cont … tips to follow: l always place the most

Layout design Storyboarding – cont … tips to follow: l always place the most important content on a page as close to the top as possible l make sure all pages have a consistent layout l make sure navigation is easy and consistent l avoid forcing the user to use the browser’s back button l be careful of animation and flashing elements, since these may distract the visitor l use pop-ups and pop-unders with care ECA 228 Internet/Intranet Design I

Layout design cont … Layout: Navigation – – navigation should be consistent on every

Layout design cont … Layout: Navigation – – navigation should be consistent on every page, in the same place, and of the same style. consider creating a site index, one page which contains all the links to all the pages on the site. Layout: Web Page Layout – – – Choose a uniform page layout for all the pages in your site. Identify one or two effective layouts, create templates, and use them. Layout pages with tables or CSS, or a combination of both. ECA 228 Internet/Intranet Design I

Layout design cont … Layout: Alignment – – align HTML elements use a table

Layout design cont … Layout: Alignment – – align HTML elements use a table to align form elements Layout: Proximity – – – place related elements in close proximity with each other place header tags close to related text scattered information looks unsure and disorganized ECA 228 Internet/Intranet Design I

Layout design cont … Layout: Repetition – Repeat items on each page that tie

Layout design cont … Layout: Repetition – Repeat items on each page that tie the site together: l l l menus logos colors images buttons ECA 228 Internet/Intranet Design I

Layout design cont … Layout: Contrast – Contrast, or differences in elements, may help

Layout design cont … Layout: Contrast – Contrast, or differences in elements, may help to guide a visitor around the page. Many types of elements can be contrasted: l l large text with small text font styles thick and thin lines light and dark colors horizontal and vertical space ECA 228 Internet/Intranet Design I

Layout design cont … Layout: Mapping elements – map or draw the elements found

Layout design cont … Layout: Mapping elements – map or draw the elements found on a page 700 X 115 160 X 25 Date 160 X 200 links Logo 540 X 25 text links 200 X 115 140 X 115 image 340 X 115 160 X 25 text 160 X 50 links image 340 X 50 text ECA 228 Internet/Intranet Design I 160 X 300 image

Website Design Site Design Concepts: Accessibility – – balance the latest technology with accessibility

Website Design Site Design Concepts: Accessibility – – balance the latest technology with accessibility for older computers and browsers know your audience. Site Design Concepts: Consistency – – create and use templates meaningful organization and structure help to guide users through the site ECA 228 Internet/Intranet Design I

Website Design cont … Site Design Concepts: Navigability – – wide and shallow structure

Website Design cont … Site Design Concepts: Navigability – – wide and shallow structure is preferred over narrow and deep one of the fastest ways to turn away users is to allow them to get lost while navigating your site – keep it as simple Site Design Concepts: Search Engines – – – use meta tags, especially keywords use alt tags in images resubmit to search engines periodically ECA 228 Internet/Intranet Design I

Website Design cont … Site Design Concepts: Seek User Input – – – email

Website Design cont … Site Design Concepts: Seek User Input – – – email forms answer email in a timely manner Site Design Concepts: Links to related sites – enhances credibility Site Design Concepts: New content – – new content keeps periodic visitors engaged update time-restricted content ECA 228 Internet/Intranet Design I

Web Page Design Concepts: General – – – – – pages should download quickly

Web Page Design Concepts: General – – – – – pages should download quickly consider resolution – many designers design for 800 X 600, others still design for 640 X 460 repeat key elements so that each page looks like it belongs with all the others avoid page clutter avoid page sprawl use contrast to set apart page elements avoid scrolling if possible, especially horizontal scrolling ensure accessibility for each page minimize advertising, animation, or anything else that may be distracting the name of the first page of the site must be named index. html (check with hosting service) ECA 228 Internet/Intranet Design I

Web Page Design cont … Page Design Concepts: Setup – format each page to

Web Page Design cont … Page Design Concepts: Setup – format each page to have the proper margins, indents, tables Page Design Concepts: Text – – the page’s background should not interfere with the text format the text properly: l l – – correct size avoid too much bold, italic, caps avoid underlined text, as it may be mistaken for a link avoid crowding text against the margins of the window, or against the borders of images ECA 228 Internet/Intranet Design I

Web Page Design cont … Page Design Concepts: Whitespace – – whitespace is more

Web Page Design cont … Page Design Concepts: Whitespace – – whitespace is more important in a website than it is in a paper document break up text using lists, paragraphs, etc Page Design Concepts: Color – color schemes should not strain the eyes ECA 228 Internet/Intranet Design I

Web Page Design cont … Page Design Concepts: Links – – avoid dead links

Web Page Design cont … Page Design Concepts: Links – – avoid dead links that don’t work anymore coordinate link colors with the rest of the page’s color scheme Page Design Concepts: Navigation – – navigation buttons or menus should not overshadow the rest of the page by being too large or distracting use the same navigation system on all pages ECA 228 Internet/Intranet Design I

Web Page Design cont … Page Design Concepts: Images and Graphics – – –

Web Page Design cont … Page Design Concepts: Images and Graphics – – – you may want to minimize use of images for faster loading make use of graphics to break up large areas of text place images relative to each other by using tables avoid images of awards you have won use the alt, width, and height attributes in the <img> tag make sure that images are not larger in dimension than the resolution you are designing for ECA 228 Internet/Intranet Design I

Web Page Design cont … Page Design Concepts: Animation – – use animation carefully,

Web Page Design cont … Page Design Concepts: Animation – – use animation carefully, as it may be very distracting consider running an animation once, then stopping it Page Design Concepts: Printer friendliness – If your page contains information that may be printed, consider creating a separate page for printing only ECA 228 Internet/Intranet Design I

Design Tools l Examples of graphical editors include: – – l Macromedia Dreamweaver Microsoft

Design Tools l Examples of graphical editors include: – – l Macromedia Dreamweaver Microsoft Front. Page Netscape Composer W 3 C Amaya Carefully consider the use of client or server side scripting to enhance your site: – – Java. Script PHP ASP Perl ECA 228 Internet/Intranet Design I

DTD l l l include at the top of every web page defines the

DTD l l l include at the top of every web page defines the standards to which the markup that follows must conform HTML 4. 01 – l Transitional, Strict, Frameset XHTML 1. 0 – Transitional, Strict, Frameset ECA 228 Internet/Intranet Design I

DTD l cont … HTML 4. 01 – Transitional l supports most tags, included

DTD l cont … HTML 4. 01 – Transitional l supports most tags, included deprecated tags use if in doubt works well on most current browsers <!DOCTYPE HTML PUBLIC “-//W 3 C//DTD HTML 4. 01 Transitional//EN” ”http: //www. w 3. org/TR/html 4/loose. dtd”> ECA 228 Internet/Intranet Design I

DTD l cont … HTML 4. 01 – Strict l no deprecated or presentational

DTD l cont … HTML 4. 01 – Strict l no deprecated or presentational tags <!DOCTYPE HTML PUBLIC “-//W 3 C//DTD HTML 4. 01//EN” ”http: //www. w 3. org/TR/html 4/strict. dtd”> ECA 228 Internet/Intranet Design I

DTD l cont … HTML 4. 01 – Frameset l l use for frameset

DTD l cont … HTML 4. 01 – Frameset l l use for frameset only use Transitional or Strict for frames inside the frameset <!DOCTYPE HTML PUBLIC “-//W 3 C//DTD HTML 4. 01 Frameset//EN” ”http: //www. w 3. org/TR/html 4/frameset. dtd”> ECA 228 Internet/Intranet Design I

DTD l cont … XHTML 1. 0 – complies to stricter standards <!DOCTYPE html

DTD l cont … XHTML 1. 0 – complies to stricter standards <!DOCTYPE html PUBLIC “-//W 3 C//DTD XHTML 1. 0 Transitional//EN” ”http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd”> <!DOCTYPE html PUBLIC “-//W 3 C//DTD XHTML 1. 0 Strict//EN” ” http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd”> <!DOCTYPE html PUBLIC “-//W 3 C//DTD XHTML 1. 0 Frameset//EN” ” http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -frameset. dtd”> ECA 228 Internet/Intranet Design I

Validator l W 3 C Validator – – – http: //validator. w 3. org/

Validator l W 3 C Validator – – – http: //validator. w 3. org/ documents must include DTD and encoding validate existing web pages by entering url upload local files from your computer CSS validator http: //www. justustwo. com/ECA 228/lab 6. htm ECA 228 Internet/Intranet Design I