teaching machines

CS 318 Lab 12 – Mockups

March 6, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

The next milestone of your project is to create mockups of your pages. The intent behind a mockup is to create a visual sketch of your page that can help you create a feel for the overall layout. Its audience is both you, your collaborators, and your client. There’s a great temptation to skip the mockup and immediately jump into building a prototype of the site. We tend to justify this haste for several reasons:

Sadly, this is what really happens:

Our goal today is to work in reverse. We will find a couple of existing web pages, and reverse engineer mockups that might have been used to build them. Let’s do an example on the webpage for Eau Claire County Parks and Forest. We normally start with mockups and move to implementation. We do it in reverse today to acclimate ourselves to the tools and acquaint ourselves with how others have structured pages.

First-stage mockups are often done with pen and paper, but we will use software to reduce the cost of edits. Most of the software for making mockups is commercial, but some of the decent ones provide a tolerable albeit crippled free tier. We will use Moqups. They have graciously granted us premium accounts to use for this class.

Here’s your TODO list for next time:

See you then!



There’s no need for a directory today. Instead we will be using a browser-based service to create mockups of several websites that already exist.


This morning you should have received an email from Moqups, inviting you to create an account. Moqups has a premium account with a lot of nice features (like exporting), but you can only get these features for free through the email invitation. Unfortunately, we have a basic premium account and are limited to 10 active projects. This will force us to do some acrobatics.

Open the cs318-lab12. Click on Pages in the left toolbar. Create a page named after you and your partner. Do not touch other students’ pages.

Site 1 Desktop

Visit a webpage of modest complexity in a desktop browser. Avoid sites that are extremely “busy.” Identify each of the page’s boxes, and recreate a representation of it in Moqups, bearing in mind the following:

Feel free to scan through the library and use other applicable stencils.

Site 2 Desktop

Switch partners.

Visit a second webpage on a completely different site and with a different structure than the first. But this time, also make sure it presents a different layouts on desktop and mobile browsers. Mockup the desktop version as you did for the first site.

Clearly separate this mockup from the previous. Resize the page as necessary by dragging on its edges.

Site 2 Mobile

Mockup the mobile version of the second site, but this time, use a Browser stencil that is only 400 pixels wide.