← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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