introduction to web page design. general design tips
TRANSCRIPT
![Page 1: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/1.jpg)
Introduction to
Web Page Design
![Page 2: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/2.jpg)
General Design Tips
![Page 3: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/4.jpg)
General Design Tips
Use standard HTML Device independence
Use “safe” image formats GIF (hard “G”) JPEG
![Page 5: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/5.jpg)
General Design Tips
Different browsers Netscape Internet Explorer
Different monitors Size Quality
• Different systems– PC
– Mac
Test Your Document
![Page 6: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/6.jpg)
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.
![Page 7: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/7.jpg)
General Design Tips
Think about the document size
Printing? Accessing? Scrolling through?
Keep a storyboard (site structure)
![Page 8: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/8.jpg)
General Design Tips
K. I. S. S.
Know your audience Use attractive images Provide interesting information
![Page 9: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/9.jpg)
General Design Tips
Frequently update site Make site
Friendly Easy to use
![Page 10: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/10.jpg)
Interface and Navigation
![Page 11: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/11.jpg)
Interface and Navigation
• Interface – How page looks
• Navigation– How easily user finds his/her way around
site and back to home page
![Page 12: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/12.jpg)
Interface and Navigation
• Start with a simple plan
– Rough storyboard
– Written list of general topics
![Page 13: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/13.jpg)
Interface and Navigation
• Page orientation
– Horizontal
– Monitors smaller and wider than print media
– Full impact of page (entry/home) visible on screen
![Page 14: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/14.jpg)
Interface and Navigation
• Navigation design– Organization
– Repetition
– Consistency
– Visual theme
– Selective linking
![Page 15: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/15.jpg)
Interface and Navigation
• Navigation design– Clear and simple
• Text
• Icons
– Navigation items grouped together
– Frames
![Page 16: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/16.jpg)
Basic Design Principles
![Page 17: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/17.jpg)
Basic Design Principles
• Alignment
• Proximity
• Repetition
• Contrast
![Page 18: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/18.jpg)
Alignment
• Items on page are lined up with each other
• Choose one alignment
Left (default)
Right <align=“right”>
Center <align=“center”>
![Page 19: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/19.jpg)
Alignment
• Keep text away from left edge
<blockquote> </blockquote>
<table> </table>
• Use table borders wisely
<border=“0”>
![Page 20: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/20.jpg)
Alignment
• Align text on same baseline (table data)
<valign=“top”>
<valign=“middle”>
<valign=“bottom”>
• Avoid use of all upper case
![Page 21: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/21.jpg)
Proximity
• Relationship of items that are close together
• Group related items together
![Page 22: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/22.jpg)
Proximity
• Conscious use of space
<p> </p>
<p> </p>
<br>
other tricks
![Page 23: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/23.jpg)
Repetition
• Repeat elements throughout site
• Create a theme
![Page 24: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/24.jpg)
Repetition
• Navigation scheme
• Colors
• Graphics
• Format
• Layout
• Fonts
![Page 25: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/25.jpg)
Contrast
• Create a visual hierarchy
• One focal point
![Page 26: Introduction to Web Page Design. General Design Tips](https://reader035.vdocument.in/reader035/viewer/2022062321/56649efd5503460f94c10d8d/html5/thumbnails/26.jpg)
Contrast
• How to create contrast– Font size and face
– Color
– Graphics
– Proximity
– Hyperlinks