← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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