← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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