web site design
TRANSCRIPT
1
Key Elements of
Web Site Design
2
Design Issues • 1. Essentials• 2. Look [graphic composition]• 3. Feel [navigation issues]
Basic Design
3
For any design, the following should apply:
• Professional appearance • Meaningful Domain Name
• As close to company name as possible
• Responsive Web Hosting • Clear and consistent Navigation• Professional Logo (top left of each page)
• Takes user to Home Page
4
Appearance• Artwork without “jaggies”• Colors that work together and don't clash• Appropriately sized text for easy reading• Quality photography: Hire a pro or purchase images
from stock photography sites such as gettyimages.com
• Clean structure and not so busy as to be difficult to understand
• Avoid sound unless that is your business
5
Rules for Images
• Artwork needs to be created using tools that support cleanly scalable image output
• Images should be pre-sized for the web page in which they'll be seen
• Avoid “Clip Art,” leave that for the hobbyist and for non-commercial sites
6
Have your products professionally photographed.for example: www.victoriasecret.com
or …
buy professional stock photos:
www.istockphoto.comwww.photodisc.comwww.corbis.comwww.gettyimages.com
Professional Images
Content Makes the Difference
• Text content is key. • Use images where they really count. • Concentrate on your message and your story
presented in plain text. • This hugely improves search engine
performance as well. Nothing else will get you to page one of Google.
7
8
Use of Color
• There is a psychology to the way different colors convey different meanings to the viewer
• There are various tools on the web to assist you with colors and color schemes:
Color Schemes: http://www.wellstyled.com/tools/colorscheme2/index-en.html Browser Safe: http://www.sketch.com/Non-dithering-colors.htm Combinations: http://dev.sessions.edu/ilu/ilu_1.html
9
Examples of Color Schemes
General Color References:• http://cloford.com/resources/colours/index.htm• http://www.colorschemer.com/online.html• http://primeshop.com/html/216colrs.htm• http://www.clearink.com/dynakewb/
10
What slows load times: Extraneous music, video, pictures and graphics.
Use of FLASH.
If your site has lots of images:Make them as small as possible. Most of your pictures can be on secondary pages. Enlarge thumbnails by click or mouseover.
Use Cascading Style Sheets (CSS):Template insures consistency and a professional look
while maintaining search engine friendliness.
Load Speed
Printer-Friendly Pages
11
Many sites provide a link to a separate printer friendly web page. Such a page would leave out navigation bars and sidebar information.
Creating a PDF document is the best solution for this need. Documents created in Word Processing programs can easily be converted to PDFs.
Navigation Practices
13
• Top navigation bar should be constant across all web pages.
• All logos should also be a link to the home page of your website.
• Side bars are optional. • Bottom bar should consist of simple text links to your
site, and is important for search engine ranking.• Page body is where you put that page’s relevant
information.
14
Navigation Considerations
• Top menu bar selection should be highlighted depending on the page the user has selected. It always should be clear where the user is within the nest of web pages, e.g.,Home>Resources>Presentations>Basics
• Clarity is everything when it comes to navigation. If your potential customer becomes lost trying to navigate your site, they are GONE!
Bottom Text Menu
15
On sites that rely on graphical images for their navigation bar, you will often find a bottom bar using only text. This is to improve search engine results.
For example:
Home | Library | Small Business Center | Entrepreneurship University |
Entrepreneur's Fieldbook | Raising Entrepreneurial CapitalAbout Us | Privacy Policy | Site Map
16
Example of a Complete Text Menu
jasperengines.com
has mastered the text menu. Theirs is complete, and very well organized.
Not only is it effective, it is one of their main tools for improving their SEO performance.
Example Sites
www.score-sandiego.orgSite is tight and focused. Easy to figure out how to interact with it.
Clean design. Excellent use of rollover within menu system. Partners page should have links with every logo.
www.martyandpats.comPretty, but is it effective? It is not clear on the entry page as to how to proceed. Information is out of date. See their “In the News” page, where everything is dated 2001 or earlier!
This site relies on graphics for the navigation bar (notice rollover effect), but a text navigation bar is at the bottom; it is the only menu with the home page link.
17
18
Keep it Simple
• Keep the page simple, clean, and effective. • Viewers should "get it" in 10 seconds or less. • Deliver a value proposition or branding statement in
a prominent position. • Select an attractive, comfortable color palette.You can use Cascading Style Sheets (CSS) as a way to
control web page look and feel without affecting the coding of web page content. For more information, see www.csszengarden.com and www.stonetemple.com/articles/css-and-seo.shtml
19
HTML
HTML – HyperText Markup Language1. The computer code/language used to create your
web pages2. You don’t need to know how to use it but, you do
need to know its importance in making your site “findable” by clients
3. Discussions with your web developer will be greatly improved with a just a wee bit of knowledge.