How to make your interface design attractive and advanced｜Part 1

Designers may indeed encounter some "troubles" during the design process, which makes the design results seem not "high-end" or "feeling" enough. In this case, how to solve these problems? This article shares two methods that can help us better design interfaces and improve the sense of sophistication of interfaces.

PART 01 Advanced layout learning and analysis

What is typography design?

[Small question] Which of the following two beer posters looks cheaper?

Needless to say, of course it's B, because there's a handsome guy~ Because B has a portrait, it's much more approachable than A, which is so cool. Only affordable things are approachable, so B gives people a cheaper feeling, which belongs to the category of "I can afford it". On the other hand, A gives people a great sense of distance, and it feels expensive and unaffordable. [Small question] Which of the following two business cards is easier for people to trust?

Needless to say, of course it's B ~ Because the alignment is good, it gives people a neat and professional feeling. On the other hand, A is too complicated and fancy. It doesn't look like it can do things seriously! So B can make people feel more trustworthy. Why do they both have business cards, but give people different psychological feelings?

"This is actually the impact of different layout designs" the basic concept of layout design.

[Definition] As an important branch of graphic design, the core of layout design lies in the ingenious use of various modeling elements and formal principles to carefully arrange the text, images, graphics, lines, tables, color blocks and other elements in the layout. This process is not just a simple arrangement and combination, but also a visual art form to convey the designer's intentions and information to the viewer. Through careful layout, we strive to make the layout present a harmonious and unified aesthetic, while ensuring the effective communication of information, so that the viewer can deeply feel the designer's creativity and intentions.

Let's take a look at another group of poster designs. Which one do you like the most at first sight? Or which one attracts you at first sight? The reason for being attracted is the role of layout design that we talked about.

【Function】Attracting the audience's attention and stimulating their interest in reading is the primary task of layout design. Through careful arrangement, ensure that the main idea conveyed by the layout can be presented to the audience at a glance. At the same time, give full play to the expressiveness of layout design, strengthen the layout theme, and deeply attract the audience's attention with its unique artistic charm, bringing them visual enjoyment and touching their hearts. Seven principles of layout design

We can extract more abstract concepts from any technology to guide our practical learning. Next, let us begin to understand the seven principles of layout design - expressiveness, image rate, text jump rate, image jump rate, grid constraint rate, layout rate and composition.

1. Expressiveness

[Concept] Expressiveness refers to the ability of layout design to visually convey emotions, atmosphere and themes.

[Significance] A layout design with strong expressiveness can quickly attract the audience's attention, effectively convey the designer's intentions, resonate with the audience, and leave a deep impression.

[Example]

2. Plate rate

【Concept】The image ratio refers to the proportion of the area occupied by the image in the page layout.

【Significance】The image-to-text ratio directly affects the visual effect of the layout and the efficiency of information transmission. A high image-to-text ratio usually makes the layout more vivid and lively, while a low image-to-text ratio may make the layout appear more concise and clear.

[Example]

3. Text jump rate

[Concept] Text jump rate refers to the degree of contrast between text elements of different sizes, fonts, colors and other attributes in the layout.

[Significance] By adjusting the text jump rate, you can highlight important text information, guide the audience's reading order, and improve the readability of the page and the efficiency of information communication.

[Example]

4. Bounce rate

[Concept] Image jump rate refers to the degree of contrast between image elements of different sizes, shapes, colors and other attributes in the layout.

[Significance] An appropriate image jump rate can enhance the visual impact of the layout, make the layout more layered and dynamic, and help attract the audience's attention.

[Example]

5. Grid Constraint

[Concept] Grid constraint rate refers to the degree of use and reliance on the grid system in layout design.

[Significance] The grid system can make the layout more standardized and neat, and improve the consistency and readability of the design. However, excessive grid constraints may limit the designer's creativity, so it is necessary to balance the use of the grid according to design requirements and style.

[Example]

6. Page layout

[Concept] Layout ratio refers to the ratio of the area occupied by elements such as text and pictures in the layout to the area of ​​the entire layout.

【Significance】The layout ratio determines the information carrying capacity and visual effect of the layout. An appropriate layout ratio can make the layout neither too crowded nor too empty, maintaining a good visual balance and information transmission efficiency.

[Example]

7. Composition

[Concept] Composition refers to the arrangement and combination of various elements in the layout (such as text, pictures, lines, etc.) according to certain rules and principles to form a complete and harmonious visual picture.

【Significance】Good composition is the basis of layout design, which determines the overall visual effect of the layout and the way of conveying information. Through clever composition, you can highlight the theme, guide the line of sight, create an atmosphere, and make the layout more attractive and appealing.

[Example]

These concepts play a vital role in typography design. They are interrelated and influence each other, and together constitute the overall effect and style of layout design. Designers need to master these concepts and apply them flexibly according to design needs and goals in order to create excellent design works.

Introduction After in-depth discussion, the seven principles of layout design - expressiveness, image rate, text jump rate, image jump rate, grid constraint rate, layout rate and composition. Today we will continue to the next article. Knowing so many principles, how can we apply them? Let's go.

PART2 How to use it in interface design

2.1 Contrast and Difference

There are significant differences between layout design and APP interface design in terms of design focus, design elements and requirements, but they have certain commonalities in terms of visual design foundation, user orientation, technology and tools. On the basis of mastering these commonalities, designers need to conduct in-depth study and practice in specific design fields in order to better respond to different design challenges and needs. Layout design and APP interface design each occupy an important position in the field of visual design. There are significant differences between them, but there are also some commonalities.

Here is a detailed comparison of the differences and similarities between the two:

1. Difference comparison

a. Design focus and purpose

【Layout design】 mainly focuses on form and visual presentation. It pursues a unique artistic style and visual effects, and aims to attract the audience's attention through exquisite typesetting and layout, forming a deep memory point. Layout design pays more attention to creativity and visual impact, and how to effectively convey information within a limited layout space.

【APP interface design】pays more attention to information communication, function realization and user experience. It aims to help users quickly understand and use the various functions of the APP through clear and intuitive interface design. APP interface design needs to take into account the user's usage habits, interaction logic and ease of use to ensure that users can smoothly complete various operations during use.

b. Design elements and requirements

[Layout design] usually involves multiple elements such as text, pictures, colors, lines, etc., requiring designers to have high aesthetic and creative abilities, and be able to skillfully combine these elements to form a layout effect with artistic appeal.

[APP interface design] focuses more on the interface layout, button design, interactive effects, etc. It requires designers to be familiar with the design specifications and principles of user interfaces and be able to design an interface that conforms to user habits and expectations.

2. Commonality comparison

a. Visual design foundation Whether it is layout design or APP interface design, you need to master the basic visual design principles and techniques, such as color matching, font selection, typesetting rules, etc. These basic knowledge are the cornerstone of building excellent design, which helps designers better express design intentions and achieve design goals.

b. User-oriented Both require a deep understanding of user needs and behavioral habits in order to design works that better meet user expectations. Whether it is to attract the audience's attention or improve the user experience, user-centered design thinking is required.

c. Technology and tools In the design process, both will use some of the same or similar design software and tools, such as Adobe series software (Photoshop, Illustrator, etc.) and interface design tools such as Sketch and Figma. These tools can help designers complete design tasks more efficiently and realize design creativity.

2.2 APP Case Analysis

Let's take a look at the implementation effects of several specific cases and see what inspiration they can give us:

TIPS: The difference between line division and space division is that the dividing line gives people a sense of oppression, while the space division gives people a more relaxed reading experience.

TIPS: In the design of the QQ Music Member Center page, different levels correspond to different color cards. The use of color to fill the background attracts users to increase the exclusive proportion of the interface, and plays a visual guide role in account switching. It is a good design idea.

TIPS: Indicates content that is relatively more prominent in the picture, so that users can catch their eyes at first sight when browsing products; focus is relative, and can be the focus in a large page or in a small module.

TIPS: When we shop online, we mostly get the first impression of products through pictures, so the proportion of pictures on shopping websites should be as suitable as possible for the product characteristics to make the layout design better.

TIPS: In general, when we design, we often pursue "high-end" or "high-end gray" or "uniqueness". In fact, it is more important to conform to the tone of the product and the target group of the product, and not to blindly pursue one's own "design pursuit". "According to different project requirements, choosing different templates will naturally achieve twice the result with half the effort!"

2.3 Apply what you have learned to improve your skills

All technical knowledge can be transferred. We need to apply what we have learned to practical work. The process of transferring technical knowledge is not only a deepening of understanding of knowledge, but also a comprehensive improvement of ability. Through continuous practice, exploration and innovation, we can transform the technical knowledge we have learned into the ability to solve practical problems.

The following is a little experience I have personally summarized. Through four steps, we can gradually improve our interface design to make it more appealing!

As a designer, don’t be limited by CSS, HTML or any other technical tools. They should not become a stumbling block to your ideal perfect composition. These design principles are applicable to any medium, such as platform, industry, web page, etc. They simply and clearly reflect how our brain and eyes perceive visual information in any form. Only by learning everything and using everything can you break through the bottleneck.

After in-depth discussion, the seven principles of layout design - expressiveness, image rate, text jump rate, image jump rate, grid constraint rate, layout rate and composition. These principles not only enhance the visual layering, but also allow us to scientifically and rigorously express the elements we want to present. When reviewing the cases corresponding to each principle, it is not difficult to find that each case is actually a comprehensive application of multiple principles. They are interdependent and cannot exist in isolation.

I hope that we can all improve our abilities, ensure that every design element can coexist harmoniously, and together build a layout effect that is both beautiful and practical, create a more fascinating visual experience, and make the design work more in line with the expectations and needs of users.