WEB PAGE ARCHITECTURE

Transcription

1 The goals of webpage architecture: 1. Bring order to many types of information: text, images, links, navigation. 2. Create movement through the page. 3. Provide centers of visual interest that serve as landing spots for the eye. 4. Promote scannability.

2 One thing on a page creates a focal point. It attracts our attention. It creates a landing spot for our eyes. The starting point on any page is called the center of visual interest (CVI)

3 Two dots on a page create two landing spots for the eyes. Two dots create competition. Two dots on a page create movement. Two dots divide our attention. Two dots create an axis.

4 Two dots on a page create two landing spots for the eyes. Two dots create competition. Two dots on a page create movement. Two dots divide our attention. Two dots create an axis.

5 AXIS n An axis is a line established by two points in space. It is the simplest way to organize space. n For any publication, a natural axis is formed by the edge of the page. n Other horizontal and vertical axes divide the page into logical and useful spaces.

6 n The designer will establish horizontal and vertical design axes to divide the space. n Axes are made apparent by the columns of type, gutters and alleys. n The axes are implied rather than drawn on the page.

7 n Alleys are horizontal bands of empty space that separate page elements vertically. n Gutters are vertically bands of empty space between columns. n We refer to alleys and gutters together as internal margins.

8 n Newspapers layouts have been governed by a horizontal axis formed by the banner headline meeting with a vertical axis in a T-formation. n The vertical axis was the gutter next to the dominant element on the page. THE GRID 8

9 n This simple arrangement still is effective in contemporary design and is common in Web-page design.

10 n This simple arrangement still is effective in contemporary design and is common in Web-page design.

11 n The eye naturally seeks out patterns of organization on a page, mentally connecting the dots to form axes. The page itself suggests an axis according to its length. A photograph used correctly, with its shape fitting its content, takes advantage of this natural axis.

12 n We can use the natural lines in art to direct the eye. n In this way we help establish a visual hierarchy.

13 n Start with the Center of Visual Interest. n Find an arrangement that leads to a starting point. n This will establish a visual hierarchy. CVI

14 n Axes are crucial to good Web page design. n The sheer number of images and text elements on a Web page demand order.

15 Architecture is the division of form and space. Elements must be organized in ways that are: Coherent: The page and document must hang together and make sense as a whole. Meaningful: The pages should reveal a hierarchy or a logical progression. Functional: Page design should aid readability, navigation.

16 Success depends on the underlying structure of the page. n This structure is expressed as a grid. A grid is simply a set of intersecting lines uniformly spaced, like graph paper.

17 A grid in Web design usage also means a division of the browser window common to all pages on the site. The grid becomes the basic foundation for placing elements on the page, becomes part of the character of the page. It affects the look and the personality of the document.

18 A grid in Web design usage also means a division of the browser window common to all pages on the site. The grid becomes the basic foundation for placing elements on the page, becomes part of the character of the page. It affects the look and the personality of the document.

19 n Symmetry is the balanced distribution of equivalent forms photos, type blocks, white space, rules positioned on either side of an axis down the middle of the page. n The left side is a mirror image of the right in shape and form. DESIGN AXIS

20 n Symmetrical pages are said to have formal balance. n As the name implies, formal balance can led a dignified or conservative look to a page. DESIGN AXIS

21 n Most designers today seek an asymmetrical page. The vertical axis is placed off-center. n Asymmetrical pages are said to have informal balance. DESIGN AXIS

22 n Asymmetrical pages often have a feeling of movement. n When done correctly, the asymmetrical page will still feel unified and at rest with itself; it will feel balanced. DESIGN AXIS

23 Symmetry, or formal balance is useful when the design needs a formal or conservative look, or when equality between two things needs to be emphasized. But it doesn t have to be dull.

24 n Asymmetrical pages rely on the axis or axes to bring order and balance to the page.

25 n Hierarchy deals with the importance or significance of a form or space by its size, shape or placement. n Before any elements are positioned, the designer must study the content and decide on a hierarchy. n The design then serves the hierarchy.

26 n Research has shown that the eye is attracted first to the largest image on the page, then to the largest type as the reader seeks more information. n Thus, a large image always will dominate the hierarchy of a page. n It must be relevant to the remaining content

27 n The repetitive elements of any publication create a rhythm, a feeling of regularity. n With asymmetrical balance and a planned variation in placement, rhythm feels syncopated.

28 n Rhythm begins with the body text: line height, paragraph indents, uniform internal margins. n Careful placement of typographical devices large initials, headlines, blurbs and pull quotes will break up text. n Pictures and graphics, arranged with careful attention to internal margins, add sizzle.

29 n A page with rhythm has a natural feel, especially in sequences of items. n Uniform design for repetitive elements ties the page together even as it deviates from exact alignment.

30 n Web pages really need a carefully thought-out rhythm.

31 n Your page size is determined by monitor size and resolution. n The standard display up to about five years ago was 1,024 pixels wide by 768 pixels tall. n After subtracting for overhead, space needed for menu bars etc., the browser-safe area is about 800px by 600 px. n The browser-safe area is the first thing the visitor sees without scrolling. 768 px 600 px 1024 px 800 px

32 n Computers today have wide-screen monitors that accommodate the 16:9 screen ratio of HDTV. n The standard widescreen computer display is 1,280 pixels wide by 800 pixels tall. n A browser-save area for this screen might be 1,000px by 700px. 800 px 1280 px 1000 px 700 px

33 A web page will have different graphic-safe areas on different displays. Design for one or the other.

34 HEADER <header> ZINGER (LOGO OR IDENTITY) Home page --> Submenu --> Submenu CLARIFIER (Short statement of purpose) BREAD-CRUMB NAVIGATION MAIN CONTENT <main> SEARCH SELECT SELECT SELECT SELECT SELECT Favorite site Another favorite GO SIDEBAR or SCAN COLUMN (provides a place for added features, perhaps the echo ) <aside id="sidebar"> ACCORDION (Standard navigation represents expandable content of the site) <nav id="rollover"> FOOTER (Provenance of the site; the echo ) <footer>

35

36 HEADER NAVIGATION MAIN CONTENT SIDEBAR COLUMN FOOTER

37 RULE 1 n Consider carefully what appears above the fold. This would be the portion of the page that is visible in the first browser window without scrolling. n Design your opening page to fit key content in the browser-safe area.

38 n The browsersafe area is determined by two factors: n the minimum screen size in common use, or n the width of paper used to print Web pages. n A good measure for the screen browser-safe area is about 1,000 pixels wide by 700 pixels tall

39 n The browsersafe area for printing depends on the width of the printed page, usually 8½ inches. n A width of pixels is recommended for pages designed to be printed. n Scrolling is OK for pages meant to be printed

40 RULE 2 n If you decide to use a dominant image, it should be about twice as big in area as any other image on the page. n Contrast is apparent to the reader ONLY if it is somewhat obvious.

41 RULE 3 n Put related elements close together and separate unrelated elements. n Lines drawn between elements provide the most emphatic separation, so never put lines between related elements. n White space is the best separator.

42 RULE 4 n Use consistent internal margins. n The internal margins between related elements will be smaller than the internal margins between unrelated elements.

43 RULE 5 n Use space consistently from page to page, especially for site logos and for navigation. n Your division of space becomes part of your Web site s identity.