← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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