← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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