← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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