← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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