Wireframe & Mockup - Like A Pro -

What is a Wireframe?

A wireframe is a skeleton of lines, text, and component placeholders used to concept a graphic or web design without color or content.

SiteFarm Home Page Wireframe

Why You Need a Wireframe?

Wireframes provide possible layouts, hierarchies, and text to be presented to designers, developers, and stakeholders to begin the process of making decisions as to the desired user experience.

The whole point of wireframing is to focus on layout, menus, and component placement.

This process provides a low cost to high value way to do much of the visual layout work outside of the decision making process of specific fonts, content, colors, and images.

How Does One Wireframe?

UI Stencils

Lucid Chart

Create simple flowcharts, complex technical diagrams, and everything in between to communicate with clarity.


Wireframe Like a Pro!

Lucid Chart is free with your UC Davis email address, at least I think it is... quick someone try to login.

SiteFarm Templates in Lucid Chart

Left to Right: Templates choices, Page Template, Elements Template.

Shape Libraries

Add custom shape libraries from SVG

You can create a new file from the SiteFarm Wireframe template and copy paste elements from it into your new document.


What is a Mockup?

Creating a web design mockup is like putting the skin onto the wireframe skeleton. You begin adding color, applying fonts, and in some cases adding real content.

Why Do I Need a Mockup?

Mockups serve as the target end result of the front end web development efforts. Generally you have, at the very least, a mockup for the Home Page and a Basic Page.

What About Muilt-Device Mockups?

It is a good practice to have mockups for multiple screen sizes so that the developers know how to leverage media queries to change the users experience.

What About Interaction Mockups?

Pattern Lab is considered an interactive mockup for our purposes but it is beyond what is usually created at this stage in development.

How Do I Create a Mockup

There are many tools available for creating design mockups.

From Left to Right: Photoshop, Illustrator, MockPlus

Personally I have settled on Illustrator.

Mockup Like A Pro

Many of my projects require that I wireframe and mockup new page designs for SiteFarm, thus I find myself copy pasting the header and footer sections from other design files. I also find myself re-building basic components like teasers, or buttons, or marketing highlights. Since we have already defined all these components in our pattern library it only made sense to utilize Illustrators symbol libraries to be able to drag and drop these components into a new design.

Symbol Library Samples

Symbol Libraries

Swatch Library

I often find myself on the UC Davis Marketing Toolbox copy pasting hex codes into Illustrator, so it only made sense to commit the colors to a custom swatch library that could be opened in any project.

Marketing Toolbox
UC Davis Swatches

Starter Pages

Four Starter Pages to Choose From

Vector Patterns

Copy/Paste If You Prefer
Created By
Anthony Horn

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.