← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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