How do interactive designers make decent visual work in a short time?

It has been said that one of the differences between the engineering background of an interactive designer and the visual-origin interaction design is that the former is not designed to be aesthetically pleasing. Although the logical framework, especially for large management systems, can quickly classify information and functional modules, but visual knowledge and aesthetic accumulation, for us this kind of engineering students, but is a natural bug.

So what happens when an interaction designer needs to take on a visual design job in a project? The idea of visual design is not like the development of knowledge, or in the layout of those alignment theory, a few days can be used for bad. This time on the 4 floor a project support, make a website homepage, interactive and visual. It's a bit of a challenge for new meat.

However, how to make a decent visual work in a short period of time? Take my recent Project home page for example, to swim a little.

　First, the interface background

Page design, I generally first will start from the background, below a few simple and easy to use the routines can be referred to.

1.1 Big picture

The simplest and most brutal way to do this is to have large characters, such as figure A below. This kind of background will give people the impression of "exquisite" and "force lattice" generally. Generally can be directly with a small depth of the image of the macro, that is, most of the picture is blurred. Alternatively, you can add a transparent mask directly over any large image.

Then large characters, many people say big picture with characters, to the English text is more good-looking, Chinese performance is very general. Actually, it's not. Similar to Helvetica and Microsoft ya Black This system font, the performance is quite general, but you can try without the line word + fillet type font, such as round body, the effect is good, see Figure B. About the source of the picture can go to www.unsplash.com (have a ladder to load will be faster), inside the quality of the picture can be free commercial.

Figure A

Figure b--Aliyun Continuous delivery platform

1.2 White + brand color

The big picture above said that this routine is so good, but also appear more elegant, that the whole page a few screens are used this mode well? Of course, there will be some sites do so, but there is a problem is that users in the process of browsing may be aesthetic fatigue, and the page structure is slightly monotonous. So here you can add a variety of pages with a background like "White + brand Color" between larger and larger graphs. For example, figure C and Figure D (two different sites).

Figure C

Figure D

1.3 Solid color background

With pure color to do the background, is also a more common way to see now. For example, a home page has a 4~5 screen, each screen with a solid color to do the background, this model is much simpler.

Tumblr

But here it is worth noting that, because it is a whole large color as a background, people's vision is covered by a color, so the intensity of light to adjust, too bright or too dark are not good. Specific color, you can go to https://color.adobe.com selection.

　　Second, page decoration elements

The background is played as a foundation, followed by the page heap element. Generally includes copywriting and other elements. Other elements include icon, color block, lines, pictures and other design elements, one is to help users better understand the text content, and secondly enhance visual expressiveness.

2.1 Icon

Increase the visual performance, of course, the icon is indispensable. So the next time when you are helpless, you can try to use the icon to the information divided, block display, such as the following figure E

Figure E

2.2 Color Color block

The icon is similar to the above, but it can be more flexible. For example, the following figure F is sorted with different colors, and the figure G is used to highlight title.

Figure F

Figure G

2.3 Lines

The most common scenario for lines is to detach two pieces of information. But in addition, it can be used so oh!

1. Play the role of the contact information block

2. Then you can also emphasize or highlight title

3. Even, a simple line, it can be very beautiful ah!

2.4 Pictures

The real picture and the background fusion, is also a kind of good expressive force Oh!

Third, embellishment and dynamic effect

The above two steps, in fact, is enough to complete 80% of the page, but,

What, like ppt?

In fact, with the general interaction of the designer's thinking, finally made the finished product, the information structure is clear, layout is reasonable, color collocation reasonable, also unavoidably will do like the briefing! A big part of the reason, probably because of the lack of banner! (banner can distinguish between visual and interactive works designed by two types of people, this is my humble opinion)

However, Banner also not every site will have, to see the specific needs of the project. So the rest of the 20% can be used as a final ornament with interactive effects and other widgets.

On the expression of dynamic effect

1. If there are other products have interactive effect, you can directly open the Web page, display to the development of GG look.

2. If you want to come out of the innovative interactive effect, then can be directly described by the development of GG communication, if still not, can only use their own software to achieve, such as Axure, Keynote, AE ....

About embellishment

1. Refer to the 2nd, plus the color block, line, icon and so on

2. According to the project positioning, can be appropriately increased by more than one or two other color with visual impact, as part of the embellishment. Like what:

　Summarize

In fact, interaction and vision do not separate, many times there will be cross. Interactive designers, not because their output can be black and white ash, you can not learn the color of the collocation principle, not because sketch is drawing artifact, not to learn AI, PS these tools ...

Design boundless, challenge a lot, continue to work hard!