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.
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.
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?
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
Shape Libraries
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.
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
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.
