| When followed, this guide will prove to be quite a | | | | However, make sure that when creating your |
| valuable web design resource. From the inexperienced | | | | wireframes you don't forget to include the most |
| to the experienced, this guide has something for | | | | important elements of a website (logo, navigational |
| everyone. | | | | menu, content placement, images/video placement). |
| The Process of Great Web Design Just to make | | | | If some of your pages will be using the same layout, |
| sure we are all on the same page, lets begin with the | | | | then it is not necessary to mock all of those pages |
| basic definition for "web design". | | | | up (although you certainly can). |
| According to Wikipedia, web design is: | | | | Just be sure to mockup any unique layout that your |
| "a process of conceptualization, planning, | | | | website will have. |
| modeling, and execution of electronic media delivery | | | | You'll thank yourself later. |
| via Internet in the form of Markup language suitable | | | | The Dos |
| for interpretation by Web browser and display as | | | | -mockup all unique pages |
| Graphical user interface". | | | | -include important elements (logo, navigation, content |
| The process of web design can be compared to the | | | | placement, images/video placement) -start from the |
| process of writing a research paper. In the | | | | top and work your way down -reference your |
| conceptualization/planning stage, flowcharts (the | | | | flowchart created in stage 1 to make you don't |
| outline) are created which illustrate the navigational | | | | forget to mockup any pages -save, save, save - like |
| structure of your website. In the modeling stage, | | | | with anything on the computer, save your mockup(s) |
| static wireframes are created (the rough draft) which | | | | every 10 minutes or so |
| illustrate the skeletal layout for each section of your | | | | -focus on clean, user friendly layouts -label your |
| website. After the wire frames are created, graphics, | | | | elements so you don't forget what they are when |
| colors and text are used to create the design of | | | | you reference them in stage 3, execution -use other |
| your web pages based on the layout of the wire | | | | web sites as inspiration; there is nothing wrong with |
| frames. In the execution stage, your design is | | | | taking elements from other sites and making them |
| converted into a format supported by web | | | | your own (see "donts") |
| browsers, text and content are added, and finally, | | | | The Donts |
| your website is published live to the Internet for the | | | | -don't include graphics or colors (that's for the next |
| world to see (final draft). | | | | stage) -don't make your mockups too |
| All three stages of the design process are equally | | | | "busy"; focus on clean, well organized, |
| important. Many web designers skip a stage in order | | | | user friendly layouts -don't skip this stage; it is just as |
| to save time or because they don't think that is is | | | | important as the first and the last -if you take |
| necessary. However, all three stages are necessary if | | | | elements from other websites, make sure you don't |
| your goal is to create a successful design and | | | | plagiarize; there is a difference between being |
| respectable website. Even if the three stages are | | | | inspired by another website to create certain |
| used, there are many mistakes that web designers | | | | elements of your design and blatantly ripping off their |
| can make that will lead to poor-quality, non | | | | layout and colors |
| user-friendly websites. | | | | Stage 3: Execution |
| It's time to clean out the cabinet of bad web design | | | | In the third and final stage, execution, the planning |
| practices and restock it with the good ones. | | | | from stages 1 and 2 are combined to assist in |
| Stage 1: Conceptualization and planning | | | | creating a live, interactive website. |
| This stage is skipped more often than the other two | | | | The third stage is by far the most time intensive |
| stages. Most writers don't enjoy creating outlines for | | | | since you will be 1) creating the graphics 2) creating |
| research papers, and most web designers don't like | | | | the content, and finally, 3) converting the web |
| creating flowcharts either. Don't be lazy. If you put | | | | designs from images into code that web browsers |
| forth the effort and plan out your website, then you | | | | use to present your website to the world. |
| will find the web design process to go smoothly with | | | | By the time you reach the third stage, you should |
| fewer mistakes made along the way. | | | | have a clear idea of: |
| There are a few things that you will need in order to | | | | -how your visitors will get from one place to another |
| effectively conceptualize and plan your website: | | | | (stage 1, flowchart) -how your web pages will be laid |
| -a brain | | | | out (stage 2, wireframe mockups) |
| -a pen and paper | | | | If you don't have a clear idea of these two things, |
| -(optional) flowchart software | | | | go back to the first and second stagees and |
| -a general idea of the different sections of your | | | | continue to develop them. You will find that the third |
| website | | | | stage is easiest when you have constructed a clear, |
| To begin, grab your pen and paper or launch your | | | | concise battle plan for designing your website. |
| favorite flowchart software. We use OmniGraffle | | | | Ditch the pen and paper |
| Professiona for Mac OS X which costs $150 per | | | | In stage 3, you need to be using Photoshop or |
| license but is well worth it if you create websites on | | | | another image editing program since you will be using |
| a regular basis. If you're on a PC, then SmartDraw is | | | | colors and graphics to create the layout for your |
| a great FREE piece of flowchart software that you | | | | website. |
| can use. A pen and paper work just fine, though. | | | | We usually begin creating the "home" |
| There are many methods to creating flowcharts. We | | | | page (index) first. Use your wireframes that you |
| are going to show you the most basic way to do it | | | | created in stage 2 as a template for each of the |
| for the sake of time and the length of this article. If | | | | pages you create. However, instead of using solid |
| you want to learn more about flowcharts search for | | | | boxes, use graphics, colors and text instead. Each |
| flowcharts on Google or Yahoo. | | | | page must look exactly how you want them to look |
| View the flowchart that we created when | | | | on the Internet since this is the final stage of the |
| conceptualizing Chromatic Sites. (1) At the top of the | | | | design process. |
| flowchart we list the name of our website. (2) Next, | | | | Be sure to include the background for your navigation |
| we include each primary section of our website: | | | | (but don't actually add the text to your image). |
| Home, About, and Services. These sections are the | | | | When converted using CSS (cascading style sheets), |
| main navigation for your website. What the names of | | | | your navigation should be in the form of text and not |
| each section will be is entirely dependent on the | | | | images. Images are not crawl-able by the search |
| content of your website. Try to use as few sections | | | | engines (the keywords used in your navigation won't |
| as possible so that your visitors are not | | | | be indexed in the search engine results pages, |
| overwhelmed when navigating through your website. | | | | meaning fewer people will be able to find your |
| (3) Next, add all of the secondary pages | | | | website). |
| (subsections) that will be listed on each of the | | | | When you're happy with your designs and feel that |
| primary pages. For Home, we have included | | | | they are ready to be put on the Internet, it's time to |
| Professional Web Design, Web Development, and | | | | break apart the designs so that you can create a |
| Search Engine Optimization. The secondary navigation | | | | CSS based layout. For more information on |
| needs to be more descriptive than the primary | | | | converting your layouts to CSS or marking up your |
| navigation. The deeper your websites' navigational | | | | website in CSS, visit After looking around the |
| hierarchy goes, the more descriptive each label should | | | | Internet, we couldn't find a decent image-to-CSS |
| be. | | | | tutorial - so expect one from us in the coming |
| The Dos | | | | weeks. Converting your designs into CSS is |
| -Less is more; keep the number of primary sections | | | | extremely important since table layouts are a thing of |
| to a minimum. We use 6 sections on our website | | | | the past. |
| which is more than enough -Whether you use a pen | | | | Here is an example of a nearly-completed website of |
| and paper or flowchart software, keep things as | | | | the layout we mocked up in stage 2. This was taken |
| clean and organized as possible. Although you (and | | | | directly from our web browser and as you can see, |
| anyone working with you) are the only ones that will | | | | there is now a logo, colors, a pretty navigation |
| be using the flowchart, it still needs to make sense | | | | system, a footer, and a most importantly, a clean, |
| -Your primary sections should use broader terms, | | | | organized layout. |
| while secondary and tertiary terms should be more | | | | Thanks to the planning in stages 1 and 2, our layout |
| descriptive | | | | is well-organized and easy to use. |
| The Donts | | | | The Dos |
| Creating a flowchart is pretty straight forward; | | | | -reference your templates that were created in |
| however, there are a few mistakes that can easily | | | | stage 2; though it is fine to deviate from your original |
| be made: | | | | layout, you shouldn't need to -do some research |
| -Don't use very descriptive terms in your primary | | | | before creating your actual design; get ideas from |
| navigation unless your entire website focuses on one | | | | other sites and make them your own (without |
| narrow topic -Don't try and lump multiple topics on | | | | plagiarizing) -include color and graphics to create the |
| the same page. Create a general section for these | | | | final look for your web pages -use CSS (cascading |
| topics and from that section create subsections. This | | | | style sheets) to convert your designs from images |
| will make the subsection (descriptive) web pages | | | | into markup understandable by web browsers |
| more likely to have better rankings in the search | | | | -reference your flowchart from stage 1 when coding |
| engines (Google, Yahoo, MSN, Ask) Once you have | | | | your pages with hyperlinks; it is better to use a drop |
| created a concise and descriptive flowchart, you're | | | | down menu that includes all (or the majority) of the |
| ready to move on to the second stage of the web | | | | links in your website on every page; this will allow for |
| design process:modeling. | | | | easier navigation and also make your pages easier to |
| Stage 2: Modeling | | | | crawl when the search engine spiders stop by; a |
| In the modeling stage, static "wireframe" | | | | great place to get CSS drop down menus is at |
| mockups are created. Each mockup illustrates a | | | | -finalize your design while working in Photoshop or |
| bare-bones skeleton of the layout for each of the | | | | whatever image editing software you use; it can be |
| web pages that will be included in your website. This | | | | a pain to make changes to your design once it is |
| stage is important because it gives us an idea of | | | | converted into markup (code) |
| where different elements will be placed in our design. | | | | The Donts |
| Some of these elements are: | | | | -don't include the text in your navigation menus when |
| -logo | | | | converting to CSS; instead of using image text, use |
| -navigational menu | | | | regular text that is readable by search engine spiders |
| -content | | | | -don't use tables when converting; even if you need |
| -images, videos | | | | to buy a book on CSS, it will be worth it; tables are |
| To create these mockups, you can use a pen and | | | | dead -don't skip the first two stages just to save |
| paper or your preferred mockup software. In the | | | | time; your website WILL be better if you start from |
| past we have used Photoshop, but lately we have | | | | the beginning of the web design process (instead of |
| been using OmniGraffle Professional. OmniGraffle is | | | | at the end) -don't forget to compress your images |
| not as resource intensive as Photoshop is and it | | | | when they are cut apart for CSS; there is nothing |
| allows us to assemble our wireframe mockups much | | | | worse than a slow loading website because of large |
| quicker. | | | | image files; Photoshop has a "Save Optimized |
| In addition, make sure that you have the | | | | For Web" option (CS3 - "Save for Web |
| flowchart(s) that you created nearby as you will | | | | and Devices") |
| need to reference these from time to time to make | | | | Process Makes Perfect |
| sure that you are mocking up all of the pages that | | | | By following a web design process such as the one |
| will appear on your website. | | | | illustrated in this article, you increase the chances of |
| Here is our example of how a wireframe mockup | | | | creating a website that is well-organized, easily |
| should look. As you can see, there are no colors or | | | | navigable, and very user-friendly. Lets face it - if |
| graphics included. This is exactly how a wireframe | | | | visitors get lost or become confused while |
| mockup should be - a skeletal layout of your design. | | | | attempting to surf your website, they might hit the |
| The purpose is to be able to have a general idea of | | | | back button and look for a more user friendly |
| where each of the web page's elements will be | | | | website. People do not like to think when it comes to |
| placed. | | | | finding their way around websites. Don't make them |
| We usually begin from the top left and work our | | | | think. You do the thinking by planning out your |
| way down to the bottom. There is no specific way | | | | website from stage 1 to stage 3 and you will find |
| that a wireframe should look. Use your imagination. | | | | that more people will enjoy visiting your website. |