In General May 12, 200813
4 Steps Missing From Your Web Design Process
There are steps in the web design process that aren’t as fun as creating a beautiful design or coding an ajax rich interface, and for this reason they are often neglected or completely omitted. These steps may not be necessary to take a site from concept to production, but in terms of achieving the objectives defined by the project’s stake holders, they could make all the difference.
Define and Completely Understand Site Objectives
How many times have you started designing a website based on less than detailed requirements, only to find yourself frustrated later by numerous changes and additions? This can be avoided by taking extra time with the client to learn what the site is all about and what it’s objectives are. In most cases, this should be achieved before any design work begins. Doing this gives you a clear picture of what the web site is to become and how it is to behave. This helps you and the client to define features and requirements up front, and aids in the prevention of drastic scope changes as the project progresses.
Know the Target Audience
The target audience are those people who will be using the site. Obviously, understanding the site objectives will give you a good idea of the audience, but further examination is required to fully understand what type of users these people will be. Once you have a good understanding of this, you can design features to best suit them. Including this step, prevents wasted time in trying to build a site that pleases everybody.
Create Wireframes
A wireframe is used to set the layout of a site without using color or design elements. It defines the size and position of page elements such as headings, navigation, and content blocks. Using a wireframe helps those involved in a project determine and set proper priority and emphasis on significant parts of a design. Sure, it is an extra step, but when layout revisions need to be made, it is much quicker to reposition a grey box than it is to rework complicated design elements. Once the wireframes are complete and they have been approved by all parties involved, adding the color, graphics, and typography is much easier.
There are applications built specifically for creating wireframes, but I find that Photoshop works just as well.
SEO - Search Engine Optimization
Its surprising how many web designers don’t realize the importance of SEO, and its more surprising how many do not know what it is. Search Engine Optimization is simply taking steps to increase the amount of traffic a web site receives from search engines. This is really an ongoing step. One that should begin in the early stages of your web design process by determining proper key words. Then it should continue as the site is developed by utilizing proper HTML markup, and including internal linking as content is built.
The success of a web site hinges on the amount of traffic that it gets, so leaving SEO out of your web design process prevents a site from reaching it’s full potential.
Hopefully you see how these steps can help you build a better web site and do it in a more structured and efficient manner. In future articles, I will further explain how to successfully implement each step.
13 Comments
May 12, 2008
It annoys me how web designers dont start with SEO as it tells you so much about the market, helps you determine the language of a production and gives you ideas of how to deliver value added content.
*sigh*
its really not that difficult to cover the basics and no i dont mean ‘meta tags’
May 12, 2008
Great tips
May 13, 2008
I agree with Mark - SEO gives you the content, the way to display it, your keywords and a lot of information on your target audience.
One thing I do miss in your list is:
Create Next Steps.
You need to identify what the natural next step on any given page. For example: An information site about a company - should always display a clear link to its contact form or details - so that if you’d like further information you would know what to do. For e-commerce the obvious thing to click on the page would be the button that takes you to the next step in the order funnel and so on.
Creating next steps can really help you kickstart your conversion rate <- and thats what we’re really designing for - or are we?
May 13, 2008
One of the things we do is create a navigation outline, basically to say what are the main links/categories going to be, what sub-pages will they have, etc.
Most people think that web site design has to do with the graphical elements of a site. There are other elements to be taken into account that need to be designed and laid out so that you and your client are on the same page and it will help minimize changes and cost overruns.
Good article, couldn’t agree more on these steps and suggestions.
May 13, 2008
Eivind and Norm,
Those are great points. Thanks for pointing out additional steps.
May 14, 2008
My problem — when wireframing — is that I find myself designing instead of wireframing. I start using colors, setting type and start focusing on all the wrong things.
I work in illustrator, but i’m thinking of switching to a non-design tool (like omnigraffle) to avoid the “design trap” and to deliver wireframes to the client more quickly.
After that it’s design-time.
Lovely website.
May 14, 2008
Jelle,
I know what you mean. It is very tempting to start adding a little something here and a little something there, just to see what it is going to look like.
I have also found that sometimes adding a little bit of detail is required to get the client to understand the wireframe.
May 16, 2008
Maybe the best way is to design the basics of the site, and than start wire framing.
May 20, 2008
Wireframing does not have to be totally void of color or purpose. As a designer, it’s perfectly natural to want to add color or design elements, simply due to thoughtful concept. The goal with “wireframing” is structure, but that does not mean elements of design cannot be incorporated.
Often times, color defines the structure, so don’t feel guilty by adding design elements to your wireframe.
As a design guy, our natural capacity is color, gradient, style and aesthetics…do not deny your natural inclinations, but just don’t waste time conceptualizing.
Terrific article.
May 31, 2008
All of this is part of my process at work. I have a kick-off meeting with the client where he/she fills me in on the business and target audience.
Tho, wireframes is one thing I seldom make, simply because I am the designer of my projects, so letting the client decide on this could lead to a bad layout - so I just make the decicion.
SEO is fully covered in our CMS, and our developers (sometimes I code my designs myself) have a great understanding for HTML and SEO in general - so that’s not really a issue.
Good article, but the steps aren’t missing
Jun 9, 2008
Nice article. Thanks for reminding me. I need to do wireframes for a site I am working on now.
One note about the first item: Often I find it difficult to get requirements from my clients up front. Usually, one or two quick mock-ups gets the conversation flowing. I find a lot of clients don’t really know where to start, or what the options are until they have something to look at. I find the process is more circular and organic rather than linear. Anyone else?
Jun 10, 2008
Excellent!!!
Jul 1, 2008
Great article. Lovely, userful and inspiring site.
Leave a Comment