← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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