← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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