← Wireframes lesson New set →

App Dev Worksheet: Wireframes

App development lesson 10: Wireframes · Set 296 · 40 questions
TalentJR

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.

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

Answer key

  1. list of items
  2. Add button
  3. Save button
  4. Add button
  5. True
  6. a wireframe
  7. a picture goes here
  8. looks like the real app
  9. Add button
  10. Save button
  11. 6
  12. False
  13. a wireframe
  14. 6
  15. uses the final pictures
  16. Add button
  17. 6
  18. menu icon
  19. a simple screen sketch
  20. shows where things go
  21. is a quick sketch
  22. No
  23. filter buttons
  24. title text
  25. pencil and paper
  26. False
  27. filter buttons
  28. search box
  29. a wireframe
  30. 5
  31. 4
  32. False
  33. search box
  34. True
  35. title text
  36. True
  37. has the real colours
  38. search box
  39. False
  40. title text

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