WEBDESIGN

Learning outcome 1: Understand Website Design Concepts

Web design depicts the affiliation among web skill and
scheme impressions. Web design classifies the way of
presentation and the way of presenting the web skill and scheme.
It also distinguish the successions among web trappings and
expertness.
Generation of simple websites made by the practice of html
attentions. Web scheme and Presentations are used for
structuring web pages, along with HTML, CSS, SVG, expedient and
tools for web applications.
Web is a combination of processers in all over the earth. Web
customers can access the web pages by using the web browser
because all the information is kept in the web pages.
LO1.1: Discuss the design concepts that have to be
considered when designing a website
Web mechanisms are founded on the server architecture.
Handling the certain category of the server and the consumer
aptness are mutually accountable. And the aptness are formed as
3-tier presentation.
Web browser establishes the first level, that is, a middleware
device by means of certain lively web have contented skill.
Example: Active Server Pages(ASP), Hypertext Preprocessor(PHP),
Java Server Page (JSP), Common Gateway Interface(CGI) establish
the mid-tier and the database server exits as the third level.

LO1.1.1 WEB SERVER

Operations that are performed by the client-side refers to the
client-server relationship in a computer network. Client-side
operations may require access to information or functionality that
are available on the client but not on the server, because the user
needs to observe them or provide input or the server loss the
processing power to do the operation in a timely manner.
If operations can be performed by the client without sending
the data through the network it may take less time, use less
bandwidth, incur lesser security risk.
Programmers may write their own server, client and
communication rules in the case of specialized application that
can only be used with one another.
LO1.1.2: WEB SERVER

A web server is simply a computer program that distributes

web pages as per their request. The program that usually run on a
machine is called server.
If someone seats at the computer and input an address to an
internet browser like IE or Firefox, the browser sends the request
to the internet that requiring to see the web page found at the
address.
The program on the server deliver the data to the correct
destination through the Internet protocol address (IP) address and
this allows to communicate over the network.
In addition every web page has unique address called as
Uniform
Resource
Locator
(URL).
Example:www.examples.com/page2.htm. When the user types
this address on the web browser the machine sends the request
to the IP address of the machine that runs on the web server to
send back all the contents based on the request.
On the server-side it accept the request and send the
content to IP address of the machine asking it. Then the browser
converts it into text, video, pictures, links, etc.
The First common web server software that usually
accepting and answering the page request is Apache and the
most common is Internet Information Services published by the
Microsoft.
LO1.13: Database Server
Based on the client-server model the database server in a
computer that supplies the database services to other computer
programs.
To access the database on the client-server model the Data
Base Management System allows database server functionality
and few DBMSs Example: MySQL.

This type of server is accessed either by the front-end of

users pc or the back-end that runs on the server and perform
task such as data analysis and storage.
In a master-slave model, the master servers are central and
primary location data and the database slave servers are
synchronized supports of the master acting as proxies.
Learning
websites

Outcome

2:

Be

able

to

design

interactive

To design an interactive website one must have the skills in

programming and some other create a website using the tool
Dreamweaver from the scratch.
And the second thing to consider is it should be attractive.
Then decide what are the resources will be needed to build it.
LO2.1: Design an interactive website to meet given
requirements
The major ones are:

Goal Driven Design

Interface as magic
Usability
Affordances
Learnability

LO2.1.1: Goal Driven Design

The comprehensive results of user study are necessity to
arousing the best design response and isnt strictly required by an
interaction designer.
While designing, the artist must acknowledge their
constraints, then device the solution. Users generally have a
number of goals in mind when using the website.
LO2.1.2: Interface as magic

For the interest of transience, Ive contracted a number of

interaction Design best practices into this phase Alan Cooper says
that ideally, interfaces wouldnt exist at all in the mind of the user
they should simply see the interface as an extension of the
underlying system.
To this effect, the best interaction designers dont exist they
dont take a long time to load/respond; they dont give users
cause for grief.
Give the users just what they need to accomplish their goals
and then over along.

LO2.1.3: Usability
Usability release the relief with which people employ a tool
in order to achieve a particular goal.
Throughout the practice, the interaction designers must
concern themselves with the inherent usability of the interfaces
they design.
Interfaces which make the state of the underlying system
easy to understand and use are preferred.
LO2.1.4: Affordances
Affordances represent the action possibilities available
between an actor and their environment. Because affordances
express a great deal about the underlying functionality behind a
website or services, its essential that designers utilize this
concept consistently throughout their designs.
The best interaction designs are those speak for themselves
in which, as the saying goes, form follows function.
In other words, links should look like links, buttons should
look like buttons, search boxes should look like search boxes.

LO2.1.5: Learnability
The best interaction designers dont reinvent the wheel
every time a similar design patterns. Many online interaction
design patterns are documented in Yahoo1s design pattern
library.
In sum, if design problem at hand calls upon a truly unique
interface learnable, or, easily learned. This, in and of itself,
requires a strong knowledge of current design conventions,
affordances, and overall web usability.
A great deal of what comprises a usable interface is made up
of familiar components. If users are used to submitting a form
with a button, theyll look for a button when that time comes. This
is an example of an interface idiom, or pattern.
LO2.2: Evaluate web design with other users
LO2.2.1: Website Storyboard
Developing a website requires various stages like planning
and design. Graphical representation of structures and the
functionalities intended for the site are involved in the design
process.
The illustrated concept of the structure and the purpose of
the website is provided by the storyboards is one of the object of
the website developing and it is used in animation and film
industry and it is powerful tool used in management.
The fundamental process of the design phase in project
management is storyboards. After developing the flowchart,
which defines the appropriate structure of the website, it is
essential to reproduce that information through the storyboard.
It is important to maintain consistency as well as support of
all the content that is being provided so that other project
members are able to understand the purpose of each screen.

LO2.2.2: Mood board for website designing

A mood board not only gives you inspiration in going forward
with a project, but also is an effective time-saver and necessary
component in the creative process. By creating one, you can
tackle many issues early on that you would otherwise encounter
later on in the creative process.
Mood boards can prevent unnecessary frustrations as the
result of not having a clear creative direction and may cut the
overall time spent on a project in half as a result of careful
planning.
A mood board helps:
Translate a concept where words may fail
Create a picture in the clients head early on and let
them see exactly what youre planning and how their
site is shaping up before you even start properly
designing.
Cut
down
on
time
spent
revising
due
to
miscommunication
Establish the theme of the website that is soft or hard?
Clean or grungy?
LO2.2.3: Inline containers
SPAN caries no structural meaning itself, but it can be used
to provide extra structure through its LANG, DIR, CLASS, and ID
attributes and it is a generic inline container.
Style sheets are often used to suggest a presentation for a
given class or ID. Span should only be used where no other HTML
inline element provides a suitable on visual browsers, authors
may prefer to use an appropriate font style element.
The following are the examples:
<P><SPAN LANG=fr> La Revolution Tranquille</SPAN>
shook Quebec in the early 1960s.

<P><l LANG=fr> La Revolution Tranquille</l>shook Quebec in

the early 1960s.
These examples are identical in meaning, but the second example
uses the (l) element to suggest italic text.
LO2.2.4: Layout
Include:
1.
2.
3.
4.
5.

Wireframes
Not too much detail
Black/White/Grayscale only
Homepage
One or two subsequent pages

LO2.2.4.1: Color
Create a couple of color schemes based on client
preferences or your own for creating color schemes based on
themes is Kuler.
LO2.2.4.4: Inspiration
Include notes on why you like a particular website and how
you feel it can be best integrated into the design of their website.
Include reasons why the look will suit them.

LO2.2.4.3: Textures
Find some textures, real or hand-drawn, that you feel fit in
with the overall theme of the site.
LO2.2.4.4: Photography
At this stage you can either use photography the client has
supplied, or use stock photography to portray the overall theme
of the site.

LO2.2.4.5: Style
A certain mood board can be designed around various
adjectives such as:
Dark, glossy, slick, modern, edgy, hard, aggressive
Soft, muted, round, layered, elegant, realistic
Colorful, rough, sketchy, bright, illustration
In doing so, you create a wide variety of styles for the client
to choose from.
Learning Outcome 3: Be able to implement interactive
websites.
Implementing a website means passing from the design
stage to the completion and the launch of the site.
This involves:
Gathering all the contents necessary to populate the pages
of the site, and entering them into the pages (Content
Management).
Transferring the pages to a server, and testing those
Technical Aspects.
Launching the site by informing the public about its
existence.
LO3.1: Implement a fully-functional interactive website
using a design specification
LO3.1.1: Using Skip Navigation Links
Skip Navigation helps Internet users with special needs. It
refers to a link in a web page that lets users go directly to the
main content of the page.
Then we will take a look at the factors concerning skip
navigation and how to do it properly in your pages. There are
many internet users who have difficulties in using the keyboard
or the mouse.

There are also many Internet users with dexterity issues. If

there is a block of content or a set of links on every single
page, these people would need to tab or arrow down through
all the links to get to the main content.
To help these groups of Internet users, you need to provide a
skip navigation link. A skip navigation is like a book mark on a
page.
Here is a sample code for the skip navigation link, skipnav
link which goes on the top of the page:
<a href=#content>Skip to Content</a>
And this code you insert at the beginning of the content
where your block want to skip ends: <a name=content></a>
LO3.1.2: Use of Color
When discussing the design of a new site, a question that
consistently arises is How so I select the most effective colors?
Choosing the right color palette for z site is essential to
communicate your message, brand your product or services, and,
if you are an online business, sell your products.
Color communicates far more than most people realize.
Choosing wrong colors can be a disaster for your website.
The visitor demographics also can make a difference in how
colors are perceived. Young people are drawn more too saturated
colors than adults, who may find them garish or offensive.
Text and background color choices also readability, which
can be an issue for older visitors and those with visual
impairments.
LO3.1.3: Web Accessibility
Designing an effective website requires a lot of techniques,
skills and testing. Testing determines the usability of the website,
which ties into accessibility. Thus the most important things to
consider when creating a website is accessibility.

Accessibility is about making your website accessible to all

Internet users your website and access its content. Everyone
should have equal opportunity to access the web, regardless of
their limitations or browsing technology.
LO3.1.4: Keyboard Accessibility
Keyboard Accessibility is one of the most important aspect of
disability access. Blind people generally cannot use a mouse
because they cannot see where to click.
They use their keyboard almost exclusively. Additionally,
some individuals with low vision may use a keyboard for improved
interactions if the page is enlarged and the contrast is high.
Some people simply do not have hands, whether due to a
birth defect, an accident, or amputation. There is an almost
limitless list of conditions that could make mouse usage difficult
or impossible.
Those who cannot use a mouse may not be able to use a
keyboard either. Some use puff and sip devices activated by
airflow from the mouth. If a website is not keyboard-accessible,
you will shut many people out.
Others use single switch devices consisting of a piece of
hardware with one button that can be pushed.
LO3.1.5: Heading element<H1> to <H6>
Heading information may be user agents, for eample, to
construct a table of contents for a document automatically.
The following code shows all the heading levels, in use
<h1>Heading level1</h1>
<h2>Heading level2</h2>
<h3>Heading level3</h3>
<h4>Heading level4</h4>

<h5>Heading level5</h5>
<h6>Heading level6</h6>
Here is the result of the code
Heading level1
Heading level2
Heading level3
Heading level4
Heading level5
Heading level6
LO3.1.6: Cascading Style Sheet(CSS)Layouts
It is the most flexible way to create attractive, standardscomplimant websites. Even so, many web designers choose to
stick to the original HTML elements that they are familiar with in
order to implement their designs.
For example, HTML tables are often used in order to create
the seemingly complex layouts on some web pages. The article
will simply address the drawbacks of relying too heavily on tables
for layout as well as the benefits of Cascading Style Sheets.
It will also demonstrate how to implement a couple of page
layouts using HTML and Cascading Style Sheets as an alternative
to HTML tables.
LO3.1.7: Accessible Forms
The accessibility issue for forms is whether or not users with
disabilities, especially those who are blind or visually impaired,
can determine the purpose of a specific form control and interact
with it.
These are collected in a form element along with other
content including images and text. Usually form elements contain
at least one submit button (button or input type=submit).

A screen reader try to guess which text corresponds to the

on-screen prompt for a given control. Often they guess correctly,
but sometimes they are wrong. That is the problem. Being correct
most of the tie is not good enough for filling out forms on the web.
Screen reader user will be aware that a text entry field has
focus, or a text area or checkbox, but may not know what
information to type there or what being agreed to with the check.
Push buttons, input with type=button, and input with
type=submit include the value attribute, which is the text that
is placed on the button, like Submit, Search or go. That text
is immediately available to associative technology.
<input type=submit value=go/>

LEATN CENTER is dedicated to the provision of a first class

learning experience that will equip you with the skills, ability and
knowledge to successfully compete in your chosen discipline.
We are located in the heart of London city in a beautiful
borough Hammersmith and offer a wide range of full-time & parttime programs to Certificate, Diploma, Undergraduate &
Postgraduate levels.
And it has all the information that a students need to know
when he/she is planning to enroll. This website has 6 pages that is
index (home page), Courses, Programs, Teachers, Admission and
Contact.
The three CSS file are Layout, Reset and Style. Following are
the codes for the website I designed.
I COULDNT CAPTURE ALL THE CODING THROUGH PRINT
SCREEN METHOD. I WILL ATTACH A COPY OF THE CODING WITH
MY REST OF THE ASSIGNMENT.

Footer

Learning Outcome 4: Be able to test interactive websites

Actually, website work never ends. When all the design is
done, you have to test the site first before sending it to the World
Wide Web for the world to see.
There is a site Management software that can do this. These
software can help reconnect Graphics that may have been
accidently moved, change the name of a file and re-link it and so
many other things.
Some of the things that have to be checked for quality
assurance are multiple browser compatibility download time of
graphics, Flash components, or streaming media, hardware
requirements, memory size requirements, connection speed of
user, and load number of users your website can accommodate.
There are many companies now that are developing software
specifically for quality assurance. But this software is expensive.
Usually, e-commerce sites are load tested as they have a great
deal of software running on their sites.
Sometimes the best way to test your sites is by having an
actual person go through your site and let him tell you the
problems he encountered.
Site testing is essential so that every aspect of your website
is functioning, especially software. Site testing ensures that there
are no broken lines, no missing graphics, no misspelled words, no
bugs in the software, and the download time is as specified.
There are many software out there that do the site testing
for you. I will tackle only a few here that were recommended by
experts. This will give an insight on how the software works and
how extensive the testing is.
LO4.1: Critical review and test the website

LO4.1.1: Content Checking

The website has to be tested for accuracy, completeness,
consistency, spelling and accessibility. These areas are the first
things judged by the user.
Users must have the best possible experience with your
website. Even just a faculty image can create a bad impression on
the user and may not visit your site again.
Testing for this is very simple and as straightforward as they
are. Tests for content may not be the first thing in the designers
mind but it is the most important of all the tests.
LO4.1.2: Configuration Testing
This test involves the operating systems platforms used, the
type of network connection, the type of internet service provider;
and the browser used.
The development team must have these in mind so that
there will be very title changes to be made if any. And also, the
test environment must be properly configured for all these
considerations.
LO4.1.3: Usability
Designers should always remember that the experience of
the user in the website must be pleasant as possible. There may
be cases when the user is someone very familiar with website
browsing but not necessarily a testing expert.
There are standards and guidelines for tests for usability.
However, designers and/or project manager should not rely on
them too much since complying with these standards doesnt
necessarily ensure that the site will meet the needs of the users,
their tasks and their work environments.
Design guidelines must be set and they must be measurable
so that they can be easily incorporated into the tests.
LO4.1.4: Browser Compatibility

A website has to be designed to be compatible for a majority

of the browsers. This still leaves room for creativity. Even with
Microsofts Internet Explorer and Netscapes Navigator this is an
issue because of the different versions people are or still are
using.
Some of the things to check are centering of objects, table
layouts, colors, monitor resolution, forms, and buttons. The code
that executes from the browser also has to be tested. There are
different versions of HTML.
Some of the other codes to be tested are Java, JavaScript,
ActiveX, VBScripts, CGI-Bin Scripts and Database access. CGI-Bin
Scripts have to be checked for end-to-end. Operations and is most
essential for e-commerce sites.
The website has to be tested in each supported browser and
must also be checked for multiple browsers renderings and
responses. The purpose of this test is to find flaws in the
navigation of the web pages.
This include checking for broken links, faculty graphics,
download speed of each page (over a variety of internet
connections). The load time of all the objects must be within an
acceptable time.
The user must still be able to browse the site even if the
images-load option is turned-off. Other components to check are
the scripts and plug-ins.
LO4.1.5: Transaction Testing
This is very critical in an e-business application. A website is
utilizing has to be forced to invoke its various components and
whether the direct and the indirect interfaces work correctly.
The information entered by the user calls for information
contained in the database, the proper data must be returned.
LO.4.2:Analyse actual test results against expected results
to identify discrepancies

1. SCRUTINY: The substantial to be verified is inspected by

exact plans to classify suitable trail cases. Examination
methods that include organized relics for example style
explanation dialects and user interface design can be
automatic to decrease the trial capitals wanted for a plan.
2. STRUCTURE: The relics wanted to perform the trials stated in
the assessment strategy are made. These relics frequently
contain assessment carters, test facts arrays, and the
software that forms the definite assessments.
3. IMPLEMENTATION AND VALUATION: the tests are led, and the
outcomes are examined. The software is arbitrated to have
approved or else botched both assessment. This info leads
choices roughly whatever the following phase will be in the
progress procedure.
LO4.3: Evaluate independent feedback
recommendation for improvement.

and

made

Most web designers and developers avoid getting feedback

on their work because it can be time consuming, frustrating and
even scary. But it doesnt have to be that way.
When done right, you can gather feedback that will inspire
you, give you a fresh perspective and push your work to the next
level.
LO4.3.1: Start Early
Feedback should be part of your production plan from the
moment you start working on a new website. The earlier you start
asking for feedback, the easier it will be to make a change. Dont
wait until youre emotionally invested inyour design to start
getting feedback.
LO4.3.2: Use the right tools
People often avoid asking for feedback because of an
unproductive past experience. Either the people asked didnt
respond, or there was no good way of collecting the feedback.
Example of tools include:-

1. Concept Feedback- Concept Feedback is a free website

feedback community for designers, developers and
marketers. Members can upload a concept a website,
specify an objective and start receiving constructive,
actionable feedback from other members.
LO4.3.3: Ask the right questions
Make sure to classify your objective. By providing direction
ahead of time, youre more likely to receive focused feedback that
clearly addresses what you want to know. Instead of asking what
do you think ask what elements of this design catch your
attention right away? or what confuses you most about this
website? Also, try to keep brief.
LO4.3.4: Be Open
This goes back to emotional investment. If youve already
made up your mind about a website, and theres no changing it,
no matter what anyone says, then dont waste your time or theirs.
Seek feedback only when youre going to pay attention to it.
Dont become so attached to a design or layout that you cant
hear the constructive ideas being offered by those around you.
LO4.3.5: Repeat the process
Feedback is an ongoing process. Dont just stop after the
first draft, continue to get feedback as you revise and improve
your design. The more you times you repeat the process, the
easier it will be to get in to the habit of asking for feedback and
the better websites will be the result.
LO4.4: Create onscreen help to assist the user
1. Click any browser you using for accessing the internet. On
the Google page type www.learncenter.co.uk
2. The homepage of my website learn center will appear as
shown below:-

3. Scroll all the way down to find details about the center.

4. To get info about the courses, admission and contact click on

the tabs on the top of the homepage.
5. To subscribe to our monthly newsletter just type in your
email address and hit the subscribe button.
6. On the programs tab contains the lineup with dates of the
centers term activities.
LO4.5: Create documentation
maintenance for the website

for

the

support

and

Website maintenance comprises all the activities needed to

ensure the operational integrity of your website or intranet. In
other words, it is about doing all the things needed to make
your site runs smoothly and according to plan.
Letting your information become outdated or not placing
new products and services, and not striving to place new
information and solutions, deteriorates your sites value for the
internet community and for your business.
When new developments occur in your industry or business,
new product releases or events happen you should strongly
consider updating your Site before your competitor does.

Keeping regular website maintenance helps to:

Continually improve your search engine ranking
Increase the number of visitors to your site
Meet your customers needs and expectations
Keep your companys Internet presence strong.

Website management consist of :1.

2.
3.
4.
5.
6.
7.
8.

Website hosting
Unlimited file storage
Daily site back-up
Link analysis, verification and repair
Updating plugins, tools and databases
Traffic analysis
Updating content
Optimizing keywords

9.
Uploading, compressing and optimization of
new images.

Reference:
Create a website accessible at http://www.wikihow.com/Create-a-Nice-andSimple-Flash-Website (Read : 07/03/2015)
Defining
the
role
accessible
http://www.diffily.com/articles/webteamroles.htm (Read: 07/03/2015)

at

Design and Development using standard web tools

http://www.google.com/webdesigner/ (Read : 07/03/2015)

accessible

at

Study about the website design and implementation

http://www.google.com/webdesigner/ (Read: 07/03/2015)

accessible

at

Tutorials for php and CSS http://html.net/ (Read: 07/03/2015)