← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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