What are the HTML5 graphic designers to promote themselves?

Html 5 so popular, what should graphic designers do? Today Epub360 the author from the design content, performance skills and ideas of three, talk about how graphic designers in this wave of success in a firm footing, the text is attached to a large number of combat cases, not talk empty dry goods full. Want to be a pig in an HTML 5 tuyere? To learn this article!

In the first place, because of the involvement of the Internet industry, the rules of many industries have changed, such as retailing, finance, real estate, automobiles, communications, tourism and so on. Graphic designers as a relatively downstream of various industries in a post, whether the client is forced by the boss or the daily imperceptible, in fact, how much by the impact of the Internet, the perception of the wind began earlier a group of even have been transformed to the mobile end of the designer, serving in the large Internet enterprise UI, UE, here for the time being not table.

Because the author of this stupid bird is still groping on the road, here to talk about is not what advice, just a few tears of blood history (there are tears), design industry changes quickly, but summed up also not out of three big chunks:

Content

Performance skills

The idea or the idea

　　First, talk about the content of nowhere near

Former graphic designers do a lot of work, more common is the design logo, vi system 7788 of Things, catalog, packaging and printing of 7788 of things in addition to the special web Designer. Other design projects are more abstract, such as the most common logo design, in addition to the unintelligible content of printed and hierarchical Web pages. Snippets of clues, demanding high-end atmospheric grade ~ Open! This has always been the preferred ostrich effect on the H5 ads will not have, because the general cast H5 advertising and traditional design The biggest difference is the KPI that mountain! Folding, business card printed out to the table corner a shelf finished, H5 advertising so pm will kill, okay?

"Public comment on one word between us" case experience:

Although the content is not a designer can control, (big deal copy is not good large picture) but designers can still give content to edit some suggestions,

such as opening, preface, the transition part to give the page enough space, do not skimp on the blank page (also called the transfer page, there are no more than a suspicion of water), sometimes a page is enough to put a copy of the gas; Copy structure symmetry then you can laugh: You have a good copy, and this content can add points to the work. On the contrary, what has been the international awards, Master Design, import materials, green production process, puppy used all said ... All the paperwork is as little as possible. On the basis of not leaving the content, we suggest that the designers should join in the content combing work as far as possible, for example, try to put the traditional title into a clickable label (tag), the slogan to the whole more colloquial, large paragraphs of the text with the picture to make a slide, or a piece of animation into, look at it is not so annoying. After all, people do not have so much time to look at a large paragraph of text.

　　Second, the performance of skills, broken off

First designers have to have such a concept, H5 advertising and the cost of the launch than the Web page and print are much larger, timeliness on the over, in short, it is more precious. In the limited mobile phone screen to maximize the benefits of transmission is the performance of the job. Visual communication is still inseparable from the basis of the plane: composition, color, space. The Golden section does not have to repeat itself, but to the mobile end of the "Theme Element Center highlight" will not make mistakes; classical geometric composition such as stable positive triangles, round, square, two or three divided composition, tilt, geometric composition with auxiliary graphics will create a sense of instability, but also there will be young, the spirit of the senses, And the edge of the composition will make the work appear more ready.

The above composition method is often used in the traditional graphic design of the probability is less, even if the occasional bold taste will be required and other elements to merge or with what Dongdong broken, or even finally changed back to a big picture. The traditional graphic design is more for the brand image, product style service, so the visual elements, the picture level is rich, and in the H5 advertising design as far as possible to maintain the simplicity of the visual subject.

"Huawei:" China Smart Touch Future "Mate s new product listing" case experience:

Here to mention the font design, it is both content design and composition design, a successful title design itself can be hold live screen.

And a fine carved after the picture out of the title may not be able to hold live theme.

Color also has a relatively large subversion, we saw a large number of red with green, blue with yellow color matching more and more, and fluorescent color also from time to time to join the fun, this kind of design in the past is considered a deep well ice color turned into a strange curry fan classic. The second is a large area of black and white ash is also very common, elegant black-and-white photos are again a large number of open, (black and white large image into a half of the truth of ridicule) changed before the leader photos p into black and white you try ... can use so many sharp colors do not worry about output, color difference is also due to the popularity of mobile large screen equipment. HSB Color Board gradually replaced the traditional printing field CMYK color Board, and a large area of pure color to replace the gradient, after all, the color of the Internet needs simple, clear, emotional.

The performance of the space is more complicated than the above, the processing of good composition and color still remain in the category of graphic design, no space time flow can not reflect the true charm of H5. There are several ways to simulate spatial flow on a plane: parallax effects, differences in position between foreground and background when scrolling on the screen, and so on.

There are also some ways to skillfully use the material, through fake 3d footage, collocation and the basic zoom to reduce the movement of these animations, still can create a simple lightweight sense of space.

If the designer will 3d software so the imagination can completely full fire, modeling and rendering a scene for the environment, with the sequence of sharp weapons and various triggers, the scene is properly reproduced.

Space performance still needs unity and single, although H5 works can be flipped on multiple pages, but the scene is not suitable for conversion too much.

The above content and the performance skill 22 points also only stays around the visual sense the work, discusses under H5 compared with the plane medium from the overall sensory difference, lifts several chestnuts:

"Public Comments: Overseas tour You also with a thick stack of raiders?"

Case Experience:

"The Drop of the wind: Measuring the Traffic jam Disability Index"

Case Experience:

In fact, familiar with the micro-letter H5 small partner should have seen, the above is a typical test H5, but through the stunt screen and dramatic copy, the main line of the test problem is not Shong, but let a person on the process is expected to see the results when the smile.

Let's look at some of the whole process and user interaction chestnuts:

　　The beauty of the year drops the face of the painting

Case Experience:

　　Nike Kobe Bryant reverse-day instantaneous kill speed test

Case Experience:

　　Jing Dong Finance: Lying down can make money

Case Experience:

　　Durex's first Museum of Art

Case Details:

Above, through the sword Walk Slant Point of entry to fit the theme, the case shows an unprecedented user experience, beauty, pondering, suspense, ritual and so on. Works naturally through a large number of human and material resources, not one or two graphic designers can be achieved, then how can we be inspired? Since all walks of life net trend of irreversible, then talk about graphic designer transformation.

　　Iii. iterative knowledge systems and concepts

Traditional graphic designer's application Knowledge: revision, typesetting (output prepress process and Web page typesetting specification) font design graphic illustration design, color psychology, Web side also involves HTML CSS code, I believe that the overall master of these designers are already senior designers and in the work can be independently. Such designers first enter the field of interaction, still need to learn a lot of knowledge, such as the common canvas size and the smallest units and final delivery of the finalized documents have changed, but everyone will feel: H5 design is more like a living thing, not only the pages of each corner with a response, and even the work of the linear space can interact with each other. Therefore, the designer to break one-dimensional thinking state, from a simple visual dimension to the user interface and then the space and time and other objective environmental factors are taken into account, summed up: linear thinking to Divergent thinking.

Let's look at the overall knowledge system of interactive designers:

It is not difficult to draw a small part of the visual design, the former needs analysis and process design often have their own dedicated positions to be responsible for, the remaining prototype parts and usability testing will be the work of the designer and the intersection, even by the graphic design together. If you accept this challenge, you should not only focus on the components and layers on the canvas. Design work completed (only half completed), also need to cut the map-optimize the material-online platform reset to the material-animation settings-trigger Event Settings-page relationship adjustment-Auxiliary elements (logo interactive cue music) settings and no less than dozens of online test optimization. The overall workload is much larger than the simple graphic design, skilled designers can be completed in 1-2 days design and all the dynamic pin interaction, with not only hand speed and software proficiency, as well as the overall flow in the chest. For example: the difference between the slide and the ordinary original in the cut diagram, animation production where the use of a slide show where the sequence frame, the trigger of the circular animation is not unreasonable? These topics are discussed every day, and in these nuances, the distance between users is gradually opened.

Often see some young designer Spit: The project manager threw a document over, inhuman request in two days time to make a H5 and so on. In fact, personally feel that in addition to the surge in workload this may not be a bad thing, at least to show that the manager trusts you, you can show their execution and reading ability, attention to the production process of the necessary nodes and project leaders to report and timely communication. The importance of communication should not be neglected in the production of H5, and the designers are urged to use various tools to express their ideas. Here are the recommended gadgets, Axuremindmanage PPT Keynote and the paper and pens in our hands.

　　Ability to understand and coordinate the whole

The above several famous cases, show point different performance style, disassemble the elements of a single work is very coordinated, small to icon, the placement of strokes have been considered is to redesign, and finally achieve a vision of a system. Here the norms of unity and different from the VI and the Absolute unity of the album, Image: There is no need to merely pixels for a corner in the app or to make a catalog over and over line spacing and Pantone color values, because our internet spreads more fast food, most users don't notice the difference that only the performer can see. And that doesn't mean that designers can cut corners, although the time spent on a single page is reduced, the overall relevance of H5 's work can make us pay a global price for negligence on a page, like using a third-party platform with a 0 code base to make H5, if there is insufficient understanding of some basic knowledge, To the later stage will appear various conditions, these are designers in the transition to face.

Like said H5 business is a cube, the visual part of the cube is one side, then marketing planning, user experience, special effects production, copy carving, media delivery, etc. constitute the other five sides of the cube, the more solid work to do the more full, the more close to the advertising target. The communication of each link is not smooth and fragmented, then can associate to six side experience is only the superficial showy, of course showy always better than only one or two side of the paper son. In retrospect, the interactive designer's knowledge system, such as the small partners are not satisfied with the face of graphic design, accustomed to use the perspective of interactive designers to consider each page, then the overall work and even our career path can be added points.

So the question, how to use the interactive design theory system to measure the quality of H5 works, here are a few common standards for everyone to refer to: The project core to convey is obscure or clear, whether the visual center is direct enough to understand whether the graphic elements will be ambiguous or discomfort; whether the interaction settings can be used conveniently If not smoothly whether the necessary explanations, whether the animation effects will be stuck in the lag, the compatibility of various platforms test ... Multi-station in the user's perspective to examine the work, many problems in the early period can be circumvented. Designers can also strengthen their theoretical study through various channels, for example, at least read through the iOS HMI Guide. ~ios's system does have its own unique considerations and devil details, here is not the apotheosis of Apple, no matter how the Apple small to store a showcase large to the product launch mode has been copied no less than 100 times ah 100 times.

Have to face the current situation, in fact, in the requirements analysis of the formulation phase may involve the interaction, that is, the interaction of the predecessor, more regrettably, the general company Pm/am this stage rarely let designers participate in, resulting in communication between the implementation of the fault. However, in the era of opportunities and challenges in the Internet, the role of designers gradually return to the standard, as long as willing to do, the opportunity is around you.