Web Page Anatomy

By Jason Beaird

 

It’s similar to making a phrase on your refrigerator with magnetic poetry words. Although there are millions of ways to arrange the words, only a few arrangements make any sense. The magnetic words are like the components, or blocks, of the web page. Although the number of these necessary blocks depends on the size and subject of the site, most websites have the components seen in the figure below:

 

Let’s look at each of these components in turn:

Containing block

Every web page has a container. This could be in the form of the page’s body tag, an all-​​containing div tag. Without some sort of container, we’d have no place to put the contents of our page. The elements would drift beyond the bounds of our browser window and off into empty space. The width of this container can be fluid, meaning that it expands to fill the width of browser window; or fixed, so that the content is the same width no matter what size the window is.

Logo

When designers refer to an identity, they’re referring to the logo and colors that exist across a company’s various forms of marketing, such as business cards, letterhead, brochures, and so on. The identity block that appears on the website should contain the company’s logo or name, and sit at the top of each page of the website. The identity block increases brand recognition while informing users that the pages they’re viewing are part of a single site.

Note: Many people use the words “identity” and “branding” interchangeably. Branding is a broad term that describes the process of developing an awareness of a company, product, or service. The branding process involves advertising, market research, customer feedback, and much more. Identity is actually a subset of branding in that it deals only with the visual aspects of branding.

Navigation

It’s essential that the site’s navigation system is easy to find and use. Users expect to see navigation right at the top of the page. Whether you plan to use vertical menus down the side of the page, or a horizontal menu across the page, the navigation should be as close to the top of the layout as possible. At the very least, all main navigation items should appear “above the fold.”

Above “the Fold”

The fold, as many designers call it, is where the content of a page ends before users scroll down. This metaphor is derived from the fold in a newspaper. If you look at the cover of a folded newspaper, most of the headlines and biggest news appear in the top half, so that the most important news items can be seen at a glance when the newspaper is folded. The location of the fold on a web page depends on the browser dimensions and the user’s screen resolution. At a resolution of 1024×768 pixels, accounting for browser chrome — that is, the space taken up by the browser application itself in the form of tabs, buttons, the address bar, and a bottom status bar — the fold is usually just over 500 pixels from the top.

Content

Content is king. A typical website visitor will enter and leave a website in a matter of seconds. If visitors are unable to find what they’re looking for, they’ll undoubtedly close the browser or move on to another site. It’s important to keep the main content block as the focal point of a design, so that visitors can scan the page for the information they need.

Footer

Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site. By separating the end content from the bottom of the browser window, the footer should indicate to users that they’re at the bottom of the page.

Whitespace

The graphic design term whitespace (or negative space) literally refers to any area of a page without type or illustrations. While many novice web designers (and most clients) feel a need to fill every inch of a web page with photos, text, tables, and data, empty space on a page is every bit as important as having content. Without carefully planned whitespace, a design will feel closed in, like a crowded room. Whitespace helps a design to breathe by guiding the user’s eye around a page, but also helps to create balance and unity.

Six Tips For Creating Iconic Logos

By Jennifer Farley

Logo design is undoubtedly one of most challenging aspects of graphic design. It may seem easy at first glance but successful logos tend to have several characteristics in common. Those features are:

• simplicity
• uniqueness
• relevance
• memorable
• focus
• tradition (or not following trends).

Here’s a brief overview of each of these characteristics with a well known brand examples to illustrate the point.

1. Keep it simple. A frequent mistake made by new designers is to over-​​complicate, or over-​​design. Simplicity is a good thing and when in comes to design, less is definitely more.


2. Make it unique. In a world full of swooshes, arcs, leaves and other logo clichés, this is easier said than done. The Nike logo is a tick or correct mark yet is instantly recognizable and unique.

3. Keep it relevant. When you’re designing a logo, think about the appropriateness of the symbol or typefaces you use. For example, a skull and crossbones will not work for a wedding planning business. The Lego logo uses bright primary colors and a child-​​friendly font – perfect for its intended audience.

4. Make it memorable. Your logo design is a visual representation of what the company stands for. The logo will often only receive a quick look, so it needs to make a fast impression.

5. Keep the focus and use one idea to make the design special. The Fed Ex logo features an arrow between the letters E and X, representing the idea of moving parcels from place to another.


6. Aim for longevity. While many logos will be updated over their lifetime, its probably not a bad idea to design something which will not look dated after a year. Avoid “trendy” fonts and symbolism. The Coca-​​Cola logo is among the most recognized logos and brands in the world. The logo’s distinctive cursive script has not changed dramatically over its long lifetime.


These are, of course guidelines and pointers. All rules are made to be broken but it helps if you know the rules before breaking them. What other rules or guidelines would you add to this list?

Click this to read more tutorials.

Breaking Out of the Box With CSS Layouts

By Jina Bolton | June 24, 2008 | CSS Tutorials

One of the most commonly used arguments regarding CSS that I hear from designers who don’t like web standards is, "CSS designs are so boring. They’re too boxy." I can’t help but find this statement to be a bit silly. To me, that’s like saying buildings built with wood are boxy. An architect can create a boring-looking building. But, using the same tools, an architect can create a stunning work of art. It all depends on creativity and experimentation.

It’s true that CSS is heavily reliant upon a grid — everything flows on x and y axes (and can be positioned as such, much like designs built in Photoshop). However, this doesn’t mean that your design has to be boring. If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting. In achieving this goal (while supporting flexibility and maintainability), CSS designs have so much more to offer than table-based layouts.

Grids and Wireframes

If you’ve taken any classes in typography or layout, you know that the grid is one of the most important essentials in design. However, if you aren’t familiar with this concept, here’s a very brief overview:

• A grid provides organization. A grid can act as your page layout’s "blue plan." Well-planned grids can be aesthetically pleasing, as well as providing organization to your content.
• A grid can define more information. A well-organized layout can help provide consistency from page to page, and define what type of information is being provided at various points (for example: a sidebar can be used to provide secondary information; copyright and legal information, etc. might be placed in the page footer, and so on).
• A grid can unify a series. Having a planned guide for the placement of logos, headlines, images, and/or text in any medium (business cards, advertisements, web site layouts, etc.) can help "tie" everything together. Therefore, a grid can be a very important element of a brand.

Starting our Design

Here’s an example of a grid that you may typically see on a web site:

Sample Web Layout

Click here to read more.