← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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