Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and...
-
Upload
rolf-parks -
Category
Documents
-
view
219 -
download
0
Transcript of Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and...
![Page 1: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/1.jpg)
Page Design
Web DesignProfessor Frank
![Page 2: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/2.jpg)
Page Design
• Effective web design creates visual logic and seeks an optimal balance between visual sensation and graphic information
• Promotes order, efficiency and enjoyment of your website
![Page 3: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/3.jpg)
Document Design
• Documents produced for web have more complex purpose and functionality than documents produced for print sources
![Page 4: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/4.jpg)
Adaptive Design
• Design beyond a single web page – anticipate designs for other formats (print, mobile, etc)
• Source document and media style sheets
![Page 5: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/5.jpg)
Defining Styles
• External style sheets – most effective• Create a different external style sheet for each
context and then reference the style sheet using the “media” attribute of the <link> tag
![Page 6: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/6.jpg)
Adaptive Design
![Page 7: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/7.jpg)
Document Order
• The sequence in which elements, such as site identity, navigation, primary content, related content, and provenance information, appear in the document source code
• Screen readers read web pages at the beginning of page and read through content in sequence
![Page 8: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/8.jpg)
Document Order
![Page 9: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/9.jpg)
Front-loading
• Put most important elements at beginning of page
• Search engines give greater weight to top of document
![Page 10: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/10.jpg)
Selective Display
• Include elements that are relevant to different contexts and code the document to allow elements to display or not, as appropriate
![Page 11: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/11.jpg)
Text Alternatives
• Provide text equivalents for all relevant nontextual elements– Descriptive captions– Links to text-only versions of page– Provide captions/text transcripts to audio/video
![Page 12: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/12.jpg)
Understand the Medium
![Page 13: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/13.jpg)
Visual Design
• Create a clear visual hierarchy of contrast• Define functional regions of the page• Group page elements that are related
![Page 14: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/14.jpg)
Functional Design
![Page 15: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/15.jpg)
Consistency
• Establish a layout grid and style for handling your text and graphics, and then apply it consistently
• Repetition is not boring!
![Page 16: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/16.jpg)
Graphic Themes
![Page 17: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/17.jpg)
Contrast
• Use tools of page layout, typography, and illustration to lead the reader’s eye through the page
• Readers first see pages as large masses of shape and color, then they begin to pick out specific information, first from graphics then from text
• Graphic balance and organization of the page is crucial
![Page 18: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/18.jpg)
Color & Contrast in Typography
![Page 19: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/19.jpg)
Contrast Variability
• Test your design on a variety of screens, devices and conditions
• Don’t go overboard with contrast
![Page 20: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/20.jpg)
White Space
• Use white space to avoid crowding the edges of the browser windows with important content
• Consider floating the page in the center of the browser window
![Page 21: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/21.jpg)
White Space
![Page 22: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/22.jpg)
Style
• Don’t set out to develop a “style” for your site; let style develop naturally from balance of content and layout
• The best style is one that readers never notice, but where everything feels logical
![Page 23: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/23.jpg)
Simplicity
• Consider vision-impaired users and people with cognitive disabilities, such as memory or learning disabilities
• Stick with a simple language and navigation applied consistently throughout your site
![Page 24: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/24.jpg)
Gestalt Design Principles
• Proximity• Similarity• Continuity• Closure• Figure-ground relationships• Uniform connectedness• 1 + 1 = 3 effects
![Page 25: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/25.jpg)
Gestalt Principles
![Page 26: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/26.jpg)
Gestalt Principles
![Page 27: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/27.jpg)
Gestalt Principles
![Page 28: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/28.jpg)
Gestalt Principles
![Page 29: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/29.jpg)
Page Frameworks
• Fixed-width page vs flexible-width page• To scroll down or to not scroll down?
![Page 30: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/30.jpg)
Fixed Page Widths
• Good for complex page layouts with many functional subregions of the page
• Page layout will be stable whatever the size of the user’s screen or browser window
• You can fix the position of elements on the page and control such typographic features as line length and spacing
![Page 31: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/31.jpg)
Fixed-width Hybrid
![Page 32: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/32.jpg)
Flexible Page Widths
• Accommodates different users and a variety of display devices
• Easily adapted to increase text size, display color and contrast, and other viewing or reading parameters
![Page 33: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/33.jpg)
Flexible Page Widths
![Page 34: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/34.jpg)
Page Width and Line Length
• Ideal line length - about twelve words per line• Reading slows as line lengthens• Users can control length – enlarging text size,
narrowing browser window
![Page 35: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/35.jpg)
Page Length
• Ideal length is balance of 4 factors:– Relation between page and screen size– Content of your documents– Whether the reader is expected to browse the
content online or to print or download the documents for later reading
– Bandwidth available to your audience
![Page 36: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/36.jpg)
Page Length Disadvantages
• Disorientation that results from scrolling on computer screens
• Long web pages require the user to remember too much information that scrolls off the screen
• Sense of context is lost when the navigational buttons or major links are not visible
![Page 37: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/37.jpg)
Long Documents & Printing/Saving
• Divide the document into chunks of no more than 1-2 printed pages’ worth of information
• Provide a link to a separate file that contains the full-length text combined as one page
• Position “jump to top buttons” at regular intervals down the page
![Page 38: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/38.jpg)
Shorter Web Page Advantages
• Home pages and menu or navigation pages elsewhere in your site
• Documents to be browsed and read online• Pages with very large graphics
![Page 39: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/39.jpg)
Longer Web Page Advantages
• Easier to maintain (content is in one piece, not in linked chunks spread across many pages)
• More like the structure of their paper counterparts (not chopped up)
• Easier for users to download and print
![Page 40: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/40.jpg)
Page Headers
• Best measure of the efficiency of a page design is the number of options available for readers within the top six inches of the page
• “Signature” graphic and page layout allows the user to grasp immediately the purpose of the document and its relation to other pages
![Page 41: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/41.jpg)
Page Headers
![Page 42: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/42.jpg)
Page Footers
![Page 43: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/43.jpg)
Vertical Stratification
• “Above the fold” (ie above the scroll) captures average user’s attention
• Web page layouts should be judged not by viewing the whole page as a unit but by dividing the page into visual and functional zones and judging the suitability of each screen of information
![Page 44: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/44.jpg)
Design Grids
![Page 45: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/45.jpg)
Design Grids
• Web templates create a regular, repeating structure of design patterns that consistently organize identity, navigation, content, and technical functionality
![Page 46: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/46.jpg)
Templates
• Global identity of the enterprise• Global enterprise navigation features that tie smaller
sites and programs to the larger institution• Well-designed, carefully validated xhtml and css code• Consistent semantic nomenclature for all xhtml and css
containers and page elements• A consistent, enterprise-wide typography program• Accessibility standards that meet requirements• Compatibility with a basic web content management
tool
![Page 47: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/47.jpg)
Templates
![Page 48: Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.](https://reader035.fdocuments.in/reader035/viewer/2022062308/56649d995503460f94a83934/html5/thumbnails/48.jpg)
Typography in Template Design
• Most users will never explicitly notice why a wide range of related sites produces a cohesive web experience