introduction to web page design. general design tips
Post on 03-Jan-2016
222 Views
Preview:
TRANSCRIPT
Introduction to
Web Page Design
General Design Tips
General Design Tips• Use a meaningful title
<TITLE> Title of my Work </TITLE>
• Sign your work
• Indicate the date the page was created or last updated
• Use common fonts
General Design Tips
Use standard HTML Device independence
Use “safe” image formats GIF (hard “G”) JPEG
General Design Tips
Different browsers Netscape Internet Explorer
Different monitors Size Quality
• Different systems– PC
– Mac
Test Your Document
General Design Tips
Choose hyperlink wording carefully Use links instead of talking about them
The Beginners Guide to HTML is a great way to
get started!
Click here to access the Beginners Guide to HTML.
General Design Tips
Think about the document size
Printing? Accessing? Scrolling through?
Keep a storyboard (site structure)
General Design Tips
K. I. S. S.
Know your audience Use attractive images Provide interesting information
General Design Tips
Frequently update site Make site
Friendly Easy to use
Interface and Navigation
Interface and Navigation
• Interface – How page looks
• Navigation– How easily user finds his/her way around
site and back to home page
Interface and Navigation
• Start with a simple plan
– Rough storyboard
– Written list of general topics
Interface and Navigation
• Page orientation
– Horizontal
– Monitors smaller and wider than print media
– Full impact of page (entry/home) visible on screen
Interface and Navigation
• Navigation design– Organization
– Repetition
– Consistency
– Visual theme
– Selective linking
Interface and Navigation
• Navigation design– Clear and simple
• Text
• Icons
– Navigation items grouped together
– Frames
Basic Design Principles
Basic Design Principles
• Alignment
• Proximity
• Repetition
• Contrast
Alignment
• Items on page are lined up with each other
• Choose one alignment
Left (default)
Right <align=“right”>
Center <align=“center”>
Alignment
• Keep text away from left edge
<blockquote> </blockquote>
<table> </table>
• Use table borders wisely
<border=“0”>
Alignment
• Align text on same baseline (table data)
<valign=“top”>
<valign=“middle”>
<valign=“bottom”>
• Avoid use of all upper case
Proximity
• Relationship of items that are close together
• Group related items together
Proximity
• Conscious use of space
<p> </p>
<p> </p>
<br>
other tricks
Repetition
• Repeat elements throughout site
• Create a theme
Repetition
• Navigation scheme
• Colors
• Graphics
• Format
• Layout
• Fonts
Contrast
• Create a visual hierarchy
• One focal point
Contrast
• How to create contrast– Font size and face
– Color
– Graphics
– Proximity
– Hyperlinks
top related