7 wsg page-design
-
Upload
program-in-interdisciplinary-computing -
Category
Education
-
view
793 -
download
0
description
Transcript of 7 wsg page-design
![Page 1: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/1.jpg)
© 2004 Ken Baldauf, All rights reserved.
Page Design
CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida State University
From Web Style Guide, Chapter 7: Page Design
![Page 2: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/2.jpg)
© 2010 Ken Baldauf, All rights reserved.
Design creates visual logic and seeks an optimal balance between visual sensation and graphic information.
![Page 3: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/3.jpg)
© 2010 Ken Baldauf, All rights reserved.
Adaptive Design
Design creates visual logic and seeks an optimal balance between visual sensation and graphic information.
Style sheets can adapt the HTML document for use in different contexts.
![Page 4: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/4.jpg)
© 2010 Ken Baldauf, All rights reserved.
Content Order
![Page 5: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/5.jpg)
© 2010 Ken Baldauf, All rights reserved.
“Front Loading”
![Page 6: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/6.jpg)
© 2010 Ken Baldauf, All rights reserved.
Selective Display
![Page 7: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/7.jpg)
© 2010 Ken Baldauf, All rights reserved.
Text Alternatives
Alternate text comes in many forms. A descriptive caption is an alternative means to convey information contained in an image. Many sites use text links in the footer of the page to provide a text-only alternative to image-based links. You can provide alternate text in the code of the page: for example, using the “alt” attribute of the <img> tag to provide alternate text for images. Audio and video presentations are often presented with captions and a text transcript.
![Page 8: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/8.jpg)
© 2010 Ken Baldauf, All rights reserved.
Visual Design
The primary purposes of graphic design are to:
•Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral•Define functional regions of the page•Group page elements that are related, so that you can see structure in the content
CrowdedPages
![Page 9: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/9.jpg)
© 2010 Ken Baldauf, All rights reserved.
Consistency
![Page 10: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/10.jpg)
© 2010 Ken Baldauf, All rights reserved.
Contrast
A page of solid text will repel the casual reader with a mass of undifferentiated gray, without obvious cues to the structure of your information. A page dominated by poorly designed or overly bold graphics or typography will also distract or repel users seeking substantive content.
![Page 11: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/11.jpg)
© 2010 Ken Baldauf, All rights reserved.
![Page 12: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/12.jpg)
© 2010 Ken Baldauf, All rights reserved.
![Page 13: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/13.jpg)
© 2010 Ken Baldauf, All rights reserved.
Test your designs on a number of devices and laptops and in a variety of conditions, especially if you are using subtle colors to define important page functions or content. In general it’s best to use a more robust, high-contrast typography color scheme.
Overuse of graphic emphasis leads to a “clown’s pants” effect in which everything is equally garish and nothing is emphasized.
![Page 14: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/14.jpg)
© 2010 Ken Baldauf, All rights reserved.
the ground field around page elements is as active and important a part of the design as any figure element on the page. Filling all the white space on a page is like removing all the oxygen from a room—an efficient use of space perhaps, but decidedly difficult to inhabit.
![Page 15: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/15.jpg)
© 2010 Ken Baldauf, All rights reserved.
Centuries of designing documents for readers have taught the world useful lessons in how humans read and absorb information.
Gestalt Design Principles
![Page 16: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/16.jpg)
© 2010 Ken Baldauf, All rights reserved.
![Page 17: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/17.jpg)
© 2010 Ken Baldauf, All rights reserved.
![Page 18: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/18.jpg)
© 2010 Ken Baldauf, All rights reserved.
Page Frameworks
Fixed-width Page Flexible or Fluid-width Pages
![Page 19: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/19.jpg)
© 2010 Ken Baldauf, All rights reserved.
At normal reading distances the arc of the visual field covered by the macula is only a few inches wide—about the width of a well-designed column of text, or about twelve words per line.
Readers can adapt line length in fluid layouts by narrowing the browser window.
![Page 20: 7 wsg page-design](https://reader034.fdocuments.in/reader034/viewer/2022051513/547b1d7b5806b5e53f8b45af/html5/thumbnails/20.jpg)
© 2010 Ken Baldauf, All rights reserved.
Page Length
Long web pages require the user to remember too much information that scrolls off the screen; users easily lose their sense of context when the navigational buttons or major links are not visible