← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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