← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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