Upload
gibson
View
58
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Website design Idea’s & Tips. Webpage Layout and Website Design. Technical definitions: A webpage is a single HTML document A website is a collection of related webpages Designing a good website requires more than just putting together a few pages. Examples. www.projectpuffin.org - PowerPoint PPT Presentation
Citation preview
Website design Idea’s & Tips
Webpage Layout and Website DesignTechnical definitions:
A webpage is a single HTML documentA website is a collection of related webpages
Designing a good website requires more than just putting together a few pages
Exampleswww.projectpuffin.orgwww.pmlodge.comwww.uintafishing.comwww.uncommonadv.com
Web Page LayoutLayout of web pages is very importantPoor layout makes for -
Difficult navigationHard to locate information on pageVisually unappealing
A 2 x 2 Layout
Other Designswww.adobe.com (menu on right)www.uintafishing.com (many columns)
Really complicated design!
Monitors and DimensionsMonitor resolution affects how you should lay
pages out800x600 = 50% - 760 x 420 pixels in browser
window1024x768 = 35%640x480 = 3%* - 595 x 360 pixels
*Was 20% three years ago
Different Resolutionshttp://www.dreamink.com/design6.shtml
Splash PageThe index.html file is called the “Splash
Page”It is the key page—the first page visitors
usually seeMust be visually attractive, informative,
and easy to navigateExamples:
www.projectpuffin.org www.pmlodge.com www.uncommonadv.com www.rainforestandreef.org
Organizing InformationDecide what info goes on each page
Friends pageFamily pagePersonal pageHobbies page
Good Web CommunicationBe ConciseLimit choices – use a hierarchical structure
A hierarchy is a structured organization where some pages are at a higher level than others
Hierarchy results in a site map with multiple levels
Site MapA site map is designed to show the
connections between pagesA graphical site map uses lines to connect
linked pages
Site Map
Interior orInternal
Pages
Willoughby's Website
Splash Pageindex.html
Pictures Gallerygallery.html
Name Pagename.html
Progress Pageprogress.html
Canada Tripcanada.html
Christmas Treetree.html
Design ThemeChoose a common layout for your website.
The Splash Page will probably differ but interior pages should be the same
Use tables to control placement throughout
Consistency in DesignUse the same font throughout! Use consistent graphics in website – do not
use ultra modern on one page and calligraphy on another
Use color scheme that is consistent
The Font BarrierOnly fonts you can
reliably use are Times New Roman (Times) and Arial (Helvetica)
Text in site should be one of these choices
How to overcome this? Any font used in
graphics is loaded as a graphic, and does not rely upon the font being on the user’s computer
Make cool font images in Photoshop
TestingTest your website as you go along.
If you’re in the computer lab and there’s an empty computer next to you, log into it and check out your web page from there
Make sure it works in Netscape Navigator and Internet Explorer
Make sure all pictures come up on a different machine
Where to get help on designWeb Pages for more info
http://info.med.yale.edu/caim/manual/contents.html
Good places for Graphicswww.clipart.comhttp://free-clip-art.com/
Fontshttp://www.1001freefonts.com/fontfiles/
main.htm