← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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