← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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