← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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