Web Design

Web Design
INTERNATIONAL SCHOOL OF
Concept
MANAGEMNET AND
INFORMATION TECHNOLOGY
Full assignment
TINKUNE, GAIRIGAUN,
KATHMANDU
Niraj Kumar Yadav (HND / 1st Semester)

Web Design Concept 2017
Contents
Task 1...........................................................................................................................................................4
Introduction:.................................................................................................................................................5
Concepts:......................................................................................................................................................5
Clean Design:...........................................................................................................................................5
Design isn't just visual:.............................................................................................................................5
Usability:..................................................................................................................................................6
Short Loading Times:...............................................................................................................................6
Clean, SEO-Friendly Code:......................................................................................................................6
Effective Security:....................................................................................................................................6
Compatibility with Multiple Browsers:....................................................................................................7
Introduction of User:....................................................................................................................................7
Expert user:...............................................................................................................................................7
Novice user:..............................................................................................................................................7
Regular user:.............................................................................................................................................8
Occasional user:........................................................................................................................................8
Conclusion:...............................................................................................................................................8
Site analysis:.................................................................................................................................................8
Accessibility:................................................................................................................................................9
Color Blindness:.......................................................................................................................................9
Audio Disability:......................................................................................................................................9
Visual Disability:......................................................................................................................................9
Motor Disability:....................................................................................................................................10
Design and Environment:...........................................................................................................................10
Conclusion:................................................................................................................................................10
Task 2.........................................................................................................................................................11
Introduction:...............................................................................................................................................11
Conclusion:................................................................................................................................................26
Niraj Kumar Yadav (HND / 1st Semester) 1

Task 3.........................................................................................................................................................27
Introduction:...............................................................................................................................................27
Usefulness:.................................................................................................................................................27
Normal users:..........................................................................................................................................27
Disable users:..........................................................................................................................................28
User- interactivity:.....................................................................................................................................28
Normal user:...........................................................................................................................................28
Disable user:...........................................................................................................................................28
User accessibility:......................................................................................................................................28
Normal user:...........................................................................................................................................29
Disable user:...........................................................................................................................................29
Validation:..................................................................................................................................................29
Normal user:...........................................................................................................................................30
Disable user:...........................................................................................................................................30
Conclusion:................................................................................................................................................30
Task 4.........................................................................................................................................................30
Introduction:...............................................................................................................................................30
Conclusion:................................................................................................................................................50
Task 5.........................................................................................................................................................50
Introduction:...............................................................................................................................................50
Unit testing:............................................................................................................................................50
Compatibility testing:.................................................................................................................................53
Integrated testing:.......................................................................................................................................54
Stress testing:.............................................................................................................................................56
Conclusion:................................................................................................................................................57
Task 6.........................................................................................................................................................58
Introduction:...............................................................................................................................................58
Conclusion:................................................................................................................................................60

Task 7.........................................................................................................................................................60
Introduction:...............................................................................................................................................61
Frequently asked questions (FAQs) page..................................................................................................61
Site map page.............................................................................................................................................62
Users guide/ help page...............................................................................................................................63
Conclusion:................................................................................................................................................63
Task 8.........................................................................................................................................................63
Introduction:...............................................................................................................................................64
Layout Designing...................................................................................................................................64
HTML.....................................................................................................................................................64
CSS.........................................................................................................................................................65
JavaScript...............................................................................................................................................65
Removing or Modifying Animation.......................................................................................................66
Tools used for site development.............................................................................................................66
Adobe Photoshop....................................................................................................................................66
Dreamweaver..........................................................................................................................................67
Data and Information Collection Mechanism........................................................................................67
Form.......................................................................................................................................................68
Product Deployment...............................................................................................................................68
Domain name..........................................................................................................................................68
Maintenance...........................................................................................................................................68
Conclusion:................................................................................................................................................69
References:.................................................................................................................................................70
Websites:................................................................................................................................................70
Books:.....................................................................................................................................................71
Task 9/A.....................................................................................................................................................72
Introduction:...............................................................................................................................................72
Conclusion:................................................................................................................................................73

Task 9/B.....................................................................................................................................................73
Introduction:...............................................................................................................................................73
Conclusion:................................................................................................................................................75
Task 9/C.....................................................................................................................................................76
Introduction:...............................................................................................................................................76
Conclusion:................................................................................................................................................77
Task 1
Discuss the design concepts that have to be considered when designing the website. [1.1, M1]
Consider: Users, Site Analysis Accessibility, Design and Environment.

In order to achieve M1, you will apply an effective approach to study and research while discussing the
design concept that have to be considered when designing the website.
Introduction:
Web design is a process of conceptualizing, planning, and building a collection of electronic files that
determine the layout, colors, text styles, structure, graphics, images, and use of interactive features that
deliver pages to our site visitors. Professional Web design helps to make your business appear credible
online (www.tutorialspoint.com, 2017). In this task I’m going to describe about concept of website
designing while considered built a new website. And its advantage and disadvantage, types of user like
expert user, novice user, regular user and occasional user. Doing site analysis of website concept and its
accessibility design and environment.
Now here are some concepts that are considered while designing a website.
Concepts:
Clean Design:
In designing a website clean design are most important because when user see the website they can’t
ugly so the web developer have to considered that. One of the most important things to remember during
the process of website development is to create a clean, appealing design. A quality design is attractive
and easy to read with intuitive navigation. Most importantly, a clean design helps viewers focus on the
value of your brand and content instead of distracting graphics and large amounts of text
(www.tutorialspoint.com, 2017). Hence, a clean design is vital to providing a positive user experience
that encourages customers to return and its main advantages is to clear cut view of the website, visitors
are easily accessed it, that it maximizes user experience on different devices, all the design and code are
easy to study etc. similarly it has some disadvantages also i.e. it takes too much time to design, cost are
high, limited resources etc. (Staff, 2017).
Design isn't just visual:

Design isn't just the visual; it's the personality beneath. For some reason, design has a stigma as solely
the visual part of the website. Design is the 'how' and 'why' people want to use the site; the speed at
which the site loads; the interaction between hover, click and touch; and the speed at which you give
new features (www.tutorialspoint.com, 2017).
Because design is more than visual aspects and affects the entire experience, every person on a project is
a designer. The frontend, backend and project management should all be thinking about design. Its
advantages are compatible for all, increase the speed and loading time of website, visitors feel easy to

access the website etc. similarly, here some disadvantages also i.e. it takes too much time complete the
website, cost are high, problem occur while maintenance the website (Staff, 2017).
Usability:
Usability is most important things to remember while designing a website because that they are easy to
use are more likely to attract customer interest and encourage business. Usability can be increased by
displaying product and service information in a clear, concise manner (www.tutorialspoint.com, 2017).
Your Website should have all the features which helps the customer to get easily accessed and make
accessible. These elements are key to get more customer and it is essential to review when optimizing
the usability of your site (eMarketing Wall, 2017).
Short Loading Times:

When looking for information online, nothing aggravates visitors more than slow loading times.
Customers can be turned away completely due to this issue. When designing a website clear and clean
design, uses of simple designing tools and mechanism help to make the website fast and easy to access
(www.tutorialspoint.com, 2017). This makes website fast. So designer have to use appropriate and
simple tools and mechanism. To increase customer retention and provide a positive user experience,
periodically evaluate your website’s loading time once it has launched. It helps to attract customer to
visit your site (eMarketing Wall, 2017).
Clean, SEO-Friendly Code:

Whether developer are developing new webpages or optimizing existing ones, it’s important to have
clean, SEO-friendly code. By taking the time to upgrade the site’s code, developer can increase the
overall return on investment what they are invested. Clean code make the website faster and customer
get easy accessed. Certain CMS services, such as WordPress, provide plug-ins designed to simplify the
process of cleaning up code and increasing search engine rankings (eMarketing Wall, 2017). Clean and
SEO-friendly code help to run the website easily and it takes short loading time that help users to use in
easy way in this way customer visit more in your site.
Effective Security:
With the evolution of technology, newer and more advanced security risks threaten to compromise your
website’s integrity. From malware and viruses to malicious apps and the threat of hackers, websites must
prevent security breaches on both the front ends and back ends. Sometimes websites are hacked so
developer should have design and coded it strong. Websites built to conduct online transactions, such as
ecommerce sites, need additional security measures to protect customer information. (Staff, 2017).
Effective security is main thing which is consider first while coding and designing by developer or

designer. Effective security keeps the information of users in secret place. So developer use https to
secure the website and then visitors are not hesitate to use their website. Its main advantage is it keeps
the information secret and not even display without taking information from user.
Compatibility with Multiple Browsers:

As technology progresses, the number of internet browsers is steadily growing. From Internet Explorer
and Chrome to Firefox and Safari, it can be frustrating to keep up with them all. When creating a
website, it’s vital to ensure that your website is reachable from multiple browsers. Specifically, your site
should load properly on all major browsers – including older versions (eMarketing Wall, 2017). While
design or coding designer should consider about these thing. Nowadays different kind of browser are
available and they are used by different user in their own way. So the developer have to design clean
code which is accessible in all browser that makes developer easy to do and operate.
Introduction of User:
In computing we call an individual who uses a computer the user. This includes expert programmers as
well as novices. An end user is any individual who runs an application program. Here is a type of user
i.e. expert user, novice user, regular user, and occasional user.
Expert user:
When we design a website then we have to consider about expert user because Expert users have
extended experience in the application they always expects advance features and capabilities on website.
They will want more customization options. Since they have a stable mental model of the application
structure they feel free to explore the application and try new things. So we have to design good and
perfect websites for those types of user. We have to design an Effective Color Scheme, Short Loading
Times taken, and Clean Design, Effective Security’s websites to meet expert user want
(Accessibletech.org, 2017).
Novice user:
When we design a websites then we have to consider about novice user because Novice users are new to
the system and will need a simple and basic interface. Since they are new in the system they will expect
more secure ways of doing things in the system for example they will choose the templates or wizards to
do their first steps in the system. When designing to novice users we should remember what the main
use cases and don't shadow them with unnecessary features (Accessibletech.org, 2017).
Regular user:
When we design a websites then we have to consider about regular user because regular user have too
much knowledge in the application and they have capabilities of new features. They will want

customization options. They are always trying to new things. So we have to design clean and clear cut
view, short loading times taken, more usability etc. because they regular visit in our site. In this way we
attract regular customer and they can’t stop uses of our site or design. So we have to design friendly to
regular user, not design in vast and not add more advance feature (Accessibletech.org, 2017).
Occasional user:
When we design a website then we have to consider about occasional user because this types of user are
not having more knowledge about application and are not able to use it. So we have to design clean and
clear, easy to access, user friendly, short loading time taken and most important we haven’t use more
complex code, advance features, more color scheme etc. we have to design simple website
Conclusion:
According to above types of user we have to design a clear, short loading times taken, effective security,
simple features as well as advance features as per the choice or want of user or customers. It makes
friendly to all users.
Site analysis:
Site analysis means to analyze any sites. We have to first identify the market, customers wants, company
goals, stockholder etc. before design a website. We have to design according to users demands. It
includes various information about the organization and what designing concept should it be
implemented on the relevant webpage. Depending upon the logo, related color and the information
provided by the organization the website can be made more interactive, attractive, protected and meets
the requirement of the organizations. For example ABC is a company that hires me to design a website
for his company then firstly we identify the goals of company. How they are relate to the web presence.
And ask some questions about design, security etc. and then we describe the structure and content of the
site. Create an executive summary, which is a brief explanation of our report refers to company goals.
And ask for review language choice, the reports should explain ideas succinctly without a lot of
technical terms. For instance, site inform customers about company services, persuade them to have a
certain attitude about product or ideas. And lastly ask someone to review report for clarity, not just be an
editor looking for comma errors or spelling mistakes but someone willing to express concerns about way
your ideas come across, revise the report as needed. After doing all this finally we are ready to design a
website for that company (Smallbusiness.chron.com, 2017).

Accessibility:
Web accessibility means that people with disabilities can use the Web. More specifically, Web
accessibility means that people with disabilities can perceive, understand, navigate, and interact with the
Web, and that they can contribute to the Web. Web accessibility also benefits others, including older
people with changing abilities due to aging. Web accessibility encompasses all disabilities that affect
access to the Web, including visual, auditory, and physical, speech, cognitive, and neurological
disabilities (www.tutorialspoint.com, 2017).
According to (Joe Clark n.d) “states that "The issue in Web openness is the way that visually impaired
and outwardly impeded individuals require the single greatest support to accomplish proportionality,
since this present reality Web is a visual medium.” Web accessibility is the major factor that affect
design. We are consider when designing a website i.e. Color Blindness, Audio Disability, Visual
Disability, Motor Disability etc.
Color Blindness:
Some people have a problem of recognizing color and they are using website but sometimes they don’t
know anything of that website due to color blindness. So we have to design user’s friendly website
which is easy to use for color blindness user. A color blind can't recognize hues. It may not sound as one
of the significant handicap to the ordinary ones however partially blind individuals confronts a heaps of
challenges while getting to a site. Utilizing hues with comparative lighting harm color blindness user. So
we are avoid to using hues with comparative lighting.
Audio Disability:
Audio disability is the major problem for deaf user they can’t hear anything. Ignored by the majority of
the web developers indiscreetly, a man who possesses audio incapacity ought to likewise have the
capacity to get to the video or sound substance in a website page. The designers must be able to
guarantee his page can be reached by such individuals who possesses listening incapacity.
Visual Disability:
A bad dream for the greater part of the web architects, visual inability is a condition where a client can't
see less or nothing by any stretch of the imagination. Such incapacity is not effectively adjusted. For
overcome from this type of problem we have to use good sound video record, using a screen reader has
the ability to transform or convert the content or text into Braille characters on Braille gadgets or simply
change over content into blended speech.

Motor Disability:
Motor disability is condition where user are not able to use mouse and they are unable to utilize the
console and mouse appropriately like tapping on the wrong side, not able to control the pointer etc. For
overcome from this problem we have to use of onscreen console, versatile consoles, mouse switch or
larger than average trackball, and speech acknowledgment innovation.
Design and Environment:

Designing a webpage is the most integrated part of the web development. Designing a webpage refers to
various factors such as designing of icons, banners, and alignment of text, heading and many more. All
of these subjects to the web developer and designer on which tool they use. At the, designer uses
Photoshop or other software to create a layout in which a reference webpage is created and the web
developer uses various language such as HTML, CSS, JavaScript, PHP to bring the design into reality.
Design and environment is the most important because design and environment make website perfect
and accessible. We have to design more attractive website according to present environment. Use
different kinds of designing tool like CSS, Photoshop etc. while design a website
(www.tutorialspoint.com, 2017). All user or customers first see the design of any website on which
environment it was design. Design as per the need of customer, user. Good designs attract more
customer and user. So we have to design simple and best not more advance.
According to (Zeldamn n.d) states "Substance goes before outline. Outline without substance is not plan,
its embellishment."
Conclusion:
Finally I complete the task. In this task we describe about concept of website designing its advantages
and disadvantage. And user and its types and their demand like which kind of design are suitable for
user. And then I analyze the different site. Then taste it for color blindness, audio, visual, motor
disability this helps to make sites accessible. And see their design and environment. We have to design a
good website which is accessible for all user and customer. In my view before designing a website
identifying the goals, analyze the market and environment, See the user demand is most important for a
web developers.
Task 2
Design an interactive website to meet the given requirements in the scenario. [2.1]

Consider: Identification of need: nature of interactivity, Client needs: Image, level of security, development
timescales, and User needs: appropriateness of graphics, complexity of site, delivery of content.
Introduction:
In this task I am going to describe about all pages which included in my website. I show all the pages
with its screenshots. While responding this task I consider the nature of interactivity, images, level of
security, development timescales, and the appropriateness of graphics, complexity of site and the
delivery of content. Now I show my all pages i.e. given below;
Home page
Home page is the first page of website where the customer first see. We have to make the home page
more attractive this makes customer engaged in our websites. In home page we include all the main
things of our website like our location, services, networks, facilities etc. these are the first where
customer looks. In home page the main things is color combination which makes website attractive and

they attract customer and customer are spent more time with our sites. We have to keep all the
information on home page.
About us page
In about us page we have to include about our organizations details, our management team, board of
directors, and our vision, our mission etc. this is the second page where customer visit to know about our
organization.
Our Services page

In our services page we have to include about our services which is provide to the customer. In this page
I include the services like loan, debit card, credit card, and SMS alert services etc. this help to customer
to know about services.
RBL Network page

In this page I describe about our branches and ATM and their address where they are located. In this I
also give the details of inside and outside branches and ATM.
Deposits page

This page show that the types of deposit services which is provided by bank to its customer. We provide
different kinds of deposit services which is shown in the above image.
Innovative Banking page
In this page I include the latest technology of banking system like Mobile banking, internet banking,
Mobile ATM. It helps customer to withdraw, deposits, check their account details etc.

E-Banking page
In this page I describe about the e-banking. E-banking is the latest technology which is used by bank for
its customer. Internet banking helps the customer to do balance inquiry, fund transfer, account summary,
statements etc. these types of service are included in internet banking. We also provide SMS alert
banking it helps customer to know about their account related transaction.
Gallery page

In this page I include our memorable image of different functions, party, meeting of our bank.
Contact us page

In this page I show our bank location with Google Map location. This helps customer to find our bank
location easily that’s why I include in.
Terms and condition page
This page show about terms of use and conditions when the customer use our website they should
follow our terms and conditions.
Privacy policy page

This page show about our bank policy. Which type of policy we are used and this helps customer to
know about bank policy and customer believe and then come in our bank.
D-mat form page

This is the online D-mat account opening form for individual account. It helps customer to open their
account online from anywhere in this world.
KYC form page

This page is KYC online account opening form. It helps customer to open their account with the use of
internet. This kinds of service helps in to attract customer.
Site map page

This is the shortcut method to see our whole web page it helps customer to go anywhere in our page
through clicking the page which they want to open.
Interest Rate page

This page show about the interest rate of our page on different types of loan, deposits facilities. Users
can easily find their interest rate with the help of this page and they can calculate their interest.
Users Guide page

This page help users easy to locate the page of the website. Users can access any page from here. In this
page we include the information of our website in short.
FAQs (frequently asked questions) page

This page is about frequently asked questions in this page we provide answer of the common questions
of the users of the website. This helps to the user how to use the websites and many other information.
Conclusion:
In this task I conclude all the pages of website which I design for royal bank of Nepal. First of all home
page I include, home page is the first page where customer first attract so we design good and users

friendly home page with combinations of different color. It helps customer to attract. In this way I
include all the pages.
Task 3
Evaluate the website design with at least other two users. [2.2]
Consider: Consider the usefulness, user-interactivity, accessibility and proper validation of the forms used.
Introduction:
A site design is fundamentally vital to have a fruitful online brand. Be that as it may, there are different
tools or measurement that the designer regularly overlook, for example, ease of use, availability, client
interactivity, and so forth. I am going to evaluate my website which is already I done in task 2 and now I
said with two users like normal user and disable user to test and use my website on the basis of
usefulness, interactivity and proper validation. It help me to evaluate the website. After evaluation users
give the feedback and recommendation for improvements. So i am going to evaluate it.
Usefulness:
Is the Web page relevant to the current research project? A well-researched, well-written, etc. page is not
going to be helpful if it does not address the topic at hand. Ask, "is this useful to me?" If it is useful, does
it:
 support an argument
 refute an argument
 give examples (survey results, primary research findings, case studies, incidents)
 provide "wrong" information that can be challenged or disagreed with productively
While designing the website designer should be careful about the site where there site is useful for all
users or not. So usefulness is the main point which is consider when designer design the sites.
Now for evaluating my website I prefer normal users and disable users.
Normal users:
The site is composed with a wonderful view without bargaining with the content of the site. The content
has been overseen according to the prerequisite of the customer. Simple site is mostly prefer by the
normal users. While they use website they want simplicity with proper data and information. They want
more in simple way. The site provides useful information to the clients about the upcoming programs,
features, news and many data and information related to royal bank limited.

Disable users:
Disable users are also use the website. According to (Accessibletech.org, 2017) “Designer should have
consider about all the users are not normal some are disable. So for that designer should design for all.
Some users have color blindness so for that user designer should design website with different color
combination which help the users.” The FAQ area is particularly planned if the clients have any sort of
perplexity with respect to the data which are provided. They gather more information when design are
simple and user’s friendly.
User- interactivity:
Interactive website means a website that allows its users to communicate and interact with it. Instead of
entering in the website and just clicking into a page full of words and boring images, visitors click into
an exciting web design that immediately leaps off the screen to greet them. It can be a popup box or any
videos, audio clips, flash images etc. (Accessibletech.org, 2017).
An interactive site means anything and everything from contests to displaying products in a way that
encourages or even requires visitors to click on certain categories. By displaying products in an
interactive way rather than just pictures, you are more likely to engage visitors (www.tutorialspoint.com,
2017)..
Normal user:
According to (Accessibletech.org, 2017) “Normal user always want interactive website. Which interact
them. Normal user can use site in a interactive way. They want easy and simple design. User’s Manual
help client to interact with sites.” The site is easy to use or you can say a website in which visitors can
post their replies and comments to communicate with the person behind the website to get solutions for
their query in a more entertaining and effective manner. Clients can explore inside the pages effectively
with no trouble.
Disable user:
The menus are kept extremely easy to make it simple for the disabled individuals. The links planned are
not broken which empowers even impair client to explore inside the pages. According to
(Accessibletech.org, 2017) “Disable users like blind they easily interact with site using screen reader.
Individuals with handicap like visual weakness and totally visually impaired can utilize the site
effectively.”
User accessibility:
Accessibility in Web design addresses the issue of creating Websites that are accessible to all users,
regardless of physical ability or the way in which they use the Internet. Web accessibility means that

people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can
contribute to the Web. Web accessibility also benefits others, including older people with changing
abilities due to aging (www.tutorialspoint.com, 2017).
The website ought to be user friendly providing information and usefulness of site to all the sort of
clients (adobe.com, 2017).
Normal user:
Providing text alternatives to visual content, to audio content (e.g., providing ALT text for images)
benefits anyone who doesn't have immediate access to graphics. While this group includes people with
blindness, it also includes those sighted computer users who surf the Web using text-based browsers
such as Lynx. Using cascading style sheets (CSS) rather than HTML tables to control layout of web
pages results in pages that are more usable for screen reader users, but additionally allows content to be
displayed more appropriately on smaller screens and on emerging web-enabled devices such as wireless
phones (Accessibletech.org, 2017) .
Disable user:
Visually impaired users may also have problems understanding sites that are not built to accommodate
"viewing" through a non-visual browser such as a screen reader. A screen reader is a Web browser that
reads Websites out loud, thereby making them accessible to visually disabled users. Often a Website that
looks nice visually can be a complete mess when it is listened to through a screen reader. The
combination of different color make disable to identify easily. . In this manner, while building up the site
appropriate utilization of hues and differentiation is made to keep away from shading disarray
Validation:
According to (Turnbull, 2017) “In the context of a human relationship, validation is when you feel the
need to be told that you are right; In the context of a web-form, validation is when the form tells you that
you're wrong. To be specific, form validation is the process where a web-form checks to see if the
information that's been entered into it is correct. Webpage validation involves checking the code used to
create a webpage (markup), against a computer-language specification.”
Normal user:
Validation is important for form. When inputting data into the form sometimes users fill wrong so that
time it is used and important. Validation is done in structures so that the client doesn't leave clear text of
the boxes which is in form. Approval will help typical client while making a visit in site or sending a
feedback for further improvement. It save from gaining wrong information.

Disable user:
Validation is more important for those people or users who is suffering from dyslexia. For example, a
client with dyslexia may give the wrong information accidentally as dyslexia is a disease having trouble
reading characterized. So sometime client can input wrong data due to this disability. So that time form
validation is important.
Conclusion:
Hence, in this task I evaluate my design with two users called normal and disable user. Also consider
about the usefulness, user-interactivity, accessibility and validation of from of website. The site has been
made appropriate approach information and usefulness to both sort of client. This site is good for all
types of users.
Task 4
Implement a fully functional interactive website using the design specification. [3.1, M2]
Content: You need to provide your implemented system in an electronic form. (CD or DVD)
To order to achieve M2, you will provide written evidence which demonstrates how you have applied a
range of methods and techniques while implementing the fully functional interactive website.
Development: Should exhibit the use of HTML, DHTML, XHTML, client side scripting language like
JAVASCRIPT.
Note: you will be observed while implementing the fully functional interactive website using the designed
specification.
Introduction:
This task shows that how I implement a fully functional website using design specification. And provide
them in an electronic form. (CD/DVD). I also provide written evidence which demonstrate how I have
applied a range of methods and techniques while implementing the fully functional interactive website.
And uses of HTML, DHTML, XHTML, client side scripting language like JACASCRIPT. These all
done on the basis of design specification. All the development functions work differently in every type.
As they have similar properties or similar features. It is user friendly and can be access by each and
every type of people. Header, navigation bar and footer are always same throughout the whole webpage
so I have explained them first with its HTML code and CSS with its own design. Now I am going to
start.

Home page
Home page is the main page of any website. Users first visits home page and then visits another page.
Home is the attractive center which attract the clients to use it. So we have to design a good home page
with different color combination, and attractive design.
Header design
HTML code
CSS code

In the above figure I show my header section. In this section there is a three part. First one is logo of
bank second one is bank name with GIF file and last one is background image. First I open the body
section of the HTML and then make wrapper and in that wrapper I declare an ID which name is header
and in that header I make three classes for each part of the header. After design a HTML code I design
this in CSS. After design a HTML code I design this in CSS. In CSS header is a ID and logo, logo
image, text is a class which is in the header.
Menu bar
HTML code

CSS code
This menu bar are locate in body. In body I declare ID whose name is nav. Then there are some divisions
in the menu bar. The menu bar is then arranged in UL then LI tags with <a href=””> to link the page of
the menu bar. The menu bar which is also one of the main component of the website as it helps the user
to access documentation or manuals and go different pages from link. In CSS #nav is ID and other are
the class of each. The main class is given the height, color and the background color. The div of the main
class main-box is then given the CSS as list style is none, hover, text-decoration, padding and the text
color.
Slider
HTML code

CSS code
JAVASCRIPT code
Then after design menu bar I

design slider. First of all I declare ID in HTML whose name is page and then style it in CSS with giving

its height, weight, background color. Then I select the images from the different source and then I define
a class for design slider in which I put all the images for making slider and then style it in CSS with
giving height, weight and padding to the image. Then making it slider using JavaScript. In JavaScript I
define its time for sliding automatic. In this way slider are completed.
Main page
Welcome part
HTML code

First I define ID in HTML whose name is main page and then declare its height, width, and background,
margin, and padding. in that ID I define a class called welcome and then declare its width, height,
background, margin, padding, border etc. define h3 and p part of welcome class in CSS.
Join venture part.
HTML code
CSS code

This is the part of main page which already define above as a ID and in that ID, joint venture part are
define in HTML after coding in HTML I style it using CSS. In CSS I define its width, height,
background, margin, padding etc. also define h4, p in CSS and style it.
Side bar

HTML code

CSS code

Side bar is a part of main page which is define above. Side bar is always locate in left or right side of the
page. First coding in HTML and then style in CSS. Class side box is a class in which all the sub class are
define. In CSS I style it with the help of CSS features. Declare height, width, background, margin,
padding etc. I define corporate and h4, h6 in HTML and style it in CSS.
Extra services part
HTML code
CSS code

This part is locate in main page which is declare above. In this part I describe about our extra services. In
HTML first define class services and style in CSS with giving its width, height, background, border, and
margin, padding etc. h2 and image are define in services class. And then style it in CSS using CSS
features. This part shows the extra services of our websites.
Customer care part
HTML code
CSS code

This part is section of main page which is locate in the last of main page in right side. In this I describe
about the customer service center. First I define a class called customer in HTML and then style it in
CSS using CSS features. Giving its width, height, background, border, margin and padding. And then
define h3 for heading of the page and image are define as read more button. I used img tag to show the
image, h3 tag is used for heading.
Footer section
HTML code
CSS code

Footer is defined in a body. First I declare ID in HTML called footer. The footer contain the various
other service provided by the bank. As the services are different they are kept in different id to make sure
of the place they hold. The UL and LI tag are used for the list of the topic to maintain. And then in CSS I
style it using different features of CSS like width, height, background, color, font, margin, padding etc.
D-MAT page
D-mat form
HTML code

CSS code
This is the d-mat page where the location and address of bank are located. This page is located in menu
bar. Header, slider, sidebar, and footer are same as home page these are never change. First of I define
ID called main page. And then define a class in that ID called dmat. In dmat class I define h5 and dform
class in HTML code. In CSS I style all the classes with giving width, height, margin, padding and
background color etc. in HTML first of all we have to do code for all the class and ID and then after
style it using CSS.

Contact us page
HTML code
CSS code

This is the contact us page where the location and address of bank are explain. This page is located in
menu bar. Header, slider, sidebar, and footer are same as home page these are never change. First of I
define ID called main page. And then define a class in that ID called contact. In contact class I define h5,
h4 tags and dform class in HTML code.h5, h4 tags is use for heading. This tags help to make the heading
of any class, id or anything. In CSS I style all the classes with giving width, height, margin, padding and
background color etc. in HTML first of all we have to do code for all the class and ID and then after
style it using CSS. Contact us page help users to trace the bank location using Google Map location or
by phone.
E-Banking page

HTML code
CSS code

This is the e-banking page. E-banking is the latest technology of banking. First I declare the class called
banking and then style it in CSS with giving its width, height, margin, padding etc. similarly define h5
tags for the title of the page and style it in CSS with giving its width, height, margin, padding etc. then
define p tag which is used for paragraph and after that style it in CSS with the features of CSS. <a href=
“ ”> is used for linking the page. When the users click on it then other page are open automatically. And
then style it CSS with the features of CSS like text-decoration, list-style, hover, background, color. The
UL, LI tag is used for listing the text.
FAQs page

HTML code
CSS code

Frequently asked questions page is the helpful for uses. In this page there is a answer of common
questions which is asked by the users. In this page is very important page and this page is available in all
website without this page website cannot finished. First I define a ID in HTML called main page which
is already declare and styled. After that I define a class in HTML called FAQ and style it in CSS with
giving its width, height, margin, padding etc. after that I used h5, h6, and p tag for title and paragraph of
the page with giving its height, width, margin, padding in CSS.
Conclusion:
Hence, I provided the screenshots of the some pages which is more important in website with its HTML
and CSS code. And also give the written evidence which demonstrate how I applied a range of methods
and technique while implementing the website.

Task 5
Critically review and test the website and analyze the test results against expected results to identify
discrepancies. [4.1, 4.2]
Consider the following types of testing mechanism Such as Unit Testing, Integrated Testing,
Compatibility Testing, and Stress Testing Maintain the test log that maintains the following information.
Introduction:
This task shows that how the testing are done of some page of my website and analyze the test result
against expected result to identify discrepancies. For that I use following types of testing mechanism
Such as Unit Testing, Integrated Testing, Compatibility Testing, and Stress Testing Maintain the test log
that maintains the following information. It is the process of examining the website for better
performance and better result. Testing is performed with the goal of identifying bugs and blunders if any
errors found then they can be altered. It's a sort of examination done to give the data to partners about the
nature of the created framework.
Unit testing:
Unit testing, sometimes referred to as developer testing, focuses on testing small pieces of code, such as
a class, that a developer is writing. These tests are critical for helping you ensure that the pieces you
build work as expected and will operate correctly when combined with other parts of the application.
Such testing helps support management of the application over time by ensuring that changes you make
don't inadvertently affect other parts of the system (teachtaregt.com, 2015).
Unit testing is the software development process to test each and every individual component of the
website in smallest unit form for proper operation (teachtaregt.com, 2015).
S.N What was Expected Actual output Remarks

tested Output
1 Hyperlink Clicking on Hyperlink
the is working
hyperlink properly
the page
should be
open
properly.

2 Image The image Image was changed automatically without any problem. The
slider changes in animations
every 2 are
second working
automatical properly.
ly. Slider
timing are
work in
time.
3 Menu Bar On clicking Menu bar

on menu is working
bar the properly.

home page
should be
open
properly.
4 Validation On living The

the form validation
empty the work
form properly.
should as
for input.
Compatibility testing:
According to (Level, 2017) “Compatibility testing is a type of software testing used to ensure
compatibility of the system/application/website built with various other objects such as other web
browsers, hardware platforms, users (in case if it’s very specific type of requirement, such as a user who
speaks and can read only a particular language), operating systems etc. Test for browser compatibility
issues in the most common web browsers”:
 Internet Explorer compatibility back to version 6.0

 Desktop browser compatibility in Chrome, Firefox, Safari, Opera and Edge
S.N What Expected Actual output Remarks

was output
tested

1 Website Should It is
Tested in load the compatible
Chrome. contents to chrome.
properly.
2 Website Should All the

tested in load the content was
Mozilla content loaded
Firefox. properly. properly
except the
font
awesome.
3 Website Should All the

in load all content was
Internet. the loaded
content. properly
except the
contact us
page.
Contact us
page are
not display.
Integrated testing:
Integrated testing is the process of testing various software projects consists of multiple software
modules, coded by different programmers focusing in the information they provide work properly or not
(Guru99.com, 2017). Testing performed to expose defects in the interfaces and in the Interactions
between integrated components or systems. In this task various types of codes like HTML, CSS, and
JavaScript etc. Are integrated and test.

S.N What was Expected Actual Output Remarks

tested Output
1. Integratio Links Links are
n on shouldn’t working
HTML be broken. properly.
2. CSS Designed All the

Design should be CSS
displayed in design
proper were
manner. working
properly.

3. JavaScript Animations The java

Design. should be script is
displayed. also
working
fine.
Stress testing:
It is a form of software testing that is used to determine the stability of a given system. It put greater
emphasis on robustness, availability, and error handling under a heavy load, rather than on what would
be considered correct behavior under normal circumstances. The goals of such tests may be to ensure the
software does not crash in conditions of insufficient computational resources (such as memory or disk
space). The recovery of the system from such phase (after stress) is very critical as it is highly likely to
happen in production environment of the form was tested (Level and Tutorial, 2017).
W3validation Test
Tool used: validator.w3c.org
Home page

Gallery page
D-mat form page

Contact us page
In all pages there are some error. Some are big or small. But I can correct my error through visiting my
source of page and modifying it where the error are and can make it bug free.
Conclusion:
I test my site using w3 validator and there occur many error which is not so harmful for site. There are
simple error. Now I visit my source and fix it and make it bug free.
Conclusion:
In this task I test and analyze my website. In this way the usefulness of my website was tested using
different tools like w3 validator. I test it in different form like unit testing, integrated testing,
compatibility testing, and stress testing. All test are good except stress testing in stress testing I test my
website’s some pages and the test result was error, but they are not so big error. And my actual output
result is good against expected result. All test are good.
Task 6
Evaluate independent feedback and make recommendations for improvements. [4.3]
Introduction:
In this task I am going to provide some of the feedback and review for the website of Royal Bank
limited. Users have recommended some improvement to the website as well. Some of the feedbacks
provided by me are on the reference of client requirement, design, security, optimization, accessibility

and about improvement of the website. Clients are said to make the website attractive and simple and
useful for all types of users. Now here is the feedback and recommendation of improvements.
Client requirement Recommendation for improvements

Clients are said to make the website attractive, simple,  The website can have mobile application
gathering more information, including latest banking allowing the user to have the flexibility of
technology like e-banking, and ATM location, online the webpage.
account opening form i.e. dmat. And site map, FAQs,
 Make website responsive using latest
slider etc. while design website use latest tools of
language and library like bootstrap, jquery
designing.
etc.
 Put search icon in the home page.
 Put customer feedback form in KYC form.
 Website does have “click here” link to go
any page from home page.
Design Recommendation for improvements

Designing part is not more attractive as per the need of  Use latest technology of developing
clients. Use simple color combination, animation for website.
design a website. Beside this website is too good and
 Use bootstrap, jquery library for making
eye appeal look.
responsive website which help to run
website in any devices like mobile, tablet,
PC, laptops etc.
 Use good screen resolution.
 Design for all users like normal, disable.
Put screen reader, audio, video, brail lippy
for disable users.
 Put simple search box with its icon in
home page.
 Use JavaScript for slider and animation.
Security Recommendation for improvements

While designing website one thing is kept in mind i.e.  Install SSL (Secure Sockets layer) as it
security. Good security system is more important for nail down that all data passed between the

mainly bank sites because fraud and hacking is the web server and browsers remain private
main problem. Good security protect site from any and integral.
kind of problems. Firewall should be used while  Use 13 password character which contains
designing the web site.
uppercase, lowercase alphabet and
numeric value with symbol.
 Store data of users in safe place i.e.
database server.
 Use latest technology of security system.
 Take hosting from reputed hosting
company.
Optimization Recommendation for improvements

It is also called search engine optimization (SEO),  Test the speed time to load the website in
website optimization is a phrase that describes the various web browsers.
procedures used to optimize – or to design from  Use SEO services that Network Solutions
scratch – a website to rank well in search engines. offers will help search engines find your
Website optimization includes processes such as website and rank it high in the search results,
adding relevant keyword and phrases on the website, where potential customers are more likely to
editing meta tags, image tags, and optimizing other find you.
components of your website to ensure that it is  Depreciate the un-necessary elements from
accessible to a search engine and improve the overall the HTML, JavaScript and CSS.
chances that the website will be indexed by search
engines.
Accessibility Recommendation for improvements

As per the required of clients. Make website  Alt attribute should be properly implemented.
accessible for all like normal users as well as disable  Access keys should be assigned for
user, expert user, regular user, novice user. it help to navigation.
make the website accessible. So designer design  Put site map and navigation bar in home page
website they should use latest technology and library at heading for clear view to see.
for this.  Add feedback form and login form in the
page. Which takes feedback from users and
comments.

 Use screen reader, navigation etc. for disable

users.
 Use good color combinations that makes sites
attractive.
Conclusion:
Hence, I conclude that when you design website you should keep all the above recommendation that
makes your website perfect and attractive and useful for all. When you design website consider client’s
need, latest design, good security system, accessibility for all etc. this all makes website perfect it will
make and the eye catching with additional features and user friendly.
Task 7
Create onscreen help to assist the users. [4.4]
Consider: Frequently Asked Questions (FAQs) section that can answer the common questions of the users of
the website, Site map that will give the map for the navigation system of the website.
In order to achieve 4.4, you need to create a user manual guide.
Introduction:
The frequently asked questions section that can answer the common questions of the users of the
website and site map that will give the map for the navigation system of the website and we also include
user’s manual guide. These all are those section which helps the customer to assist and easy to use sites.
FAQs is the main section which give the answer of common questions which is arise by the customer
when they are using or visits the sites. This helps to attract the customer. Similarly site map also help the
customer to navigate any page from one place in a easy manner. Similarly users guide it help the
customer to how to use the site they are visit and it is the important section of any kinds of site. When
we design websites these are the main page which is compulsory added in design. Now here are the few
onscreen help to assist the user.
Frequently asked questions (FAQs) page

Site map page

Users guide/ help page

Conclusion:
In this task you can see the frequently asked questions page, site map page, and user’s guide. In
frequently asked questions there is some common questions with its answer which is helpful for users to
use the site. And site map show the navigations of map, location of page. Similarly user’s guide helps
users to know about this site and how to open the page.
Task 8
Create documentation for the support and maintenance of the website. [4.5, M3]
In order to achieve M3, your work need to show that a range of methods have been used and technical
language has been accurately used when create documentation and maintenance of the website also you
need to submit the slides and presentation observation report.

Consider: Designing the layout, your choice of tools, task breakdown approach, data and information
collection mechanism, product deployment and maintenance technique for this project.
Introduction:
Create documentation for support and maintenance is equally important after the development of a
website. It is a collection of data which is utilized in order to educate client about its components,
modification, support, etc. It also includes task break down and tools used and all the related technical
details. The main feature of this documentation is to provide help to the person who will update the
website because update is always necessary for a website to progress. Documentation always make work
easier in web designing.
Layout Designing
At first the client requirement of website has been met which results in client approval. On this
documentation part by mainly focusing on client requirement the required language is chosen. Page
layout refers to the arrangement of text, images, and other objects on a page. The term was initially used
in desktop publishing (DTP), but is now commonly used to describe the layout of webpages as well. The
page layout of a printed or electronic document encompasses all elements of the page. While designing
the web layout it is developed by using HTML, CSS JavaScript, JQuery, etc. (Dawson and Dawson,
2017).
HTML
HTML is a computer language that allow to create a website. According to (Cameron, 2015) “It is a
language for structuring and expressing the content of a web page in a manner that can be consistently
interpreted by a web browser. It is relatively easy to learn, with the basics being accessible to most
people in one sitting; and quite powerful.” It is the evolution to meet the demands and requirements of
the growing Internet audience under the direction of the » W3C, the organization charged with designing
and maintaining the language.
HTML stands for Hypertext Markup Language. Hypertext refers to the ability to turn a piece of text into
a hyperlink (which we now call simply a "link") that takes the viewer to another document. Markup
language refers to the way HTML assigns semantics (purpose or meaning) and structure to specific parts
of the document by "marking" them as a title, heading, and paragraph, link, etc.
(www.tutorialspoint.com, 2017)
Here are the list below to maintain the website
 Open any web designing application or notepad.

 Go to file and Open the file that you want to modify.

 Modify the text as you desire.
 Save the file that you have modified.
 Open the modified file in browser in order to test it.
Thus, by this process a designer has the ability to update and developed website according to their
needs. This document helps designer for more easier modification of the website as it’s technical details
and all the steps for updating are listed.
CSS
CSS3 is the latest version of the CSS specification. It is also called cascading style sheets. The term
“CSS3” is not just a reference to the new features in CSS, but the third level in the progress of the CSS
specification. According to (Cameron, 2015) “HTML has removed most of the remaining presentation
based tags and attributes, and presentation and style are instead the responsibility of another technology
called CSS. The main reason for this concept called “separation of concern” the HTML markup
language is responsible for providing the content of the page, while CSS is responsible for the
presentation and styling of this content. This means it is possible to change either without affecting the
other”. It also adds new features to help developers solve a number of problems without the need for
non-semantic markup, complex scripting, or extra images (www.tutorialspoint.com, 2017). The main
difference between css2 and css3 is follows
 Media Queries
 Namespaces
 Selectors Level 3
 Color
. Here are the support and maintenance plan for the CSS:

 Go to file and click on Open.
 Locate the CSS file that you want to modify by locating file with extension .css.
 Perform the update as you desire.
 Save the file that you have update or modify.
 Open the modified file in a browser in order to test if it is working or not.
In CSS designer can style anything. They are able to change the code as per the requirements of the
client. Change design.
JavaScript
JavaScript is a programming language that allows you to implement complex things on web pages every
time a web page does more than just sit there and display static information for you to look at displaying

timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes,
etc. according to (Johanan, Zea and Khan, n.d.) “JavaScript is ubiquitous on the worldwide web. It can
help your pages become more interactive, allowing them to react to a viewer’s actions or allowing you to
have some special effects on your pages. It can you can bet that JavaScript is probably involved.” It is
the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have
covered in much more detail in other parts of the Learning Area.
JavaScript is an object-oriented language which is a powerful scripting language used to make webpage
interactive. It runs on the client side which helps to design how the web pages behave on occurrence of
event and used to create polls and quizzes (Stephen chapman, 2017).
Removing or Modifying Animation

For this part I have included some steps for removing or modifying various animations. Below are the
steps for removing or modifying animations.

 Go to file and click on Open.
 Browse the HTML file that you want to modify.
 Search the JavaScript code and perform the modification as you desire.
 Save the file that you have modified.
 Open the modified file in a browser in order to test if it is working or not.
Tools used for site development

There are many tools are used while designing the website. It permits the developer to test the design
and develop the design. They are not same as web designer. Here are the tools which is used while
developing the website.
Adobe Photoshop
According to (WhatIs.com, 2017) “Photoshop is Adobe's photo editing, image creation and graphic
design software. The software provides many image editing features for raster (pixel-based) images as
well as vector graphics. It uses a layer-based editing system that enables image creation and altering with
multiple overlays that support transparency. Layers can also act as masks or filters, altering underlying
colors. Shadows and other effects can be added to the layers.” Photoshop actions include automation
features to reduce the need for repetitive tasks. An option known as Photoshop CC (Creative Cloud)
allows users to work on content from any computer (Definitions and Hope, 2017).
Adobe Photoshop design is a platform to create numerous layers and edit photos. It uses large feature
editing to creating intricate digital paintings and drawings (itconnect.uw.edu, 2017).

Photoshop used during webpage design are listed down below:
 For creating a mock up design.

 For editing images as per there size.
 For creating logo of the company.
Dreamweaver
Adobe Dreamweaver is a software program for designing web pages, essentially a more fully featured
HTML web and programming editor. The program provides a what-you-see-is-what-you-get
(WYSIWYG) interface for users to create and edit web pages in a more user-friendly environment.
Dreamweaver supports many markup languages, including HTML, XML, CSS, and JavaScript. As for
human languages, it supports English, Spanish, French, German, Japanese, Chinese (both Simplified and
Traditional), Italian, Russian, and many more (Definitions and Hope, 2017).
The features of Dreamweaver for website development is listed down below: -
 Action Script.
 Active Server Pages (ASP).
 C#
 Cascading Style Sheets (CSS)
 ColdFusion.
 EDML.
 Extensible Hypertext Markup Language (XHTML)
 Extensible Markup Language (XML)
Data and Information Collection Mechanism

The collection of data and information is one of the important parts as it helps in decision-making about
the website. It is more important for the designer because they have to manage their time for research
and then they are collect the data using internet. Information is also needed to assure the client for the
management if information is provided to them correctly (Definitions and Hope, 2017).
Form
In this website we design two types of website form i.e. D-mat and KYC. Both are prepared as per the
required of clients. This is a account opening form which is used in bank. In this all the details of
customer’s are store.

Product Deployment
Product deployment is all of the activities that make a Product available for use. The general deployment
process consists of several interrelated activities with possible transitions between them. These activities
can occur at the producer side or at the consumer side or both. Because every Product is unique, the
precise processes or procedures within each activity can hardly be defined. Deploying a website helps to
enable the site to display in the World Wide Web (Definitions and Hope, 2017).
Domain name
A domain name is chummy naming system for providing addresses to website and web pages. It is
represented on the ground rule of the Domain Name System (DNS). Any name enlisted in the DNS is a
domain name. WWW. Serves as the particular host whereas .com part reflects the purpose of the
organization or entity. So domain name is important for a web site (Paul Gil, 2017).
Maintenance
Maintenance is the most important part. After design a website we have to maintenance it time to time.
Upgrading it. We can't simply transfer it and overlook it. Regular website maintenance helps site to run
smoothly. No disgruntled visitors because something on the site didn’t work or a link you provided is
broken (Definitions and Hope, 2017).
Regular visitors are always looking for new, so provide those new features and exciting information,
products or features. That helps to attract visitors.
Website are subject to being hacked. Using a proper website maintenance program to make the site
strong. And avoid being hacked by keeping everything up to date in time.
There are all kinds of things that need to be done when maintaining a website. Whether you decide to do
these yourself or hire out the work, it still needs to be done. Without maintenance site are cannot run for
long days. In time maintenance is required.
There are some regular website maintenance tasks you should perform on a scheduled basis. You have to
maintain your website at least one time in a month. It keeps your website healthy. Make monthly
timeline would be start with (Definitions and Hope, 2017).
Backing Up Your Website
Backing up your website is something you should do all the time, especially if you are the type that uses
the online interface of your store or blog to make changes. Things happen. Even though the web hosting
company says they backup the sites on their servers, their last backup could have been before your last

edit. If the server crashes for some reason or your site gets hacked, your edits will be gone if the web
hosting company restores what they had backed up (Definitions and Hope, 2017). Image losing a whole
day’s work, just because you didn’t take a few minutes to back up the site. So, you have to back up your
websites at a time it helps in future.
Monitor Website Outages
If your site goes down, you want to be the first to know and not receive an email from someone else they
cannot access your site.
Check Domain Registration Information
Look up in the WHOIS records what information is recorded for your domain name. Make sure it is
correct. Sometimes when you initially sign up for your domain you would have used an email address
that is no longer valid. This needs to be updated as when there is a problem with your domain or an
expiry notice is sent out you won’t get the emails. They are sent to the email address on record.
Software Updates
On time update help to keep the software active and work properly. Third party software, like your
ecommerce software, WordPress and Joomla for example, are always updating their software. You need
to keep on top these updates and install them as soon as they come out. The updates won’t just be new
features, they will include security updates too.
Conclusion:
Finally I come for conclude that creating website is not a big deal but to maintain the website and
support the website is important. Timely management helps site active and up to keep in a good stage.
While designing site many kind of tools are used. Data and information are collected for site.
References:
Websites:
Turnbull, C. (2017). User Experience: Designing Form Validation the Right Way. Web Design Envato
Tuts+. Available at: https://webdesign.tutsplus.com/articles/user-experience-designing-form-validation-
the-right-way--webdesign-681
Level, I. (2017). What is Compatibility testing in software testing?. Istqbexamcertification.com.

Available at: http://istqbexamcertification.com/what-is-compatibility-testing-in-software/ [Accessed 16
Jul. 2017].

Powermapper.com. (2017). Check Browser Compatibility for Desktop & Mobile - SortSite. Available at:
https://www.powermapper.com/products/sortsite/checks/browser-compatibility/ [Accessed 1 Jul. 2017].
Accessibletech.org. (2017). How does accessible web design benefit all web users? Available at:
http://www.accessibletech.org/access_articles/webinfo/accessibleWebBenefit.php [Accessed 1 Jul.
2017].
eMarketing Wall. (2017). 24 Things to Consider When Designing and Developing a Website. Available
at: http://emarketingwall.com/24-things-to-consider-when-designing-and-developing-a-website
[Accessed 1 Jul. 2017].
Software Testing Fundamentals. (2017). Integration Testing - Software Testing Fundamentals. Available
at: http://softwaretestingfundamentals.com/integration-testing/ [Accessed 1 Jul. 2017].
www.tutorialspoint.com. (2017). Stress Testing. Available at:

https://www.tutorialspoint.com/software_testing_dictionary/stress_testing.htm [Accessed 1 Jul. 2017].
Level, I. and Tutorial, A. (2017). What is Stress testing in software testing? Available at:
http://istqbexamcertification.com/what-is-stress-testing-in-software/
https://www.popwebdesign.net/what-is-web-design.html
Smallbusiness.chron.com. (2017). How to Write a Website Analysis. Available at:

http://smallbusiness.chron.com/write-website-analysis-47739.html [Accessed 1 Jul. 2017].
https://onextrapixel.com/the-definition-of-layouts-in-web-design-and-when-to-use-them/
Staff, C. (2017). 10 design concepts that every web developer needs to know. Creative Bloq. Available
at: http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255.
Sites.google.com. (2017). What is HTML? - Introduction to HTML. Available at:

https://sites.google.com/a/umn.edu/html-introduction/what-is-html [Accessed 1 Jul. 2017].
www.tutorialspoint.com. (2017). CSS3 Tutorial. Available at:

https://www.tutorialspoint.com/css/css3_tutorial.htm [Accessed 1 Jul. 2017].
SitePoint. (2017). Introducing CSS3 — SitePoint. Available at: https://www.sitepoint.com/web-

foundations/what-is-css3/ [Accessed 1 Jul. 2017].
Mozilla Developer Network. (2017). What is JavaScript? Available at: https://developer.mozilla.org/en-

US/docs/Learn/JavaScript/First_steps/What_is_JavaScript [Accessed 1 Jul. 2017].

Anon, (2017). Available at: http://whatis.techtarget.com/definition/Photoshop.htm [Accessed 1 Jul.

2017].
https://www.computerhope.com/jargon/d/dreamweaver.htm
Definitions, D. and Hope, C. (2017). What is Dreamweaver? Computerhope.com. Available at:

https://www.computerhope.com/jargon/d/dreamweaver.htm.
WhatIs.com. (2017). What is Photoshop? - Definition from WhatIs.com. Available at:

http://whatis.techtarget.com/definition/Photoshop.
www.tutorialspoint.com. (2017). CSS3 Tutorial. Available at: Level, I. (2017). What is Compatibility
testing in software testing? Istqbexamcertification.com. Available at:
http://istqbexamcertification.com/what-is-compatibility-testing-in-software.
Books:
Johanan, J., Zea, R. and Khan, T. (n.d.). Web developer's reference guide.
For higher grade:
Task 9/A
In order to achieve D1, You need to write a few paragraphs that given evaluate, and draw & justify
conclusions of the arguments or ideas presented in tasks 1.
Introduction:
In this task I am going to write few paragraph that given evaluate, and justify my conclusion of the
arguments or ideas which I presented in task 1. In task 1 I discuss the design concept that have to be
considered when designing a website. And give the written arguments on different design concept’s

advantage and disadvantage and then relate the various types of users like expert, novice, regular, and
occasional users. Also describe about the site analysis, accessibility, and design and environment. Now I
describe in brief about conclusion which is given by me in task 1 and give justify the arguments.
There are many concept that are consider while designing a website are Clean Design, Usability, Short
Loading Times, Effective Security etc. we have to give more concentrate while design a website. This
makes the website usable for all and this is the major factor that are consider. Without this concept
website is nothing. All concept has their own work. Clean design makes the website attractive and it
attract the user to use it. Similarly short loading time attract users while users use the website they want
fast browsing website so short loading time force them to use more and more. Effective security is
nowadays important factor that affects the designing. When we design a website we have to make our
strong with the use of many tools and code because nowadays hacking is the main problem. All thing
have their own advantage and disadvantage similarly website design have their own advantage and
disadvantage if you design clean, and good users friendly website then they have more advantage and
vice versa.
And also write about the users and their type. Users are those who use our website and visit our site.
There are many types of user someone is expert which is expert in using website and they always want
best design of site, they have good knowledge about sites and their designing. Some are regular user and
they have too much knowledge in the application and they have capabilities of new features. They will
want customization options. They are always trying to new things. Some are novice users who is new.
New to the system and they will need a simple and basic interface, when they are new in the system they
will expect more secure and security ways of doing things in the. And some are occasional who is
occasionally visit the site they don’t have more knowledge about the applications and new features. So
we have to design for every user and locate all users or attract all types of users in one time. They
encouraged to use our site. When designer design a website they should have to know about the users
need and analyze the new trend and technology and then design website. This helps designer to not
design as per the choice of user. While designing this kinds of concept are kept in mind.
Before designing a website we have to analyze the market. What kinds of trends, design are more
popular? Which is the latest technology used for designing. Purpose of website and demands of client,
budget these are the main thing which is analyze before design. If you are not analyze the market your
design are not able to fulfil the required of client. When designing a website we have to consider about
the accessibility. Your website are able for all kinds of users or not. In the present context about 20%
people are disable with different kind of disease. Someone have color blindness, audio disability, visual

disability, motor disability so we consider that thing before designing a website. Before designing
designer always has to know about the design and in which environment they are designed.
Conclusion:
Hence, first of all designer has to analyze to market before design. The designer should have to proper
knowledge about the concept of designing, different user’s choice. This makes the designer perfect. If
any designer don’t have the concept of designing they never fulfil the required of their client. In the
above paragraph I justify my arguments and conclusion which is given in task 1. Also justify the ideas
which is presented in task 1. In the above I give the some ideas for design a perfect and useful website
for all users.
Task 9/B
In order to achieve D2, you will provide evidence that you have taken responsibility for planning,
managing and organizing activities while doing all tasks and projects. The evidence will show how you
have planned, organized and managed the activities.
Introduction:
In this task I am going to explain about my planning, managing and organizing activities while doing all
task. I will show the evidence of my work with the help of Gantt chart. I do my all task in a given time
that show in this task. Gantt chart help us to manage and organize our task in a good manner with
figures. Now I can show my work which is done by me with the help of Gantt chart this is the evidence
of my all task in a single figure.

Now you can see how I manage, organizing, and planning for my projects. I finished all the task in
26days. I start doing my task from April 14 and finished it in May 10. While doing my task first of all I
planning for my task how to do it? Then do research on internet for the requirement of my task and I
collect all the requirements of my task. And then stated to do my first task i.e. task 1, it takes me 2 days
to complete. This task shows and explain about the design concept that have to be consider when design
a website. It is difficult to do for me because it is theory part and M1, so for this I research too much on
internet and asked from friends, class teacher and take help from book. In this way finished my first task.
The task 2. It takes to days to complete. An interactive website to meet the given requirements in the
scenario which I designed. I already complete my website in class with the help of class teacher and
friends and through internet also. So this task is easy for me to do when I do my assignment. In this task

I design a website using different tools like Dreamweaver, CSS3, JavaScript, and Photoshop and also use
some library from internet. Task 3, it takes me to 4 days to complete. In this task I evaluate my website
which is done in task 2. I evaluate my website in different field like usefulness of website, accessibility
of the website, and the proper validation of form which I used. It is also a theory part so it takes to much
time for complete. For this task I get help from my class teacher as well as friends and book.
For task 4 I took 5 days to complete. I implement a fully functional interactive website using design
specification and then convert it into a zip file and store in CD for submit to the class teacher. It is too
difficult for me because in this task I have to provide evidence which demonstrate how I applied a range
of method and techniques while implementing website. In this task I show the code with example of
each. In this way I complete this task. Now task 5 it took 2 days for complete. In this task I test my
website which is design for royal bank limited. use different types of testing mechanism like unit testing,
integrated testing, compatibility testing and stress testing in following table. It is not so hard to do so it
takes only 2 days. In this way task 5 was completed. For task 6. It took 4 days to complete. In this task
first of all I said with two user to use my website and give the feedback and recommendation for
improvements. And I take the feedback from the user and improve my website and make more attractive
and helpful, easy to use. This task I quite difficult to do because in this task I take feedback from two
users and then improve it. For task 7, it takes 2 days to complete. In this task I create onscreen help to
assist the user. I put FAQs, user’s manual and site map for the user which is already done in task 2, so in
this task I copied from task2 and paste here. It is simple to do. Similarly task 8, it takes 2days to
complete. Create documentation for the support and maintenance of the website. Tools which is used by
me for design a website. In this task I give the technique for the support and maintenance of website. In
this way I complete it.
Now for higher grade distinction I done the task 9/A, 9/B, and 9/C. for task 9/A, it takes 1day to
complete. In this task I write a few paragraph that evaluate and draw justify conclusion of the arguments
or ideas which is presented by me in task 1. I describe in details about my argument and conclusion.
Similarly for task 9/B it also take 1day to complete. In this task I draw Gantt chart to show my panning,
organizing, managing activities using chart. I explained in details how I done my project or assignment
in a given time. Similarly task 9/C it also take 1day to complete. In this task I wrote a few paragraph
which show I have generate ideas and have taken appropriate decision while responding task 6. In this
task I demonstrate my convergent, lateral, and creative thinking. This task is quite difficult for me. In
this task I generate ideas for making my website better through getting feedback from many users and
improve it. In this way I complete all the task in a given time.
Conclusion:

Hence, in this task I explain about my all task how they are done and completed. I use Gantt chart to
show my project completed index. And Gantt chart is the evidence to show this all task and project are
done by me and with the help of my class teacher, friends etc.
Task 9/C
To order to achieve D3, you need to write a few paragraphs which show that you have generated ideas and
have taken appropriate decisions while responding task 6.
Introduction:
In this task I am going to write a few paragraphs which show that I generated ideas and have taken
appropriate decision while responding task 6. In task 6 I explain about the feedback and recommendation
for improvements which is given by clients or users. After completing the task 6 I conclude that
improvements make website more attractive and responsive. Website becomes secure.
In task 6 I generated ideas like updating and improvements make the websites more attractive and easy
to use for all. When we design a website one main thing is consider always i.e. accessible. Accessibility
makes website more useful. In this world all people are not normal. Some are disable which has different
kind of unavailability of anything. No one can perfect. For example blind people they also use website
so for that users we have to design in attractive and simple. Put screen reader and navigation and brail
lippy system for them. Similarly some have problem of audio that is deaf. So for that users we have to
put screen reader and make short video which show navigation and how to use sites. For that kinds of
users put site map and FAQs section which help him to use in easy way. Thus, you have to design that
kinds of design which fulfill all the requirement of different users. Designing make website attractive. So
while designing the website good color combinations and clean design are more prefer. Before designing
the website designer should proper knowledge about the concept of design and they have to be analyze
the market for latest technology, which trends are more popular in design. Using bootstrap, jquery and
other frameworks for developing the website it helps to make design responsive and usable in all devices
like tablets, mobile, PC, and laptop etc. different library helps in making design attractive and it takes
short time for complete.
Nowadays, the trend of using website and designing website increasingly day by day. Every day’s
thousands of website are design and built. In this time website is the means of advertising so small as
well as big business personnel use website for their one purpose or business. But hacking website is also
increased day by day. So that we have design a good design with full of security.

Nowadays many designing trends are rapidly growth. Web designers are using a different set of tools
depending on the processes they are involved. This tool was updated by time to support newer standards
and software versions, but principles remained. Web and graphic designers are using latest technology
like vector and raster graphics for creating images for web or prototype design. Technologies for
creating a website that is used today involves standardized tags that could be written by hand or
WYSIWYG software. When creating a website, the best practice would be adjusting to standards. This
involves coding errors and assumption that identifications and classes will recognize each other in a
proper way. That is usually done using the description of the element's function. Creating a website, and
not going with standards, can be a really bad idea, because it can make your website unusable. The
standards are there because of proper web page's schedule, design and to ensure that coded elements are
closed in a proper way. Checking with V3C validator can be done only when proper declaration of web
page (DOCTYPE) is finished, which is used to find coding errors in certain lines of a code. The system
determines errors and areas which doesn't fit to web design standards, and this information can be altered
after. To understand web site itself, the most important thing would be to understand the way it works.
User experience like understanding web site's message, well organized elements must be crystal clear for
all users, especially if you want that visitor to come back. More experienced users usually have a better
understanding about website functionality, and if they find your web site useful, they will come back.
Less experienced users will not see the advantages or flaws that often.
After that web hosting is the main. Designer use best of best web hosting company for the security
reason. Good SEO is always help to secure website.
The web designer should be focused on good design and that both, experienced and non-experienced
user will find information they need. Successful website has only several typography, fonts which are
similar, instead of using a lot of different fonts. It is recommended to use Sans Serif or Serif fonts, but
not both. Web site typography should also be carefully arranged. Most of browsers recognize and
support a number of default fonts, and designers like to use them to avoid trouble. Most of parts on the
website contains delimiters with goal to divide text by paragraphs, and to leave more user friendly web
site.
Conclusion:
Finally, I give my ideas and justify my arguments which is given by me in task 6. I write a few
paragraph which show my justification and my self-evaluation. Good design always make website
perfect, attractive, useful for all types of user.




Web Design

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design

Uploaded by

Copyright:

Available Formats

Web Design

Niraj Kumar Yadav (HND / 1st Semester)

Design isn't just visual:.............................................................................................................................5

Short Loading Times:...............................................................................................................................6

Clean, SEO-Friendly Code:......................................................................................................................6

Compatibility with Multiple Browsers:....................................................................................................7

Design and Environment:...........................................................................................................................10

Niraj Kumar Yadav (HND / 1st Semester) 1

Niraj Kumar Yadav (HND / 1st Semester) 2

Frequently asked questions (FAQs) page..................................................................................................61

Site map page.............................................................................................................................................62

Users guide/ help page...............................................................................................................................63

Removing or Modifying Animation.......................................................................................................66

Tools used for site development.............................................................................................................66

Data and Information Collection Mechanism........................................................................................67

Niraj Kumar Yadav (HND / 1st Semester) 3

Consider: Users, Site Analysis Accessibility, Design and Environment.

Niraj Kumar Yadav (HND / 1st Semester) 4

Design isn't just visual:

Niraj Kumar Yadav (HND / 1st Semester) 5

Short Loading Times:

Clean, SEO-Friendly Code:

Niraj Kumar Yadav (HND / 1st Semester) 6

Compatibility with Multiple Browsers:

Niraj Kumar Yadav (HND / 1st Semester) 7

Niraj Kumar Yadav (HND / 1st Semester) 8

Niraj Kumar Yadav (HND / 1st Semester) 9

Design and Environment:

Niraj Kumar Yadav (HND / 1st Semester) 10

Niraj Kumar Yadav (HND / 1st Semester) 11

Our Services page

Niraj Kumar Yadav (HND / 1st Semester) 12

RBL Network page

Niraj Kumar Yadav (HND / 1st Semester) 13

Niraj Kumar Yadav (HND / 1st Semester) 14

Innovative Banking page

Niraj Kumar Yadav (HND / 1st Semester) 15

Niraj Kumar Yadav (HND / 1st Semester) 16

Niraj Kumar Yadav (HND / 1st Semester) 17

Terms and condition page

Privacy policy page

Niraj Kumar Yadav (HND / 1st Semester) 18

D-mat form page

Niraj Kumar Yadav (HND / 1st Semester) 19

KYC form page

Niraj Kumar Yadav (HND / 1st Semester) 20

Site map page

Niraj Kumar Yadav (HND / 1st Semester) 21

Interest Rate page

Niraj Kumar Yadav (HND / 1st Semester) 22

Users Guide page

Niraj Kumar Yadav (HND / 1st Semester) 23

FAQs (frequently asked questions) page

Niraj Kumar Yadav (HND / 1st Semester) 24

Niraj Kumar Yadav (HND / 1st Semester) 25

Niraj Kumar Yadav (HND / 1st Semester) 26

Niraj Kumar Yadav (HND / 1st Semester) 27

Niraj Kumar Yadav (HND / 1st Semester) 28

Niraj Kumar Yadav (HND / 1st Semester) 29

Niraj Kumar Yadav (HND / 1st Semester) 30

Niraj Kumar Yadav (HND / 1st Semester) 31

Niraj Kumar Yadav (HND / 1st Semester) 32