← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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