← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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