← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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