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,Unquoteis a trivia game that presents users with quotes (most of them fake) and asks them to identify the true sources of their wisdom!

• Present fake image quotes
• Prompt the player with a quote-specific question
• Present four multiple-choice options to the player
• Present the number of remaining questions
• End the game and present the score

Draw

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.

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).

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

Repeat those steps to create asecond wireframethat satisfies all requirements for the game screen.

Repeat these steps again to create athird wireframethat 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.

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

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.

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:

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 forUnquote:Is yours better? If so, we’re not surprised—you’re incredibly talented. We’ll be working from our wireframe as we build out theUnquoteapplication, 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.'