Now that we have completed the Research Phase, it is time to move into the Design Phase. During this step in the process, we concern ourselves not as much about specifics of what will be on the final page, but rather, how everything will look and what arrangement it will have. Again, it is easy to get ahead of ourselves and start adding the working parts of the website (links, forms, etc.) before we have determined the best ways for them to be displayed.
Layout
The first stage in the Design Phase is planning the layout of the site and its pages. If you neglect to do this, your website to be unorganized, and that will cause some elements on your site to be hard to find. On the other hand, if you lay out your site well, customers will come to your site and then feel guided to the pages and information they were seeking when they arrived.
This stage also determines how many columns your text will have, how many images it will need, and where your contact forms will be. So, we are thinking about those things and determining where they will be, but are not yet giving them a polished look. In fact, it is often the case that this stage produces a “wireframe,” a barebones, grayscale representation of your site that uses rectangles and other simple shapes to show how the site will be laid out.
Content-Gathering
Once we have determined where everything will go, it is time to gather all of those things. This is a time when your designer needs your input! Do you have a mission statement, product images and descriptions, or testimonials from happy customers? Do you have a logo that you want to display, or a company history to offer? Send any images and text that you want to show on the page to us, and we will incorporate them into the layout at that point. Anything else that you need, such as stock photos, we will gather and put into the layout.
Final Design
Once the site layout has been determined and the content gathered, it is time to incorporate it all into a final design mock-up. What is the difference between this and the wireframe? The wireframe is grayscale, does not contain your images or other content, and is meant to illustrate the overall layout of the page. The mock-up is like a snapshot of your website that closely resembles the final product. It will be a PDF or image only, so it is not clickable and does not work. The site’s functionality is the goal of the Development Phase, which is next!
The Web Design Process
- Research Phase
- Gather Website Requirements
- Compare Competitor Websites
- Determine Key Terms, Design Elements
- Design Phase
- Layout
- Content-Gathering
- Final Design
- Development Phase
- Coding
- Testing
- Final Prototype
- Launch Phase
- Satisfy Hosting/Domain Requirements
- Upload Site to Web Server
- Submit Site to Search Engines
- Post-Launch Phase
- Training
- Tracking Analytical Data
- Maintain Website Wish List for Next Site Update