← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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