facebook twitter
Webucator's Free Managing Web Design Projects Tutorial

Lesson: Mock-ups

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.

Lesson Goals

  • To use the best technologies available.
  • To explore and set best practices.
  • To walk the fine line between creativity and technology limits.

Best Technologies to Use

Choosing a Technology

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.

Pencil SketchSimple pencil and paper sketch.

Photoshop Sample with PlaceholdersPhotoshop sample with a few placeholders.

Sharing Sample Designs

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:

  1. Open a web browser to the following site http://www.freedcamp.com.
  2. Login or establish an account.FreedCamp Login Page
  3. Create a new project. Click the Create Project icon.Create Project Icon
  4. Type in the name of the project "ABC Childcare". Click Next.Add Project Dialog Box
  5. Click Install for each feature you choose to use. Click Next.Applications
  6. Invite via email users to share the space with. Click Next. Click Close.Invitations to Share Space
  7. The project space is now ready for use.Project Space Ready for Use on FreedCamp.com

Best Practices

Creating Samples

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.

Mockup Sample with Background ArtBasic background art gives a sense of what the general design may look like.

Mockup Sample with Background Art and TextMore detail gives a more polished impression.

Mockup Sample with Full DetailsFull detail leaves nothing to the imagination and is good if you have clients who struggle with placeholders.

Organization Methods

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:

  1. Open Adobe Photoshop. Open mock-up/Demos/layout_noFolders.psd.Mockup in Photoshop
  2. Add the layers panel by clicking on Window > Layers.Window Layers
  3. Create layer folders by clicking Create a new group. Repeat as needed to house all of the elements.Create a New Group Icon
  4. Move the individual layers into the layer folders by using a drag-n-drop method and label the folders to suit the contents.Folders
  5. Click the Show/Hide symbol in front of the layer folders to see the design with or without the items in that layer folder. For example, the BG ITEMS folder. Notice that the images that make up the layer disappear.Show Hide Symbol
  6. If you "Save As for Web" with a layer or layer folders hidden, those items will not be part of the save. This concept will be very important later when we "slice" and prepare an image for the final design template. For now, use this to create static .JPG files for clients to view and approve.

Fine Line between Creativity and Technology Limits

Balancing Ideas with Available Technology

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.

Creating a Mockup

Duration: 15 to 25 minutes.

In this exercise, you will create a mockup using Photoshop.

  1. Open Adobe Photoshop.
  2. Using tools available and an idea (sketch seen below) create a detailed mockup.Pencil Sketch Mockup
  3. Spare resources and artwork are available if you choose not to build a custom project. mock-ups/Exercises. The Layout.psd file is a completed version of one idea you may build.
  4. Organize the layers for better use of the design later on.
  5. Save and close the file.


  1. Open Photoshop.
  2. Create a new file. File > New. Click OK.New Dialog Box
  3. Create the visual layout using unique custom components that you create from scratch or use the ones provided with the class files. Make sure to create layer folders to organize.Detailed Visual Mockup
  4. Save and close.