← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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