← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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