← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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