← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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