Week 2: Creating Paper and Digital Wireframes
Creating Paper and Digital Wireframes INTRODUCTION
In the Google UX Design Professional Certificate, Coursera course, you will learn how to make paper and digital wireframes for a mobile application. You’ll start sketching wireframes on paper before moving on to Figma, an online design tool. Guidance will also be provided by Figma regarding the use of their tool in wireframing your app as part of the course.
You will thus shape your wireframes through the principles such as similarity, proximity, and common regions-another application of the Gestalt principles-and craft an intuitive experience and effective use for the mobile application!
Learning Objectives:
- Organizing a mobile app using information architecture
- Create paper wireframes
- Digital wireframes in Figma
Justify the relevance of Gestalt principles to wireframes.
TEST YOUR KNOWLEDGE ON INFORMATION ARCHITECTURE
1. What does information architecture (IA) do?
- isualization
- Data design
- Context
Correct: Here, analytical thinking is identifying and defining the problem and systematically resolving it through the steps taken from data. This is how it works: dealing with complex issues by breaking them down into smaller parts, analyzing them in isolation, and deriving insight from them to come up with effective solutions.
2. How does information architecture (IA) support the wireframe creation process?
- Provides clearer direction and understanding (CORRECT)
- Organizes an app into lines and rectangles
- Provides a detailed view of the final product
- Makes the final product easy to use
Correct: Information architecture helps designers sketch wireframes by giving direction and structure to the design process. Well-structured information architecture will lead to the fact that an outcome is likely to be meticulous, as it gives designers visualization of the flow and organization of content, ensuring that even the 1st screen will be easy to navigate. Thus, they will have a smooth experience.
3. Fill in the blank: Information architecture helps engineers _____.
- create new designs
- make designs look better
- understand user needs
- organize data (CORRECT)
Correct: Yes! Information architecture is totally helped above all almost all engineers who organize and structure their data in line with visual designs. Constructing a structure in the beginning allows for this perfect transition to development where engineers can easily map their contents and functionalities onto the design, giving way to a very efficient and streamlined development process.
TEST YOUR KNOWLEDGE ON GESTALT PRINCIPLES
1. Fill in the blank: Similarity, proximity, and common region are examples of Gestalt Principles. Designers can use these principles to _____ content so it is visually pleasing and easier to understand.
- Evaluate
- Organize (CORRECT)
- recognize
Correct: Principles, such as the Gestalt principles, are one of the many tools used by designers in organizing information on apps and websites. This makes it much easier to understand information as well as create an enjoyable experience for users as such principles help them structure content according to the way in which users perceive and process information naturally. This makes the use of the product even more usable and satisfied overall.
2. You are developing a website for a clothing resale company. On the homepage, you choose to display the top-selling brands, by logo, in the center of the page. The logos are grouped with a border around them. Which of the following Gestalt Principles apply in this scenario?
- Proximity
- Common region (CORRECT)
- Similarity
Correct: In this particular web page, most users appreciate how the brand names are visually organized and clustered within a specific area, and with such a defined zone, it helps one immediately identify and associate brands as part of an internal cohesive section, improving organization and readability on the page.
3. To adhere to the Gestalt principle of proximity, what should a designer do?
- Use borders to group elements together
- Put elements closer together (CORRECT)
- Make elements that have a similar function look similar
Correct: A designer would then ideally group or draw together elements that are in reference to each other within the gestalt principle of proximity. This will make it easier for the user to see the relationships by grouping them and make the design more intuitive and easy to understand. A designer organizes content according to their relationships so that users can visualize a path through which they can move in an organized way through the information.
4. Fill in the blank: Gestalt principles describe how humans _____ similar elements, recognize patterns, and simplify complex images when they perceive objects.
- Group (CORRECT)
- describe
- create
- disassemble
Correct: Gestalt principles describe how humans grouping very similar elements, recognize patterns, and simplify complex images: objects often modeled by humans in this way. Humans tend to perceive the whole first and then focus on individual parts. For example, one might try to identify a particular shape when relaying information about clouds or try to match its pattern with that of an animal or an object from one’s experience. It’s a natural tendency for humans to organize and make sense of what they’re seeing, and considering this is what will help designers create in a more intuitive and effective manner visual experience between users and products as in the alignment with how people perceive visual information.
5. What are some benefits of using information architecture (IA) to generate a sitemap? Select all that apply.
- IA provides a detailed view of the product.
- IA organizes and defines the overall structure for the app or site. (CORRECT)
- IA helps engineers understand how to organize the data. (CORRECT)
- IA helps stakeholders review designs and evaluate content type and placement. (CORRECT)
Correct: Robust information architecture builds wireframes quite lucidly and results in a painstakingly thought out product. It facilitates organizing data well within the engineers during the development, hence leading to a smoother process. More so, neat information architecture provides an allowance for stakeholders to assess designs, consider the content types, and review placement, ensuring that the product fits user needs as well as business goals. This ultimately leads to a much more cohesive, functional, and user-friendly product.
Correct: Information architecture organizes and defines the overall structure for an app or site. It makes engineers’ jobs easier because they can match the development of a product to its visual design. It also helps stakeholders to review designs and evaluate content type and placement.
Correct: The stakeholder analysis arguing for or against the content supporting both business and user goals can utilize information architecture. It helps explain and prepare the general structure of the overall app or site regarding the design that serves strategic objectives. The information architecture also helps engineers provide a clear framework of data during development, establishing a seamless transition design into implementation with consistency and usability.
6. What are the benefits of using paper wireframes? Select all that apply.
- Paper wireframes are expensive to create.
- Paper wireframes are polished.
- Paper wireframes allow rapid iterations. (CORRECT)
- Paper wireframes are low commitment. (CORRECT)
Correct: Paper wireframes require just pencil and paper for their preparation and aren’t too high on the cost index. It’s a quick way to iterate designs. Designers can create strewn wireframes in no time, thereby quickly exploring design ideas. These tools also act as low commitment little resources: no complex software or expensive materials are needed-anything that is simple will do. It is much easier to play with and change designs with little times to spend or regard for financial cost.
Correct: Paper wireframes are not considered to be very committed, as they are easily created using a pen and paper in a matter of minutes. It also allows a designer to iterate quickly on the ideas, finding it much easier to experiment with different concepts and layouts without wasting much time or resource effort.
7. What are some advantages of building a digital wireframe? Select all that apply.
- Digital wireframes encourage adding expressive content more than focusing on structural details.
- Digital wireframes let designers pay more attention to the structural details. (CORRECT)
- Digital wireframes are easier to share than paper wireframes. (CORRECT)
Correct: Digital wireframes afford designers the chance to concentrate on the details and hone the scaffolding quite exactly. They are also easier to share and collaborate on than paper wireframes, offering smoother communications with stakeholders and team members.
Correct: Distributing a link to a digital wireframe is much faster and more extensive than distributing paper wireframes. Digital wireframes allow designers to focus even more on structural detail and make very specific adjustments, resulting in higher-quality overall design.
8. What is the most efficient way to create a straight line?
- Press and hold the control key
- Press and hold the shift key (CORRECT)
- Press and hold the function key
- Press and hold the command key
Correct: By simply holding the Shift key down as you draw, you can create a perfectly straight line as efficiently as possible. With this technique, the line aligns itself perfectly to the vertical, horizontal, or diagonal at 45 degrees, allowing easy and precise drafting.
9. Which method is most effective for creating even spacing between multiple elements?
- With multiple elements selected, click on “Align horizontal center” in the design panel.
- With multiple elements selected, click “Fix position when scrolling” in the design panel.
- With multiple elements selected, click on “Distribute vertical spacing” in the design panel. (CORRECT)
- With multiple elements selected, click “Align left” in the design panel.
Correct: The most effective way to create even spacing between multiple elements is to select “Distribute vertical spacing” in the design panel.
10. Which Gestalt principle takes elements that look alike and gives them perceived identical functions?
- Similarity (CORRECT)
- Common region
- Proximity
Correct: According to the principle of similarity in Gestalt, any two stimuli are similar if they fall in the same parameters by shape or size or color or any other feature and are generally judged to be having similar functions or are likely to be related. This principle applies for designers when grouping items for easy understanding of relations and ease of intuitive navigation by users through content.
11. You are starting to design the information architecture (IA) for an app. What research should you consider to help inform your IA? Select all that apply.
- Industry reviews
- Peer reviews and academic journals
- User studies (CORRECT)
- How existing products in the market are structured (CORRECT)
12. Your engineers thank you for providing solid information architecture. Why is this important to them?
- Good information architecture helps them organize the data and match the visual designs. (C0RRECT)
- Good information architecture helps them design the content so it matches the brand imagery.
- Good information architecture helps them describe the designs to the stakeholders.
- Good information architecture helps them choose images and icons.
13. You have finished your information architecture. Now, it is time to move on to the next step in your designs. What is that next step?
- Wireframes (CORRECT)
- Storyboards
- Prototypes
- Mockups
14. You have created a list of information to include on the first page of your wireframe. Now, it is time to draw. The junior UX designer asks you how many drawings you will do for one wireframe page. What might you say?
- A good rule of thumb is eight to ten drawings per page.
- A good rule of thumb is no more than two drawings per page.
- A good rule of thumb is only one drawing per page.
- A good rule of thumb is five drawings per page. (CORRECT)
15. You created a list of information for the page you are wireframing. Then, you came up with five versions of the wireframe for that page and selected your favorite. What is your next step?
- Start a mockup design of the wireframe.
- Refine the wireframe. (CORRECT)
- Decide on elements to incorporate into a digital wireframe.
- Storyboard the wireframe.
16. You give the client a preview of the digital wireframe. They ask why you have used gibberish type text instead of the actual content. How would you respond?
- Lorem ipsum text gives the developers cues for how to program the code in the later stages of the design process.
- Lorem ipsum text gives a sense of the structure, without the distraction of the actual content. (CORRECT)
- Lorem ipsum text will be translated into the actual text later in the design phase.
- Lorem ipsum text saves time and is easier to input than the actual text.
17. The junior UX designer you are mentoring asks how you know when you are ready to transition from paper wireframes to digital wireframes. You tell them you will make the transition when you decide the paper wireframes are complete. What might “complete” mean in this context?
- The paper wireframes have given you a solid idea of the structure moving forward. (CORRECT)
- The paper wireframes include a list of all the elements that will be included in the next iteration.
- The paper wireframes are your finished product.
- The paper wireframes are polished and include all visual elements.
18. In your digital wireframe, you have a carousel. What do you need to do in Figma in your wireframes to demonstrate that the carousel will display multiple pages of content?
- Add text to explain that the carousel will display multiple pieces of content.
- Create a new frame for each page in the carousel.
- Create multiple pages to show the changing of content.
- Create a pagination indicator, such as ellipses. (CORRECT)
19. In the digital wireframe page for your homepage, you have grouped the buttons About Us, Mission, and Vision in the same area. Which Gestalt principle have you employed?
- Figure-ground
- Connectedness
- Similarity
- Common Region (CORRECT)
20. Your client asks you to add a few clickable elements to the digital wireframes just for entertainment. These elements do not match the content or the intent of the app. You recommend against this citing that information for users should not be unexpected or unnecessary. Which principle of information architecture does this relate to?
- Growth principle
- Exemplar principle
- Disclosure principle (CORRECT)
- Choice principle
21. You are working with your client on the designs for a new app and have started creating the information architecture. Your client does not understand why this step is necessary. What might you tell them about the benefits of information architecture? Select all that apply.
- It will allow your client to interact with the designs.
- It will help your client review the designs. (CORRECT)
- It organizes and defines the overall structure for the app. (CORRECT)
- It provides a high-level overview of the app. (CORRECT)
22. You are at the beginning stages of creating the information architecture (IA) for an app. What are elements that you should know about that will help inform the IA? Select all that apply.
- The user devices
- The users (CORRECT)
- The user behaviors (CORRECT)
- The user goals (CORRECT)
23. You are working with a junior UX designer and ask them to tell you their goals when creating wireframes. What answers are you hoping to hear? Select all that apply.
- Wireframes offer insight into the style guide and brand identity.
- Wireframes provide a spot to store content and see what it looks like in a structure.
- Wireframes establish the basic structure of a page. (CORRECT)
- Wireframes highlight the intended function of each element. (CORRECT)
24. You have created paper wireframes. You are not sure if you are ready to transition to digital wireframes. What questions could you ask yourself to help determine if you are reading to move from paper to digital wireframes? Select all that apply.
- Are my wireframes ready for basic functionality?
- Do I feel ready to incorporate visual cues? (CORRECT)
- Have I received feedback on the paper wireframes? (CORRECT)
- Are the paper wireframes complete? (CORRECT)
25. In your digital wireframes in Figma, you have used different thicknesses for lines. What might this convey?
- Wider lines show divisions, while narrower lines indicate text.
- Wider lines indicate text, while narrower lines are meant to show divisions. (CORRECT)
- Wider lines show navigation elements, while narrower lines show how the navigation connects to a page destination.
- Wider lines show menu headings, while narrower lines show body text.
26. You will use Gestalt principles while designing your digital wireframes. What are some examples of how you might employ these principles? Select all that apply.
- Use separate locations of elements to differentiate between the functions.
- Place similar elements close together to convey a relationship. (CORRECT)
- Use similar shapes and sizes to convey like elements. (CORRECT)
- Group elements together in the same region to convey that they are meant to be together. (CORRECT)
27. You are working on the information architecture for the app you are designing. You have different ways for users to access information—from the menu, via clickable icons, and through a search bar. Which principle of information architecture does this method address?
- Disclosure principle
- Front door principle
- Multiple classification principle (CORRECT)
- Focused navigation principle
28. Your mentor tells you an important skill in design is adapting your information architecture (IA) approach at different stages of a project. Why might this be? Select all that apply.
- The ability to adapt your IA allows you to redesign your prototype, if needed, at the end stages of the project.
- The ability to adapt your IA allows you to more easily revise wireframes. (CORRECT)
- IA that can be adjusted allows you to change the structure of the design if the end product changes. (CORRECT)
- Flexible IA can allow you to add more categories if needed. (CORRECT)
29. The junior UX designer you are teamed up with is new to the design process. They would like to practice wireframing. What is one way you could suggest for them to practice?
- Wireframe an existing site so you have a real product to reference. (CORRECT)
- Wireframing is not a hard skill, so there is no need to practice.
- Wireframe another designer’s app to see if your wireframes match theirs.
- Wireframing is easy, so just practice with the app that is being designed.
30. You have created several versions of a wireframe for the homepage of your app. You have selected the best one and refined it. What is the next thing you should do?
- Determine elements that you will explore in a digital wireframe.
- Choose the colors and typography.
- Check the accessibility requirements for the wireframe. (CORRECT)
- Establish the menu icons that will be used.
31. In your digital wireframe, you have used same-sized circles with X’s inside them as placeholders for images. The circles will serve identical functions in your design. Which Gestalt principle does this tactic use?
- Similarity (CORRECT)
- Proximity
- Common region
- Symmetry
32. You walk your client through the design process and tell them you are ready to create paper wireframes. They ask you the benefits of taking this step. What might you say? Select all that apply.
- Paper wireframes give you the navigational structure and menu elements early on.
- Paper wireframes allow for lots of iterations. (CORRECT)
- Paper wireframes are the fastest way to get an idea out. (CORRECT)
- Paper wireframes are inexpensive. (CORRECT)
33. You have moved from paper wireframes to digital wireframes for the app you are designing. What is one clear benefit of this transition when it comes to working with your stakeholders?
- Digital wireframes make it easier to collaborate and share. (CORRECT)
- Digital wireframes provide a view of the colors and branding.
- Digital wireframes show the interactivity between pages.
- Digital wireframes give a full view of the images and icons that will be used.
34. You know you will use Figma for your digital wireframes and in the next phases of the design process. You have gotten as far as uploading your paper wireframes to Figma. What is your next step in Figma?
- Share the Figma link with the design team.
- Select the platform that will be used for the end product.
- Make the connections between pages.
- Build a new frame for the wireframes. (CORRECT)
35. You sketch out the information architecture for the app you are designing. You show it to your client and they note that it looks like a family tree. What is your client referring to in the information architecture?
- The hierarchy (CORRECT)
- The sequence
- The structure
- The organization
36. You ask your client to review the information architecture (IA) of the app designs. What should they evaluate when reviewing the IA?
- Whether the layout of the app works for end users who primarily use mobile devices
- Whether the content is correct for the app and placed in the right places to help achieve business or product goals (CORRECT)
- Whether the buttons are intuitive and the associated actions take users to the desired location
- Whether the brand identified in the design matches the brand standards provided
37. You have wireframed a bunch of pages for the app but have lost track of the pages you still need to address. What can you refer to to see which ones you still have to wireframe?
- The sitemap (CORRECT)
- The information architecture
- The help guide
- The menu
Creating Paper and Digital Wireframes CONCLUSION
Congratulations on finishing your travel in mobile app wireframe! You have learned to draw wireframes on paper and also on Figma, and how to apply Gestalt Principles to wireframe design.
This valuable skill is a selling point of interest employers, and why wait? Just get it up with Coursera and improve your stellar mobile app wireframes! Subsequently, you could wireframe any type of project without regret, slowly putting it all together. How do you think? So, fire it up! Create life now!