← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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