← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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