← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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