lecture 3
DESCRIPTION
TRANSCRIPT
![Page 1: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/1.jpg)
Basic Web Design
Ryan Dinwiddie
UCC Spring 2010
![Page 2: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/2.jpg)
Principle #1
Just because you can do it,
doesn’t mean you should do it.
![Page 3: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/3.jpg)
Principle #2
Know your audience and have a clear goal
for your web site.
![Page 4: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/4.jpg)
Principle #3
Inform the user, don’t irritate them!
![Page 5: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/5.jpg)
Principle #4
Don’t post an “under construction” graphic after you’ve published
your URL.
![Page 6: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/6.jpg)
Principle #5
Check your spelling!
![Page 7: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/7.jpg)
Principle #6
Test, Test, Test, and Test some more before you go live or update!
![Page 8: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/8.jpg)
Steps to a well designed Web site Have a goal Target your audience Create a plan Select a Web service provider Try it out Maintain it
![Page 9: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/9.jpg)
Have a goal for your web site
What were you put on earth to accomplish?review your mission statement
Do you want your web site to accomplish all or some of those things? the more goals, the more difficult the task
becomes What information do you need or want to
provide?
![Page 10: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/10.jpg)
Identify your target audience
Who is the information for? Do you have more than one audience?Can you serve them all with one web site?
What are the information needs of your audience? What are their habits, characteristics, culture,
technical capabilities, etc.Are they likely to start with the web or another
information source?
![Page 11: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/11.jpg)
Plan it out
Identify information you already provide your audience.
Identify information that you haven’t, but would like to provide your audience.
Identify the sources of information you want to provide through your Web site.Prepare that information for the web by
collecting it and converting it.
![Page 12: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/12.jpg)
Plan it out
Develop a vision for your web site and storyboard it before construction begins.
Share your vision and storyboard with your colleagues and your bosses.
Estimate initial times and costs for construction.Decide on the software/hardware tools
necessary to construct your site.
![Page 13: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/13.jpg)
Select a Web service provider
Coordinate the method for publishing and updating your web pages.email filesFTP files
Know your root address (domain name). Will you have a need for scripting and
database interaction?
![Page 14: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/14.jpg)
Try it out:Optimize it for your audience Test it in-house. Test it on a sample audience. Test it on as many different computers and
monitors and browsers as possible. Test it using various Internet connections.
CableDSL
![Page 15: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/15.jpg)
Too many graphics are distracting
![Page 16: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/16.jpg)
Few graphics makes it easy to navigate.
![Page 17: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/17.jpg)
Maintain it
Dates need to be correct Services need to be up-to-date Hours must be correct People’s names, email addresses & phone
numbers need to be correct Prices need to be correct Explore new technologies & encourage
innovation
![Page 18: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/18.jpg)
This document is “living” …in the past.
![Page 19: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/19.jpg)
Characteristics of a Good web site Well-organized Easy to navigate Attractive Useful Up-to-date
![Page 20: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/20.jpg)
Make your site well-organized
Decide how you want to organize your information based on your users and what you know about them
Ways to organize your site:by department or organizational chartby audience type
marketing
by subject
![Page 21: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/21.jpg)
Organized by department.
![Page 22: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/22.jpg)
Organized by audience type.
![Page 23: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/23.jpg)
Organized by subject.
![Page 24: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/24.jpg)
Make your site easy to navigate Good organization generally drives the ease
of navigation. Keep scrolling down to a minimum by keeping
individual Web pages short. Always have links back to your home or major
sections. Use color to identify for users where they are
in your site.
![Page 25: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/25.jpg)
No scrolling necessary to start navigating.
![Page 26: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/26.jpg)
Standard tool bars and a brief menu for easy navigation.
![Page 27: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/27.jpg)
Make your site attractive
Choose simple colors that compliment each other & work on most web browsers.
Keep graphics less than (150 kilobytes) to make them download at a reasonable speed on a slower connection.
Keep animated gifs to a minimum. Use graphics that compliment your image.
![Page 28: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/28.jpg)
An example of a very unattractive site
![Page 29: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/29.jpg)
Subaru provides a balanced, attractive Web site.
![Page 30: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/30.jpg)
Avoid backgrounds that wash out your text.
![Page 31: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/31.jpg)
Make your site useful
If you are unique, you’re already useful! If you are not unique, how do you differ from similar
Web sites? Is your content unique? Is your approach unique? Is your audience unique?Are you more up to date?Are you better organized?Are you more comprehensive?
![Page 32: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/32.jpg)
Ways to present information
Hierarchical organization Image maps Tables Frames
![Page 33: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/33.jpg)
Hierarchical organization
Menus in progressive order of most general to more specific
Prosalways gives impression of organization
ConsNot really necessary unless you have a collection of
somethingMakes user travel through a number of levels to get to
their information
![Page 34: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/34.jpg)
Hierarchical organization.
![Page 35: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/35.jpg)
Image Maps
Links are in an image or picture Pros
Allows for greater artistic creativityDon’t need to use browser-dictated fonts
ConsTakes longer to downloadCan be tricky to set up
![Page 36: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/36.jpg)
Imagemaps can provide easy means of navigation.
![Page 37: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/37.jpg)
Tables
Standard text, images or links are arranged in tabular format with or without borders
ProsAllows creator to place items on a pageLooks neat
ConsCan be tricky, but tables are amazingly useful to
the designer.
![Page 38: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/38.jpg)
Tables provide Web designers with control over layout.
![Page 39: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/39.jpg)
Tables also provide simple organization of information.
![Page 40: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/40.jpg)
Frames
Divides the browser's window into two or more scrollable areas
ProsCan provide an area that makes updating or
changes very simpleCan help with navigation
ConsUsed improperly can make a huge mess!
![Page 41: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/41.jpg)
Frames can be used to provide a static navigation window.
![Page 42: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/42.jpg)
Static navigation windows can be along the bottom.
![Page 43: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/43.jpg)
Tips for frames
Use in a site that rarely, if ever, goes out to other links on the World Wide Web.
Use a frame to hold a static banner at the top or bottom.
Use a frame to hold a navigation bar at the top, side or bottom of your Web site.
![Page 44: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/44.jpg)
General Things to Remember & Consider Emulate a site you like. Try your color scheme before you get too far. Keep things simple. Use the ALT attribute in the IMAGE tag
provide alternatives to framed sites and graphic intensive sites
Provide a search function if possible.
![Page 45: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/45.jpg)
Test text colors against background colors.
![Page 46: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/46.jpg)
General Things to Remember & Consider Avoid requiring users to fill out a form to
gain access to your site. Avoid a counter unless you know that will
enhance your site and that the number will impress whoever it’s supposed to impress.
Don’t link to something that is not going to exist in the future.
![Page 47: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/47.jpg)
General Things to Remember & Consider Avoid having more than one spinning,
whirling, clicking, moving icon or graphic on a page.
Make hyperlinks intuitive so as to avoid the click here text.
Don’t advertise other products or companies unless it meets your goal, generates revenue or helps your audience.
![Page 48: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/48.jpg)
General Things to Remember & Consider Avoid detracting from the image of your
excellent Web site by posting all of your awards on the front page.
Provide text toolbars when appropriate. Provide templates to multiple Web
developers to maintain a consistent look. Develop standards for your Web site.
![Page 49: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/49.jpg)
General Things to Remember & Consider Limit fonts and headings on each Web
page. Attempt to use HTML tags that have layout
built-in to ensure a layout, such as a hierarchical listing.
If you are familiar with hard-copy page layout principles, use them in Web design.
![Page 50: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/50.jpg)
Remember Your Hard-Copy Publishing Rules For example…
Provide white space for easy readabilityLimit font usage and typeface usageLimit text column widthBalance graphics and text on a pageUse complimentary colors with contrastStandardize on a heading font and text fontBalance the page layout with top/bottom and right/left
margins
![Page 51: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/51.jpg)
Clearly and Consistently Identify your site Banner graphics Signature icons Links to local home pages
![Page 52: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/52.jpg)
Essential Elements for Every Page Organization or institution Author or person to contact Link to local home page Date created or revised Copyright statement
![Page 53: Lecture 3](https://reader033.vdocument.in/reader033/viewer/2022051816/5463bff2af79590c328b6878/html5/thumbnails/53.jpg)
Suggested Page Elements
Organization’s logo or seal Author’s e-mail address Mailing address, phone Links to related local pages Navigational aids: button/text bars