Welcome to our free Managing Web Design Projects tutorial. This tutorial is based on Webucator's Managing Web Design Projects course.
When sharing an idea with a client, use of a mockup is helpful as you may then develop many rough ideas to share without putting too much time into each. Once a client has made a choice, you may use the mockup to develop the design to its full potential.
The creation of a mockup may be as simple as a pencil and paper sketch, or a design rendered in a product such as Adobe Illustrator or Photoshop. The benefits of using a software tool is that once you have a mockup the client has approved, you may easily turn it into a working model.
Simple pencil and paper sketch.
Photoshop sample with a few placeholders.
Electronic mockups are also easy to share and store. Make sure to use a format that is compatible to all involved and to protect the integrity of the design. Consider using a watermark or other security process to ensure the design is not able to be used until the time it is needed.
Demo - Using Freedcamp.com to share files:
A sample mockup often has placeholders that will later be replaced with actual content. The level of detail depends on the level of "imagination" that your client has.
Basic background art gives a sense of what the general design may look like.
More detail gives a more polished impression.
Full detail leaves nothing to the imagination and is good if you have clients who struggle with placeholders.
Using layers and other mechanisms, the process of organization can be easy to apply when wanting to keep track of various design versions.
Demo - Use layers and versions to keep track of design ideas:
Ideas may be as imaginative as the individual; however, we as the designer must find a technology to create that vision keeping in mind the manner in which we will be introducing the actual content at a later time.
Choices today are to use a Static Site in which all information is hand typed into the .HTML page by the site developer. These sites are helpful if you have a small site with very little change. Static sites are very easy and inexpensive to host.
Using a Dynamic Site allows the developer to create a series of secure forms in which a nonprogrammer may enter information that is stored in a database. That information is then pulled into a design template using code. When the source updates, the page content does as well. This is referred to as a CMS (Content Management System). These sites involve more setup and are more expensive to host as there is a data component to consider as well as security.
Either solution will work; it is just a matter of resource availability and choice. Which ever you choose, make sure to keep the site on track as far as message and scope of purpose.
In this exercise, you will create a mockup using Photoshop.