← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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