← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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