On visual design – delicious “cooks” in the data age (Part I)

Time:2021-8-30

On visual design - delicious

catalog:

1. What is big screen data visualization
2. Introduction to design process

  1. Combine emotion to create two-dimensional design beauty
  2. Building a sense of space & the fusion of two-dimensional and three-dimensional
  3. Summary

On visual design - delicious

I still remember when I studied design in the University, there was a saying in the College: “80% of designers dream of becoming a cook.”

I’ve never tasted the reason for this sentence before. I just think it’s a joke between my classmates. When I was a sophomore, I had the honor to rent a house with a student sister who knew how to cook. From then on, I became fascinated by cooking under her influence. I gradually found that cooking is very similar to design: the choice of ingredients, the choice of seasonings, the skills of cutting and frying, the way of cooking, the way of placing dishes, the color control of dishes, and even the selection of bowl shape and color… Through these slight changes, everyone’s cooking taste is completely different.

When I understood this and began to think about how to cook delicious dishes with my own taste, I found that I began the process of “designing dishes”. It designs every process to add flavors to the taste, change the delicate taste, design the collocation, design the pendulum, even the way of my cooking, so that the taste of the dish can be fully realized. I think that’s why designers are obsessed with becoming chefs. For designers, these ingredients can become the object of design to achieve the best user experience and obtain the satisfaction of being a chef.

In the contemporary data age, the purpose of a visual designer is to get any food material – data. Through its design, give its own “taste” to the messy and cold data, so that users can understand its meaning and its differences at a glance. Through the processing of design, such as cooking, selecting seasoning and swinging plate, it can help users understand it better and increase their love for it. Clearly clarify the meaning of data, avoid the fall of delicious ingredients, and intuitively present the meaning behind big data. Data visualization becomes valuable in this way. Now, let’s go into the method of data visual design and take a look at our exclusive recipe.

On visual design - delicious

On visual design - delicious

When talking about data visualization design, many people will have a question: what is data visualization? Let’s start with this problem and talk about data visualization design.

Research shows that the human brain processes visual information better than text. Therefore, data visualization is a series of means to visualize the data by using charts, graphs and design elements, and display the relatively complex and abstract data in a visual way in a form that is easier for people to understand. Data visualization can enable people to complete some tasks more efficiently. We can understand it as three advantages:

  • Beautiful display: display enterprise characteristics with data, conference booth, media on-site display, etc
  • Data driven: real-time view of business overview, monitoring and early warning, and drive internal rapid response
  • Explore value: the visual experience brought by the presentation of visual data will help people find new factors

With the support of HT Technology, data visualization can not only be “visual”, but also have the characteristics of communication and interaction. The design brings not only the visual shock caused by the instantaneous processing of massive data with cool visualization style, but also pay attention to serving the business needs and designing personalized customized visualization that meets the needs of different industries, which is conducive to enterprises to make correct business decisions, help enterprises make more scientific judgments with the presentation of based data and avoid mistakes in decision-making.

On visual design - delicious

On visual design - delicious

1. Prioritize from business requirements

Key indicators are some general terms, which are the general name of a group or a series of data. By specifying the keywords of primary, secondary, auxiliary and three indicators, we can conceptually and clearly display the main contents of the large screen. For example, we can classify a lighting monitoring project into these three types:

  • Main indicator: the main indicator is located in the center of the screen to show the use data of the lighting area for the map.
  • Secondary: secondary indicators are located on both sides of the screen and displayed in the form of charts.
  • Auxiliary: Supplementary information of main indicators, mouse click or hover display and interactive dynamic effect display.

On visual design - delicious

In this way, we can easily determine the overall structure of the large screen in our mind, so as to facilitate our next refinement.

On visual design - delicious

2. Establish the visual chart type through the indicator analysis dimension

The data of the same indicator will have different results from different dimensions. If the dimensions of the analysis are not accurately identified or the definition is confused, the visual chart will not be able to see the meaning clearly and make people confused. Here, we cite Stephen few’s article visual business intelligence’s four dimensions – comparison, connection, distribution and composition to analyze the logic of data.

On visual design - delicious

When thinking about the four dimensions, we should consider several questions:
1. Correlation between data?
2. What is the scope and regularity of the data in the index?
3. What are the differences between the data and what are the main aspects of the differences?
4. What are the components of the data in the indicators and what is the proportion of each component? The style of the above example chart is more traditional, but the logic of thinking is interlinked, which is worthy of reference.

On visual design - delicious

3. According to the large screen size, plan the page layout and establish the interactive draft

After establishing the chart type, the next step is to enter the specific information location of the layout and establish the interactive draft. The first step in establishing the interactive draft is to determine the size of the large screen. The customer’s large screen size will not affect the overall layout and effect. In the design, we should also consider whether there are spliced large screen joints, and try to establish the grid layout based on the spliced screen size.

After the size is established, the layout and page division of the design draft shall be carried out next. Layout here, we will refer to the business requirement priority of the first item to layout the screen segmentation area. Core business indicators are arranged in the middle and occupy a large area; The remaining indicators are expanded around the core indicators according to priority. Generally, the related indicators are adjacent or close, and the indicators with similar chart types are put together, which can reduce the cognitive burden of the viewer and improve the efficiency of information transmission. Visually, try to avoid text listing or chart listing, and pay attention to the area proportion of square and circular charts, which is also a matter of attention during layout.

On visual design - delicious

On visual design - delicious

4. Determine design style and design progress

The determination of design style is mainly determined by the following points: the choice of design style should not pursue the cool effect and do not meet the business needs. It is particularly important to choose the most appropriate rather than the most gorgeous. Because the design involves a wide range, we will focus on the latter two chapters. The following shows some application cases of different composition layouts and elements corresponding to different industries:

On visual design - delicious

The visualization of the engine focuses on the generator products, and the surrounding UI is designed in the form of large rounded corners, so that the vision is surrounded from the surrounding to the middle and concentrated in the center.

On visual design - delicious

The visualization of the excavator is designed with earth color, the principle of color empathy and simple linear UI, so that the large screen can be grounded without losing the effect of high-end elegance.

On visual design - delicious

The visual design of the hospital is mainly cold white, highlighting the clean and serious feeling of the hospital, as if you can smell the smell of disinfectant. Model display is the main style, and the button style also adopts the design based on surface, combined with the model design based on large-area color block distribution.

On visual design - delicious

The visualization of the subway station is mainly realistic, which reproduces the appearance of the real subway station and the immersive animation interactive experience.

On visual design - delicious

The agricultural visualization case tries the low poly style, condenses the agricultural operation scene with the model of simple illustration style and slightly abstract painting, and designs a lovely animation style visualization effect with the color of green close to plants.

On visual design - delicious

5. Communication and modification

A very important point in design is communication. Both the internal communication of designers and the communication between designers and customers will have a great impact on the final modification effect of large screen. In internal communication, designers should absorb knowledge and suggestions from a professional perspective, and absorb business needs and customer psychological demands from customers. At this time, the selection of opinions is very important. The designer may be disturbed by the complex audit process and the different preferences of different laymen. At this time, the designer needs to synthesize opinions, control the design trend together with the project manager, discuss with each other in communication with customers, learn from each other and compromise opinions, so as to optimize the design scheme step by step. Of course, there is no standard answer for design, and there is no perfect all-round design scheme. The ideal standard is to meet the ideal demands of customers. However, for their own design, they must pass their own level. It is a good design to be able to coordinate their own aesthetic and customer needs.

At the same time, due to the different equipment used in the design, the large screen has its own unique resolution, screen composition, color display, operation and display environment. Many problems here can be found only when the design draft is submitted to the large screen. Therefore, this step is very important in the sample drawing communication and confirmation link. Sometimes it is necessary to develop a demo, Test repeatedly to modify and coordinate the final screen effect. During the test, the following points can be emphasized in the design:

1. Is the previously established layout still appropriate after putting in the design content

2. Is the established chart type still objective and accurate after being brought into the data

3. Whether the page style created according to the key elements, color, structure and texture basically conveys the expected atmosphere and feeling

4. Are there any problems in the development and implementation of existing styles, data contents and dynamic effects

5. Whether there is color difference on the large screen, whether the text content is clearly visible, whether the page is deformed and stretched, etc

On visual design - delicious

6. Development and testing

Hand over the design draft to the front end for production, communicate with the program, interactive switching effect, large screen dynamic effect, etc., and realize the final effect of controlling the large screen together.

On visual design - delicious

In the first part, we learned about the concept and design process of large screen data visualization. In the second part, we will lead you into the data art world, divergent design thinking and experience design fun. Visual design – delicious manufacturer in the data age (Part 2). You are welcome to comment!