← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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