designing web pages layout and composition. defining good design users are pleased by the design but...
TRANSCRIPT
![Page 1: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/1.jpg)
Designing Web Pages
Layout and Composition
![Page 2: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/2.jpg)
Defining Good Design
• Users are pleased by the design but drawn to the content• Design should not be a hindrance
from scanning the page for the information required
![Page 3: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/3.jpg)
Defining Good Design
• Users can move about easily via intuitive navigation• Main navigation block should be
clearly visible on the page• Each link should have a descriptive
title
![Page 4: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/4.jpg)
Defining Good Design
• Users recognize each page as belonging to the site• Cohesive theme or style should exist
across all the pages of a site• Hold the web site together
![Page 5: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/5.jpg)
Web Page Anatomy
![Page 6: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/6.jpg)
Web Page Anatomy
• Containing Block• Contents of the page
• Logo• Identity, colors• Should sit at the top
of each page of the website
• Increases brand recognition
• Each page belongs to the site
![Page 7: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/7.jpg)
Web Page Anatomy
• Navigation• Easy to find and
use• Expected at the
top of the page• May be vertical or
horizontal
• Content• Focal point of the
design
![Page 8: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/8.jpg)
Web Page Anatomy
• Footer• Bottom of page• Contains copyright
information, contact, legal information, links to main sections of site
• Should indicate to viewers that you have reached the bottom of the page
![Page 9: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/9.jpg)
Web Page Anatomy
• White Space• Area of the page
that’s not covered by type or illustrations
• Design will feel closed in without it
• Gives the webpage “breathing room”
• Guides users eyes around the page
• Creates balance and unity
![Page 10: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/10.jpg)
Grid Theory
• The Golden Ratio or Divine Proportion
• A line can be bisected using the golden ratio by dividing its length by 1.62
![Page 11: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/11.jpg)
Grid Theory
• Compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing
![Page 12: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/12.jpg)
The Rule of Thirds
• Simplified version of the Golden Ratio
• A line bisected by the golden ratio is divided into two sections
![Page 13: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/13.jpg)
The Rule of Thirds
• Place the elements of a webpage on this drawing
• Large main rectangle is the Content Block
• Place the biggest block first
![Page 14: Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance](https://reader035.vdocument.in/reader035/viewer/2022062517/56649f275503460f94c3fb20/html5/thumbnails/14.jpg)
The Rule of Thirds