1 / 20

Web Site Development

Create a captivating personal portfolio website that reflects your personality and showcases the projects from your course. Design an engaging splash page and a home/about me page that tells your story. Include a comprehensive technology page and a project page, supported by intuitive navigation bars. Incorporate global and local navigation bars, a breadcrumb trail for seamless browsing, and links to your home page. Ensure consistent design elements, usability, and a cohesive color scheme to enhance user experience and highlight your work effectively.

dennis-walters
Télécharger la présentation

Web Site Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Site Development TGJ 3M1

  2. Personal Portfolio… • Showcase of your projects from this course. • Should be designed to reflect something about you and your personality!

  3. Include the following… • Splash Page • Home Page/About Me page • Com Tech page • Project Page

  4. Navigation Bars • A set of hyperlinks that give users a way to display pages. • A web site usually contains more than one type of navigation bar.

  5. Top Global Navigation Bar

  6. Top Global Navigation Bar • Contains links to each page on the first and second levels of the web site. • Shouldn’t contain more than 8 links.

  7. Bottom Global Navigation Bar

  8. Bottom Global Navigation Bar • This bar should only use text links in a small size. • Should contain all links to all of the pages in the web site if possible.

  9. Local Navigation Bar

  10. Local Navigation Bar • Can also be positioned under the Global Navigation Bar. • Typically contains links to the child pages of the current page. • Can also contain links to same-level pages.

  11. Breadcrumb Trail/Path

  12. Breadcrumb Trail/Path • Displays the page names, from the home page to the current page. • Each of the names acts as a link to that page. • It allows the user to easily backtrack through the site.

  13. Links to Home Page • Should always be a link on each page to the home page. • Always located in the breadcrumb trail and in the bottom global navigation bar. • Logo at top of page typically links to home page.

  14. Navigation Structure… • Organization of a web site is called a navigation structure. • Navigation structure for East Side Mario’s has 3 levels of pages.

  15. East Side Mario’s Navigation Structure: Parent and child pages

  16. Design Concepts:Appropriateness • Elements in the web site should match the purpose and target audience.

  17. Design Concepts:Consistency • Page layout should be similar for each page. • User quickly becomes familiar with the site and can navigate easily. • Use consistency in the way you deal with links.

  18. Design Concepts:Usability • Users need to find information that is useful to them. • Avoid wordiness and keep text short. • Allow for seamless navigation.

  19. Design Considerations:Text • Try not to use more than two fonts. • Don’t place text over busy backgrounds. • Don’t centre body copy text. • DON’T USE ALL CAPITALS IN YOUR BODY COPY. IT’S HARD TO READ!

  20. Design Considerations:Colour • Use of “heavy” backgrounds distract the user. • Solid coloured text on solid coloured backgrounds work best. • Limit colour scheme to 3-4 colours. • Keep colour scheme consistent throughout web site.

More Related