Chapter 2 Website Design Concepts 1

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 2

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? 3

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 ? 4

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 ? 5

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, or What is Web Server? 6

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

Clients (Browser) Internet Explorer Firefox Chrome Netscape Opera AOL MSN Web Components (Clients & Servers) Servers  Apache  Microsoft  Netscape  Zeus  AOL Server  Java Webserver  Oracle 8

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 9

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 server / storage Web Components (Web Hosting Services) 10

Domain name: The specific address of a computer on the Internet –microsoft.com –Yahoo.co.uk Uniform Resource Locator (URL): – Internet protocol (IP) address – Web Components (Domain’s URL’s and IPs) 11

Consider the web address: google/searchLeader.html Here’s what it all means: Domain’s URL’s and IPs (1) 12

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) 13

Countries have their own two letter codes as the top level of their domain names: Domain’s URL’s and IPs (3) 14

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 15

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? 16

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? 17

Know your users Expert Regular Occasional Special needs Have a clear goal for your Website Informative Services Community Know the Users (audience) 18

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 service nonprofit groups –Organizations –Government –Commercial –Educational –Editorial –Reference –Institutional promotion –Transactional –Self-promotion 19

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 20

Updates New images/videos/news/info Backup Testing Links/audio/video/navigation Documentation Latest updates Latest tests All activities Website Maintenance 21

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 22

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 23

Example of Alignment 24

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 25

26 Example of 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 27

Example of repetition 28

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 29

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 content stand out on the page. white on black is harder to read than black on white 30

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 31

Example of Navigation 32

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 33

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 34

Static Vs Dynamic Websites StaticDynamic 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 Websites Static 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 on the flyContent 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 Structure The 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 Structure It 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 Structure The user can browse or search for items and view specific information about each product on the item pages