CS 318: Lab 11 – Mockups
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:
- The mockup is just going to get thrown away. Why bother?
- The client wants a website, so why not build something closer to what the client wants?
Sadly, this is what really happens:
- You get caught up in finagling the prototype to do exactly what you want, and you spend more time on little details and less time on big details.
- Because you have a “live” prototype, the review with the client degrades from a meaningful conversation about the client’s interests into a parameter-tweaking session.
- You throw the prototype away anyway and start afresh.
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:
- I said that we’d have a midterm next week. Change of plans. Let’s cover a few more ideas first and have our midterm on March 28.
- Read All About Floats and Floats. On a quarter sheet, write down 2-3 questions or observations from your reading.
- Complete quiz 3, for which you received a link in email.
- Check out the WordPress goals for March.
- Check out the next milestone for the project, which is due before March 28.
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!
Lab
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.
Moqups
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:
- Thoroughly communicate the structure, but not the content. Generally you want to avoid using actual content when designing mockups, as this will distract our clients from thinking about the general layout.
- Embed all your boxes in a Browser stencil that is 800 pixels wide by however tall it needs to be.
- Use the Image placeholder to stand in for images.
- Use a lorem ipsum Paragraph to stand in for large swaths of text.
- Use Heading with the actual heading content from the site.
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.
Submit
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.