← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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