CS 318: Project Mockup – due on March 28
Your next milestone in the project is to create mockups for each page of your site. You will then present these mockups to your client for initial feedback.
Task 1: Create Mockups
Use Moqups to create a mockup for each page of your site. For each page that will have significantly different desktop and mobile layouts, create both desktop and mobile mockups. If all your pages will reorganize in roughly the same way on a mobile device, create just one representative mobile mockup.
As we did in lab, follow these guidelines to construct your mockups:
- 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, like video players and form elements.
Create a new project for just you by clicking on the Moqups icon in the top-left corner of the site and selecting New Project. Name your project so that it identifies you.
Since we are limited to 10 active projects in Moqups, you must take care to deactivate your project when you are not working on it. Follow this workflow:
- At the end of each work session, archive your project by clicking on the Moqups logo in the upper-left corner of the window. Visit Open Projects / Active Projects, and click on More next to your project. Archive it.
- At the beginning of each work session, reactivate your project through the same dialog, but click Archived Projects / Restore.
Task 2: Client Evaluation
Present your mockups to your client—ideally on paper. Walk through each page one-by-one and solicit their feedback. Write down your client’s comments directly on the paper.
If your client is remote, use Moqups’ sharing feature and walk them through the electronic version. Write down their comments on your own paper copy.
Write a paragraph summarizing your client’s response. What needs to change? Did the client get caught up on any specific details about the content, instead of just evaluating the overall structure? What new ideas did the visual representation inspire?
Mockup Deliverables
Prepare a document with the following content:
- A title page
- Your collection of annotated mockups
- Your paragraph summary of the client’s formative evaluation
Present this content in a professional manner. You may use design software of your choice.
Turn in a paper copy of your document at the beginning of class on March 28.
Your mockups must be turned in on time to receive credit. Documents received after the posted due date will not receive any credit, but must be completed regardless. Project deliverables build upon each other, so you must complete this step in order to complete the next deliverable.