(client login)


What is a Web Site – Part II (Design)

Friday, July 18th, 2008 by Mike Cheley

In my last post, I talked about the discovery phase of website creation. In this post, I will discuss the designing of a website. The design process has responsibilities on both sides. As the client you are responsible for a short list of items:

  • Content for wireframe/screen mock-ups
  • Approval of the wireframe
  • Approval of the screen mock-ups

Now for a little further explanation.

The wireframe and screen mock-ups will ALWAYS looks better if they can incorporate as much real data as possible. To that end, the first thing we do is get content for the home page from you. What headline are you going to have on the home page? A simple, “Welcome!” or something more SEO friendly? Are the Events you have going to always be start- and end-time driven, or will they be all day events or a combination? Will your Press Releases have a summary or will you just want the ‘Entire Story’ to be on the site and use the Title to entice the readers.

A wireframe is a rough sketch of what the layout of the homepage will be. Think of it as the blueprint of your site. We decide what kind of navigation there will be (horizontal or vertical), if there is going to be a flash movie and where it will be (the header or the content area), what kinds of dynamic content there will be (Announcements, Press Releases, Events) and how that dynamic content will be displayed. We also look at how much content will be on the home page (although with 2020 | CMS this content can be changed at anytime).

Once the wireframe is approved a number (anywhere from one to three) of screen mock-ups are created. If the wireframe is the blueprint, the screen mock-up is the artist’s rendition of the house. We see the design elements and the incorporation of your logo and color palette.

The design process is never ‘100% right’ out of the gate, so we allow for small design tweaks after presentation of the screen mock-ups. Once a design has been approved, we move into ‘Implementation’.

Come back next time to see how this:

Screen Mock-up

Turns into this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <title>Sun World - Welcome to Sun World. Where Produce Begins</title>
  <meta name="author" content="Graphtek" />
  <meta name="copyright" content="&copy;  2008 Sun World International, LLC<br /> All rights reserved" />
<!--[if lte IE 6]>
<script type="text/javascript" src="/includes/csshover.js"></script>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Graphtek CMS" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="/includes/menu.css" />
  <link rel="stylesheet" type="text/css" href="/includes/style.css" />
  <link rel="stylesheet" type="text/css" href="/includes/user_styles.css" />
  <link rel="stylesheet" type="text/css" href="/includes/forum.css" />

To give you this:

Implemented User Interface

Leave a Reply