← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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