← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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