Transcript Web Design Planning

Planning & Designing a Web Site

The phases of a successful Web site
development project includes:
◦
◦
◦
◦
◦
◦
Planning the site
Setting up the basic structure
Creating the pages
Testing the pages
Modifying the pages
Publishing the site
Planning & Designing a Web Site
2
Plan
the site
Set up the
basic structure
Creating the pages
Testing the pages
Modifying the pages
Publishing the site
Planning & Designing a Web Site
3
Planning & Designing a Web Site
4


The most important part of a successful
website
Steps include:
◦ Determining the site goals
◦ Identifying the target audience
◦ Conducting market research
 Gathering content
 Budget
 Schedule
◦ Creating end-user scenarios
 Updates
Planning & Designing a Web Site
5


Creating a storyboard or a flowchart to
represent the pages in a Web site and the
relationships of the pages
Steps include:
◦ Creating categories of information
◦ Creating a flowchart (storyboard)
◦ Gathering and organizing information
Planning & Designing a Web Site
6
Planning & Designing a Web Site
7

Steps include:
◦ Creating a site concept
 Site concept – general theme that unifies the various
elements of a site and contributes to the site’s look and
feel
◦ Considering accessibility issues
◦
◦
◦
◦
◦
 Accessibility – the quality and ease of use of a Web site
Selecting colors
Selecting fonts
Choosing graphics and graphic styles
Sketching the layout
Checking the design for logic (easy navigation)
Planning & Designing a Web Site
8

There are two major systems of color:
◦ Subtractive color system – uses cyan, magenta, and
yellow as its primary colors
 Other colors are created by mixing these primary
colors
◦ Additive color system (RGB system) – uses red,
green, and blue as its primary colors
 Other colors are created by combining these primary
colors
Planning & Designing a Web Site
9
Magenta
Red
Blue
Yellow
Cyan
Green
White
Planning & Designing a Web Site
10

Keep in mind the following basic color
concepts and strategies:
◦ Keep it simple – less is better
◦ Include three to six colors per site – use these
same colors for all the site’s elements
 E.g. text, background, links, logo, buttons, navigation
bar, and graphics
◦ Consider the mood to create – colors create a
mood
 Colors have a psychological effect on people
 E.g. blue for calming, red for hot or intense, etc
◦ Keep the target audience in mind – different
cultures do not always have the same
psychological associations with colors
Planning & Designing a Web Site
11

There are three categories of typefaces (generic
font families)
◦ Serif – a delicate line (called a serif) finishes off the main
strokes of each character
 E.g. Times New Roman
◦ Sans-serif – the delicate lines are absent
 E.g. Courier, Arial, Helvetica
◦ Monospace – each letter takes exactly the same width in the
line
 Monospaced fonts are serif fonts
 E.g. Courier

Proportional - fonts that are not monospaced
◦ Each letter takes up a different width on the line
proportional to the width of the letter
Planning & Designing a Web Site
12

Selecting fonts also involve choosing a font
color, font size, and sometimes a font style
◦ Font color – color applied to the font
◦ Font size – size of the font
 The two types of font sizes are: relative and specific sizes
 Relative font sizes – range from xx small to xx large
 Specific font sizes – fixed sizes using pixels, etc
◦ Font style – stylistic attributes applied to the font
 E.g. bold, italic, underline
Planning & Designing a Web Site
13

Keep in mind the following strategies when
selecting fonts:
◦ Less is more – use no more than two fonts in a
Web site
◦ Convert headings to images – some fonts may
not be found on every computer
◦ Consider what you are trying to convey – choose
fonts that support the concept for the site
 Fonts create an impression about the site
 E.g. horror movies sometimes use gothic fonts
◦ Consider accessibility – visually impaired users of
the Web site may have a hard time reading
certain fonts
Planning & Designing a Web Site
14

Some strategies for choosing graphic styles include
the following:
◦ Be consistent – consistency in choosing graphics gives your
site a cohesive look
◦ Design with purpose – find a reason for adding each
graphic to the site
◦ Consider size – reduce all graphics to the smallest possible
file sizes without sacrificing the quality of the image
◦ Consider the target audience – choose graphics that will not
keep users from enjoying the site by making the pages load
too slowly
◦ Support your concept and metaphor – visual symbols are
very powerful tools for conveying information
Planning & Designing a Web Site
15

Layout – the position of elements on the
screen
◦ The layout must support the site goals
◦ It should be easy for users to follow and appeal to
the target audience
◦ The main Webpage must be as compact as possible
and most appealing to the target audience
Planning & Designing a Web Site
16




Browsers and browser versions
Screen sizes
Speed on different connections
Testing is a continuous process
Planning & Designing a Web Site
17



Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing process
Planning & Designing a Web Site
18

Transfer all the files to a Web server
◦ Web server: a computer that is connected to the
Internet with an IP address

A Web site must be published to the Web
server before it can be viewed by others
IP: Internet Protocol

ISP: Internet Service Provider

FTP: File Transfer Protocol

◦ IP address
◦ Example: 207.456.123.2
◦ Hosts Web site
◦ Host, host directory, login, password
Planning & Designing a Web Site
19