promote education web design things to consider when designing a website

1

Web Design: Things to Consider When Designing a

Website

Zoaib MirzaPromote Education

www.promoteeducation.com

2

Topic of Discussion• Using the World Wide Web

– What Is the Internet? – How to Search the Internet

• Making Webpages – What Are Webpages Anyway? – Things to Know Before You Begin Your Site

• Design Issues on the Web – Basic Design Principles for Nondesigners – Designing the Interface and Navigation – How to Recognize Good and Bad Design

• Color, Graphics and Type – Color on the Web – Graphics Definition You Must Know – Typography on the Web

• You're Done - Now What? – Test and Fix Your Website – How to Upload and Update Your Site – How and Why to Register Your Site

3

Using the World Wide Web – What is the Web?

Internet• Internet is a vast collection of computers all over

the world that stores information and send it out. • Internet Service Provider (ISP) gives access to

the internet. – Examples of ISP are Comcast, AOL, MSN, Hotmail,

ATT, Earthlink, Compuserve, etc.

Modem• Is a device which connects public internet with

your home computer.

4


Browser• A software which is used to see pages on the web. Example

Internet Explorer, Firefox, Mozilla, Safari, Konqueror, Opera, Netscape, America Online.

• Browser Statistics Month by Month - http://www.w3schools.com/browsers/browsers_stats.asp

Web address or url (uniform resource locator)• Address of a webpage into a browser.• Example http://www.depaul.edu/admission/index.asp

– http:// hypertext terminal protocol tell the browser that it will look for a webpage

– www World Wide Web tell the browser that – depaul.edu is the domain name – admission/index.asp is a path telling the browser where to find the

page

http://www.w3schools.com/browsers/browsers_stats.asp

http://www.depaul.edu/admission/index.asp

5


Details of the domain name• .biz – businesses• .com – commercial sites• .info – information sites similar to .com sites• .org – organizations, usually non-profits• .edu – educational, accredited post-secondary

institutions only• .gov – government, United State government

only

6

Using the World Wide Web – How to search the internet

• There are two basic kinds of search tools– Search engines: example Google, Yahoo, Ask

Jeeves, Altavista– Directories: group web pages into subject

categories, example Yahoo directory, Google directory

7

Making Webpages - What Are Webpages Anyway?

• Is a representation of a document which resides at a remote site

• Basic language to create a webpage is HTML which stands for Hyper Text Markup Language

• Pages can be created using a web authoring software packages– Nvu– Adobe GoLive– Macromedia Dreamweaver– NetObjects Fusion– Microsoft Frontpage

8


• A webpage generally consists of the following:– Text– Color

• Background • Text

– Links• Internal Links• External Links• Email Links• Anchors

9


– Graphics– Tables

• Absolute table width: if you set it to 400 pixel, the table size is fixed in the browser window

• Relative table width: table will resize according to the size of the browser window

– Frames is a stationary part of a web page that stays put while you scroll through another part

• Table vs Frames– http://www.noipo.org/index.php?id=189 – http://

www.freewebmasterhelp.com/tutorials/framestables

http://www.noipo.org/index.php?id=189



http://www.freewebmasterhelp.com/tutorials/framestables

http://www.freewebmasterhelp.com/tutorials/framestables

10

Making Webpages – Things to Know Before You Begin Your Site

Organizing your files• Organizing by folders

– Most smaller sites can be contained in one folder– Site with 30 or 40 files which graphics, sounds,

animation should have subfolders based on the navigation and content

Naming your files• Use all lowercase letters• Use only letters or number no special characters• Never use a space

11


• All webpage must end in extensions like *.htm, *.html, *,asp, *.aspx

• Keep filename as short as possible• Example

– Index.html– Contact.html

Organizing by name• Add a title to the start of each filename so that it can

describe its type• Example

– workshop.html is a webpage– worktitle.gif, workhead.gif,workbkg.gif are picture files

12


Saving and titling pages

• Save each page and assign it a name example first page is saved as index.html or default.html

• Assign a title to each page – This is different from naming the page– The title is the text which appears in the title

bar of the window

13


Server• Webpages are hosted (stored) in server• Server is a computer connected to the internet which

allows webpages to be viewed through a browser• Example

– Godaddy a webhosting company provides server space– A domain name (web address) is bought by the company

example www.promoteeducation.com– No account holders of the company can have the same domain

name. It is unique and cannot be duplicated – Go to http://www.godaddy.com and type in a domain name

under “Domain Name Search" and then select the extension example .com, .org etc

http://www.promoteeducation.com/

http://www.godaddy.com/

14


Planning Ahead• Your web audience

– Who is the target audience– What do I want the site to accomplish

• Making an outline– Write an outline of the site– How does the client or you envision the site

• Collecting and storing material– Collect all the content– Scan pictures, collect graphic files and text files– Create folders and subfolders and label it according to the type

of the data. Example• All images in a folder named images• All the text files about About Us section in a folder name AboutUs

15

Design Issues on the Web - Basic Design Principles for Nondesigners

Alignment

• Items on the page should be lined up with each other

• Choose one alignment and use it on the entire page

• Beginning designers should avoid centering everything

16


17


Proximity

• Refers to the relationships that items develop when they are close together, in close proximity

• Items physically far from each other do not have a relationship

• Heading, pictures and text should be well in proximity with each other

18


19


Repetition

• There are certain elements in websites which are repeated. Example– Navigation buttons, color, style illustration,

layout, typography which unifies the entire site

• The visitors do not have to learn their way around on every new page

20


21


22


Contrast• Contrasts draws your eye into a page, it pulls

you• Contrasting elements guide your eyes around

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

• Create a focal point– There must be a dominating force and the other

elements follow a hierarchy from that point down, this focus is created through contrast

– Contrast helps to define what is important

23


24

Design Issues on the Web - Designing the Interface and Navigation

Interface Design• A good website design begins with a good site

plan• For the initial phase keep the plan simple • Plan to make a list of the information to be

included in the site• Make sketches on paper and creates mock up of

how you want to organize the information– Users do not like to scroll

• Create a site map / chart of the web pages

25


Home

Page 1 Page 2 Page 3

Page 1.1 Page 1.2

26


• Use horizontal format because most of the monitors used are wider than they are tall

• Some of the display area is occupied by the browser toolbar which mean that live area of a web page is even more horizontal that the monitor itself

• Set the resolution of the web site to be 800 x 600 so that all the users can view the

• Most commonly used layout are– Two Column Layout– Three Colum Layout

27


28


Navigation Design• Design a navigation schema and keep it simple

– navigation bar across the top– a navigation bar on the left (the two most common

styles), – an image map (an image divided into separate links to

other pages)

• A user should be able to reach the desired page within three clicks

29


• navigation bar across the top• a navigation bar on the left (the two most

common styles)

30


• an image map (an image divided into separate links to other pages)

31


• Create an index/site map of the website so that people can find what they are looking for easily on your web site

32


• Select navigation colors to match your website but make sure to keep the text/icons consistent and repeat it so that visitors do not get confuse

33


• Check your links and test the navigation– Internal or local links within the site

• This applies when you have depth of information within broader areas.

– External or remote links to someone else's site

34

Using the World Wide Web – How to Recognize Good and Bad DesignBad Design• Check the links on your site, do not leave any

broken links• Site should be viewable in standard browser, do

not ask the visitor to set pixel width or what font size to set as text default

• Do not use big fonts, unattractive colors and big buttons with long text

• Avoid using Pop Ups• Do not use huge flash intro screen • Horizontal scrolling annoys user

35

Using the World Wide Web – How to Recognize Good and Bad Design• Slow load time problems by not using too many

graphics, animations and pictures• Poor spelling • Avoid lots of moving things

– Banners flashing– Graphics twirling– Words scrolling, with a string of fireworks chasing

your mouse pointer• Do not use plenty of music, it annoys the visitor

every time he visits• The site should have contact information

36

Using the World Wide Web – How to Recognize Good and Bad DesignGood Design• Resolution

– A site should be viewable on all monitors. Keep the site resolution to 800 x 600

• Font – Size should be not bigger than 12– Most commonly used fonts are

• Time New Romans• Ariel• Verdana

37

Using the World Wide Web – How to Recognize Good and Bad Design• Color

– The color contrast should not have more than 3 colors– The font color should be consistent in the entire site and should

not be more than 2 colors

• Ease of Navigation– Should be consistent and obvious so that the visitors do not

have to spend much time to figure out the navigation

• Load Time– A page should load up in seconds. Do not use heavy graphics,

pictures and animation

• Browser Compatible– The site should be compatible in all mostly used browsers– Most common browser are Internet Explorer and Firefox

38

Color, Graphics and Type - Color on the Web

The aesthetics of color• The color chosen should create an

overall feeling and personality on the site

• Text should always have a good contrast between the type color and the background color

• For a commercial site do not use your competitors color schema

RGB Color • RGB stands for Red, Green and

Blue.• Monitors create their images on

the screen by emitting red, green, and blue light

• Each color has a Hex value• Example Black has a Hex code of

00,00,00

39

Color, Graphics and Type – Graphics Definition You Must Know

File Formats• GIF – graphical interface format

– Cross platform meaning that all computers can view them

– Are compressed make a file smaller in file size– Best used for logos, text as graphics, cartoons etc

• JPEG – Joint Photographic Experts Group– Like GIF they are cross platform and compressed– But in the process of compression it removes data

from the graphic image to make the file size smaller– Best used for photographs

40

Color, Graphics and Type – Typography on the Web

Legibility• The text, buttons, headlines, signs etc should be easy to

recognize– Do not use all caps– Use and design graphics which are easy to read

Readability• The text should be readable, some guidelines

– Use a font which is easy to read like Sans Serif– Font size should not be too big, not bigger than 14-18 points – Font size should not be too small, not below 8-10 point size– Never set large amount of text in bold, italic, all caps, small caps,

scripts etc.

41


– Avoid very long line of text, long lines make it difficult for the reader’s eye to find the beginning of next line on the screen

– Contrast between the text and the background, black text on a white background is the best

Breaking typographic rules• Be conscious

– If it is hard to read then change the font type• Page text as a graphics

– Text as graphics is workable but is not traced by search engines

– It is more time consuming to revise or update

42


• Use Cascading Style Sheet– Style Sheets in any program allow you to

apply consistent formatting of text to the entire web pages

– Cascading refers to how style sheets are implemented

43

You're Done - Now What? Test and Fix Your Website

• Site Management Software– FrontPage– Dream weaver– Adobe Go Live

• Testing you site– Before uploading the site to the world it is important to

check how the site works– Open the first page and test the links to all the other

pages– Check all the sites offline using a browser

44

You're Done - Now What? Test and Fix Your Website

– Watch someone else browse your site– Different browsers will give different looks

• Fixing your site– Different browsers and HTML authoring

software have different output • Spacing problems • Table are out of whack• Graphics don’t appear• Page links don’t work

45

You're Done - Now What? - Test and Fix Your Website

• Fix it tips– Biggest problem is to add spaces where you

want it and in the amount you want• Create a CSS file and specify how many pixels

you need between line • Insert transparent gifs between two items, then

specify its width or height to the number of pixel you want

– This tip is mostly used in website development

• Add extra characters like periods and then hide them the same color as the background

46

You're Done - Now What? - How to Upload and Update Your Site

• Gather all your files which will be send to the service provider. Make sure to remember the following points– Send every file you site needs– Don’t send any files your site doesn't need– Make sure all your files are named properly

• Every file should have an extension• Never use a space in a file or folder name

47


• Uploading files– Get software for uploading files– Ask your provider or hot for your FTP (File

transfer Protocol) information• Host name – ftp.domain.com or string of numbers• Host type – window or unix• User id • Password• Directory path – where you site will be stored

ftp://ftp.domain.com/

48


• Test your site online as soon as it goes online– Make note of want went wrong in the browser– Make changes to the file using a web

authoring software

49

You're Done - Now What? - How and Why to Register Your Site

• Search Tools– Pay a service on the web to enter your URL in

many search engines and directories at once• Google• Yahoo• Beaucoup• Search.com

– Go to Altavista: www.altavista.com and in the edit box enter link:yourdomain.com

http://www.altavista.com/

50

You're Done - Now What? - How and Why to Register Your Site

• What search tools look for– Title of your page– First paragraph of your home page– Meta tags

51

Additional Reading

• Basics of Web Design – Customer:

http://www.compasstechnologies.net/design-methodology.htm

– IBM - http://www-03.ibm.com/easy/page/572– Web Hosting -

http://www.w3schools.com/hosting/default.asp

• Design Principles – http://

dragon.ep.usm.edu/~yuen/WBLISS/webpage/design.htm



http://www-03.ibm.com/easy/page/572

http://www.w3schools.com/hosting/default.asp

http://dragon.ep.usm.edu/~yuen/WBLISS/webpage/design.htm



52

Bibliography and References

• The Non Designer's Web Book, 3rd Edition, Robin William & John Tollett

• Navigation– http://www.partdigital.com/tutorials/interface/– http://www.07hosting.com/articles/15/1/How-to-Create

-an-Effective-Site-Navigation-Structure

• Bad Design– http://www.fenclwebdesign.com/bad-design.htm – http://www.ratz.com/featuresbad.html

http://www.partdigital.com/tutorials/interface/

http://www.07hosting.com/articles/15/1/How-to-Create-an-Effective-Site-Navigation-Structure

http://www.07hosting.com/articles/15/1/How-to-Create-an-Effective-Site-Navigation-Structure

http://www.fenclwebdesign.com/bad-design.htm

http://www.ratz.com/featuresbad.html

53

Bibliography and References

• Usability– http://www.nngroup.com/events/tutorials/usabi

lity.html

• Color Codes– http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html

http://www.nngroup.com/events/tutorials/usability.html

http://www.nngroup.com/events/tutorials/usability.html

http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html

promote education web design things to consider when designing a website

Technology