← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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