Designer Lesson 4 

Bullseye Display


  • Add the Bullseye Display component

  • Add a background image with five bullseye buttons

  • Add an individual image for each of the five buttons on the bullseye display


  • Complete Lesson 4 video instruction

  • Complete Lesson 4 Activities


  • The Bullseye Display adds user functionality and allows the user to easily move further into the application.


  • Lesson 4 Video: Bullseye Display

  • Training App – Lesson 4 Bullseye Display

Menu & Business Icon.png

Design Concepts: Optimal Image Size

Keep in mind the correct image size for different components when building your application.

  • Bullseye = 400(w) x 400(h) pixels

  • Image Full Width = 400(w) x 200(h) pixels

  • Title Image Full Width = 400(w) x 150(h) pixels

  • Page Background image = 400(w) x 850(h) pixels


You may need to rescale an image before using it.

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

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.