← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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