← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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