Web designers don't always follow the correct process when creating a website. Our 3 stage web design process will help simplify the process of creating your own websites and also help yield better results upon completion.
When followed, the guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.
Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:
“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.
The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).
All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites. It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.
There are a few things that you will need in order to effectively conceptualize and plan your website:
To begin, grab your pen and paper or launch your favorite flowchart software. I use OmniGraffle Professional for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.
There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts visit flowcharts on Wikipedia.
Directly below is a sample flowchart that we created when conceptualizing Chromatic Sites. (1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.
The DosOnce you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process: modeling.
In the modeling stage, static “wireframe” mockups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:
Here is an example of how a wireframe mockup should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.
We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can). Just be sure to mockup any unique layout that your website will have. You’ll thank yourself later.
The DosBy the time you reach the third stage, you should have a clear idea of:
If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.
Ditch the pen and paperIn stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.
Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).
When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit W3Schools.com or The Blog Herald. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.
Above is a screen shot of a nearly-completed example of the layout we mocked up in stage 2. This was taken directly from our web browser and as you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout. Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.The DosIf you need professional web design work from a professional web design company, then take a look at the professional web design services of Chromatic Sites.