← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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