CS 318 Lab 12 – 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 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:
- 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 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:
- Check out the next milestone for the project, which is due the day after spring break. If you or your client will be away during break, get it done beforehand.
- Quiz 3 has been out since Friday.
- There will be no class on Wednesday. I will be at a conference, learning how to grow your brains.
- There’s no quarter sheet for next Monday.
See you then!
Lab
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
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:
- 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 real heading content marked.
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.