The design of the designer of the architecture Department of birth product

The most interesting thing about design is its versatility, whether it's music, architecture or industry, and the rules of design are very similar. Today this article comes from New York's product designer sister Melissa, who has not done her job after graduating from the architecture department, and has been working on the product and UI design since November 2014 after 2.5 months of web design, and currently works for Percolate. Do not underestimate her design literacy, architecture Department of Systematic learning to give her a broader sense of the design of a more in-depth understanding, this article is more than half a phased answer.

This article summarizes the basic principles of four designs from architecture to product UI.

　First, Axis

The axis is the most basic and common concept in UI design, and it is also an important core to organize the interface structure. In short, an axis is the illusion of organizing a series of elements at design time, in which the axes are marked with dotted lines.

1, alignment

Axes are most commonly used in symmetrical elements, which give a sense of order when the elements are arranged in an axially symmetrical layout. Like most things in life, we tend to enjoy the orderly things that make them feel smooth, comfortable and approachable. The simplest example is the design of the album list in the itunes program, where all album listings are aligned on the left side of the interface, axisymmetric around the dotted axis.

2, strengthen

Although the axis is an imaginary line, if the edges of the surrounding elements are neatly controlled, the jumper will become more "visible" in the vision. The best example of this is that street lights in cities form the axis between buildings on both sides of the road, and if there is no building on one side, then the feeling of the axis is not so strong.

From a product design point of view, Twitter's timeline design is a good case, the left side of the head and the right side of the push to create a gap in the axis of the feeling.

3. Sports

When we come across a first line, the vision will naturally move in these directions, as we stand in the street and consciously walk along the ends of the street. The two endpoints determine the line, the place where the start and end are defined, the line, or the presence of the axis that directs and prompts the direction of motion.

In SoundCloud, the track moves along an established horizontal axis, and as the music plays, the track is naturally uniformly moving from left to right.

4. Continuity

If the endpoint is uncertain, then you will usually browse/move along the axis, until you find something interesting, or get bored and close the application. In architecture, undefined endpoints are rare because building construction is not always sustainable, but UI design is not the same, and the endless scrolling is a popular design technique.

This is what Pinterest's app does, and the continuous picture continues to scroll along the central axis as long as you are interested in watching it.

Second, symmetrical

When elements are evenly placed on both sides of the axis, they form a symmetrical relationship. When elements are accurately aligned at one by one on each side of the axis, they form a 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 harmony. When we are planning the building on both sides of the street, if the left and right sides are 5 houses of the same size, the balance design will be very comfortable when you walk down the street, which is the feeling of balance.

Rdio's app design follows this design rule, the control on both sides of the screen is the same specification, this kind of layout is suitable for reading, the user will consciously from top to bottom, from left to right view.

2. Asymmetric

If the control on both sides of the axis is no longer one by one corresponding size, that is asymmetrical design. Asymmetric design can give people a clear sense of imbalance, may be uncomfortable, but also can create incomplete beauty, of course, it depends on how you specifically do.

Although Pinteret's app is designed to be symmetrical along the central axis (width consistent), the interface controls on either side are not symmetrical, their height is not uniform and the location is scattered. A slight drop will be caught by the eye, and the difference makes it impossible for the user to read in the right or left order. Asymmetric design has broken the balance and comfort of design, but it can also alleviate the visual fatigue caused by regular design.

Third, the level

When an element is now more important than other elements, the hierarchy appears.

1. Size

If a design element is larger than other controls in size, it distinguishes the hierarchy. There is no doubt that when we look at a design, we are usually attracted to the largest element. If a building has 5 windows, one of which is twice times the size of the other four, our attention will naturally be drawn to the past.

The typical way to differentiate the story list hierarchy by size is to read the application pocket later. The top of the carousel article has a larger picture, its location and size will give us a glance.

2, Shape

If a control is different in shape and form, it can also make it independent of a hierarchy. Irregular design can also be a glaring surprise. The façade of the building has five identical windows and a flashing door, and you will immediately notice the uniqueness of the door.

In Instagram's personal information page, the rounded personal head is unique in the square picture, very eye-catching. It will make people realize that this unique thing is more important.

3, Location

The presence of a position can also show different levels. Within the circle, the central position is more important than the edge. Controls at the top of the axis appear to have higher precedence than other parts.

In the design of the path design, for example, the user's avatar at the vertex of the timeline is significantly more important than the rest of the timeline, and this is where the user avatar is displayed.

Four, rhyme

UI design and architectural design also have the beauty of rhyme, repetition of the pattern will create a unique rhythm of the United States.

1, Mode

The most direct way to understand rhyme is to listen to music. Music has a rhythm, the vast majority of the music follow the same beat, the rhythm is part of the music pattern.

The most typical app is the Airbnb,app list of each house occupies a module, the module has the same size of the picture, the price, location and landlord information and the relative position of the picture is certain, and the layout is comfortable, two modules between the same spacing, when you browse, A familiar rhythm will let you know exactly where to look at key information.

2, intermittent

When the rhythm is interrupted by the interval, different levels will be formed. When listening to a song, when the uniform rhythm is interrupted by other musical elements, you will realize that this is a very special part.

In Twitter's app, tweets and tweets keep the same style, even rhythm, but the "recommended user" has a different style, it is inserted into the list of tweets, breaking the flow of the entire stream, highlighting different levels, will quickly grab your attention.