I’d like to change gears in the next couple of posts and bring you into my workspace for a look at what you can expect, and what you should expect when working with any designer, when we work together on a design project. I tend to say that “the perfection is in the process” because when I am working on a design project, there are several steps involved that are vital to its success.
I know that I’ve been talking a lot about color in my recent posts. Definitely a BIG piece to the project and something I’ll get back to in the next post. However, before you build the design and incorporate color profiles, images and graphics, you need to determine the overall structure, layout and functionality of the website so that when visitors arrive they can easily find their way around and get what they are looking for as they admire the visual elements. These beginning steps are quite involved and are so important– that is why I’d like to talk about them with you.
Now, you’ll start to see some of my inner nerd come out here. The first steps in a web design project involve a lot of research, analysis and outlining. I love these steps though for the insight that they deliver as well as the value that they give my designs. I really rely on my research when I design. So, without further ado, I’d like to get started with the first four steps in the process (we’ll discuss the remaining steps, that involve visual elements like color and graphics, in the next post). They are:
- Initial Consultation
- Competitive Analysis
- Site Mapping
Initial Consultation: This is our first sit-down meeting where I interview you to learn about you and your business. Why did you start your business and what are your business goals? What objectives does this project have- why do you want a website? We’ll solidify a purpose statement as well as any smaller goals.
Competitive Analysis: This step is all me. After the initial consultation, I head back to my office and get to researching. Most business owners can rattle off 3-5 of their biggest competitors and can also probably tell me what techniques these companies are using to market themselves. Well, now it’s time to delve deeper into that. In this step, I research websites of businesses that are similar to you in order to determine what the industry standards are. What is working and why? What is not working and why? What are the best practices – or, conversely – where are the gaps, the missing pieces that you can capitalize on? What I learn here, when blended with my design skills, ultimately produces websites that meet business goals and are poised to grow companies.
After I do all of the research and comparison, I put it all together in a report and present my findings you. I also share what conclusions I found and propose possible directions to take your designs in.
Site Mapping: The next step is to establish the architecture of the site where I will build a “blueprint.” Where will all of the pieces fall that we have decided to include based on our research and analysis? Here I create several pages (depending in the size and scope of the project) to depict how the site will flow and how it will function. An example that I recently did for a beauty salon is below (click the image to see a larger version). It’s the home page of the site. As you can see, there are no colors or graphics. It’s a bare-bones schematic of the site’s structure. It’s vital that we do not focus on the look of the site at this point. What we want is to determine how to make the site user-friendly as well as how the site needs to be built to meet the purpose of the site.
Wireframing and Prototyping: After we establish the mapping of the website I will start to put the pieces together. In the Wireframing and Prototyping step I will put together displays (these can be static-printouts- or, interactive-clickable web pages) so that we can define the size and placement of different elements such as the navigation or the logo or a rotating banner display. Again, no images or graphics or color yet. Just the frame that will hold all of the content. Below is the wireframe for the beauty salon that we just saw the home page site map for (click the image to see a larger version). Below that is the html prototype. It’s a screen shot of the top half of the home page. Having this html, webpage format lets the client test the layout and navigation of the site. It’s live and clickable, much more interactive.
When we’ve completed all of these steps, we’re ready to start talking about color and images. We’ll talk about this next phase, the design part, in the next post: mood boards, color selection, images, graphics… it’s where the fun begins!
These initial steps may seem a bit tedious and even time-consuming but, again, trust me, it’s worth the effort and- I love doing it. And on that note, most of the effort is on my end as I’m not doing you or your business justice by being lazy or skipping one or more of these steps. You are busy enough running your companies, after all. It’s my job to do the legwork of researching, drafting, blueprinting and designing your identities and marketing pieces. I’ve taken almost as much time learning project management techniques as I have learning about Marketing and Design. Looking back, these two areas are a match made in heaven when it comes to design, especially web design. They really make for better designs that drive business growth for my clients.
A website is a vast, multi-layered project, even the more simple-looking brochure sites. There are specific questions that need to be answered, research that needs to be conducted, blueprints that need sketching and then, when you’ve gotten through those parts, you start to talk about color, design and graphics.
This whole process is a lot of fun, at least for me, but it also takes a lot of organization and TON of good old fashioned communication on my part as well as on the client’s.
So there you go. Again, these first steps are crucial when beginning to design a website for you or your business. Be sure that you don’t ignore them. They deliver results to your business.
In my next post, I’ll talk about the visual design of a website, starting with mood boards and moving onto color, images, graphics and the finishing touches.
- Developing A Design Workflow In Adobe Fireworks (fireworks.smashingmagazine.com)
- A prototype is worth a 10,000 word specification (leighhowells.com)