zcbc website designing assignment programming assignment help programming assignment help zcbc...

h t t p : / / w w w . p r o g r a m m i n g a s s i g n m e n t s h e l p . n e t /

2016

ZCBC Website Designing Assignment

Augustine Barlow

Programming Assignment Help

Programming Assignment Help Page 1

ZCBC Website Designing Assignment

Introduction

This coursework to be submitted by student in subject of Website Design covering deep understanding of web design

concepts, good understanding of web design concept usage while designing web application/sites, understand the

business requirement and then design the website based on user requirements. I am organizing this report in the

same way as it is asked to organize in the task sheet. I will complete all the tasks as specified in assessment

Websites are providing a new way of information sharing across the globe with ease of a single click. Now it is very

easy to share/communicate the required information with the intended audience through the websites which in turn

providing the chance to grow IT sector. Any website, once it is published over the internet, can be accessed from

anywhere in the world. This information availability makes enterprises to be present globally and help them to grow

their business. With the increase in business, website shall also be interactive enough that it can easily provide the

information to the customers as and when it is required and also shall be able to resolve or store the user queries (if

any). With the use of websites, enterprises can promote their business and can share the updated information with

the intended audience in an easy manner. An interactive website allows two way communication between the

customer and the organization.

P1.1: Web Design Concepts

There are certain concepts available for web designing which one web designer shall follow in order to create an

interactive, responsive and user friendly website. Web designer/developer shall use the organization details and

logos on all the pages for which the website is being designed. Designers or developers must provide frame/forms for

user inputs/feedback. Not properly designed or un-organized information may get user frustrated and he/she might

navigate another similar kind of website for information which he/she could not find here. A good website shall cater

requirement of all type of users which were identified during user requirement gathering.

Below are some of the major web design concepts which one should follow in order to make a good and responsive

website.

Requirement Gathering

Requirement gathering is one of the major element in designing of any website/application as it will decide how the

website should look and what all functionalities shall be available there. It is also important to freeze the requirement

from user before start working on actual development which will help to avoid last minute changes. Website

design will depend on the requirement gathered such as there might be different kind of users who will be accessing

the website and what information shall be made available to whom. A good website shall fulfil all the requirements

gathered during this phase. Information shall be categorized based on access mechanism so that only relevant

persons can get the relevant information. As website will be designed based on user inputs and will be accessed by

rest of the world, hence this phase plays an important role in the success of website that will be designed.

Website Contents

http://www.programmingassignmentshelp.net/basic-web-designing-assignment-help/


http://www.programmingassignmentshelp.net/ecommerce-website-designing-assignment/

http://www.programmingassignmentshelp.net/ecommerce-website-designing-assignment/


Contents are very important aspect of any website as irrelevant content may lead to users get frustrated and he/she

may walk away from website to another website where he/she can find required information. Success of website

depends on how accurate and fast we can provide the required information to the targeted audience. A good website

shall understand the user requirement and then organize the website content based on targeted audience so that

users find it useful to navigate the website and may also refer it to the friends or relatives. This way it will help

organisation to grow his business.

Usability

Usability is something which defines behavior of a website. A good website shall behave in a rational and expected

way.

E.g. we will never read an article on a news portal which will require users to register on portal before they allow them

to read any content. Another example may be of search engine which is not providing the expected result for the

search made by user.

Above are examples of bad usability for any website which may be because of wrong user inputs captured during

requirement gathering phase. By considering user needs at the center of the experience, the website will be designed

in satisfying and rewarding manner.

Creating usable sites is not easy, however, and much of the knowledge simply comes from experience. Suggested

way to look on similar websites and make a note of annoying things on those websites which will help us to not to

repeat those in our design. Finally website shall be tested before making them move to production as it will help us to

identify:

If people can find pages they are looking for

If images/audio/video work in their browser

If they get annoyed at anything

are they pleased by anything

Usability testing is costly but same can be achieved with the help of friends and family, who can test and provide

valuable feedback on the same.

Audiences of Website

Audience identification is also one of the important aspect in making a website successful because it is something for

which website is being designed and information shall be organized as per their needs. Before starting actual

development we shall know about the target audiences like:

Navigation pattern of user

Activities in which user is involved

Products used by them

Age group of audience

Once we have answers for such questions, it may help web designer to better understand the targeted people who

will be accessing the website and it will be helpful for him to design website in good and organized manner. Getting

an understanding of these individuals helps to create and end up communicating well. Again, this is very important to

know the target audience. If web designer is not aware about the target audiences of website, it will be similar to


make a guess in dark and hoping that everything will go well. If there are multiple audiences for a website, then web

designers shall identify the common interest area between all of them.

This is also being captured during the requirement gathering phase of website development. Also the organization

will also specify the users from organization of that website like top management, middle management, admins who

will manage the website, stock managers who will manage the stock data for that organization. In short, there shall be

clear vision on targeted audience and information they might be seeking while accessing this website.

Why Web site?

Why an organization shall get developed a website? Organization must have answer this question before proceeding

further. One of the main purpose for having a website is to provide the equal information access to users. Every user

will get the similar screen, similar contents. A well designed web site always leaves a good impression on the users

than a poor designed.

Earlier, websites are getting created in same manner, printed brochures and other marketing tools were used. By

using this method companies were able to post their information to the Web quickly. Later stage, companies felt that

posting “brochures” on the Web was not an effective use of this medium.

In print medium contents are linear in nature but Web is a non-linear medium and has different properties that are not

expected in traditional linear format.

The most distinctive feature of the Web is its interactivity with the user. Traditional print media cannot personalize the

user‟s experience. A website can increase the interactivity with user, which creates a direct connection between the

organization and visitor.

Navigation Layout

Navigation layout plays an important role in success of any website as it will decide how website is organized and

what information will be available where. A good website organizes required information in an easy manner for the

users. For larger sites web designer provides menu items that contain sub menu items also known as „cascading

menus‟ or „drop down menus‟. Menu lay out will depend on how many items are there in menu.

Navigation is also little bit difficult to implement as there may be requirement where one set of information is available

for registered users only and another set of information is available for all. Navigation layout can be simple or

complex, like a few main pages or many subpages. There are no set guidelines on defining website layout as it is

totally dependent on the web designer and user requirements, how organization wants to display the content.

Accessibility

A good website shall remain accessible all the time and it should work in a manner it is designed. But accessibility is

not restricted with the above said only, because accessibility issues may affect many peoples. An awareness of the

problems that people may face while accessing the website is important. E.g. we should not assume that users will

have a mouse, that people can see the images used; that everyone will have Flash installed. In such scenario, an

alternate mechanism shall also be available.

Cross Platform Compatibility


As world is going mobile day by day, more peoples are using phones, tablets, or smartphones to browse and view

web content. It indicates that there will be missing opportunities if the designed website does not support mobile

devices and takes longer time to get loaded on different browsers. There are most of the websites are not designed

or developed in a manner that they can fit on small screens for phones, tablets and smartphones. Suggested

approach is to have lighter version of websites to be designed for such devices. This kind of treatment to the user will

give them a competitive edge, fresh look and improved value.

Other Links

For a good website, it is suggested to use one color and style for internal text or button and different color for links

that lead to another web site. Web designer shall ensure that text links are in different style than regular text so that

the viewer knows immediately that “this text is different, and it is intended to do something else”. Using underlines is

also a popular way to show that “this is a link”.

Apart from the above said, all the links given on website shall be working once it is made available to end user. It‟s

always an embarrassing situation where user could not use the links provided and he/she has to visit another website

because of such issues. It is suggested to do sanity check before making website available to the public on internet.

P1.1.1 Web Design Concepts I Used for ZCBC Website

I have considered below major web design concepts during design and development of website for Zodiac College of

Business and Computing:

Requirement Gathering

Website Content

Usability

Audience of Website

Why Web site?

Navigation Layout

Accessibility

Cross Platform Compatibility

Other Links

I have not considered below two web design concepts particularly for designing this website:

The Audience of website are pre-decided because target audiences of this website are prospect students who wish

to opt the courses in this organization and organization management who can view and manage the content of

website.

I have not considered Accessibility as I have designed this website with minimal dependency on client machine

requirement, e.g. there is no need to install flash player on client machine as I have not used any such content in

design and development of this website.

P2: Website Design of ZCBC

Zodiac College of Business and Computing is recently open college at the heart of London and looking to develop

website where they can provide the information about the courses, fee structure etc. and also prospect students can

leave their queries to the college administration using the website. Courses offered by college are as given below:

http://www.programmingassignmentshelp.net/web-design-and-development-assignment/



EDexecl HND Computing and System Development

o Business Skills for eCommerce

o Computer Systems

o Employability and systems Development

o Management in IT

o System and Analysis and Design

o Human Computer Interaction

o Web Design

o Networking Infrastructures

EDexcel HND Tourism and Hospitality Management

o The Travel and Tourism Sector

o Finance and Funding in the Travel and Tourism Sector

o Marketing in Travel and Tourism

o Contemporary Issues in Travel and Tourism

o Sustainable Tourism Development

o Travel and Tourism Entrepreneurs

o Heritage and Cultural Tourism Management

o Incoming and Domestic Tourism

o Tourist Destinations

o Business Health Check

EDexcel HND in Business (Management Pathway)

o Organization Behavior

o Aspects of Contract

o Business Environment

o Managing Financial Resources and Decisions

o Managing Business Activities to achieve results

o Managing Communications, knowledge and information

British Computer Society Certificate in IT

o Information Systems

o Software Development

o Computer & Network Technology

Here the requirement from college administration here is to design website by which they can provide the information

about the above mentioned courses like course details, fee structure etc. This website shall be available to the world

wide users but mainly will be used by prospective students to get the required information in an easy manner and as

and when it is required.

I have designed website in the same manner as stated in the task sheet.

P2.1 what is Storyboard

Storyboard is also known as blueprint for any web project. Storyboard is mainly used to outline the design approach

before starting actual design and development work. It also defines the layouts of website, contents of website and

organization of information on website. In this project also, I have created the navigation layout of ZCBC website.

It is advisable to take customer consent on navigation layout before starting actual implementation of the same.


P2.1.1 ZCBC Website Navigation Layout

ZCBC website navigation layout defines the access mechanism and information availability on website. It will

demonstrate how the information available will be accessed and where it will be available on website. It will also

display the details of menu and sub menus so that it will give a feel of how website will look like once it is designed

and developed. ZCBC website navigation layout given below will display the organization of pages, sub-pages i.e.

menus and their respective sub-menus.

Figure: Navigation Layout

Four main sections of any webpage, where information is displayed and organized are:

Headers

Footers

Menu Items

Contents of webpages

P2.2 Competitors Website Evaluation

Before starting actual development of website, I have decided to visit the websites of major colleges in London to get

an understanding of their website design and content arrangement. It gave me a clear picture of what information is

being provided by the competitors on their websites and how contents is being organized there. How easily the

required information accessible. So I have identified the competitor who are providing similar services in London and

decided to study their websites.

This process, helped me a lot to identify the weak and strong point of the competitor.

In this case I visited four websites of major higher study schools in London and tried to evaluate them as per below

criteria:

Design of Web Site

http://www.programmingassignmentshelp.net/website-designing-testing-assignment/


Organization of Content

Information Availability

Accessibility

P2.2.1. City University London

Web site of the organization: http://www.city.ac.uk/

City University website is designed well and contents are organized properly. Information related to students is

organized in such a manner that students can find it in easy manner. Lots of contents are available there on home

page itself. Courses offered by university are organized in different categories like Study courses, Research courses,

business course etc. Study courses further segregated in categories like Graduate Course, Post Graduate Courses,

diploma courses etc. Site is designed in consistent manner and the contents of Header and Footer are same on all

pages which gives this website a consistent look and feel and attracts user. The sub pages are properly organized

with relevant contents. Once used drills down the selected course from the respective menu item, he/she may find

lots on information on the subpages related with that course including fee and application procedure etc. Prospect

students can get the details on the available courses without navigating through all the menu items and searching the

relevant courses. All the information which might be useful for existing students or prospect students are very well

organized and places. Overall website design is very good and impressive. Home page of website is as given below:

Figure: City University

Course description pages are designed with complete information on courses and there are relevant pictures placed

on the page along with description of the course. This website allows student to obtain the information on how they

can apply for a course. You can easily identify different courses. Website navigation layout is properly designed. All

http://www.programmingassignmentshelp.net/zcbc-website-navigation-layout-assignment/


the pictures selected are relevant and indicates the nature of the courses offered by them. The site is working

properly and there was no broken link observed on the website.

The one issue that I observed on this website is that there is no Apply Online mechanism available on this website.

Also web site is loading slowly and pages are taking more time to show information.

P2.2.2. Imperial College London

Web site of the organization: http://www3.imperial.ac.uk/

This website is designed in very simple and effective manner. Information provided on home page is very less

however all information is categorized and available in different manner like different section for prospect students

and for existing students. Also courses are available there in different categories like courses, research etc. and

further courses are categorized as undergraduate courses, post graduate course, diploma courses etc. Menu bar is

very well designed and assist to navigate site in easy manner. All the subpages have a link to go back to home page

of website so that once user is done on that page, he/she can return to home page in easy manner. This website

provides the information to the courses offered by them, information related to the course, fee structure, and duration

of the course and apply mechanism available for that course i.e. how to apply for that course is available on website.

Figure: Imperial College of London

Website is getting loaded at good speed and there was no delay observed in page loading. All the pictures chosen

here are related to the courses offered and provides a nice look to website. This site is providing detail information

about the courses offered. It is displaying the list of available courses with initials so that if user is aware about the

course name, he/she can directly go to that page by clicking on the Initial Letter of that course. Site is having lots of


useful information for everyone who is looking to go for higher studies. Site also provides to get connected with old

students with the help of Alumni link.

The major problem that I observed with this website is that there is no navigation path is being displayed on the

subpages, hence it becomes difficult for user to know how he reaches on this web page and where currently he/she

is navigating. Read about Website Designing and Testing

P2.2.3. King‟s College London

Web site of the organization: http://www.kcl.ac.uk/index.aspx

The Home page of this website is full of pictures and lots of links which needs to be further drilled down to get the

required information. However few important links with little information is provided on images as well using links.

They have provided the links for Alumni so that old students can also get connected with each other. There are

different links provided on home page like Prospect Students, Campus life, Research etc. Courses are categorized in

different categories like undergraduate courses, Postgraduate courses, diploma courses etc. This website is

providing all the information related to the course in one go and in an efficient manner. The menus on site are simple,

organized and easy to navigate. Subpages are designed properly and the required information is available in

presentable manner.

Figure: King’s College London

This website is providing an option to view the course details by navigating through the course page and you can get

the detailed information once you are there on the required course page. It is providing complete information of

http://www.programmingassignmentshelp.net/website-designing-testing-assignment/


course like, duration of course, course eligibility, course contents etc. This website allows to search by subject area

and browse by course title which is one of the good feature as it will help to retrieve the course information in an easy

and efficient manner. Pictures and videos used to represent the course are relevant.

User‟s current navigation path is not displayed on pages which makes it quite difficult for the user to remember the

current navigation path which he/she has followed to reach on this page but there is one link provided on each page

to go back to Home Page which is quite good option.

Site is working properly and there was no delay observed in pages loading without any error on the screen. There

was no broken links on this site as well.

P2.2.4. London South Bank University

Web site of the organization: http://www.lsbu.ac.uk/

The Website of London South Bank University is loaded with lots of contents on the home page. Menu items are

categorized in different streams like Courses, Student Life, and International etc. Under main menus as described

above, sub menus are created e.g. under courses, courses are categorized in Graduate Course, Post Graduate

Courses, Employer Sponsored Courses etc., which leads to the respective web pages of selected course. Also there

is search available on Home page itself for the courses offered by university where student can search the specific

course and visit to the page to get more information.


Figure 4: London South Bank University

This university is offering courses for international students also and provides information in all aspects like visa

process, funding process etc. Images and content chosen for subpages are relevant and providing detailed

information on the courses offered. University website is also providing information about the different aspect of

Student Life in university like accommodation, facilities, sports etc. Since there are courses available in multiple

stream, student can chose as per their wish from the available courses.

Searching of the course is available by entering the relevant keyword and by navigating the Initials of course as it is

providing the available course listing based on Course Initials. You can compare the available courses as well. Once

you are on the desired course, it offers all the information related to the course on that page related to that courses.

Navigation path is also available on all the pages which is giving users an easy to navigate feel.

Site is working well and there was no delay observed in page loading also.

P3.1 Output Design and Development of website

For designing and developing a website, there are tools available on web which can be used to do the same. A

developer can use normal text editors as well but that will increase the development time. These tools help


developers to develop the websites in an easy, fast and efficient manner. These tools are known as Web Authoring

Tools. Most commonly used web authoring tools are:

Adobe Dreamweaver

MS FrontPage

Google Sites

Scripting languages are used to validate user input before proceeding that data to the server. Commonly

used Scripting Languages are as given below:

Java Script: JavaScript is used to validate user input. It can be used to: Change HTML elements, Delete

HTML elements, Create new HTML elements, Copy and clone HTML elements and many more. It is one of

the most popular scripting language in world.

PHP: is open source scripting language which is used for web development. It can be embedded in HTML.

JavaScript can also be used along with it to validate the data.

ASP: also known as Classic ASP or ASP Classic, was Microsoft‟s first server-sidescript engine for

generation of dynamic web pages

JSP: JSP is java web programming i.e. to generate dynamic web pages it is used. Dynamic web pages can

be based on HTML, XML or other document types.

Mark-up languages are used to generate and define the user interfaces of any website. Also it provides the different

kind of inputs mechanism that can be used to design website. Commonly used Mark-up Languages, which are used

widely are as given below

HTML: is the set of mark-upsymbols or codes inserted in a file intended for display on a website when it is

seen in web browser.

XHTML: this is the cleaner and stricter version of HTML i.e. HTML defined as an XML application.

CSS (Cascading Style Sheet): it defines how to display HTML elements like positioning of contents etc. As

we can re-use the same, it can save a lot of efforts.

DHTML: Stands for Dynamic HTML and major components are: JavaScript, CSS, HTML/XHTML and DOM

(Document Object Model)

Selection of Tools

For developing this website, I have decided to use the below mentioned tools:

Web Authoring Tool – Adobe Dreamweaver

Mark-up Languages – HTML, XHTML, CSS

Scripting Languages – PHP, JavaScript

Reason for Choosing Adobe Dreamweaver

This is one of the most commonly used web authoring tool, that supports to work in WYSIWYG manner i.e. you can

view the code while designing the website. It provides standard features like syntax highlighting, code completion,

and code collapsing, real-time syntax checking etc. It provides hints to assist the user while writing code which can

help user to avoid any issues of coding and results in saving development time. Design view of Dreamweaver

provides facility to design layout at a fast pace. By changing the design view, code is being update automatically by


the Dreamweaver itself. Integrated browser also provides a quick view to the work done so far, along with this user

can configure external browsers as well, which can help the developers to check cross browser compatibility. Third

party extensions are also supported by Dreamweaver to enhance the functionality of the website. It also supports

different file transfer protocols to transfer updated website to the remote web server in an easy manner. With the help

of templates, a website can be created in an easy manner and it also speeds up the development time. Also usage of

template helps developer to maintain consistency across the website.

I used a standard HTML template offered by Dreamweaver and customized it as per the requirement. Post template

readiness, I used that template in all the pages. I have used menu bars provided by Dreamweaver to create

navigation bar for the website.

Read about: OOPS Assignment

Template Designing

Below screen shots depicts the template design for this website

http://www.programmingassignmentshelp.net/oops-assignment-help/


Figure: Template Design

Reason for choosing PHP & JavaScript, HTML & CSS

I have decided to use PHP for server side scripting because it is most widely accepted and used one language for

web programming. It is open source, free and easy to learn and use. Main reasons to choose PHP are its features, as

depicted below:

Faster load time

Less Expensive

Cheaper Hosting

Flexibility

Easy to Learn

Scripting language that I chose is JavaScript because it is most widely used and easy to use. JavaScript is used to

validate the user input from end user so that only authentic information will be posted to the backend systems.


Main features of JavaScript are as depicted below:

Easy to use

Prototyping language

Compatible with all HTML editors

Supports object oriented design

More control over the browser

Supports cross browser compatibility

User input validation

To develop this website, I used HTML 5 which is the most developed HTML available as on date. Few of the key

features of HTML5 are as depicted below:

Video embedding in pages

Graphics rendering on the fly.

Fast application loading because of Application caches use

Supports Geolocation to get/track the current location of user

Supports email input so that no custom validation need to be done to validate the user input for email

address

Supports creation of context menus

CSS is used to maintain consistent styling, like fonts, placing of contents etc. across the website. It helped me to

design the layout of website in lesser time and in consistent manner. It helped me to share formatting and reduces

complexity and repetition in the structural content. It also helped in reducing the load time of web pages, because a

page without CSS can have nested loops of tables. Therefore using CSS also improves the speed of a webpage. It is

also supported well by most web browsers.


Figure: CSS Design

Designing of Navigation Menus

Post design of templates for the content, I have added the menus to the template which will be used to navigate the

website. After that I have added all the pages to the links in menu bars.

Because of use of template, links once created in template, will automatically updated in all pages and there was not

need to update them separately. This way it helped me to reduce the development time.

Forms in Website

There are two forms I used to capture user input: one form is where we can show college contact details and can

capture the user queries. Another form is used to apply for the course online.


Figure: Contact Form


Figure: Form- Course Application Form

Also Read: Reed Music School Website Designing Assignment

Appendices/References

http://www.w3schools.com

http://www.php.net/manual/

http://www.siteground.com/tutorials/dreamweaver/dreamweaver_templates.htm

www.w3.org

http://www.programmingassignmentshelp.net/reed-music-school-website-designing-assignment/

zcbc website designing assignment programming assignment help programming assignment help zcbc...

Documents