Website

Website

Conceptualization and planning (flowcharts)

When designing a website, one should not begin the process inside of a text editor (BBedit) or website builder application (Dreamweaver, GoLive, etc). Instead, the process should begin on a piece of paper or within flowchart software. According to Wikipedia, a flowchart is:

In layman's terms, a flowchart provides a visual chart illustrating the structure of your website (Sleeth 2005). How many main navigational items will your website contain? What will these items be called? Will there be any pages contained within the main pages? What will they be called? By planning out your website using a flowchart, you get a head start on:

Information organization

Usability

Determining the volume of content required

Stage 2: Modeling (wireframes)

In the modeling stage, static “wireframe” mockups are created for each unique web page.These wireframes contain a bare-bones skeleton which illustrate the layout of a particular web page. Where will the logo go? Where will the content be located? Will there be breadcrumbs? Will you have a login box? Each of these questions (and many more) are answered in the modeling stage (King 2008). A few things one should take into consideration when creating wireframes:

Be sure to include all important elements that will be used (logo, navigation, content placement, images/video placement, login box, search, breadcrumbs, etc)

Reference the flowchart which you created in Stage 1

Don't use graphics - wireframes are meant to be bare-bones: boxes/circles/ovals which illustrate the placement of objects

Only use text to label the elements, don't use body text (thats for the third stage)

Focus on clean, well-organized, user-friendly layout; avoid cluttered layouts

Stage 3: Execution

The third stage in our professional web design process includes:

Creating the graphical user interface (GUI), also known as the design

Creating the content

Converting the web designs from images into code (markup) which web browsers use to present your website on the Internet

In the final stage, reference both the flowcharts created in Stage 1 and the wireframe mockups created in Stage 2 to create the final page layouts and designs. The design should be finalized in Photoshop or whatever image editing software you choose to use because it is a pain to make changes to the design once it has been converted into markup (code) (Bellinaso 2003).

Trust us, process makes perfect

Following a well-structured web design process is by far one of the most important steps that many web designers choose to neglect. By following a web design process such as the one we've just described, you increase the likelihood that your website will be well-organized, easily navigable, and user-friendly. If you're going to skip any of the items in our professional web design checklist, make sure that the web design process is not one of them (King 2008).

Step 2: Project collaboration tools

Note: If you are the only one working on your project, then you can skip this step. Project collaboration tools are only recommended for projects which have two or more people involved.

Communication is one of the most important elements in a project. When multiple people are building a website, there usually are quite a ...