← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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