In the process of sorting out the banner design in the last two issues, I found that wireframes are widely used in banner design. It can not only assist the design of some elements, but also add a lot of color to the design and increase the sense of design. So, I decided to summarize and research, and found that there is still some truth in it.
Past reviews:
As one of the three elements in plane composition, line has a very wide range of applications.
The main functions of "line" in the layout are: expressing emphasis, clear separation, visual guidance, organizing information, and enriching decorative images.
In banner design, the application of wireframes also plays the role of emphasis, visual guidance, organization of information, and enrichment of picture levels. Next, we analyze the overall characteristics of wireframe application in banner design for some cases, as well as the design details that need to be paid attention to when applying. The application of wireframes in banners is also applicable to other design fields such as posters.
1. Classification of application situations
1. Large wireframes, secondary backgrounds and overall typography
Features: The use of wireframes in the banner has a strong sense of overall form and can play a better role in guiding the vision. The user will focus on the area within the wireframe at the first sight of the banner.
2. Small wireframes, applied to local copywriting
Features: It is most common to apply wireframe b2b data design to banner copy. Copywriting is the main carrier for conveying banner information. Applying the banner here can help design well, attract attention and highlight the key parts of the copywriting. Later, I will specifically analyze how wireframes are applied to the copywriting part.
3. Small wireframes, applied to partial images
Features: Adding wireframes around the image can make the image more three-dimensional through the spatial relationship, increase the level of the design, and play a role in highlighting the product.
2. Application details
The above briefly summarizes the application scope of wireframes. Next, we analyze the details and design ideas that need to be paid attention to in combination with these application scenarios.
1. Closed & Unclosed
The closed wire frame is less breathable, but visually more standardized and stable.
Unclosed wireframes are the most common, are breathable, have a strong sense of design, and have a wide range of design space.
When it comes to concrete design, there are two ways to break the wireframe.
Directly select the cutting part to disconnect
Superimposing other elements (copy, pictures, etc.) on the wireframe track is broken
This method is more common, and the spatial relationship between copywriting, images and wireframes can be used to create a sense of space, so that the wireframes can be better integrated with the whole.
2. Thick & Thin Lines
Thick lines can be more eye-catching and full of personality
Thin lines appear delicate, soft and light
3. False & Real
There is a distinction between the virtual and the real in the application of wireframe. The "virtual" wireframe is very flexible in presentation form, and it is easier to combine one's own creativity.