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
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.