Web Programming (WP)

GTU # 3160713

WEB Design

Syed Adil Ibrar Kazmi

IT AND CS Department
[Link]@[Link]
+92 345 9693833
 Looping
Outline
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.
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
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.
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.
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.
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.
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.
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.
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?
Publishing Website
 This topic will be covered in detail once we complete PHP.
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.