1. MULTIMEDIA FOUNDATIONS Core Concepts for Digital Design By Vic Costello Chapter 5 : Multimedia Page Design (accessible as an e-book through the VU library)
By Sara Ryan

2. Gutenberg Diagram
Gutenberg Diagram shows how readers scan through a traditional, test-based page.
anjanimedia.com

3. Gutenberg Diagram Page is divided into four equal quadrants.
Reader’s eye begins at the top left quadrant.
Reader moves across each line of text (axis of orientation).
Gravitational force pushes gaze downward and to the right (Reading Gravity).
Lead along a diagonal path from top left to the bottom right.
Strong fallow area & weak fallow area lie beyond this path.
A reader typically pays less attention to content that’s placed in these regions of the page.

4. Web-based Layouts
As page designs have shifted from print to digital forms and from heavy text-based layouts to dynamic visual designs, users have adopted more sophisticated methods of scanning pages. The F-Layout is one of the most common page layouts on the web. The readers gaze is directed through the page in a pattern that resembles the letter F.

5. F-Layout
Web Designs: Tuts+

6. F-Layout
The user to begins reading in the top left part of the page. They scan from left to right across the entire first row.
Next they make a partial scan of the second row.
Each subsequent row scanned in short bursts from left to right.
Users have grown accustomed the to most important information being placed along the top of the page.
Second row often contains navigational prompts like menu buttons or hyperlinks.
In the third scan, the user views the sidebar along left edge, directing the eye downward in a series of shorter bursts of scanning.
Research shows that conforming layouts to the F-Layout pattern will enhance the usability of the page.

8. Z-Layout The Z-Layout is a variation of the Gutenberg diagram.
Web Designs: Tuts+

9. Z-Layout Scanning begins with a sweep across the top row of the page.
The second scan flows diagonally through the centre of the page, towards the bottom left corner.
The final scan is a horizontal sweep across the bottom of the page.
Important visual elements should be placed along the path of the Z.
The Z layout works best when a large visual element is placed in the centre of the page, between two rows of linear information.

11. Visual Hierarchy
Visual Hierarchy is the order with which the viewer perceives content on a page. Elements such as alignment, colour, emphasis & proportion can be used to order content and make it easier for the reader to absorb.
One of the easiest ways to establish visual hierarchy on a page is to subdivide large blocks of text into smaller segments or chunks. This is known as chunking.
The next thing you can do to bring order and structure to the presentation of text is to add section headings and subheadings.

12. Visual Hierarchy

13. Grid System
One of the first things a page designer must do is to break up the empty page into modular regions that can be independently managed and filled with content. While many variations of the grid system have been formulated, all of them are based on the fundamental idea of using horizontal and vertical lines for subdividing a page into modular units of space.

14. Parts of a Grid
Columns refer to a vertically orientated space that is typically taller than it is wide. Rows often break up space into horizontal strips that run left to right. A module is a uniform square unit of space created by the intersection of perpendicular lines in a grid. A spatial zone is formed when two or more modules are grouped together. A margin is the negative space between modules and the outside edges of a page or spatial zone.

15. Parts of a Grid

16. Common Grid Structures

17. Common Grid Structures
The Single-Column Grid is the simplest grid system and features a single column of visual information bordered by margins on either side of the page.

18. Common Grid Structures
The Multicolumn Grid breaks up the page with vertical divisions from left to right.

19. Common Grid Structures
Modular Grids include consistently spaced vertical divisions from left to right as well as horizontal divisions from top to bottom.

20. Page styles
A static page delivers the same layout and content to every user viewing the page. It can also refer to a page that is rarely, if ever updated.

21. Page styles
A dynamic page is one where the content changes over time or with each individual viewing experience.

22. Managing Page Layout
Fixed Layouts are common in the printing world, where pages (whether it’s a magazine, book or newspaper) have physical dimensions that can be described in absolute units of measurement.
In web design, pages can be fixed, but because of the various multi-resolution monitors, browsers and platforms on which to view web pages, it’s impossible to design a page layout that will look the same on every device.
When a webpage is defined by pixels, the size of the page will vary with the resolution of the user’s monitor. A fluid Layout fixes this potential issue by using percentages instead of pixels to define a page size.

23. Managing Page Layout Fixed Page Fluid Page

24. Author Background
Vic Costello is an academic with 20 years experience in the media education industry. He previously worked in the broadcast and corporate communications and has been teaching multimedia production courses for the past 11 years. He seems to be an established academic, however he has no real-world experience in the web design. Because he is not active in the industry, he may not be aware of up-to-date design trends or might not give them much consideration until they have become more established.

25. Reflection
The chapter gives a good description of traditional design layouts in comparison to newer, more dynamic layouts for web page design.
However Costello doesn’t discuss future trends or technologies that may influence these topics (and for a book published in 2012, it feels like it could be more current).
This lack of predictions for the future could be because of his place as an academic rather than a practicing web designer, but it could also be because of the book format (i.e. he would only want to discuss established trends – in case today’s popular trends disappear quickly).

26. Reflection
The chapter is useful for understanding past & current norms in web design, but it could be a case of knowing the ‘rules’ so that you are able to then break them.
Online resources for the design community are more current & even clearer in their discussion of these ideas. They also benefit from allowing viewers to comment and keep the discussion going.