← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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