← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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