User Design Research: application of the same type effect in redesign

Article Description: the Gestalt (Gestalt) theory is a psychological term designed to explain how some human behavior is produced and how our human visual experience relates to the brain's response. Among them, the same type theory (isomorphism) is a theory in the gestalt. Gestalt theory is not applied to design, but understanding these theories is of great help to our design.

The Gestalt (Gestalt) theory is a psychological term designed to explain how some human behavior is produced and how our human visual experience relates to the brain's response. Among them, the same type theory (isomorphism) is a theory in the gestalt. Gestalt theory is not applied to design, but understanding these theories is of great help to our design.

The same type effect: the same type effect refers to the human beings through their own experience and memory to make judgments on a visual object.

Does seeing this plush teddy bear make you feel warm and comfortable? Does seeing your finger so close to the cactus make you feel like you want your hand back immediately? This is the same type effect. Our response to these images is based on the experience we have had. Because we have personally touched a real teddy bear, we have had the experience of being pricked with pain--so we will apply the existing feeling to the understanding of a picture.

Here we will introduce a related case. A reader wants us to make some comments about her business card, and she doesn't like the logo, but if you have to apply the logo, how can the business card show the effect to attract her customers?

Prior to modification: a mechanical and mechanical design

The logo is not as bad as it really is, but it's not that much of a wonderful thing. For a restaurant logo, my favorite muffin is not really bad. It has a concise (or a familiar) construct, with a long name, but centered placement makes it a focus element, and a wisp of fragrance floats above. The style is smooth, and the flavor of the muffin product is also quite fit. But the color is problematic, but we can fix it in the design. May be feeling a bit thin, designers in the design of the cup and fork, in order to match the characteristics of the logo, in a rounded area also use a sleek font as text.

In addition, there are many similarities in the layout of the business card, which is a good thing for the design. It simplifies the layout and prompts the reader to correlate the various elements. In the above picture, the sign, the text and the white area are rounded, and the muffin gives the person the circular and the soft feeling is similar, the direction is correct, but this is not enough! Because the rounded corners are too small, it does not play a dominant role in the straight edges and fonts of the business card itself. If we compare it to other elements, we can easily observe this (compared to the following figure).

In addition, the use of this color matching card and logo is not very common. Light green is not the color of muffins, nor does it give a person a feeling of breakfast or warmth. With the relative red color of the wheel (that is, "complementary complement"), you usually feel an active energy. But the two unsaturated colors and then add a gray, so that the whole color is too mechanical and lack of life breath.

Let's start by using the theory of the same effect to redesign

When you just see the pictures below, believe that your taste buds are starting to react! It doesn't have to be designed, and you don't need to have a card in front of your face before you feel delicious. Because we have had muffins, so when we see these pictures, it awakens the vision, taste, and smell that we once had.

There's no need to repeat, chocolate-covered muffins, muffins on a bunch of blueberries, and a high quality photo is the easiest and most direct reminder of our senses and memories. So we're going to use a good picture as your main destination for your design.

1. Place the picture

Center the picture in the layout, and place the text in other spaces.

The picture occupies the 1/3 height of the page is appropriate, the middle position is also the most powerful area in the layout, can attract the interest of other people to the greatest extent. Keep an eye on the muffin shadow and the reflection so that the pine screen is placed on the business card, so it will have a strong sense of reality, just like the muffins you put on the table.

It's certainly good to enlarge the picture, but if it's too big, it will be uncomfortable to place text with the rest of the space.

2. According to the picture design

Now, we're going to choose the fonts, colors, and layout layouts to echo those muffins.

We're going to let the pictures speak for themselves. The shorter the title, the stronger the impact of the image, especially in such a narrow layout. We use the "addictive delicacy" (addictively delicious) as the title, directly communicate with your taste buds! The Fenway Park font, with its irregular contours, is particularly fluffy and soft, and its irregular contours resemble the muffins in the picture, presenting a crispy appeal.

Next, take the color from the picture. From left to right, the text has a deep, shallow three-color selection, the title color is the eyedropper tool from the picture selected color, these three colors can be a good match with the picture, but the most light color can make those muffins appear more prominent more attractive.

3. Add Auxiliary fonts

Increase the size of a smaller font to match the larger elements and not interfere with the main element's breath.

We use Serlio font as a complement to the text font, this font fine look line is not regular, full of liner, it seems complex and nostalgic, but also has a warm feeling. These fonts are written at the beginning of the handwriting, so there are no straight and regular corners. We use the thin body to form a proper contrast with the stout lowercase letters of the title. In the illustration above, A: all lowercase letters (this lowercase letter also appear in uppercase letters, but smaller in size relative to uppercase letters), the overall edge is too smooth. B: The initials are capitalized so that they form irregular outlines. Obviously the second can get a better visual experience.

Above, the picture is placed in the middle of the layout, neatly dividing the layout into two areas with different text content, above is the title and the main description, the following is the production of a variety of muffin names. The view below, is another kind of change, all the text is above, but the text seems to form a gray color block feeling. (Note that all text is centered)

4. Plus logo

The logo is not treated as a visual focus here, but as a "punctuation" to deal with, can appear more prominent and powerful.

The lower right area in the visual nature of a "export", where the placement of signs, no matter what color your logo is always able to produce effects, not too big, but it can convey a sense of authority. Remember that your customers are only interested in your product, and that the logo's role is to say "who made these delicious things" information.

Two additional designs to appreciate

Different pictures have different constructs. The picture below is two full bleed bit image placement, also need to make corresponding adjustment in the layout structure.

The main feeling to be conveyed in the above picture is warm. The white layout is replaced by the brown picture, the whole picture makes the person feel the fragrance overflowing. In this design, the picture as a simple background can make us more relaxed in the design process, but the disadvantage is that the remaining space is relatively cramped, so that the names of various muffins to overlap in the product. This is generally not recommended, but this time, it can only be said that the basic still acceptable.

In this picture, according to the structure of the picture we put it on the left, because the picture gives the feeling is "left-to-right", so to cut the picture is also the left side of the cut picture. The muffins are partially overlapped in the blue area, and the layout is active. Thin white line of the border gives a "nostalgic" feeling. Surrounded by the blue area, you can make this part of the blueberry is not visually confused.

We can see that, after the redesign, the original light green logo has been able to successfully represent an image symbol in various layouts.