Web Design Melbourne Provides Web-Development and Web Design
1 Basic Web site Design PMEHS Web Design Dr. Kerby.
-
Upload
tracey-fox -
Category
Documents
-
view
221 -
download
0
description
Transcript of 1 Basic Web site Design PMEHS Web Design Dr. Kerby.
![Page 1: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/1.jpg)
11
Basic Web site DesignBasic Web site Design
PMEHS Web DesignPMEHS Web Design
Dr. KerbyDr. Kerby
![Page 2: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/2.jpg)
22
Designing for the UserDesigning for the UserWho is your audience ...Who is your audience ...
Who will read these pages?Who will read these pages?• Young people?Young people?• Old people?Old people?• Muscians?Muscians?• Politicians?Politicians?• Athletes?Athletes?
What is the purpose of the site?What is the purpose of the site?
![Page 3: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/3.jpg)
33
Consistent, Unified LookConsistent, Unified Look
ColorsColors GraphicsGraphics LayoutLayout
• NavigationNavigation
![Page 4: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/4.jpg)
44
Color scheme examples:Color scheme examples: Army Web site Nick Jr. Web site
![Page 5: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/5.jpg)
55
AlignmentAlignment ConsistentConsistent
• Horizontal ORHorizontal OR• VerticalVertical
Left (easier to read)Left (easier to read) RightRight Center (eyes draw down the center)Center (eyes draw down the center)
![Page 6: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/6.jpg)
66
White SpaceWhite Space Types:Types:
• Active – separates content/imagesActive – separates content/images• Passive – blank areas that result in incomplete Passive – blank areas that result in incomplete
or mismatched shapesor mismatched shapes Well placed white space makes a Web Well placed white space makes a Web
page easier to follow/read.page easier to follow/read. Recommended - 2:1Recommended - 2:1 Lycos Web page
![Page 7: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/7.jpg)
77
White space sampleWhite space sampleBanner
Navigation
Text blockImage
Footer
Active White Space
Passive White Space
![Page 8: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/8.jpg)
88
Organize long lists of information Organize long lists of information and links.and links.
Microsoft Web site
Or use a navigation bar . . .Or use a navigation bar . . . Adobe Web site
![Page 9: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/9.jpg)
99
Organize NavigationOrganize Navigation
User friendlyUser friendly Group like links togetherGroup like links together Give links specific namesGive links specific names
![Page 10: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/10.jpg)
1010
Use of ColorUse of Color Red – stimulates emotion Green – inspires involvement or interaction Gray – indicates lack of commitment or
neutrality Blue – shows calm and conservative Yellow – shows cheerfulness and hope for
the future, restlessness and change, feelings of anxiety
Purple – implies mystical quality Black – indicates power and sophistication
![Page 11: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/11.jpg)
1111
Online ResourcesOnline Resources Usability First Web page design tipsUsability First Web page design tips Web evaluation form for secondary Web evaluation form for secondary
gradesgrades Ten Good Deeds in Web DesignTen Good Deeds in Web Design
![Page 12: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/12.jpg)
1212
Web site Design Rubric CRITERIA YES
(2 pts.)
ATTEMPTED (1 point)
NO (0
pts.) Page: is easy to read: consider white space, background, text/link colors/size, moving parts
is attractive: balanced layout between text and graphics has a reasonable load time contains correct spelling, grammar, punctuation, accuracy is written well, clear/understandable, organized (good headings/subheadings)
contains working links contains good navigation between pages contains working images observes copyrights and citations Total Points of Possible 18
![Page 13: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/13.jpg)
1313
Ten Good Deeds in Web Ten Good Deeds in Web DesignDesign
1.1. Place Name and Logo on every pagePlace Name and Logo on every page2.2. Provide a search box if Web site has Provide a search box if Web site has
over 100 pages.over 100 pages.3.3. Clear headings and page titles.Clear headings and page titles.4.4. Use grouping and sections to make Use grouping and sections to make
pages easy to scan.pages easy to scan.
![Page 14: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/14.jpg)
1414
5.5. Use hypertext links for navigation.Use hypertext links for navigation.6.6. Use thumbnails for catalogue Use thumbnails for catalogue
pages.pages.7.7. Create relevant thumbnails.Create relevant thumbnails.8.8. Write clear link titles.Write clear link titles.9.9. Add accessibility to users with Add accessibility to users with
disabilities.disabilities.10.10. Design sites in a way viewer will Design sites in a way viewer will
expect.expect.
![Page 15: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/15.jpg)
1515
Ten Good Mistakes in Web Ten Good Mistakes in Web DesignDesign
Original Top Ten MistakesOriginal Top Ten Mistakes Top Ten New MistakesTop Ten New Mistakes The REALLY Bad Web Page guideThe REALLY Bad Web Page guide
![Page 16: 1 Basic Web site Design PMEHS Web Design Dr. Kerby.](https://reader036.fdocuments.in/reader036/viewer/2022062401/5a4d1b0a7f8b9ab05998a83d/html5/thumbnails/16.jpg)
1616
Basic Web site DesignBasic Web site Design
PMEHS Web DesignPMEHS Web Design
Mrs. KerbyMrs. Kerby