10 Ways to Design A Full-page Project (with examples)
Review of past e-commerce design:
First, we need to have a visual point, which depends on thesePoint to guide or focus the eye
Not all shapes of points are circles, or concrete elements.
For example, a small element can be called a dot in a size comparison that appears on the entire page. Large elements can also be called points. It’s a relative term. In fact, a point on the page can quickly catch the user’s eye. When a point appears, the user is distracted from looking at the screen at the moment. When points of different sizes appear at the same time, users focus first on the larger point, and then on the smaller point.
Review images
Top left 1: the eye will first focus on the bright red strawberry on the right, 1 because of the contrast of color, 2 because of the contrast of area. Points are relative here, and you can think of all the elements that appear as points. But first there will be a focus to catch the user’s eye;
Upper left 2: the focal design of the point, the middle position of the user directly to the middle of the content;
Lower left 3: the dot here, or even the highlight of the page. It is the cyclist who rushes out of the picture on the right. This performance breaks the smoothness of the picture and makes the user pay attention to the characters who break out of the picture first. At the same time, it also reflects the nature and adventure of outdoor cycling.
Bottom left 4: the centralized design of points, the circle in the middle is a point, and the cutlery on the two sides is a line, which belongs to the typical center composition;
In practical application, it can be divided into:
The element that caught the eye in the first place. The points in the picture have obvious contrast of size, color and shape.
It refers to the shape or detail of the point in the picture that distinguishes it from other elements and becomes the main vision in the picture.
Review images
Left figure 1: Hand-painted black and white lines are used as the main visual points of the picture, and the food of primary color is used to guide users to browse by skipping.
Figure 1 right: The middle point design, where the visual focus will be. Large areas of white space make the picture very clean, except for the main product, no other elements interfere with the line of sight. Different products are recommended to users in three different scenarios.
When you’re designing
1. When the contrast of picture elements is not obvious and the overall vision is very average:
You can adjust the size, color, and other forms of design elements to make the contrast between the points you want to highlight more prominent, depending on the design needs and the purpose of the activity.
2, when there is too much text in the format, the user does not know what to look at first?
At this moment you can try the main copy of the glyph, color and so on processing, user line of sight has a focus. Or you can try to adjust the level of text so that what stands out stands out and what doesn’t.
Two, the character action design is much, the hand eye body foot should make!
The directivity of action and behavior.
This direction can be reflected by the various poses posed by the model, or the direction, position and layout of the model elements can be adjusted to complete the direction of the specified content. When doing some design with model as the main element, you can make good use of every move of the model.
Review images
In practical application:
For example, in the performance of some sports activities: dynamic, vitality is the main entry point of this kind of demand. In the selection of character movements, try to find some larger range of action, exaggerated models, to complete the basic appeal for “moving” up.
Review images
Left Figure 1: In the movement of the model’s arms, the left hand holding the ball is placed on the text, and the color of the text is white, so that users pay attention to that part of the content immediately. In the position shown by the right hand, there is an action of holding the ground, which is skillfully combined with the recommended goods, so that the user’s vision goes down to browse and pay attention.
Right figure 2: In the first screen, the model’s movements hint at “show it off”, showing off his 8-pack abs to the user (hee hee). Second, the fist pointing displayed by the figure also draws the user’s visual focus closer to the text on the left side of the picture. On the second screen, the direction of the model’s eyes is pointing to the content on the right.
When you’re designing
1. When selecting models for large films, we should first consider whether the movements of models should be combined with the needs of copywriting and composition when using models as the main visual elements. And then to choose or shoot suitable for the purpose of the activity and with the action of the target material;
2. When using model materials, make full use of the model’s movements, expressions and visual direction of eyes, and arrange the right content to the right position according to the browsing track.
3, look in the eyes
The function of the eyes indicates that the model has a clear direction in the specific content.
When you look at me, when I look at you, when you look at it, as the eye moves, the focus of attention adjusts accordingly.
Review images
In practical application:
When you look at things with different eyes, in fact, your eyes have a purpose. People will follow your eyes and look in the direction your eyes indicate. It suggests that the user’s eyes follow the direction of the model or element and focus on the specified message. This is a way to use the eyes of models to attract the attention of users.
Review images
Figure 1 on the left: The upward look of the figure guides the user to focus on the upper body of the figure first, and then follow the upward movement of the figure’s eyes to pay attention to the four pieces of information on the top of the figure.
Figure 2 on the left: The positive, upward and rightwards eyes of the characters guide the user’s eyes to the corresponding information.
When you’re designing
1. Follow the direction of the model’s face and eyes, and arrange important and secondary information to the corresponding position. This suggests that the user’s eyeball looks in the direction indicated.
2, don’t ignore the model’s expression, it is also very important. Think about it. When you want to express innocence, full of childlike fun, you choose a model with a stiff expression, glazed eyes, as if owed $500 salary, doesn’t it look silly?
Three, up, down, left, right and center, front, back and side!
Direction, used to indicate a location.
Arrows, straight lines, and slashes all have clear directionality and are good elements to guide the user’s eye. It not only has clear directivity, but also can separate the picture and carry on the hierarchical interval of information.
In some scenarios, the most directional elements are the arrows of various directions. It is a design element that prompts the user and suggests action.
Review images
In practical application:
If you want to point out to the user to pay attention to the content, the best way is to use the line, arrow elements pointing, can be very convenient to the user’s eyes, on the direction of guidance.
Review images
Left figure 1: Lines have clear directivity and sense of rhythm. Straight lines are masculine, powerful and relatively stable. Curves have the impression of softness and smoothness;
Left figure 2: Vertical line with clear up and down action.
When you’re designing
1. In the design requirements of fashion and clothing, the flexible use of small line elements can help you strengthen the text level, modify the details of the picture, and prompt the emphasis of the place. Different lines have different visual sensations. For example, thick lines give the impression of masculinity and strength; Curves give a soft, elegant feeling;
2, when using line, dash, arrow elements, be sure to add to the purpose of the explicit pointing. Don’t add for the sake of adding.
Four, a little red in the willows induces focus and prominence
A little red in the willows reflects the directivity of color from this sentence.
It has the advantage of making the subject stand out directly from the myriad of elements that interfere with it and immediately capture the user’s vision.
Review images
Top left 1: The red content with the characters slowly tearing upwards becomes the first focus of users’ attention. The expressionless characters create a weird and scary feeling to the picture.
Top left 2: Bryant’s Lakers yellow first becomes a visual focus, leading the user to focus on his classic blue dunk.
Bottom left 3: the use of red lines prompts the user to continue browsing down. Scattered thin short red lines are placed freely and disordered on the main content of the page, so that the user’s visual focus is focused on the content indicated by these lines.
Bottom left 4: the contrast of red and black, making the red on the left side of the figure more obvious.
Practical application can be divided into two situations:
In the face of large-format text, elements and image information, human eyes need guidance, and color is one of the most straightforward forms.
Through the rational use of color to highlight the most important information, maximize the color contrast. If the guidance of color is combined with the direction of elements and actions, the direction of color will have more impact.
Review images
Left picture 1: it is a typical combination of green and red. The green color of the overall tone makes the red bottle at the bottom of the page stand out. The user’s eye is fixed on the red element after the user follows a top-down browsing pattern.
Left Figure 2: Bright and strong contrast color blocks are placed on the left and right sides of the picture respectively, so that users’ eyes move with these color blocks, which not only enliven the picture, but also enrich the overall effect.
As illustrated by the above example, the effect of color induction is similar to the focal color in the color scheme. Make the content you want to make stand out, use contrasting colors, opposite colors.
When there are more than two colors on the screen, the user’s eyes will first focus on the contrast and large area of the prominent color, and then find another color, and then complete the browsing.
Review images
As illustrated by the above example, the core role of color aggregation is to highlight, contrast and focus the content you want to highlight, so that the user’s eyes stay there and read the information you want to convey to them.
When you’re designing
1. This focusing method is more effective when complementary colors with strong contrast are used to highlight the main content;
2. If there are many colors in the screen, you can use the color area to grade all the information on the page at important levels.
Five, the white space design blank, the protagonist next to the area is large
White space, common force case artifact, highlight the leading role of the necessary tricks.
If the above several methods are doing the design of addition, then white space is actually doing the design of subtraction. When there is a lot of white space around the main character element, human eyes will first find the design element without any obstacles from the complex environment of the whole page.
Review images
In practical application:
Leave blank namely put apart leading role, blank, administrative levels, force a kind of concise design method of case. “White” refers to not the “white” color, but the “white” blank, white refers to a certain area without redundant elements, surrounded by a large area blank state.
Review images
Figure 1 on the left: there is only a small amount of information page for a product-oriented topic. The large area of white space around the product makes the form and details of the product more focused. At the same time, the white processing, but also enhance the quality of the brand sense and temperament.
Right figure 2: There is a lot of white space on the whole page. Except for some flat design elements, most of them appear in the form of “white” outside the main screen.
When you’re designing
1, effective white space can improve the screen force, and can make the protagonist to highlight more prominent;
2, dare to leave white: a lot of white space will make the page sense, not because of the page content dense and disgust.
3. Use the most simplified elements: no unnecessary design elements are added to bring visual interference to users, only the core and necessary key elements are retained, and the key elements are described in detail.
Six, one two three four five six seven, 7654321
The direction of the number, the direction of the order.
The average person has the experience of looking for the number 2 when they see the number 1. In some requirements, the number is used as a header to allow the user’s eye to reasonably jump around the page when it needs to be visually drawn.
Review images
In practical application:
The use of digital elements is often found in table of contents pages, development history, or product line-ups.
Review images
Left figure 1: Rooney’s movement and direction of kicking the ball point to the content area on the right, and the number represented by the header indicates the user to read one by one or read separately.
Right figure 1: numbers are used to indicate the user to read on, yellow and black in sharp contrast.
Left figure 2: Large area of white space around the product so that the protagonist is noticed first. White title numbers on the right, played to highlight the purpose of product discounts.
When you’re designing
1. When doing fashion matching, you can use numbers to guide the order of products;
2. When using numbers as elements, the size and shape of numbers should be controlled as a whole. Do not let numbers affect the main content, of course, if it is based on numbers, try to highlight the visual nature of numbers.
Seven, move too big appear noisy, quiet too dead appear stuffy
Movement is the stillness and movement of the picture.
Moving elements attract the user’s attention in a static page. Of course this includes giFs on the page, dynamic representation of visual elements, etc.
Review images
In practical application:
Dynamic performance can be used to complete the implementation of the action of the character, the action of the product, GIF. However, in the same screen of the page, it is best not to move more than 3 or more elements at the same time, because each move will cause people’s visual noise, if too much movement, is bound to distract the user’s attention. So that the main content of the communication, weakening.
Review images
When you’re designing
1, instantly let elements have dynamic processing methods: to increase dynamic fuzzy elements; Add flying elements such as confetti, red envelopes, sloping lines, etc.
2, the page can also be moved by using now more popular H5, parallax scrolling technology so that different elements in the page according to the user’s mouse scrolling corresponding appear;
Eight, copywriting design ideas, closely related to the theme of connotation
Copywriting, with writing to guide the user to create a sense of painting.
Review images
The photo above shows the name of the restaurant I photographed on my way home from work. Good names are really memorable.
In practical application:
By contrast, text is not as solid as color, nor as obvious as action, but it is the most accessible form of people’s hearts.
Review images
The detailed practice of the above two cases will be included in my new book. Make sure you buy it then.
Left graph 1: express like tuhao, stylist found the breakthrough point between copywriting and image completely, combine the expression form of cartoon, make the image that draw vivid expression of certain tuhao “bold spirit”.
Right figure 1:50% off the top leave no effort, the designer through the divergence of copywriting, drawing a burning machine, like to detonate the feeling of the audience.
When you’re designing
1, good copy tends to associate with some elements, color, style keywords, such a good copy and image often have a higher degree of fit.
2. The visual design of copywriting often arouses the resonance of users through the concrete and abstract expression of copywriting meaning.
These are my eight ways to guide visual elements:
conclusion
- Have a visual point first, guide the eye to rely on these.
- Character action design is much, hand eye body foot should make.
- Up, down, left, right and center, front, back and side.
- A little red in the willows induces focus and prominence.
- White space design blank, the protagonist next to the area is large.
- One two three four five six seven, 7654321.
- Move too big appear noisy, quiet too dead appear stuffy.
- Copywriting design ideas, closely related to the theme of connotation.
Welcome to follow the author’s wechat official account:
Review images
“The Most Popular Articles in August”
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.5 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com