Axis is the most basic and most common organizing principle. Simply stated, axis is an imaginary line that is used to organize a group of elements in a design. In diagrams, axis is represented as a dashed line.
Axis is mainly used to align elements. When elements are arranged around an axis, the design feels ordered. As with most things in life, we enjoy things that are ordered because they feel more stable, comfortable and approachable.
A simple example of axis is the albums list in the iTunes app. In this design, a vertical axis neatly aligns album covers on the left side of the screen.
Although axis is an imaginary line, you can make it more apparent if the edges of surrounding elements are well defined. A common example of this concept in architecture is a city street. The city street is an axis that is reinforced by the buildings on both sides. If a portion of the street is missing a building on one or both sides, the street’s axis would not feel as strong.
An example of this in product design is the timeline in the Twitter app. In this design, a vertical axis helps define a section for avatars on the left and a section for tweet content on the right.
When we encounter something linear, such as an axis, we naturally follow the line in a direction. If we arrive on a street, we walk down the street. If we open an elevator into a long hallway, we walk down the hallway. Lines prompt movement and interactions. The direction of movement depends on the end points. A defined end point signals a place to start or stop.
An axis that encourages movement is the music scrubber in the SoundCloud app. In this design, you recognize the scrubber as a left-right axis, and naturally slide the scrubber to the right until you reach the end of the song.
If an end point is undefined, you will follow the axis until you reach something of interest or are tired of interacting with the axis. While the concept of an undefined end point in architecture is uncommon since it’s difficult for something architectural to go on forever, it’s becoming more popular in product design with infinite scrolls.
An example is an infinite scroll is the main feed in the Pinterest app. In this design, the vertical axis starts at the top of the screen then continues downwards without a stopping point. This encourages you to scroll down the page for as long as you’re interested in viewing pins.