App Dev Worksheet: Wireframes

App development lesson 10: Wireframes · Set 262 · 40 questions

Developer's tip (Boxes before beauty): A wireframe = plain boxes showing where each part goes; no final colours or pictures. Draw it before coding: changes are quick on paper. Read it top to bottom: “right below” is the next box, “right above” is the one before.

1. 1.✏️ Is this true of a wireframe or of a final design: uses plain grey boxes? (a) a final design (b) a wireframe
2. 2.✏️ A box with a cross in a wireframe usually means ___. (a) an error (b) a picture goes here (c) delete this (d) a closed app
3. 3.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
   [ list of items ]
   [ menu icon ]
   [ tab bar ]
   [ big picture ] (a) menu icon (b) list of items (c) big picture (d) tab bar
4. 4.✏️ Is this true of a wireframe or of a final design: uses the final pictures? (a) a wireframe (b) a final design
5. 5.✏️ Is this true of a wireframe or of a final design: is a quick sketch? (a) a final design (b) a wireframe
6. 6.✏️ Is this true of a wireframe or of a final design: looks like the real app? (a) a wireframe (b) a final design
7. 7.🖼️ In this wireframe (top to bottom), what is right below the big picture?
   [ big picture ]
   [ filter buttons ]
   [ top bar ]
   [ list of items ]
   [ search box ]
   [ title text ] (a) title text (b) search box (c) top bar (d) filter buttons
8. 8.✏️ Is this true of a wireframe or of a final design: has no real colours? (a) a wireframe (b) a final design
9. 9.✏️ Is this true of a wireframe or of a final design: shows where things go? (a) a final design (b) a wireframe
10. 10.🖼️ In this wireframe (top to bottom), what is right below the Add button?
    [ Add button ]
    [ top bar ]
    [ menu icon ]
    [ Save button ] (a) Save button (b) menu icon (c) top bar
11. 11.True or false: a final design uses the final pictures. (a) True (b) False
12. 12.🖼️ In this wireframe (top to bottom), what is right below the menu icon?
    [ tab bar ]
    [ menu icon ]
    [ title text ]
    [ Add button ] (a) tab bar (b) Add button (c) title text
13. 13.✏️ Why draw a wireframe before coding? (a) it saves data (b) it runs the app (c) it adds colours (d) changes are quick
14. 14.✏️ Is this true of a wireframe or of a final design: has the real colours? (a) a final design (b) a wireframe
15. 15.✏️ What is a wireframe? (a) a type of password (b) a simple screen sketch (c) the finished app (d) a charging cable
16. 16.True or false: a final design is a quick sketch. (a) True (b) False
17. 17.Which of these is true of a wireframe? (a) shows the real fonts (b) is a quick sketch (c) looks like the real app (d) uses the final pictures
18. 18.🖼️ In this wireframe (top to bottom), what is right above the menu icon?
    [ filter buttons ]
    [ top bar ]
    [ menu icon ]
    [ list of items ]
    [ tab bar ]
    [ Save button ] (a) tab bar (b) list of items (c) top bar (d) filter buttons
19. 19.🖼️ In this wireframe (top to bottom), what is right below the search box?
    [ Add button ]
    [ list of items ]
    [ search box ]
    [ title text ] (a) title text (b) list of items (c) Add button
20. 20.🖼️ How many parts (boxes) does this wireframe have?
    [ top bar ]
    [ search box ]
    [ Save button ]
    [ tab bar ]
21. 21.🖼️ In this wireframe (top to bottom), what is right above the top bar?
    [ search box ]
    [ list of items ]
    [ top bar ]
    [ tab bar ] (a) list of items (b) search box (c) tab bar
22. 22.Which of these is true of a final design? (a) shows the real fonts (b) shows where things go (c) is a quick sketch (d) has no real colours
23. 23.Which of these is true of a final design? (a) shows where things go (b) has no real colours (c) is a quick sketch (d) has the real colours
24. 24.🖼️ In this wireframe (top to bottom), what is right below the title text?
    [ list of items ]
    [ title text ]
    [ Save button ]
    [ search box ] (a) search box (b) Save button (c) list of items
25. 25.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ title text ]
    [ tab bar ]
    [ top bar ]
    [ search box ]
    [ big picture ] (a) tab bar (b) search box (c) big picture (d) top bar
26. 26.True or false: a final design uses plain grey boxes. (a) False (b) True
27. 27.🖼️ In this wireframe (top to bottom), what is right below the filter buttons?
    [ filter buttons ]
    [ search box ]
    [ tab bar ]
    [ Save button ]
    [ title text ]
    [ menu icon ] (a) menu icon (b) tab bar (c) search box (d) Save button
28. 28.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ Add button ]
    [ big picture ]
    [ search box ]
    [ menu icon ] (a) search box (b) menu icon (c) big picture (d) Add button
29. 29.True or false: a final design shows the real fonts. (a) False (b) True
30. 30.Which of these is true of a wireframe? (a) has the real colours (b) shows the real fonts (c) uses the final pictures (d) uses plain grey boxes
31. 31.🖼️ In this wireframe (top to bottom), what is right below the big picture?
    [ big picture ]
    [ filter buttons ]
    [ top bar ]
    [ list of items ] (a) top bar (b) filter buttons (c) list of items
32. 32.Which of these is true of a wireframe? (a) has no real colours (b) shows the real fonts (c) looks like the real app (d) uses the final pictures
33. 33.Which of these is true of a final design? (a) looks like the real app (b) has no real colours (c) uses plain grey boxes (d) shows where things go
34. 34.🖼️ In this wireframe (top to bottom), what is right above the menu icon?
    [ search box ]
    [ top bar ]
    [ menu icon ]
    [ Add button ] (a) search box (b) top bar (c) Add button
35. 35.🖼️ How many parts (boxes) does this wireframe have?
    [ Save button ]
    [ big picture ]
    [ list of items ]
    [ tab bar ]
    [ menu icon ]
36. 36.🖼️ In this wireframe (top to bottom), what is right above the top bar?
    [ search box ]
    [ top bar ]
    [ title text ]
    [ Add button ] (a) Add button (b) title text (c) search box
37. 37.🖼️ How many parts (boxes) does this wireframe have?
    [ top bar ]
    [ big picture ]
    [ menu icon ]
    [ Add button ]
    [ title text ]
38. 38.🖼️ How many parts (boxes) does this wireframe have?
    [ filter buttons ]
    [ Save button ]
    [ title text ]
    [ top bar ]
    [ tab bar ]
39. 39.🖼️ In this wireframe (top to bottom), what is right below the list of items?
    [ list of items ]
    [ menu icon ]
    [ filter buttons ]
    [ search box ]
    [ title text ] (a) filter buttons (b) search box (c) title text (d) menu icon
40. 40.Which of these is true of a final design? (a) uses plain grey boxes (b) uses the final pictures (c) shows where things go (d) has no real colours

Free app development lessons, practice and worksheets at talentjr.in/app-development-for-students