promote education web design things to consider when designing a website
TRANSCRIPT
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
Using the World Wide Web – What is the Web?
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
5
Using the World Wide Web – What is the Web?
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
Making Webpages - What Are Webpages Anyway?
• A webpage generally consists of the following:– Text– Color
• Background • Text
– Links• Internal Links• External Links• Email Links• Anchors
9
Making Webpages - What Are Webpages Anyway?
– 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
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
Making Webpages – Things to Know Before You Begin Your Site
• 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
Making Webpages – Things to Know Before You Begin Your Site
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
Making Webpages – Things to Know Before You Begin Your Site
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
14
Making Webpages – Things to Know Before You Begin Your Site
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
Design Issues on the Web - Basic Design Principles for Nondesigners
17
Design Issues on the Web - Basic Design Principles for Nondesigners
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
Design Issues on the Web - Basic Design Principles for Nondesigners
19
Design Issues on the Web - Basic Design Principles for Nondesigners
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
Design Issues on the Web - Basic Design Principles for Nondesigners
21
Design Issues on the Web - Basic Design Principles for Nondesigners
22
Design Issues on the Web - Basic Design Principles for Nondesigners
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
Design Issues on the Web - Basic Design Principles for Nondesigners
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
Design Issues on the Web - Designing the Interface and Navigation
Home
Page 1 Page 2 Page 3
Page 1.1 Page 1.2
26
Design Issues on the Web - Designing the Interface and Navigation
• 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
Design Issues on the Web - Designing the Interface and Navigation
28
Design Issues on the Web - Designing the Interface and Navigation
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
Design Issues on the Web - Designing the Interface and Navigation
• navigation bar across the top• a navigation bar on the left (the two most
common styles)
30
Design Issues on the Web - Designing the Interface and Navigation
• an image map (an image divided into separate links to other pages)
31
Design Issues on the Web - Designing the Interface and Navigation
• Create an index/site map of the website so that people can find what they are looking for easily on your web site
32
Design Issues on the Web - Designing the Interface and Navigation
• 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
Design Issues on the Web - Designing the Interface and Navigation
• 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
Color, Graphics and Type – Typography on the Web
– 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
Color, Graphics and Type – Typography on the Web
• 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
You're Done - Now What? - How to Upload and Update Your Site
• 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
48
You're Done - Now What? - How to Upload and Update Your Site
• 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
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
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
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