← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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