← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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