← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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