Home / Articles / Adobe Illustrator / The Building Blocks of UI Design with Adobe Illustrator

The Building Blocks of UI Design with Adobe Illustrator

Chapter Description

This chapter takes a look at the basic features that Illustrator provides for the building blocks of UI design.

Chapter Overview

Up to this point, we’ve spent some time getting to know Illustrator’s user interface. Now it’s time to begin putting those tools into action and start creating a UI yourself. This chapter takes a look at the basic features that Illustrator provides for the building blocks of UI design:

  • Using guides and alignment tools
  • Creating page grids
  • Achieving pixel precision
  • Beginning a layout
  • Setting type

You’ll learn these features in the context of creating a screen for a mock web application for die-cast car collectors. The mockup has several elements: a sidebar that contains the app name, a search field, app navigation, and some activity info. It also has a section navigation bar and a main content area. It has some simulated browser chrome to finish it off. I’ll show you how to create this over the next few chapters.

2. Guides Objectified | Next Section