← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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