← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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