teaching machines

CS 318: Lab 11 – Mockups

March 7, 2018 by . Filed under cs318, lectures, spring 2018.

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 inform your design before making changes becomes too costly. Its audience is both you, your co-designers, 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 not to design a site from scratch and mock it up. Instead, we will find a couple of existing web pages, and reverse engineer mockups that might have been used to build them. We normally start with mockups and move to implementation, but 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.

Here’s your TODO list for next time:

This list is a little intimidating all at once. Do a little bit each day and these tasks will melt away underneath your steady hand.

See you next time!



Our goal for today’s lab is to experience the mockup or wireframe phase of web development. Mockups allow us to consider a site’s design without getting consumed by details about the content and technical implementation. We’ll use a professional mockup tool provided by Moqups.

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.


Last week you should have received an email from Moqups, inviting you to create an account. Moqups offers a premium account with a lot of nice features—like exporting to a PDF. Moqups has granted our class a shared premium account. You can get these features for free, but only through the email invitation. Log in through that invitation. If you can’t find the invitation, sign up for an account.

If you aren’t on your account’s dashboard, click on the M in the top-left corner and select Dashboard.

We are limited to 10 active projects in our service tier. This will force us to do some acrobatics. Instead of each of us getting our own project, we’ll each make a folder within a single, shared project.

Open the cs318-spring-2018-lab11 project. Click on Pages in the left toolbar. Create a folder named after you and your partner. Do not touch other students’ folders.

Explore the interface—the Stencils category in particular.

Site 1 Desktop

Create a page in your folder named site1.

Visit a webpage of modest complexity in a desktop browser. It should have a mix of words and images. 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.

Create two pages in your folder: site2-desktop and site2-mobile.

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. In site2-desktop, mockup the desktop version as you did for the first site.

Mockup the mobile version of this second site in site2-mobile. This time use a Browser stencil that is only 400 pixels wide.


If you finish before the end of lab, please check in with your instructor before you leave.

Otherwise, complete your mockup and just leave it in your folder.