← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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