App Dev Worksheet: Wireframes

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

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