← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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