← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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