Web Programming (WP)

GTU # 3160713

Unit-02
WEB Design

Prof. Vijay M. Shekhat

Computer Engineering Department
Darshan Institute of Engineering & Technology, Rajkot
[email protected]
9558045778
 Outline
Looping

Concepts of Effective Web Design

Web Design Issues
Planning a website
Effective Navigation.
Concept of Effective Web Design
 It's a good idea to first think about and design your site. That way, you'll give yourself
direction and you'll need to reorganize less later.
 To design your site:
1. Figure out why you're creating this site. What do you want to convey?
2. Think about your audience. How can you tailor your content to appeal to this audience? For example,
should you add lots of graphics or is it more important that your page download quickly?
3. How many pages will you need? What sort of structure would you like it to have? Do you want visitors to
go through your site in a particular direction, or do you want to make it easy for them to explore in any
direction?
4. Sketch out your site on paper.
 Devise a simple, consistent naming system for your pages, images and other external files.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 3

Web Design Issues
A. Browser & Operating Systems
B. Bandwidth and Cache
C. Display Resolution
D. Look & Feel
E. Page Layout and Linking
F. Locating Information
G. Making Design user-Centric
H. Sitemap

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 4

a) Browser & Operating Systems
 Web pages are written using different HTML tags and viewed in browser window.
 The different browsers and their versions greatly affect the way a page is rendered, as
different browsers sometimes interpret same HTML tag in a different way.
 Different versions of HTML also support different sets of tags.
 The support for different tags also varies across the different browsers and their versions.
 Same browser may work slightly different on different operating system and hardware
platform.
 To make a web page portable, test it on different browsers on different operating systems.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 5

b) Bandwidth and Cache
 Users have different connection speed, i.e. bandwidth, to access the Web sites.
 Connection speed plays an important role in designing web pages, if user has low bandwidth
connection and a web page contains too many images, it takes more time to download.
 Generally, users have no patience to wait for longer time than 10-15 seconds and move to
other site without looking at contents of your web page.
 Browser provides temporary memory called cache to store the graphics.
 When user gives the URL of the web page for the first time, HTML file together with all the
graphics files referred in a page is downloaded and displayed.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 6

c) Display Resolution
 Display resolution is another important factor affecting the Web page design, as we do not
have any control on display resolution of the monitors on which user views our pages.
 Display or screen resolution is measured in terms of pixels and common resolutions are 800
X 600 and 1024 X 786.
 We have three choices for Web page design.
 Design a web page with fixed resolution.
 Make a flexible design using HTML table to fit into different resolution.
 If the page is displayed on a monitor with a higher resolution, the page is displayed on left hand side and
some part on the right-hand side remains blank. We can use centered design to display page properly.
 Ideally we should use some frameworks for designing like Bootstrap/Material design.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 7

d) Look & Feel & e) Page Layout and Linking
 Look & Feel
 Look and feel of the website decides the overall appearance of the website.
 It includes all the design aspects such as
 Web site theme
 Web typography
 Graphics
 Visual structure
 Navigation etc…
 Page Layout and Linking
 Website contains of individual web pages that are linked together using various navigational links.
 Page layout defines the visual structure of the page and divides the page area into different parts to present
the information of varying importance.
 Page layout allows the designer to distribute the contents on a page such that visitor can view it easily and
find necessary details.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 8

f) Locating Information & g) Making Design user-centric
 Locating Information
 Webpage is viewed on a computer screen and the screen can be divided into five major areas such as
center, top, right, bottom and left in this particular order.
 The first major area of importance in terms of users viewing pattern is the center, then top, right, bottom
and left in this particular order
 Making Design user-centric
 It is very difficult for any Web designer to predict the exact behavior of the Web site users.
 However, idea of general behavior of common user helps in making design of the Web site user centric.
 Users either scan the information on the web page to find the section of their interest or read the
information to get details.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 9

h) Sitemap
 A Sitemap is a model of a website's content designed to help both users and search engines
navigate the site.
 Many a times Web sites are too complex as there are a large number of sections and each
section contains many pages.
 It becomes difficult for visitors to quickly move from one part to other.
 Once the user selects a particular section and pages in that section, user gets confused about
where he/she is and where to go from there.
 To make it simple, keep your hierarchy of information to few levels or provide the navigation
bar on each page to jump directly to a particular section.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 10

Planning a Website
 The most important activity in a website development is planning.
 To achieve higher success of the website in terms of user satisfaction, better planning is
needed.
 Before we start developing a website, we should ask question such as,
 Why are we developing this website?
 What do we achieve by developing this website?
 Who are the people who will use this website?
 What are the information contents?
 How are these contents organized? What are the possible ways?

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 11

Publishing Website
 This topic will be covered in detail once we complete PHP.

Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 12

Effective Navigation
 The most important design element in the web design after page layout is navigation design.
 Navigation means the ways to move from one page to another page in a Web site using
hyperlinks provided on the page.
 If navigation design is not proper then user feels the problem in moving around the pages in
your site in a desired manner or gets confused and leaves the site.
 Tips for Effective Navigation:
 Navigation links are either text based, i.e. a word or a phrase, or graphical, i.e. a image.
 Navigation links should be clear and meaningful.
 It should be consistent.
 Link should be understandable.
 Organize the links such that contents are grouped logically.
 Provide search link, if necessary, usually on top of the page.
 Use common links such as ‘about us’ or ‘Contact us’.
 Provide the way to return to first page.
 Provide the user with information regarding location.
 Horizontal navigation bar can be provided on each page to directly jump to any section.
Prof. Vijay M Shekhat #3160713 (WP)  Unit 02 –WEB Design 13
 Web Programming (WP)
GTU # 3160713

Thank
You

Prof. Vijay M. Shekhat

Computer Engineering Department
Darshan Institute of Engineering & Technology, Rajkot
[email protected]
9558045778