Building websites is tricky business. It requires skill, organization and the patience of a saint.
We can short cut the process by using graphical techniques to plan out our work ahead of time so we can see what our website will look like before we start coding.
This paper method for web development has evolved over the years. It is now called WireFraming.
But, before we get into that, let’s see how a sketchpad and some colored pencils or markers can help us create a new website.
By matching, you sketch pad to the shape of the screen you will working with and a technique called storyboarding you can create a sequence of images to show what your website and its associated pages will look like.
Story boarding is used now to make many of the Blockbuster movies you see now in the theaters and on the web.
So if is no wonder it is used for developing websites as well.
In sequence of pictures, you show the various screens of data and the functionality you want to have in your site’s design.
This is highly useful for a number of reasons. It can be shown to your fellow developers to decide whether the project is worthy of taking further. A webpage may be for internal customers at your firm or externally for a customer need for which your company expects to make money.
It can be used to show your execs and the department heads the project’s merits and get the signoffs needed to move ahead with design and coding up of the web pages and logic needed to make the site go live.
The project then may have to be pitched to your customers or clients you are creating the website for.
In this case, you will need to take the color out of your drawings.
Colors often distract from the important design features. Many a project has been delayed by arguments over the color scheme of a pages theme.
It is better show a plain black and white series of pictures showing function and content. This allows the stakeholders to weigh in on the project on a whole and get them to green light the project.
Once this has been done, you can show color and settle on a final color palette to use to create the final theme.
WireFraming developed from this simple process and in now a industry in its own right and there are many companies out there that supporting wireframing that does the same thing as we have be illustrating using artwork and storyboarding for. With the expansion of this digital artwork that you can use to show a mockup of what the software will do.
The question is now to you want to invest in the software tools that can duplicate what you can do with markers colored pencils and sketch pads.
The bottom line is of course how much money your company wants to devote to attracting new business and use technology to pitch your company’s website’s designs.