web design
DESCRIPTION
Web Design. Tips for designing a web page. Purpose of Website. To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!. Content. Easy to read Eye-catching Easy to scan No text in images or over images. Emphasize important points Bold Colored font - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/1.jpg)
WEB DESIGNTIPS FOR DESIGNING A WEB PAGE
![Page 2: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/2.jpg)
PURPOSE OF WEBSITETo informTo persuadeTo market/sellTo entertainTo advocate
KNOW YOUR PURPOSE!
![Page 3: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/3.jpg)
CONTENT• Easy to read• Eye-catching• Easy to scan• No text in images
or over images
• Emphasize important points• Bold• Colored font• Lists –bullets or
numbers
![Page 4: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/4.jpg)
DESIGN PRINCIPLES1. Alignment2. Proximity3. Repetition4. Contrast5. Grammar/Spelling
![Page 5: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/5.jpg)
ALIGNMENT• Items on the page are lined up with each other• 2 types of alignment
• Horizontal• Vertical
• Choose 1 type of each• Use tables with invisible borders
• Professional look• Keeps elements aligned correctly
BE CONSISTENT!
![Page 6: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/6.jpg)
PROXIMITY• Relationships which develop when items
are close to each other• Examples:
• Title/Subtitle• Picture/Caption• Heading (article title)/Article
• Group items together which are related
![Page 7: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/7.jpg)
REPETITION• Some elements must be the same on every page• Use the same layout on every page• Repetition of elements give a unified, smooth look and
transition from page to page • Navigation buttons• Colors• Style• Illustrations• Format• Layout• Typography
![Page 8: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/8.jpg)
CONTRAST• What draws the eye onto the page• Designs to consider
• Style• Colors• Arrangement• Graphics
• Create a focal point
![Page 9: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/9.jpg)
DESIGN TIPSFONTS• Serif (Times New Roman) *with tails*
• vs • Sans Serif (Verdana) *no tails• Sans serif is easier to read on screen
• Use a font scheme of no more than 3 fonts throughout pages
• Font size 8-14
• Left align is best (except titles)
• Don’t underline text-hyperlinks are underline
• Use same color for titles and text throughout
ALL PAGES SHOULD BE THE SAME
![Page 10: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/10.jpg)
DESIGN TIPSCOLORS• Use complementary
colors – no more than 3 colors
• Think of a house- 3 colors:• Main house• Trim• Accent color – doors & shutters
• Light backgrounds with dark fonts is best
• Stay away from bright colors and colors which are difficult to read such as RED and YELLOW
![Page 11: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/11.jpg)
DESIGN TIPSNavigation• Where am I?• Where have I
been?• Where can I go?
• Should answer all 3 questions
• Should be the same on every page
![Page 12: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/12.jpg)
DESIGN TIPSWhite Space• Page should be evenly distributed• Allow some space between graphics and text so the page
doesn’t look cluttered• Use squint test
• Stand back, squint eyes and see how it looks from that view for layout and white space
![Page 13: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/13.jpg)
DESIGN TIPSHave a paper plan!Apply KIS principle (Keep It Simple!)
![Page 14: Web Design](https://reader035.vdocument.in/reader035/viewer/2022062811/568161e5550346895dd202e1/html5/thumbnails/14.jpg)
GRAMMAR & SPELLINGPROOF, PROOF, PROOF…REVISE, REVISE, REVISE …
Good Luck!!