← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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