← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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