← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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