Lesson 2 Activity

Applying Design Concepts

Below are three menus for three very different types of applications. Study each menu.

  • What types of information are shared with the app user?
  • What do you especially like about the menus?
  • Is there anything that you would like to change on any of the menus?
  • Are there any other app pages or websites a user might like to access with a tap?
Screen Shot 2018-01-24 at 11.08.37 AM.png

Design a menu for a city application. Determine the menu buttons for each app. For this exercise you have a maximum 8 buttons. Keep in mind that the Section Header can only be used for creating titles, while the Left Image Text Row can be used as a button.


Menu buttons lead to pages in the application or to outside websites.


Your menu should have the following attributes:

  • Visually appealing
  • Uncluttered
  • Easy to read
  • Mindful of color blind perception
  • Addresses the needs of target audience
  • Contains images or logos that fit well on the button
  • Engaging in style and color

Design your menu on paper. Keep in mind the attributes mentioned above. Determine your target audience. Who will most likely want to use this app? Then consider the needs of your target audience. Once you have finished designing your menu on  paper, move to the training app and build it using both the Section Header and Left Row Text Image components. Add ninth menu button titled YouTube.

App Design J

App Design Journal

Add design notes from this lesson to your App Design Journal.

Lesson 2 Troubleshooting Questions 

As an AppyCity Designer or Architect, you should be able to answer design questions posed by those new to building an AppyCity application. Individuals who are taking the Appycity Architect Certification course are required to submit their answers. Those taking the Designer course are encouraged to add their answers to their App Design Journal. 

  1. Why doesn't the Section Header move the user deeper into the application when tapped?
  2. How is a company logo added to the Left Image Text Row component?
  3. The text on the button is cut off. How can it be moved over?