← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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