App Dev Worksheet: Wireframes

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

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