← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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