← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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