Pradeep Shrestha HND Second Semester Web Design Project

This assignment presents a comprehensive web design project for Kumari Bank Limited, a fictional commercial bank in Nepal. The project encompasses various aspects of web development, including understanding user needs, conducting site analysis, and implementing design concepts. It addresses different user types (expert, novice, regular, and occasional) and emphasizes the importance of accessibility for users with disabilities. The solution covers design considerations, including browser compatibility, connection speed, screen resolution, and operating systems. The project also involves creating various web pages, such as a homepage, capital plan, EMI calculator, bank account section, forms (Demat, KYC), branch and ATM locators, gallery, downloads, contact us, FAQ, sitemap, and privacy policy. Furthermore, the assignment explores user interactivity, graphics usage, and content delivery, ensuring a user-friendly experience. The solution also includes website testing, encompassing unit, integrated, compatibility, and stress testing. The project concludes with discussions on website hosting, performance improvement, and promotion strategies, along with a critical review of the design and functionality.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 1
ACKNOWLEDGEMENT
The success and final outcome of this assignment required a lot of guidance and assistance from many
people and I was able to finish my tasks because of kind support and help from my teacher and friends.
So, First and foremost, I offer my sincere gratitude to Rajan Raj Pant sir for providing me support,
information and guidance which made me complete the assignment on time. I respect and acknowledge
ISMT College and also Pearson Edexcel Board for giving a wonderful opportunity to do this
assignment and show me the perfect way to groom myself in the field of IT.
Next, I would like to thank my parents whose kind co-operation, support and encouragement has made
possible to complete these assignments on time. I would like to express my gratitude towards my
friends who helped me in all possible aspects.
Lastly, I would like to extend my sincere thanks to everyone who directly or indirectly helped me in
the accomplishment of assignment. Therefore, I appreciate all helps and supports of everyone.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 2
Table of Contents
ACKNOWLEDGEMENT ..................................................................................................................... 1
Scenario.................................................................................................................................................. 5
Task 1 ..................................................................................................................................................... 6
Introduction ........................................................................................................................................ 6
1.1 Users ........................................................................................................................................ 6
1.2 Site analysis accessibility ......................................................................................................... 8
Solutions ...................................................................................................................................... 10
1.3 DESIGN ..................................................................................................................................... 11
1.4 Environment ............................................................................................................................... 13
1.4.1 Browser Compatibility ........................................................................................................ 13
1.4.2 Connection Speed ............................................................................................................... 13
1.4.3 Screen Resolution ............................................................................................................... 14
1.4.4 Operating System ................................................................................................................ 14
Conclusion ........................................................................................................................................ 14
Task 2 ................................................................................................................................................... 15
Introduction ...................................................................................................................................... 15
2.1 Nature of Interactivity ................................................................................................................ 15
2.2 Client Needs ............................................................................................................................... 15
2.2.1 Images ................................................................................................................................. 15
2.2.2 Level of Security ................................................................................................................. 15
2.3 Development Timescale ............................................................................................................. 15
2.4 Website Design: ......................................................................................................................... 16
1. Homepage .......................................................................................................................... 16
2. Capital Plan........................................................................................................................ 17
3. EMI Calculator .................................................................................................................. 17
4. Bank Account .................................................................................................................... 18
5. DMAT-Form ..................................................................................................................... 19
6. Bank Branches ................................................................................................................... 20

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 3
7. ATM Locations.................................................................................................................. 21
8. Gallery ............................................................................................................................... 21
9. Download........................................................................................................................... 22
10. Contact Us ......................................................................................................................... 22
11. FAQ Page .......................................................................................................................... 23
12. Sitemap .............................................................................................................................. 24
13. Private Policy ..................................................................................................................... 24
2.5 User’s Need ................................................................................................................................ 25
2.5.1 Appropriate use of Graphics ............................................................................................... 25
2.5.2 Delivery of the Content ....................................................................................................... 25
2.5.3 Complexity of Site .............................................................................................................. 25
Conclusion ........................................................................................................................................ 25
Task 3 ................................................................................................................................................... 26
Introduction ...................................................................................................................................... 26
3.1 Novice User ................................................................................................................................ 26
3.1.1 Usefulness ........................................................................................................................... 26
3.1.2 User-Interactivity ................................................................................................................ 26
3.1.3 Proper Validation ................................................................................................................ 27
3.1.4 Accessibility ........................................................................................................................ 27
3.2 Disabled User ............................................................................................................................. 27
3.2.1 Usefulness ........................................................................................................................... 27
3.2.2 User-Interactivity ................................................................................................................ 27
3.2.3 Proper Validation ................................................................................................................ 28
3.1.4 Accessibility ........................................................................................................................ 28
Conclusion ........................................................................................................................................ 28
Task 4 ................................................................................................................................................... 36
Introduction ...................................................................................................................................... 36
4.1 Navigation Bar ....................................................................................................................... 36
4.2 News Slider ............................................................................................................................ 38
4.3 Header .................................................................................................................................... 39

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 4
4.4 Image Slider ........................................................................................................................... 40
4.5-Footer ..................................................................................................................................... 41
4.6 Gallery.................................................................................................................................... 43
4.7 Downloads ............................................................................................................................. 44
4.8 Demat Form ........................................................................................................................... 45
4.9 Contact Us .............................................................................................................................. 47
Conclusion ........................................................................................................................................ 49
Task 5 ................................................................................................................................................... 50
Introduction ...................................................................................................................................... 50
Unit Testing ................................................................................................................................. 50
Integrated Testing ........................................................................................................................ 58
Compatibility Testing .................................................................................................................. 61
Stress Testing ............................................................................................................................... 63
Critical Review. ................................................................................................................................ 67
Conclusion. ....................................................................................................................................... 68
Task 6 ................................................................................................................................................... 69
Introduction. ..................................................................................................................................... 69
Conclusion. ....................................................................................................................................... 72
Task 7 ................................................................................................................................................... 73
Introduction ...................................................................................................................................... 73
FAQ Page ..................................................................................................................................... 75
Site Map ....................................................................................................................................... 76
Site Navigation............................................................................................................................. 76
Conclusion ........................................................................................................................................ 81
Task 8 ................................................................................................................................................... 82
Introduction ...................................................................................................................................... 82
Design Layout .............................................................................................................................. 82
Tools Used ................................................................................................................................... 85
Task Breakdown Approach .......................................................................................................... 87
Data and Information Collection Mechanism .............................................................................. 88

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 5
Product Deployment .................................................................................................................... 89
Maintenance ................................................................................................................................. 91
Conclusion ........................................................................................................................................ 91
References: - ........................................................................................................................................ 95
Scenario
“Kumari Bank Limited” is a one of the commercial banks of Nepal with an objective of providing
competitive and modern banking services in the Nepalese financial market. The bank always focus on
building sound technology driven internal system to cater the changing needs of the customers that
enhance high comfort and value. The bank is pioneer in providing some of the latest / lucrative banking
services like E-Banking and SMS Banking services in Nepal.
The IT manager looks for a professional and competitive look for their website. The website must
include the facilities such as E-Banking, ATM locations across the country, branches, image gallery
etc. There should be couple of forms like Demat account opening online form, KYC form along with
customer feedback form. The form should be properly validated against empty fields, data types and
other fields as par necessary. The website should be W3C complaint (XHTML and CSS). You have
been employed as a “Web Developer” Your responsibilities include but not limited to suggest recent
web trends, technologies and tools that should be used to meet the goal and later, promote the website
(SEO, Social Network Implementation). Finally, submit a fully functional interactive, appealing and
tested (W3C XHTML/CSS validated) website. For interactivity and better user experience, JavaScript
(or its libraries like jQuery) can be used wherever needed.
In order to be appointed for the position you need to demonstrate skills required for the position.
Particularly you have to demonstrate that you understand the functions of website hosting and you are
able to manage websites, improve website performance and promote them.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 6
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.
Introduction
Web design in simple language can be termed as a dynamic approach. Dynamic approach in
the sense that the real definition of it lies and varies from the designers prospective. Before any
designer start making a fully functional website, a designer must take a design concept in
consideration.
It is not always true that a good website must have too much animations or multimedia. It might just
include the words content just for the information or satisfactory purpose. According to Robert White
(2002) claims that any designer who sees from his perspectives only but not through the perspectives
of the users are obvious to have more and more number of unsatisfied clients. Hence, the concept of
developing any website should be solely depend on the perspective of the client. It should provide full
content that the client wishes to find out rather than increasing more and more complexity by adding
various unnecessary information, Medias, etc.
Before making a good website, we must consider some of the major points. In this task, I’m going to
discuss some of the topics: -
1.1 Users
Users refers to the client who visits or uses the website for various purposes. These purposes generally
depend upon the content the website contains. Therefore, it is important to have convenient and
specific content the user desires while surfing the website. According to Chris Young (2015), argues
that for any webpage to be successful the first and foremost thing that the developer must consider are
the traits, needs, objectives of the website. When the web visitor’s traits are taken in importance then
the pages can be developed accordingly to meet the client’s needs and success of any website can be
gained only by knowing the objectives of the website. For a website to flourish, the designer must take
in account the design concept for any user who is browsing the website. Hence, to sum up the intension
of developing the website must be clear and the information that the client want should be provided in
easier manner. There are generally 4 types of web clients for which we can consider. Some of them
are briefly explained below: -

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 7
1.1.1 Expert User
Expert Users are the professional users. They acquire skills and knowledge from great deal of
practices in particular subjects or fields over years. These web clients have no any difficulty in finding
any content from the websites or using the website. These users have advance skills and know how to
use the webpage properly. They can also find out the problems that are occurring in the website and
can effort in solving it. They are very active and effective users that can physically and mentally make
sure and secure the webpage. They are free for using the content or the applications of the website.
They are always secure while using the website as they can also bypass the problems that occurs in the
website.
1.1.2 Novice User
Novice Users are the new users to any system or website. Novice users are the non-experienced users
to any website. They require simple, basic and easy interface to learn and some extra more help or
effort for advance use. While designing a website, we must consider for the novice users too. We
should remember that not to make the website shadow or add some unnecessary applications or
features. This will make the user more confusing too. The web designer must also add the help file to
reduce the error or problems that in the website by the users.
According to Albert Thompson (2015) defines Novice user as the users that are having the features
of internet at the highest potential at the first stage. This means that the users that are very new to the
website and need and extra help to use the web properly. The rate of use of website by these users are
the same as the other users but the basic difference between them is that they do not know the basic
rules of the web. Hence, these users are specifically targeted for obtaining the desired informations
that they seek and not any further information of the website.
1.1.3 Regular User
Regular Users are those users who visit the website frequently or regularly for some specific purposes.
They can just go into the website and easily get the content they are looking for. These users generally
look out for the mails or the updates that in the web. Some examples of the regular users include
students, clients, staffs and other too.
Regular user generally visit the website, comment it and use the effectiveness or the functionality of
the website. These users are regularly updated with the web contents and website interface. Therefore,

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 8
these users are also one of the important part of the web users. These users are like our asset as they
give their feedbacks and further suggestions that are to be included or how the layout should be. Hence,
one of the key aspect of becoming an expert user is becoming part of regular user too.
1.1.4 Occasional User
Occasional Users are the users that visits the website once or week or once a month. These users use
the web very rarely just to check out certain events or information that occurs rarely in a week or month
or even once a year. One of the examples of the occasional users may include people who just want to
know the exchange rate of different currencies. Therefore, these users use the website for specific time
period and get disturbed when new content or extra features are added because they are used to the
website for certain interval of time after a long period.
1.2 Site analysis accessibility
Site accessibility refers to the people who can access the website. The designed website should be able
to give access to the people of different age group and also the people having different disabilities. The
developer and the designer team must take in consideration to this also.
There are thousands of people who are having different defects such as disabilities and our website
must also include them too. According to Gim Gordon (2007) argues that web must be accessible to
all the people who are having various disabilities so that these people can also get equal opportunities
as other and they can also participate in the social matters actively. As the disabled people also have
the equal right as the abled people at present and rather to be called differently abled than disabled
people. People who are differently abled are in various society.
Web accessibility comprises all the disabilities that generally affects the access to the web such as
auditory, visual, physical, cognitive, speech, or even neurological disabilities. As the web is the main
source for getting as well as providing the information and also interacting with the society too? Hence,
it is very important that the web accessible in order to provide equal access and equal opportunity to
the people that are differently abled. There are various disabilities let us discuss some of them in brief.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 9
1.2.1 Color Blindness
Color blindness is one of the major problem for the people having disabilities. Therefore, the created
website should be able to understand and readable by the visitors regardless of the text color and the
background. Color combination of the text and background also plays a vital role for the website to be
readable. The color combination should be eye catchy and of good combination in the website. The
combination of color, text and background should match otherwise users may not be able to get the
required information in the appropriate time. Hence, use of high contrast should be avoided as well.
Similarly, to attract the users and viewers the graphics used in the website plays the key role, so it
should also be managed well.
1.2.2 Visual Disability
Visual disability is also one of the web accessibility that is not easily corrected as well as not easily
forgotten too. Some of the users may have low vision whereas some may not have any vision at all.
Users like elderly people, sick people or injured people, etc. generally have low vision. Color
blindness also occurs when the user is unable to see the color in a normal way. Color blindness
happens generally when the users cannot distinguish between certain colors, like in the green and red
color and occasionally in the blue color also.
Web Aim (2013) claims that most of the people use some kind of assistive technology to aid their
vision. Though unaware, most of the people use some tools in order to view the required material. We
can also audio, video information source for complete blind people and those for the color blindness
people we can also keep some images that can help the users.
1.2.3 Audio Disability
Audio disability is the condition of the people where people cannot listen to, they can only feel and
see. Web contents are not always a visual presentation. We see web contents in various forms such as
graphics, video, audio, animation and text. So, not only the visually disabled people but also people
with auditory disabilities must be considered when developing a web content. The solution for the
people having audio disability problem is that we can provide some captions or subtitles and transcripts
to the video or the audio content that are in the website.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 10
1.2.4 Motor Disability
Motor disability may include impair such as motor and speech disabilities. The motor disabilities
include weakness in muscles or lack of movement coordination. Sometimes the users may be unable
to move the mouse or keyboard and some may give out slow response. The speech disabled people are
unable to produce proper speech which may be in terms of clarity or loudness. It may also refer to
people who may not be able to speak at all. The website today is being more interactive than ever
making user involved in the page. The designer must be also aware of the fact that such physical
disabilities must also be taken into consideration while designing the web page. The solution to this
problem is that the entire web function should be able to be done with mouse or keyboard. Also, various
technologies such as head wand, mouse stick, voice recognition software, eye tracking software,
oversized trackball mouse, single switch access, puff switch, sip and adaptive keyboard, etc.
1.2.5 Cognitive and Neurological Disability
The cognitive and neurological disability include learning, memory impairment, seizure disorder and
many more which may be related to malfunctioning of nervous system brain. It is one of the broad
disability in which a person has greater difficulty with using mental tasks than the normal person. This
generally occurs in the person’s psychology or biology which leads to memory problems, attention,
problem-solving, reading, etc. Everyone at some point or another accidentally clicks on the wrong link,
misspells a word, or commits some kind of error on the web.
Solutions
 Display error message if the user makes error.
 Providing text alternatives to visual and audio content.
 Make text content readable and understandable using simple and clear language.
 Avoiding use of color to convey essential information.
 Using high-contrast foreground/background colors.
 Avoiding flashing animation.
 Make all functionality available from the keyboard.
 Provide ways to help user navigate, find content, and determine where they are.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 11
 Maximum compatibility and use of assistive technology.
1.3 DESIGN
The design is the part where the website starts to take its body. It is the actual designing phase where
there is planning, making and implementation of the content matter. While designing the website at
first all the requirements should be analyzed as it is essential to meet all the user’s requirements. The
designer should also have knowledge on advantages and disadvantages of website designing, keeping
those things in mind helps them to design website easily and hence output will be as expected. Some
of the essential factors that should be considered while designing website are: -
1. Site Map 2. Visual Design 3. Optimization 4. Programming languages,
5. Website Elements 6. Information gathering 7. Planning
1.3.1 Content Design
Web contents are the information in the web that are in
the form of text, multimedia or graphics. Content design
is the most crucial part when considering a web design.
Simply compelling (n.d) argues that many of the
designers keep in mind that ‘content is king’ and has
always proved right.
1.3.2 Site Map
Site map generally is the visualization of the link
location. Site map helps link different pages of our
web page and ease our navigation. James Deer
(2013) state that site map is often the starting point of
a web design process. It helps us design our pages
further more with relative content and plan for better
webpage.

Web -Site Designing Concept 2016
Pradeep Shrestha (HND / Second Semester) 12
1.3.3 Visual Design
Visual design is the implementation of the content matter
into the web page. Use of typography, graphics, animation
and media are managed during visual designing and gives
the body to the web page. Dab Apps (n.d) states that web
visual design as a way of presentation that makes user
interact with the page. A good visually designed web page
makes user spend more time in the page and improves
user experience.
1.3.4 Optimization
The website designed must be maintained and optimized. There must be facility to optimize any of the
area in future if necessary. Some of the optimization area are Search engine optimization and mobile
optimization. The search engine optimization is the optimization of website so that the website is
ranked better in the search engine. The website must also be optimized for the mobile use.
1.3.5 Programming Language
There are wide variety of programming language
available to develop an effective website. The
web development language includes HTML,
CSS, JavaScript, PHP, Python, Ruby and many
more. According to the requirement, the
developer must choose the language wisely.
1.3.6 Website Element
Got2Web (n.d) states that web users seek for a pleasing format to view the required information which
also guarantees their return visit. There are various key elements which must be taken in account for
the web page design. Some of the key factors are
• Proper use of color scheme