A tough New York designer teaches you the four principles of app design

The most interesting thing about design is its universality. Whether it is music, architecture or industry, the rules of design are similar. Today's article comes from Melissa, a product designer in New York. After graduating from the Department of Architecture, she did not work in her main job. In November 2014, she studied web design for two and a half months and then switched to product and UI design. She currently works at Percolate. Don't underestimate her design literacy. The systematic study of the Department of Architecture has given her a deeper understanding of design in a broad sense. This article is a phased answer sheet over the past six months.

This post summarizes four fundamental principles of design, from architecture to product UI.

1. Axis

Axis is the most basic and common concept in UI design, and is also an important core for organizing interface structure. Simply put, axis is an imaginary line that organizes a series of elements during design. In the design diagram below, the axis is marked with a dotted line.

1. Alignment

Axis is most commonly used in symmetrical elements. When elements are arranged in an axis-symmetrical layout, it gives people a sense of order. Like most things in life, we tend to enjoy things that are orderly, which makes people feel stable, comfortable, and approachable. The simplest example is the design of the album list in the iTunes program. All album lists are aligned on the left side of the interface and are symmetrical around the dotted axis.

2. Strengthen

Although the axis is an imaginary line, if the edges of the surrounding elements are controlled neatly enough, the line will become more "obvious" in the visual sense. The best example is that the street lights in the city form the axis between the buildings on both sides of the road. If there are buildings on one side and no buildings on the other side, the sense of the axis will not be so strong.

From the perspective of product design, Twitter’s timeline design is a good example. The avatar on the left and the tweets on the right together create the feeling of an axis in the gap.

3. Exercise

When we encounter certain lines, our vision will naturally move along these directions, just like when we stand on the street, we will consciously walk along the two ends of the street. The two endpoints determine the line, defining the beginning and the end. The existence of the line, or axis, will guide and indicate the direction of movement.

In SoundCloud, the audio track moves along a predetermined horizontal axis. As the music plays, the audio track naturally moves at a constant speed from left to right.

4. Continuity

If the end point is indeterminate, you will usually browse/move along the axis until you find something interesting, or get bored and close the app. In architecture, unclear end points are rare because buildings usually don't last forever, but in UI design, scrolling forever is a very popular design technique.

This is what Pinterest does in its app. Pictures scroll continuously along the central axis as long as you are interested in watching them.

2. Symmetry

When elements are evenly placed on both sides of the axis, they form a symmetrical relationship. When elements are exactly matched one by one on both sides of the axis, they form perfect symmetry.

1. Balance

Symmetry makes the whole design more balanced. When elements and controls are in the same position on both sides of the axis, it gives people a sense of coordination and harmony. When we plan the construction of houses on both sides of the street, if there are 5 houses of the same size on both sides, this balanced design will make people feel very comfortable when you walk on the street. This is the feeling of balance.

Rdio's APP design follows this design rule. The controls on both sides of the screen are of the same specifications. This type of layout is very suitable for reading, and users will consciously read from top to bottom and from left to right.

2. Asymmetry

If the controls on both sides of the axis are no longer arranged one-to-one and of similar size, it is an asymmetrical design. Asymmetrical design will give people a clear sense of imbalance, which may make people uncomfortable, but it can also create a sense of imperfection. Of course, this depends on how you do it.

Although the Pinteret APP design is symmetrical along the central axis (same width), the interface controls on both sides are not symmetrical. Their heights are not consistent and their positions are also staggered. The slightest difference will be captured by the eyes, and such a difference makes it difficult for users to read accurately in left-right order. Asymmetrical design breaks the balance and comfort of the design, but it can also alleviate the visual fatigue caused by regular design.

#p#

3. Level

Hierarchy occurs when one element appears more important than other elements.

1. Size

If one design element is larger in size than the other controls, it creates a hierarchy. It’s no surprise that when we look at a design, we’re usually drawn to the largest element. If a building has five windows and one is twice as big as the other four, our attention will naturally be drawn to it.

A typical example of using size to differentiate the hierarchy of article lists is the read-later app Pocket. The top carousel article has a larger image, and its position and size will catch our attention at a glance.

2. Shape

If a control is different in shape and form from the others, you can also make it a separate layer. Irregular designs can also attract attention. The front of the building has five identical windows and a door. You will immediately notice the uniqueness of the door.

In Instagram's personal profile page, the circular profile picture is unique among the square pictures and is very eye-catching. It makes people realize that this unique thing is more important.

3. Location

Position can also highlight the difference in hierarchy. Within a circle, things in the center seem more important than those on the edges. Controls at the top of the axis appear to have higher priority than other parts.

Taking the design of the Path application as an example, the user portrait at the vertex of the timeline is obviously more important than other parts of the timeline, and this place happens to display the user portrait.

4. Rhythm

UI design and architectural design also have the beauty of rhythm. Repeating patterns create a unique rhythmic beauty.

1. Mode

The most direct way to understand rhythm is to listen to music. Music has a sense of rhythm, and most music follows the same beat. The beat is part of the musical pattern.

The most typical APP in this regard is Airbnb. Each house in the APP list occupies a module with pictures of the same size. The price, location, landlord information and pictures are in a certain relative position, and the layout is symmetrical and comfortable. The spacing between the two modules is also the same. When you browse, the familiar rhythm will let you know clearly where to see the key information.

2. Intermittent

When the rhythm is interrupted by intervals, different levels are formed. When listening to a song, when the even rhythm is interrupted by other musical elements, you will realize that this is a more special part.

In the Twitter app, tweets all maintain the same style and even rhythm, but the "Recommended Users" item has a different style. It is inserted into the tweet list, breaking the rhythm of the entire information flow, highlighting different levels, and will quickly grab your attention.