Planning a Website PPT - Teacher

waisttherapeuticSoftware and s/w Development

Nov 4, 2013 (3 years and 9 months ago)

67 views

Planning
a Web Site

Web Design

Web site Development Process

Planning Process


Six steps


Define the site’s purpose


Identify the site’s target audience


Determine the site’s general content


Select the site’s structure


Design the look and feel of the site


Specify the site’s navigation system

1. Define Purpose


Goals


Results you want your Web site to accomplish


Objectives


How you will accomplish the goals


Purpose Statement


summarizes your site’s goals and
objectives


2. Identify Target Audience


Visitors to which your site is targeted


who do you want to
view your site


Profile


Requires research


Demographic characteristics


Psychographic characteristics


Wants, Needs, & Expectations


Complete a needs assessment

3. Determine Site’s Content


Home page


answer who, what, where


Underlying pages


Splash pages


Value added content


text, images, audio, video, animation


Activity


Exploring Web Page Animation & Multimedia
(p86)

4. Select Site’s Structure


Arrangement of the home page to the site’s other pages


To do this use


Text outline


Storyboard


Flowchart


Types of Structures


Linear/tutorial


Pages organized and presented in a specific order


Example


a how to web site (steps performed in a sequence)


Random or webbed


No specific order


Hierarchical


Organized into categories & subcategories


Example


a
KSU

Web site

5. Design Look & Feel of Site


Visual Consistency


repeat design features


Helps to strengthen site’s visual identity and brand


Color & Visual Contrast


Consistent use of same colors


Choose background & text colors to provide contrast and enhance
readability


Page Layout


standardized arrangement of content elements creates a
sense of balance and order


Can use tables or CSS


6. Specify Navigation System


Should be easy for visitors to understand and follow


Consists of


Different types of links


text, image, related links presented as
menus, bars, site maps, search bar, frames, etc.


Should be user based and user controlled

Links


Text


Use text that clearly identifies the target page, i.e. the page’s
title


Underline (ensures accessibility by those who cannot see color)


Image


Entire image can be linked or a part of image (known as a
hotspot)

Links


Menu


list of related links


May contain multiple levels of links display as pop
-
out menus


Bar


uses graphic buttons


Pointing to button displays a drop
-
down menu


Tabs


best when linking to alternate views of the content

Links


Breadcrumb Trail


Hierarchical outline or horizontal list
-
shows site visitor the path
taken (order they have navigated the site)


Site Map


summary page of links


Similar to an index


Search Feature


gives ability to quickly locate info


Frames


used to divide screen into multiple areas


Frameset


master page in which multiple pages displayed

Navigation Design Tips


User based and user controlled


Place major links at top and/or down left side of page (promote
visual consistency and usability)


Avoid ambiguous text in links


Links should clearly identify target pages


Include a link back to the home page or underlying pages


Follow WAI guidelines


Typography and images

Typography


Font Sizes & Styles


Typeface


Type style


Type size


Font


specific typeface, style and size




Types of Fonts


Serif


Feet, Times New Roman


Sans Serif


No feet, Arial


Cursive


Replicates handwriting


Fantasy


Use for decoration


Monospace


equal spacing between characters



Font Selection


Font Selection


choose based on


Readability


TNR, 16 pixels is default for both IE and Firefox


Availability


Mood


Fonts can set a mood or specific state of mind


Key


you want to promote not detract from site’s message


Activity


Exploring Fonts (p136)



Images


Add value to site


Want them to match or complement color scheme


Accurately represent content if they are linked


Contribute to overall mood of site and support site’s message


Activity


Exploring the Effective Use of Web Page Images
(p138)


Image Formats


Bitmaps


GIF


JPEG


PNG

Bitmaps


Raster Images


Created pixel by pixel


Can be edited in software such as Paint


Resolution dependent

cannot resize without losing some
image quality


Vector Images


Group of separate drawing objects


Resolution independent


can resize without loss of image
quality


Can convert to bitmaps

JPEG


Joint Photographic Experts Group


group that published
image compression format standard


Used for digital photos, photo
-
like paintings, watercolors,
and illustrations more than 256 colors


Less loss quality when compressed

GIF


Graphics Interchange Format


Bitmap image file format


Original image format used on the Web


Maximum of 256 colors


Suitable for basic solid color images
-

cartoons, diagrams and
navigation buttons

PNG


Portable Network Graphics


Developed as a free open source image format to replace GIF
format


Greater range of colors (16 million)


Not widely used due to lack of browser support

Multimedia & interactivity elements

Multimedia


Some combination of text, images, animation, audio and
video


Goal is to produce stimulating, engaging Web pages


Drawbacks


download time, need for browser plug
-
ins, uses
large amt of bandwidth, may not be accessible to visitors
with hearing or visual impairments


Animation


Used to catch visitor’s attention, demonstrate a process or
illustrate a change over time


Forms


animated GIFs, Flash movies, avatars, gadgets

Animated GIFs


Frames (images) are shown in a sequence


Usually states as frames
-
per
-
second or fps


Gives the illusion of movement or animation


Many available on the Internet


Gif Animations


Do a search


keywords: animated GIFS

Adobe Flash


Visitors must have the Flash media player plug
-
in


Frame
-
by
-
frame animation


Designer changes image manually


Animation with tweening


Designer identifies original and final appearance and/or
location of image


Software automatically creates frames with image changes

Avatars


Alternative personas or virtual identities


Used for gaming or 3D virtual worlds


Virtual models used by some retailers


Lands End


Gadgets or Widgets


Small code objects


Provide dynamic Web content


clocks, weather reports,
breaking news headlines, etc.


Google Gadgets

Audio & Video Elements


Downloadable or streaming


Downloadable


media must be downloaded in its entirety
before it can be played on your computer


Streaming


media begins to play as soon as the data starts to
stream or transfer from server to browser

Downloadable Media

Advantages

Disadvantages


Once downloaded can be
accessed over and over


Utilizes HTTP protocol to
transfer data


does not
require a specific media
server


Can take a long time to
download


dependent on
speed of connection and
size of file


Usually large file


uses
considerable storage space
on your computer


Streaming Media

Advantages




Disadvantages


Random access to data


you have control to choose
file portion want to play


Consumes RAM only while
being played


High bandwidth
requirements


Frequently requires a
specific media server to
transfer data

Interactive Elements


Web
-
based forms


Javascript


Scripting language used to create rollover buttons,
banners, pop
-
up windows


Applets


small program


execute within a browser


Game simulations


Does not require a plug
-
in

Interactive Elements


Servlets


Similar to an Applet


Executes from a server versus from within the visitor’s browser


Blogs


Live Chat


Promoting & Maintaining a Web
site

Testing


Perform usability testing before publishing


Self
-
testing


Look at site structure, page layout, color scheme, etc.


Does page function and confirm to design plan


Audience testing


Provide insight as to how potential visitors will respond to and use your
site

Publishing


Server space


Individuals & small businesses obtain through
a Web Hosting Company


Charge a monthly fee


How do you know which one to choose?


Upload Web Site folders & files


Use FTP Client (File Transfer Protocol)


software


WYSIWYG Editor

Maintenance & Evaluation


Keep content up to date


Check for broken links


Gather feedback


act on feedback


Mechanism on site


Check out and add new technologies