Learn About the Importance of Creating a Website Mockup for Your Clients
What is a Website Mockup and Why Create One?
The website mockup is an important step in the web development process.
Coming up with a great design concept is, of course, crucial, but once a web designer develops an idea that he or she thinks will work, the next step is to run it by the client and see what they think. After all, it makes little sense to go to all the work of creating a working website, only to find out that it isn’t what the client was looking for.This is where the website mockup comes into play.
A good mockup should show both the ‘look’ of a website, as well as give the client an idea as to the flow and architecture of the site.
Photoshop or Fireworks are two programs favored by many web designers when it comes to creating a mockup (although some use Illustrator, or even Microsoft Visio, a vector-based diagram creation program). The basic design concept can be created in these programs, and then output on glossy paper and pasted to presentation boards for the client to see (along with black and white copies for them to mark up). Alternatively, a PDF or JPEG of the site can be created in these programs and sent to the client electronically, to give them an idea as to the design of the website.
While these mockups give the client a feel for how the site will look, accompanying them with flowcharts showing the architecture of the site is important as well. This gives them an idea as to how visitors will navigate the web site.
Some designers utilize an alternative method of creating mockups. As in the procedure above, they also create mockups in Photoshop or Fireworks, but they then use the slice tools available in those programs to create a rough working HTML mockup of the site. That way, the client gets a hands on demonstration of how the site will look and work.
The method utilized by a web designer often depends on the preference of the client. Some clients want paper versions to markup, others are comfortable with a JPEG or PDF which they can email to their colleagues for input, while others feel the need to actually click through an HTML based mockup to get a feel as to how it flows.
One caveat in all this. Make sure that the client knows that your mockup is not the final product, and has been created to give them an idea as to the overall look of the site but that it contains dummy text and visuals. Many designers can attest to having had clients, unclear as to whether they were looking at a mockup or the final version, who went through and carefully proofed all the dummy copy used.
