← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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