← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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