Aspects of Web Development

Website Development Process

1 April 13, 2024

 Development Process
Numerous steps in the web design & development
From gathering initial info, to creation of web site,
and finally to maintenance to keep current
Exact process vary from designer to designer, but
the basics are generally the same:
 Planning
 Design
 Development
 Testing and Delivery
 Maintenance

2 April 13, 2024

 Phase One: Planning
Involves information gathering and organizing the
gathered information.
Gather info is crucial in successful design
Involves a solid understanding of website owner
What are business goals and dreams
How we can utilized the web to achieve the goals
Important that web designer starts off by asking
questions to help understand business needs.
Certain things to consider are:

3 April 13, 2024

 Guiding Principles of Website
Planning
1. Purpose of the Website.
2. Website Goals & objectives
3. Target Audience
4. Structure, Content & Navigation
5. Site Map (Web Specification)

4 April 13, 2024

 Purpose
What is the purpose of the site?
Are you providing info, service, or sell products?
Need to define customers' needs and purpose of
website to determine features and functionality
Answers to these questions determine design:
What does your business do?
Who are your customers (and potential customers)?
What type of info and services do your customers want?
Could you deliver the information in a better way, or offer
additional services?
What do your competitors offer via their websites?

5 April 13, 2024

 Goals & objectives
What do you hope to accomplish by building
this web site?
Two of most common goals are to make money
or share info
Goals: desired long-term results
“to increase the sale by 30% over the next
three quarters”
Objectives: specific means & methods to
accomplish goals
“by providing photos and text descriptions of
items”
6 April 13, 2024
 Target Audience
Is there specific group of people that will help you
reach your goals?
Designer must know:
Who the audience is
Why are they coming to the site
What are they looking for
How do they think
Important to visualize ‘ideal’ person to visit your
web site
Consider their age, gender or interests – this will
help determine best design style for your site
The company or the organization of the web site is

7
in general NOT the audience of the web site April 13, 2024
3 Sites, 3 Audiences

Yahooligans
Children
Limited choices
Pictorials
Simple words

April 13, 2024 8

 3 Sites, 3 Audiences
Nairobi SE
Investors
 Easy and quick
access to many
types of
information
 Complex and
specialized
vocabulary
 Little need for
pictures

April 13, 2024 9

3 Sites, 3 Audiences

NOAA
The National
Oceanic and
Atmospheric
Administration is an
American scientific
agency within the
United States
Department of
Commerce focused on
the conditions of the
oceans and the
atmosphere.
Multiple
Audiences
April 13, 2024 10
 Structure, Content & Navigation
What kind of info will target audience be looking?
Are they looking for specific information, a
particular product or service, online ordering…?
Visitors should be able to find info easily and
quickly.
Need to break the info into smaller, clearly
identified sections, with a hierarchy for headings
and body text
Good design and clearly structured content makes
navigating through a site intuitive and efficient
Content management is also important
11
How will you manage your site content? April 13, 2024

 Site Map (Web Specification)
Develop a site map.
Site map is a list of main topic areas, as well as
sub-topics
Serves as a guide as to what content will be on the
site
Essential for developing a consistent and an easy
to understand navigational system
Keep the end-user in mind when designing your
site
You also decide on technologies to be
implemented
12
Elements such as: interactive forms, ecommerce,
April 13, 2024
 Site map Example

13 April 13, 2024

 Phase Two: Design
Determines look and feel of site
Target audience is a key factor
Site aimed at teenagers, for example, will look
different from one meant for a financial institution
Important to incorporate company logo or colors
to help strengthen identity of your company on
web site
Create one or more prototype designs for your web
site
Allow user access to the prototype through the
process
Communication between user and designer crucial
14 April 13, 2024
to ensure the final web site will match need & taste
 Phase Three: Development
Actual and functional site created during this phase
using graphical elements from prototype
Typically done by first developing home page,
followed by a “shell” for interior pages.
Shell serves as a template for content pages and
contains main navigational structure for the site.
Content distribution in appropriate areas will then
follow
Elements such as interactive contact forms,
animations or shopping carts implemented & made
functional
15 April 13, 2024
 Phase Three: Development …
Should make the in-progress web site available to
user for viewing to suggest any additional changes
or corrections
Technically, successful web site requires an
understanding of front-end web development tools
Involves :
writing valid HTML / CSS code that complies with
web standards
Maximizing functionality
Accessibility for as large an audience as possible.

16 April 13, 2024

 Phase Four: Testing and Delivery
This will include testing things such as:
 complete functionality of forms/scripts
Compatibility issues (viewing differences between
different web browsers)
Ensuring that the web site is optimized to be viewed
properly in the most recent browser versions
Validation against current web standards
FTP program is used to upload site files to the server
Domain name registration and web hosting also crucial
After hosting do a final system testing to confirm that
the site is functioning properly

17 April 13, 2024

 Phase Five: Maintenance
Updating content or loading new content as need
arises is requisite for any website
CMS – provides hands on update of content by
the user
 This would be decided upon during the Planning
stage
With a CMS, the designer will utilize online
software to develop a database driven site for you

18 April 13, 2024

 Web Design
Design Principles
Design involves color choice and design layout
The colors you choose affect visitor's perception
and design layout help "pull the design together“
and improve usability
Good design invisible, bad design often screams
out loud
Important issue to consider in choosing a color
scheme is to remember to design for those with
color blindness;
19 Helps make your site usable for everyone elseApriltoo!
13, 2024
 Graphics Design Software
Various graphic design tools used for various
means on web:
Adobe Photoshop - for creating superior graphics and
editing photographic images
Adobe Illustrator - for creating vector images &
illustrations
PaintShop Pro - similar to Photoshop, but less
sophisticated
Macromedia Fireworks - similar to Photoshop, but is a
vector based tool, it allows all elements to remain
editable and can be integrated with Dreamweaver
Macromedia Flash

20 April 13, 2024

 Graphic Formats
Graphics can hugely add to visual effect of a web
site
But; they also add to the download time
 Web graphics can be static, animated or
photographic
These are usually either gif, jpg or png file formats
It is virtually impossible to "teach" on-line how to
create graphics; takes creative talent and
knowledge of tools
Most tools provide both a within-product tutorial
as well as a booklet.
21 April 13, 2024
 Choosing Color
Choose palette of colors to base design on – 4
sufficient
May sound extreme
Use varying tones of same shade to highlight
Tips on choosing color
Think about the impression you want to give:
Modern, welcoming, cosy, corporate, professional, fun
etc
Choose colors which match these
E.g. Modern colors are clean, bright, such - blue &
yellow
Welcoming/cosy colors - oranges, yellows, green
22 April 13, 2024
Corporate styles are clean - blue, grey, white
 Design Layout
Use graphics software - Adobe or Macromedia
Fireworks
First, sketch out a couple of ideas on paper
Gives an idea of where you'd like elements, such
as the navigation, before getting into design proper
Decide where you are going to locate the
navigation, and fill this with navigation items to
mark out sufficient space
Produce several versions to see which you prefer

23 April 13, 2024

 Usability
ISO 9241-11 - extent to which a product can be
used by specified users to achieve specified goals
with effectiveness, efficiency & satisfaction in a
specified context of use
Usability measures the quality of a user's
experience when interacting with a product or
system—whether a Web site, a software
application, mobile technology, or any user-
operated device.
In general, usability refers to how well users can
learn and use a product or software to achieve their
goals and how satisfied they are with that process
24 April 13, 2024
 Usability …
Most important aspect of web design
Addresses issues of response time and navigability
Users want to find the information they are
looking for - if they don't find it quickly, they will
look elsewhere
Have the end-users in mind
Don't sacrifice usability for design
Think about usability [design] as one aspect of
design and incorporate it into the system in the
development stages
This will make your site look good and be useable
25 April 13, 2024
 Navigation
Important aspect of site that helps users find way around
and tells them where they are and where they can go
Provides visual means for demonstrating info hierarchy
Good navigation often reflects good site structure.
Usually found in these forms:
Navigation panel/Menu
Location indicator device (breadcrumbs)
Home button
Links
HTML title
Site map
Search facility
Page numbering
26 April 13, 2024
27 April 13, 2024
28 April 13, 2024
29 April 13, 2024
 Structure
Consists of having good site structure - having a clean
and logical hierarchy to the site and good page structure
Helps visitors understand importance of different sorts
of information on the page.
Organize site structure before actually creating any files
There are many different styles of page structure that
depend on the actual page content
But there are general rules applicable e.g. keeping most
important information "above the fold" - so users don't
have to scroll down to use any navigation
There are two aspects:
Site structure and Page structure

30 April 13, 2024

 Site Structure
Simplicity & logic essential in site construction,
both for creator as well as user
Enables easy editing & logical hierarchy to
navigation
If structure makes sense, site navigation will also
make sense to user
Site structure should be hierarchical and allow user
to get to more detailed info through navigation
Ideally, user should be able to reach all levels of
the site through any page

31 April 13, 2024

 Page Structure
Many different styles of page structure, that
depend on the actual page content
Best results come after experience and
experimentation
 Use Internet as a resource - copy ideas you like
But remember to consider usability.

32 April 13, 2024

 Writing Content
Most users don't want to read reams of text on-line
Research shown that people tend to scan text on screen
Note the following issues:
Less is more - keep it concise
Keep sentence structure as simple as possible
Keep sentences short
Frequently highlight important words or phrases
Use bullet points or numbered lists where possible
Keep page length short – avoid vertical scrolling
Use links to highlight and take the user to further info
Avoid centering text - it's harder to read
Don't use all capitals - harder to read
Avoid excessive italics - these are hard to read – user for emphasis

33 April 13, 2024

 Simplicity
Is the key
Use headings & sub-headings to separate sections
of text
Use white space wisely
Make sure you have no more than 12 words per line
Write concisely - not an essay
Highlight important words
Use a pale background with dark text
Use a dark background with light text
Avoid colors which clash and especially
combinations which are hard for color-blind
34
people to read April 13, 2024
 Accessibility
Accessibility to everyone, regardless of:
Browser,
Platform,
Operating system,
Plug-in or
Disability
You should endeavor not to shut any web user out
Anyone is a potential visitor and/or customer.
Having an accessible web site, makes using your
web site that much easier for everyone.

35 April 13, 2024

 Consistency
Promotes usability [learnability] of system
Navigation & design elements should kept in a consistent
location throughout the site
Logo, navigation elements, headings and common textual
Try to keep consistent with other web sites to further help
your visitors
Many sites place their logo in the top left corner
Another common "web standard" is to keep unvisited links blue
and visited links red/purple
Keep font styles the same across the site
If you use color as a visual clue to navigation, keep the
colors consistent
Links should be underlined and have consistent colors for
unvisited, visited etc April 13, 2024
36
 Graphics
Use sparingly - they add to download time
Keep as small in file and physical size as possible
Always put width and height specifications in the
img src tag - speeds up download time
Always put border="0" in the img src tag or some
browsers will display a blue border around the
image if it becomes a link
Always specify meaningful alt text in the img src
tag - some people switch off graphics in their
browsers

37 April 13, 2024