← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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