← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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