Promote Education Web Design Things To Consider When Designing A Website

Web Design: Things to Consider When Designing a Website Zoaib Mirza Promote Education www.promoteeducation.com

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

Design Issues on the Web - Basic Design Principles for Nondesigners

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

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

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

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

Design Issues on the Web - Designing the Interface and Navigation Home Page 1 Page 2 Page 3 Page 1.1 Page 1.2

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

Design Issues on the Web - Designing the Interface and Navigation

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

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)

Design Issues on the Web - Designing the Interface and Navigation an image map (an image divided into separate links to other pages)

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

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

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

Using the World Wide Web – How to Recognize Good and Bad Design Bad 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

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

Using the World Wide Web – How to Recognize Good and Bad Design Good 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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

Bibliography and References The Non Designer's Web Book, 3 rd 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

Bibliography and References Usability http://www.nngroup.com/events/tutorials/usability.html Color Codes http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html

Promote Education Web Design Things To Consider When Designing A Website

More Related Content

What's hot

Similar to Promote Education Web Design Things To Consider When Designing A Website

Recently uploaded

Promote Education Web Design Things To Consider When Designing A Website