Download Design Principles - Just Us Two Photography

ECA 228 Internet/Intranet
Design I
Design Principles
Design

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

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

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

choice of URL
–
–

to find if a domain name is available
–
–

easy to remember
similar to name of company
whois.net
networksolutions.com
prices range from $15 - $35 per year
ECA 228 Internet/Intranet Design I
Planning concepts & guidelines

choice of host
–

self-hosting
reputable hosting service
–
price


ranges $7 - $20 per month
additional costs for secure sites
ECA 228 Internet/Intranet Design I
cont…
Planning concepts & guidelines

choice of host
–
other characteristics:









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
 How do I promote and advertise?
–
Search engines


–
–
–
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
 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
 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
 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
 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

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
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
IE6
IE5
O7
MOZ
NN3
NN4
NN7
Other
March
71.8
11.2
2.0
9.6
0.4
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 data:
WinXP W2000 Win98 WinNT Win95
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


–
–
–
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 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 is to get around easily to all parts of
the site, or jump between sites.
2 elements to consider when planning navigation:

Browser navigational elements
–
Back, Forward buttons
– Drop-down location menu
– Scroll bars

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 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 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 consider their use
carefully.



Do they distract the visitor?
Do they add to the overall aesthetics of the site?
Is the file size prohibitive?
Content: Frames
–
Test carefully


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 lay out your pages
when nested, may slow down the load time for a web page
Content: Forms
–
collect information from users


process the information
validate the information
–
server-side using JavaScript
– client side using PHP, ASP, PERL, etc.
ECA 228 Internet/Intranet Design I
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 JavaScript, PHP, ASP, etc
ECA 228 Internet/Intranet Design I
Elements of web design
cont…
Content: JavaScript
–
–
add interactivity to your site
support for JavaScript is not equal among all browsers




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


the first thing a visitor notices when a web
page loads, even before looking at the
content, is layout
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, known as
“chunking”






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
Level 3
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 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 plan their
films, even before shooting any stock
web designers can use a similar technique, using index
cards or post-it notes



top-down approach
bottom-up approach
build-out approach
ECA 228 Internet/Intranet Design I
Layout design
cont …
cont …
use an index card or post-it to represent every page
each page might contain:
Storyboarding
–
–






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 …
cont …
tips to follow:
 always place the most important content on a page as
close to the top as possible
 make sure all pages have a consistent layout
 make sure navigation is easy and consistent
 avoid forcing the user to use the browser’s back button
 be careful of animation and flashing elements, since
these may distract the visitor
 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 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 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 the site
together:





menus
logos
colors
images
buttons
ECA 228 Internet/Intranet Design I
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:





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 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
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 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 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
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
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 have the proper margins, indents, tables
Page Design Concepts: Text
–
–
the page’s background should not interfere with the text
format the text properly:


–
–
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 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 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
–
–
–
–
–
–
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, 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

Examples of graphical editors include:
–
–
–
–

Macromedia Dreamweaver
Microsoft FrontPage
Netscape Composer
W3C Amaya
Carefully consider the use of client or server side
scripting to enhance your site:
–
–
–
–
JavaScript
PHP
ASP
Perl
ECA 228 Internet/Intranet Design I
DTD



include at the top of every web page
defines the standards to which the markup
that follows must conform
HTML 4.01
–

Transitional, Strict, Frameset
XHTML 1.0
–
Transitional, Strict, Frameset
ECA 228 Internet/Intranet Design I
DTD

cont …
HTML 4.01
–
Transitional



supports most tags, included deprecated tags
use if in doubt
works well on most current browsers
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
”http://www.w3.org/TR/html4/loose.dtd”>
ECA 228 Internet/Intranet Design I
DTD

cont …
HTML 4.01
–
Strict

no deprecated or presentational tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
”http://www.w3.org/TR/html4/strict.dtd”>
ECA 228 Internet/Intranet Design I
DTD

cont …
HTML 4.01
–
Frameset


use for frameset only
use Transitional or Strict for frames inside the frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
”http://www.w3.org/TR/html4/frameset.dtd”>
ECA 228 Internet/Intranet Design I
DTD

cont …
XHTML 1.0
–
complies to stricter standards
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
” http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
ECA 228 Internet/Intranet Design I
Validator

W3C Validator
–
–
–
–
–
http://validator.w3.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/ECA228/lab6.htm
ECA 228 Internet/Intranet Design I