← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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