← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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