← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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