← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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