← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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