← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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