← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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