← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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