← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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