← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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