← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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