← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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