← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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