← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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