← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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