Website DesignLesson1: Understanding Website Design Concepts

Dr. Husam Al-Osta2013

The Web known as World Wide Web(“WWW”,”W3” or “Web”) is the universe of network-accessible information, the embodiment 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?

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 ?

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 ?

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 ro 68.122.35.127.

What is Web Server?

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars

Web Components

Clients (Browser)

Internet Explorer

Firefox Chrome Netscape Opera AOL MSN

Clients & Servers

Servers Apache Microsfot Netscape Zeus AOL Server JavaWebServ

er Oracle

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars

Web Components

Phone Company Du Etesalat TalkTalk Virgin Media AOL Sky O2

Internet Service Providers (ISPs)Connect Clients to the Internet

•Basic internet connection•Dialup/DSL/Cable/Sat•Email

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars

Web Components

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 Hosting Services Connects Web Sites to the Internet

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars

Web Components

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

Domain’s URL’s and IPs

Consider the web address :◦ http://www.googleguide.com/searchEngines/

google/searchLeader.html

Here’s what it all means:

Domain’s URL’s and IPs

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

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

Domain’s URL’s and IPs

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars

Web Components

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

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?

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

http://www.youtube.com/watch?v=lo_a2cfBUGc

How do users think?

Know your users Expert Regular Occasional Special needs

Have a clear goal for your Website Informative Services Community

Know the Users

What is the website purpose

What if we haveSeveral purposes ?

– 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

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

Updates New images/videos/news/info

Backup Testing

Links/audio/video/navigation Documentation

Latest updates Latest tests All activities

Website Maintenance

Main basic concepts Alignment Proximity Repetition Contrast Navigation Spelling

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

Use spell checker

Principles of good web design

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

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

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

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

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

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

1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Tell Registrar the IP address5. Create web content6. Store (publish) onto hosting server (FTP)7. Submit new site to search engines

Creating a Web Site

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..

Creating your Web Site Technologies & Tools

HTMLIntroduction

HTML is a language for describing web pages

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

What is HTML ?

Hyper Text Markup Language

Hypertext refers to the way in which Web pages (HTML documents) are linked together◦ When you click a link in a Web page, you are using

hypertext. Markup Language describes how HTML works

◦ With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.

What is HTML ?

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag <i>, the second tag is the end tag </i>

Start and end tags are also called opening tags and closing tags

HTML Tags ?

HTML FundamentalDocument Structure

Header

Body

< / HTML>

< HTML >

<html>

<head><title> The title of your html page </title>

</head>

<body>

<! - - your web page content and markup - ->

</body>

</html>

HTML FundamentalBasic Structure

<html><head>

<title>My Page</title></head><body>

<h2>Welcome in Heading</h2><p>My first paragraph.<br>it is a <b>simple basic</b> page.</p>

</body></html>

Example of HTML page

Thank you