← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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