← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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