← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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