← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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