← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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