I also read Chapter 2 in Above the Fold. These are my notes:
Chapter 2: Anatomy of a Webpage
Form and Function of Web Design:
- Web design, as with any other form of design, requires the designer understands the end user's habits, the context in which the work is received and the necessary function of the end result
- Structural conventions that have emerged are: a page header; persistent navigation; content areas and sidebars; footer navigation; and often a background treatment
- THE NATURE OF HOW THE PAGES ARE VIEWED:
- The natural position for important information would be the upper left of a web page
- Web users skim a page for key points
- BORROWED CONVENTIONS:
- Elements from print design were converted to Web design - design elements like headers, feature areas, body text, and sidebars all come directly from age-old newspaper design standards
- USER EXPECTATIONS:
- Sites that want to attract the masses, need to appeal to the lowest common denominator in terms of one's ability to use technology
- SEARCH ENGINE OPTIMIZATION (SEO)
- Having a high search engine rank is critical to a company's online success - a higher rank on a list of search results means more traffic
- Some design factors that influence the search engine optimization of a page include: text links in the main navigation; multiple keyword-rich text links throughout the page; limited use of images, especially images of text, since search engines cannot get content from images; bolded subhead copy styled with the <H> tags; and important content placed above the fold - the higher the better
- ADVERTISING STANDARDS:
- The Interactive Advertising Bureau (IAB) sets forth rules that govern the size, shape, and file weight (among other things) for advertising assets.
- Web designers must accommodate banners that are 300 x 250 pixels (big box), 180 x 600 pixels (skyscraper), and/or 728 x 90 pixels (leaderboard), among others
- Web designers satisfy both sides (enough ads above the fold without overdoing it) by establishing a structure that flows with the required sizes of the ads - a 300 pixel-wide sidebar will fit a big box ad without any dead space around it
- The duality of form and function is a universal design concept; however, most new web designers aren't as aware as they should be of the technical and functional implications behind the design decisions they make
- BEYOND CONVENTIONAL:
- While theme-based web design makes having a web site easy and affordable, the concept has the potential to erode the value of what web designers do - at worst, it turns design and creativity into a commodity and homogenizes the look of the web
Header
- The header of a web page is one area that remains relatively consistent throughout a web site.
- Headers establish the brand look and feel for a site and often will present the user with a call to action - search, buy, register, etc.
- The header often contains the main navigation for a site
Feature Area
- One indication of effective design is a clearly defined hierarchy of information.
- To achieve this, designers use a focal point - an area in the composition that is perceived before all others and serves as an entry point into the layout
- In web design this is often the main feature area
Body/Content
- The body or content of a web site is where users spend most of their time
- A web page can be any height; therefore it's important to break up long stretches of content with white space and subheadings
- In addition to not having a height limit, web pages also don't have a limit to how wide they can be
- Web designers have two options for addressing the problem of page width variability
- 1.) Most current sites have a fixed width frame or boundary, whereas the content is confined to a box with a set size that floats in the browser window as it expands and contracts
- 2.) The second option is to have variable-width columns (the line length changes as the browser is expanded or contracted)
- Typographically, the optimal line length for ideal legibility is no more than two to two and a half alphabets - 52 to 65 characters.
Sidebar
- The sidebar of a web page contains secondary information that either supports the main content of the page or directs users to related content through the use of submenus and links
- As with the header, the design of a sidebar should blend in with the look of the site as not to visually overshadow the content of the page, helping to create an overall feel for the page
Footer
- The footer has emerged over recent years as a critical part of web design, performing tasks for both the user and search engine optimization
- Over time, web page footers have grown to resemble a mini site map, with links to each of the main pages of the site
Background
- Today, web page backgrounds are used in more sophisticated ways to compliment the content of the page
- Backgrounds can be used to create depth or dimension, add richness with texture and color to a page, or even expand the content beyond the borders of the page
- There is some debate between web designers and usability experts regarding the use of dark background and light text
- more experts believe that it's more difficult to read light text that's reversed out of a dark background
No comments:
Post a Comment