Designer Lesson 5 

Section Header & Icon Button

 

What

  • Connect a Section Header

  • Connect an Icon Button

  • Determine margins

How

  • Complete Lesson 5 video instruction

  • CompleteLesson 5 Activities

Why  

  • Section Headers and Icon Buttons organize and create a user-friendly application.

Resources

Menu & Business Icon.png
  • Lesson 5 Video: Adding Section Header & Icon Button

  • Training App – Lesson 5 Icon Button

Design Concepts: Section Header and Icon Button Attributes

Screen Shot 2018-02-20 at 6.39.53 PM.png

When would you use a Section Header instead of an Icon Button? How would you design it? What limitations do you have with the design of a Section Header?

Study the attributes of the Section Header first. Notice that it welcomes visitors. Is this the only purpose for the Section Header, or is there another reason it was added to the application? Tapping on the Section Header does not take the user into the site. Why not? Do you feel that the Section Header serves an important enough role here to devote space to it? If yes, is there anything you would do to the Welcome to Greensboro Section Header to improve it? Keep in mind the design constraints of the Section Header.

The Bullseye Display is the most often used component. With it users can move deeper into an application with ease. Different images can be used on the bullseye display to engage both user interest and curiosity. Keep in mind that images should meet four main criteria:

  • create visual harmony

  • add emphasis by creating a mood

  • draw the user’s attention

  • convey the scope and vision of the school, business, or city

Images that hook user interest are essential to use on a bullseye display.

Now determine how Icon Buttons differ from Section Headers. Each of these icon buttons is designed to take the user deeper into the application. Users quickly can find out when the market is open and where it is located. Additionally, the app is designed to provide helpful parking information with a tap on the screen.

  • What helps the user to know that tapping on the icon button will take the user deeper into the app?

  • What purpose do the icons serve?