Promise Media

4 Stages of Web Design and Development

Stored in Website Development and tagged

Web design and development first serves an online marketing purpose and second serves a graphical purpose.

Some graphic designers may hate that statement. But they don’t have to pay the bills.

Ask people their opinions about certain Web sites, and wait to see if they talk about the graphics or about such issues as speed, functionality, ease of finding content and other experiences.

Web Design StagesSomeone responsible for a site has made the design more important than the audience when:

  • The main body type is a light or medium gray color, which reduces legibility.
  • Graphics are large and not optimized for fast loading.
  • The home page requires numerous pages of scrolling.
  • The width is set for the widest possible resolution because the site staff has large monitors.
  • Each page is jammed with excessive server calls to various products and services, which slow page load.

Management with responsibility for profits and advertising people who have to deliver revenue have seized too much control when:

  • Every page has more than three or four display ads.
  • The ad images are not optimized.
  • Ad placement crowds out content that users value, which is probably the reason why they came to the site in the first place.

Site design is a process of prioritizing stages in its development. Let’s look at four hypothetical stages.

Stage 1: Architecture and Layout

Site architecture starts with the code on the templates that determines the presentation of each major element — text, graphics and ads.

Simplicity results in fast page load speeds, less ongoing maintenance and often in lower costs (labor and bandwidth).

Architecture also involves the functionality that is displayed via the templates, such as commenting, search, RSS, etc.

Layout, also known as the wireframe, takes those decisions about architecture and leads to decisions about where to position certain types of content and site features.

Viewing a layout in the form of a simple set of CSS-driven borders will help confirm if the initial decisions are correct.

Presenting a layout without any actual text, graphics or ads — in other words just presenting a structure of boxes showing the placement of major elements — will force management and team members to focus on core business goals. They will think conceptually and strategically.

Stage 2: Content, SEO and Navigation

Content Decisions

Now that a rough layout is in place and the team is in agreement, it’s time to lay in the actual content. It’s likely the content can be subdivided into a set of specific subjects.

Prominence is a key element in site design because it impacts user experience, click rates and search engine optimization. The value of each element should determine its prominence. The value of an element is determined by its ability to deliver audience and revenue.

For example, an article that gets high placement in search engine results should be placed more prominently on the site if moving it will deliver an even higher rank.

A 300×600 display ad that commands higher CPMs and click rates should be more prominent than a 300×250 with lower CPMs and click rates.

Navigation Decisions

A site that uses a main navigation bar at the top of the page in a horizontal dimension has a limit to the number of items it can contain.

Most sites will find a limit of about seven or eight navigation items. Any more will usually require displaying them in a smaller font to make them fit, which leads to fewer clicks by visitors.

Trying to display more items will results in three common options:

  1. Creating a dropdown menu off the main navigation bar.
  2. Creating a static secondary navigation bar that appears below the main navigation or above the header.
  3. Creating a more extensive static navigation at the bottom of every page.

The more navigation items a site displays, the more code that is required.

SEO Decisions

SEO research will help identify the best keywords to use to describe the subjects. They are then used to name each section front and the anchor text used in navigation (or at least influence the naming of them).

Stage 3: Graphics, Colors and CSS

It is useful and interesting to review a prototype with nothing but raw content, navigation and links and leave out the graphics altogether.

It forces the designers and managers to look at the site in terms of content and functionality.

Too many times I’ve seen people swayed by the look of a site because the graphics command their attention and make them completely overlook the content and functionality.

Once the raw site has been reviewed by all of the project stakeholders, THEN it is useful to implement graphics, colors and CSS and let them review it again.

Stage 4: Launching, Analyzing and Revising

The internal review is complete and the site is ready to go live. But that step of launching means that another review is about to take place — the public one.

One of the simplest ways of judging the public response is based on the audience metrics of pages per visit and time on site (which are related).

A high pages per visit number says that the public is clicking around, finding content and experiencing a site that is loading in an acceptable amount of time.

A low pages per visit number says just the opposite. In this case, analyzing audience numbers to identify pages with high exit rates is essential for correcting problems.

Comments are closed.

© 2007-2020 Promise Media LLC • PrivacySitemap