← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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