← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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