真人街机捕鱼

Your Position: Home > News > Taoyuan Website

3 ways to break pictures in web design

Date: 2017-4-11 9:03:26 Popularity: label:
share to:
What is broken?

Broken: The jargon is "broken."
It is a design technique that breaks the rules and is common. It is similar to the mutation treatment in the plane composition.

The role of broken pictures:

1 、 Makes people shine
2 、 Has an attractive visual focus
3 、 Break the constraints of the box
4 、 Increase the picture level

Before we start the official sharing, we try to have a preliminary understanding of the purpose of breaking the pictures from the following pictures.



Figure 1: Flipping over, a real snake ran out of the picture. This is the role of breaking angles; making vision more real!

Figure 2: Climbing and crawling, I accidentally crawl in front of your screen, isn't it true? This is what breaks the bars; makes the visuals more exciting!

Figure 3: Busy, the accelerator kicked out of the field, isn't it fun? This is what breaks the layout; it makes vision more free!

Figure 4: Playing around, a big ocean wave knocked me out of the picture frame, wasn't it exciting? This is the role of breaking the scene; making the visual more storytelling!

Okay, the chat is over. Back to topic:

The directories I want to share today are

First, two applications of broken pictures

Two ways to break the picture

Two applications broken

One break: break the rules

Break some common design forms, or overall, or details. These are all common ways of “broken pictures”.



Second break: broken details

In the parts of visual elements and layout, the parts of images and texts, we do some breakthrough processing to enhance the expression of details and improve the overall visual impact.



3 ways to break the picture

1.Break
2.Break
3.Small break



1.Break

The point-breaking is the beginning of the bright design. A different idea can better guide the user to experience a distinctive visual design, intuitively and cleverly grasp the user's eyeballs, impress them, and truly serve the purpose of visual communication.

Point refers to the design entry point.
"Broken" refers to the organization and analysis of requirements and goals in the early stage. Through the design starting point of finding differences, find a distinctive expression form, so as to point out the first step of the overall style.



Left: The entry point of a special product page design for a mineral water in foreign countries is: mineral water deep in the surface. By highlighting product advantages, clearly tell users what is unique about the product? The designer uses the overall page design to intuitively let users know the source of the product (deeply digging thousands of meters of mineral water in the surface);

Right: The point of entry for the Chinese Weilong Hot Strip Tmall official website design is:
Fellow fellow, join us to grab a hot bar. The various "programmatic" copywriting on the page, the animated gif of ghosts and beasts, and the full-screen fresh and refined poster style make people feel back in time to the 60s. "Fellow fellow, join us for Double 11 to grab spicy bars," imitating the most successful advertisement in history, plus a kind promise: "Quancun". From copywriting planning to visual performance, it is very good, breaking all kinds of stores before the arrival of Double 11, refurbished promotional design.

How is Point Break used in design?

Here are three common processing methods:



1 、 The scene of the story
http://nicolauska.sk/ Liquor website: The entry point of the point-breaking vision is: the designer mainly uses neon tubes and decorative elements with different shapes to go straight to the theme; the mottled texture background coaxes out the texture and The atmosphere of the bar; the decorative elements of the neon light expand and appear to form a unique style; the large letters with gradients and clear product shooting allow users to taste the product characteristics; the change of the neon light is the characteristic of this website At the same time, it is the embodiment of the designer's grasp of the most essential elements;

2 、 The story of the page looks at Figure 2:
http://mcwhopper.com/kfc publicity official website design point break point of vision is: (using visual scrolling technology to restore the process of Hamburg from packaging to experience store)
Page vision creates a cheerful and interesting burger world.
See Figure 3:
The change point of the generation history of windows breaks through the visual point is to restore the time of change from the perspective of time
From 1985 to the product egg production and then to the blue screen DOS interface (PS: at that time the school still used win and version options, and the case would still be placed horizontally), by win95 Microsoft released the first generation of the operating system WIN95, dark gray start menu design with upright main box! In 1998, a CD-ROM drive and QUICK audio and video software were added; WINXP in 2001-and WIN10 flat processing in 2015;

The picture of 3 、 copywriting see Figure 4
The design copy of Intime's 3rd Anniversary Pre-heating Venue is mainly based on "Thailand gives 50% off the ceiling and leaves no effort", giving people a "thrilling" price war. The designer also happened to conceive a kind of "explosive" tension through the in-depth interpretation of the copywriting;



Big break

Big break is an alternative thinking of common design and common techniques.
Large refers to the large-scale style design.
Broken refers to breaking the traditional typography and layout.

Here are three common processing methods:

1 break the layout

Most of the layout styles in web design are based on the standard and templated box style before 2013. It feels more rigid and restrained. In the following years, the trend of card-type, large-color blocks, and flat design was gradually adopted. The overall layout style broke the earlier “impressions of boxes and rules”, and it felt more flexible. And changeable.



Look at Figure 1: The overall layout is dominated by a winding road, breaking the sense of frame in the traditional layout;

Look at Figure 2: Although the overall layout is not as big as the one shown in Figure 1, you can still see the regular box elements, but the decorative elements outside the box break the performance of the traditional layout;

Look at Figure 3: Breaking the traditional multi-column and square layout, the overall layout is mainly based on the outline of the clothes, and various information is reasonably arranged;

3 ways to break the layout:

Throw away the rigid box and place it freely to join the decorative path

1 、 Grid-type grid is to sort and classify the information through hierarchical arrangement and classification of the information, using the combination and separation of grids, merging and folding, size and color, etc. Regular layout styles are broken.



From the above four cases, it is not difficult to find that one of the rules of breaking the layout is (throw away the rigid box)

Key points:
1 、 Break the box impression of the traditional layout and use the changeable grid to achieve the previous horizontal and vertical layout;
2 、 The layout style is not just straight lines and boxes. More than just regular placement;
3) When using grid processing, it is necessary to control the structural division between each grid, so as to better distinguish the primary and secondary relationships of information and the size comparison of grid blocks;

2 、 Freestyle If the grid style is a way to rationally break through horizontal and vertical layout, then freestyle layout is one of the free typesetting methods of perceptually broken layout.



From the above 4 cases, it is not difficult to find that the second rule breaking the layout is (free placement)

Key points:
1 、 The free-style layout is more suitable for the topical single page with less information; for example: the homepage of the official website of the product, the single page of fashion, etc .;
2 、 Freestyle typesetting is not irregular, seeking change in the whole, and seeking alignment and unity in the change;

3. Path-type path is one of the most free forms. S-type, z-type, and slash-type are common in current design. Path-based layout is similar to freestyle, but path-based is more, by adding guiding linear decorative elements to the layout, the page has a more design sense.



From the above case, it is not difficult to find that the third rule of broken layout is (adding decorative elements)

Key points:
1) Path-based applications are only applicable to topics or single-page designs with little information;
2 、 The appearance of path-like elements is only decoration, not the main one.
3 、 Regarding the role of using paths, they are more used for visual guidance rather than unintentional addition;

2 breaking angle

Breaking the angle at which common images appear can make the expressiveness of the images more impactful. In the need to emphasize speed and dynamics, a unique and unconventional perspective is often one of the tools to break the picture.



Key points:
1 、 Different angles of looking down, looking up, looking up can make the way of image presentation more fresh;
2 、 In image-based vision, after breaking the conventional angle of image appearance, it is actually another way to brighten the eyes of the work;

3 burst color

Color is undoubtedly the first design language that attracts users' attention. Nowadays, the flat style is the main type, more and more similar typesetting, and the works are more and more homogeneous. Trying bright colors and gradient colors is also a simple processing technique to break the picture.



Key points:
1 、 Boldly try to use different colors, but make sure they are harmonious with the content you want to express and not conflict.
2 、 bright is not dazzling;



The small break refers to the breaking treatment of details or corners, which breaks a corner within the bar, so that a character or product breaks a certain side of the picture.

Here are three common processing methods:

1 break a corner

The treatment of broken corners makes people have a kind of visual impression; it is more like a way of throwing away those strips and trying to break a corner. It makes the elements more flexible, and also makes the picture details more in place;



Key points:
1 Break one place, far more than break many places, the visual effect is more concentrated;
2 The effect of breaking a corner can enhance the realism of the picture;
3 The method of breaking a corner is often used in the design of some characters;

2 break out

Allow the design elements to partially or completely break the rules, giving people a visual comfort;
Imagine if you put an element into a rectangle, it will give you a very suffocating feeling. And if you let the element break out of a certain shape, it will be painted as if it is "open the skylight to speak brightly".



Key points:
1 part of the breakthrough of the element will have a sense of openness, as if opening the skylight;
2 After the whole element breaks through the bars, it gives a free and flexible feeling;

3. Breaking the level

The effect of breaking the hierarchy is to put the main elements in front of the vision, making the characters and products more prominent and more visually impactful, and also making the main elements have a visual experience close at hand.



Key points:
1 、 Several common gameplay is that the main element is pressed in front and on top, so that the main element has a feeling of jumping out of the screen;
2 、 Don't overdo the elements that break the hierarchy. There should be only one best point for a visual point, which serves to gather eyes;

Finally, for me, breaking pictures is not only a design technique. Breaking the picture is more like a design obsession that throws away various bottlenecks and breaks through the state of mind.

Review again

The role of broken pictures:

1 、 Makes people shine
2 、 Has an attractive visual focus
3 、 Break the constraints of the box
4 、 Increase the picture level

3 ways to break the picture:

1. Breaking through the break is the beginning of designing a bright work. A different idea can better guide the user to experience a distinctive visual design, intuitively and cleverly grasp the user's eyeballs, impress them, and truly serve the purpose of visual communication.

2, big break big, refers to a large-scale style design as a whole.
Broken refers to breaking the traditional typography and layout.

3. A small break, a small break, refers to a method of breaking details or corners. It breaks a corner within the bar and makes a character or product break out of a certain side of the screen.
0
0
0
0
0
0
0
0
Name
Verification Code
Can't see clearly, change another Already Comment information, click to view comments
Comments from users
Next: No information