← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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