← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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