← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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