← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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