1

Chapter 2

Website Design Concepts

2

Agenda• Definitions

– Web– Website– Web Page– Web Server

• Web Components• Know the user (audience)• Principles of good web design• Technologies & Tools Used In Web Design• Static vs Dynamic Websites• Types of Website Structure

3

• The Web known as World Wide Web(“WWW”,”W3” or “Web”) is the universe of network-accessible information, the incarnation of human knowledge.

• In simple terms, The World Wide Web is a way of exchanging information between computers on the internet, tying them together into vast collection of interactive multimedia resources.

What is the Web?

4

• It is a collection of related web pages containing images, videos or other digital assets.

• Websites are hosted on at least one web server, accessible via the Internet and can be accessed through an Internet address known as a Uniform Resource Locator (URL).

• Websites are accessible through the World Wide Web (WWW)

What is a Website ?

5

• It is a document, typically written in plain text interspersed with formatting instructions of HyperText Markup Language (HTML)

• Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to provide security and privacy for the user of the web page content.

What is a Web Page ?

6

• Every Web site sits on a computer known as a Web server.

• This server is always connected to the internet.

• Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 256 separated by periods.

• For example, 68.178.157.132 or 68.122.35.127.

What is Web Server?

7

• Clients and Servers

• Internet Service Providers

• Web Site Hosting Services

• Domains Names, URL’s and IPs

• Registrars

Web Components

8

Clients (Browser)• Internet Explorer• Firefox• Chrome• Netscape• Opera• AOL• MSN

Web Components(Clients & Servers)

Servers Apache Microsoft Netscape Zeus AOL Server Java Webserver Oracle

9

It connect Clients to the Internet

• Phone Company• Du• Etisalat • TalkTalk• Virgin Media• AOL• Sky• O2

Web Components(Internet Service Providers)

•Basic internet connection

•Dialup/DSL/Cable/Sat

•Email

10

It connects Web Sites to the Internet• Computer (server) farm• Web server software• Firewall hardware and software• IT services

– (Backup, troubleshooting, hardware repair)• Disk space• Bandwidth / connection to internet• Routers and switchers• Email server / storage

Web Components(Web Hosting Services)

11

• Domain name: The specific address of a

computer on the Internet

– microsoft.com

– Yahoo.co.uk

• Uniform Resource Locator (URL):

– http://www.microsoft.com/faqs.html

• Internet protocol (IP) address

– 192.168.1.1

Web Components(Domain’s URL’s and IPs)

12

• Consider the web address:

http://www.googleguide.com/searchEngines/google/searchLeader.html • Here’s what it all means:

Domain’s URL’s and IPs (1)

13

• Here’s a list of some common top-level domain names. Note that some sites don’t follow these conventions:

Domain’s URL’s and IPs (2)

14

• Countries have their own two letter codes as the top level of their domain names:

Domain’s URL’s and IPs (3)

15

• A company that provides domain name

registration services for a fee.

• Maintain database which maps domain names

to IP’s

• Broadcast new domain name/IP address

information across the internet.

Domain Registrar

16

• To find information they need• student looking for pictures of frogs for a school

project• to finding the latest stock quotes• To find the address of the nearest Chinese

restaurant

• To complete a task • Visitors may want to buy the latest best-seller• download a software program• participate in an online discussion

Why Do People Visit Websites?

17

• Users don’t read, they scan

• Users are impatient and insist on instant

satisfaction

• Users don’t make optimal choices

• Users follow their instinct

• Users want to have control

How do users think?

18

• Know your users• Expert• Regular• Occasional• Special needs

• Have a clear goal for your Website• Informative• Services• Community

Know the Users (audience)

19

What if we have Several purposes ?What is the website purpose?

– Hybrid/experimental– Gaming– Entertainment– Video sharing– Photo sharing– Blogs– Communities– Social networking– Professional

networking– Intranet

– Public servicenonprofit groups

– Organizations– Government– Commercial– Educational– Editorial– Reference– Institutional

promotion– Transactional– Self-promotion

20

• Develop a vision for your Web site and storyboard it before construction begins

• Website structure; How big/deep is the site?

• User interface; How friendly and easy to use?

• Font design• Attractive graphical design to users• Keywords that help search engines to

present your website

Planning for a website

21

• Updates• New images/videos/news/info

• Backup• Testing

• Links/audio/video/navigation

• Documentation• Latest updates• Latest tests• All activities

Website Maintenance

22

Main basic concepts• Alignment• Proximity• RepetitionContrast NavigationSpelling

−Bad spelling and bad grammar can destroy the professional effect of your web site

−Use spell checker

Principles of good web design

23

• Items on the page are lined up with each other

• Two types of alignment:– Horizontal alignment – Vertical alignment

• CHOOSE ONE. Choose one alignment and use it on the entire page. Don’t mix alignment

• Get the text away from the left edge• Centre alignment makes finding the

beginning of a new line of text much more difficult

Alignment

24

Example of Alignment

25

• Relationships that items develop when they

are close together, in close proximity.

• Be aware of the space between elements.

– Group together

– Space them apart

Proximity

26

Example of Proximity

27

• Associate elements by repeating a common stylistic feature or arrangement

• Throughout a project you repeat certain elements that tie all the disparate parts together

• Repetition elements that unify the entire site: – Navigation buttons– Colors– Style– Illustrations– Format– Layout– Typography

Repetition

28

Example of repetition

29

• What draws your eyes onto the page?• Contrasting elements guide your eyes

into the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need

• Contrast elements: – Style– Colors– Graphic signposts– Spatial arrangement

Contrast

30

the state of being amazingly different from something else in combination or close association.

Example of Contrast

this is an example of poor contrast

another example of how contrast provides a warning

contrast to make something stand out

Use active white space to make your contentstand out on the page.

white on black is harder to read than black on white

31

• Where are you now?

• Where can you go? 

– Buttons to travel around a site should be easy to find

– towards the top of the page and easy to identify

– They should look like navigation buttons and be well

described.

– The text of a button should be pretty clear as to

where it’s taking you.

Navigation

32

Example of Navigation

33

1. Choose a domain name

2. Register with a Registrar

3. Choose a hosting service

4. Tell Registrar the IP address

5. Create web content

6. Store (publish) onto hosting server (FTP)

7. Submit new site to search engines

Creating a Web Site

34

• Markup Languages –HTML, DHTML, XML, XSLT, etc....

• Cascading Style Sheets (CSS)• Scripting languages

–Perl, JavaScript, Php, etc....• Web creation and editing software

–Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc..

Technologies & Tools

Static Vs Dynamic Websites

Static Dynamic

• A static website is stored on a server using HTTP server software

• Client sends HTTP Request with a URL

• Server locates and send requested file as an HTTP Respond

• Application server is installed on same server as HTTP server software

• Client sends HTTP Request with a URL

• HTTP server dispatches request to application server

• Application server dynamically construct HTTP response

Static Vs Dynamic WebsitesStatic

Dynamic

Static Website – features • Content stored in an html page

–content does not update unless the file is updated

• Any changes to a static web page need to be made manually, and then saved again.

• Static websites can only really be updated by someone with a knowledge of website development.

• Static websites are the cheapest to develop and host

Static Website• Advantages

− Quick to develop− Cheap to develop− Cheap to host

• Disadvantages− Requires web development expertise to

update site− Site not interactive (as useful) for the user− Content can get dull

Dynamic Website – features • Content is generated “on the fly”

– content is gathered and delivered based on the user’s request;

– usually content here is stored in a database

• Dynamic sites can be more expensive to develop initially.

• At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site.– For example, news and events could be posted to

the site through a simple browser interface.

Dynamic Website• Examples of dynamic website features:

– Content management system, – e-Commerce system, – Bulletin / discussion boards, – Ability for clients or users to upload

documents, – Ability for administrators or users to create

content or add information to a site (dynamic publishing).

Dynamic Website• Advantages

− Much more functional website− Much easier to update− New content brings people back to the site

and helps in the search engines− Can work as a system to allow staff or users

to collaborate

• Disadvantages− Slower / more expensive to develop− Hosting costs a little more

Types of Website Structure• Many smaller Web sites follow the Web

structure, which offers links to and from every page in the site

• This allows the user to jump freely to any page from any other page

Types of Website Structure:• Linear• Tutorial• Hierarchical• Cluster• Catalog

Linear Structure• The linear information structure lets you

guide the user along a path • This structure lends itself to book-type

presentations or content that requires the user to follow a predefined path

Tutorial StructureThe tutorial structure is perfect for computer-based training content such as lessons, tutorials, or task-oriented procedures

Web Structure• It offers links to

and from every page in the site

• This allows the user to jump freely to any page from any other page

Hierarchical StructureIt lends itself to larger content collections because the section pages break up and organize the content at different levels throughout the site

• The cluster structure is similar to the hierarchical structure, except that every topic area is an island of information unto itself, with all pages in each cluster linked to each other

Cluster Structure

Catalog StructureThe user can browse or search for items and view specific information about each product on the item pages