Wireframing The Unquote Game

Along this Android and Java journey, you will build a game. Each project will bring you one step closer to completing a working trivia game we’re calling, Unquote.

In Unquote, players must correct Internet misinformation—in our case, the kind that comes in the form of picture-quotes.

If you’re unfamiliar with fake quotes on the Internet, go and use the Internet, then come back to this page when you’re ready! And if you still haven’t seen one, they look like this:

👁 Image

Hint: Marilyn Monroe never said that, but the Internet remains unconvinced!

Over the course of several projects, you will build an Android game that presents fake quotes to the user and tasks them with identifying the true author of each quote, e.g. who actually said, “Do or do not, there is no try.” The answer, in this case, is Yoda, post-baby Yoda to be precise.

In this first project, you practice your wireframing skills to design Unquote’s one and only screen: the game screen.

Prepare

1. Grab some paper and a pen, ideally 4 sheets of graph or dot-grid style paper.

2. Define the game screen somewhere on your sheet

The top-left corner will do just fine.

3. List the purposes served by the game screen below its definition

We at Codecademy already know what this application does, but for the purpose of this exercise, imagine how this game works and define its behaviors.

Remember, Unquote is a trivia game that presents users with quotes (most of them fake) and asks them to identify the true sources of their wisdom!

Draw

4. Draw your first box to represent the game screen wireframe

5. Draw device decorations

Android screens often come loaded with a few common screen-consuming elements, its best we include them in our wireframes to remind us that the full height of the screen is generally unavailable.

6. Choose a purpose, and illustrate that purpose in your wireframe

A good place to start is any purpose that likely consumes a large portion of the screen (presenting an image or a set of buttons).

7. Repeat step 6

Repeat step 6 until your first wireframe satisfies every purpose listed below the game screen.

8. Repeat steps 4, 5, 6, and 7

Repeat those steps to create a second wireframe that satisfies all requirements for the game screen.

9. Repeat steps 4, 5, 6, and 7 (again)

Repeat these steps again to create a third wireframe that satisfies all requirements for the game screen.

So far, you likely have three wireframes that strongly resemble each other—that’s okay! But in this attempt, challenge your assumptions of what an application should look like. It’s easy to copy popular apps (after all, their success in part is due to their design), but it’s far more fun to draw outside the lines.

Think of one common element, an Image perhaps, and imagine what happens when you rotate, shrink, or obscure it behind another element. Don’t force yourself to do the right thing, but guide your hand in the direction of fun or bizarre.

10. Repeat steps 4, 5, 6, and 7 (again, again)

In this last repetition, let yourself loose creatively because now there’s nothing to lose (there never was anything to lose, but that’s beside the point).

11. Wait one day. 24-hours. 1440 minutes… you get it

After a good night’s rest, your mind is better prepared to look at your wireframes objectively. After the Earth has given us all one good spin, check off this box.

12. Consolidate your wireframes into a single design

Ultimately this is a design project, and beauty is in the eye of the beholder (you). Discard any wireframes that don’t satisfy your aesthetic, and merge the common and favored elements to create a new, unified design that features every element you love.

This is your final wireframe. As an example, here is the final wireframe we will follow for the remaining Unquote projects: 👁 Final Wireframe

13. Prepare yourself for feedback

Wireframing is a shot in the dark. Until we expose our ideas to the light, to our end-users, we won’t know which elements we’re missing, which needed tweaking, or which demand complete expulsion.

For these reasons and more, we limit this portion of the software product design cycle because otherwise, we get stuck wireframing while producing only marginally superior designs (if even that).

We can only arrive at our best design by incorporating user feedback and satisfying the user’s needs, and that means we need to build it.

Here’s our final wireframe for Unquote: 👁 Final Wireframe
Is yours better? If so, we’re not surprised—you’re incredibly talented. We’ll be working from our wireframe as we build out the Unquote application, but hang onto your best designs—once you finish the project, you’ll be able to incorporate the best parts of your design into your own final version.

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'