← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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