Recap

Learn more about paper wireframes

It’s the moment you’ve been waiting for: You’re ready to put pen-to-paper and begin to draw your dedicated mobile app focused on driving social good! It’s time to create wireframes, which are outlines or sketches of a product or a screen. UX designers usually start creating paper wireframes first, then move to digital wireframes later.

Remember, wireframes help establish the basic layout of a screen. A layout is the structure that supports how visual components on a page are arranged, like images, text, and icons. Because paper wireframes are inexpensive and easy to create, you can draw multiple wireframes for the same screen of an app or website to explore a bunch of design possibilities.

Keep in mind that there are industry standards, or common ways to indicate page elements, that can make your wireframes easily understandable by other UXers. Use industry standards in your paper wireframes, such as:

• Horizontal lines to symbolize text
• Squares with an “X” overlapping the square to symbolize icons and images
• Circles and rectangles to symbolize call-to-action buttons

To refresh your memory on all things wireframes, revisit content from earlier in the certificate program, like this video with an introduction to wireframes, this video about the basics of drawing wireframes, and this video about drawing your first wireframe. Then, review this video about creating paper wireframes to learn more.

Learn more about creating digital wireframes

You’ve just created paper wireframes for your dedicated mobile app. Now, it’s time to transition those wireframes into a digital design tool.

For this course, you can choose to create digital designs in either Figma or Adobe XD. Remember, you learned how to use Figma during Courses 3 and 5 of the certificate program when you designed a mobile app, and you learned how to use Adobe XD during Course 6 of the certificate program when you designed a responsive website. The choice of which tool to use for this final project is truly yours!

To get started, you can review content from earlier in the certificate program. If you’re designing in Figma, review this video about creating digital wireframes in Figma with the course instructor, Karen, or this video about creating digital wireframes with information from Figma. Or, if you’re designing in Adobe XD, review this video about creating digital wireframes in Adobe XD or this reading with links to learn more from Adobe XD.

Sources: Google UX Design Professional Certificate

Coursera | Design a User Experience for Social Good & Prepare for Jobs