A super practical god-level cloud design artifact!

Artifact 1: The magic weapon of interface design and collaboration

https://www.figma.com

Figma, the end of 2015 An interface design collaboration artifact that has begun to emerge. It has powerful graphic design functions, supports multi-person editing and real-time comments, and can also save historical versions at will. It can be called Google Docs in the design world. Just take a few operation animations to give you a feel -

Some people on the Internet say that it is like Photoshop, but in fact it does not have image processing functions, so it is really worth it. On the contrary, Adobe Illustrator and Sketch both support complex anchor point changes - but when we download AI, we need close to 1G of memory, right? Sketch only supports Mac system!

If you want to design a mobile advertising interface, it is highly recommended to try it. It can be exported to jpg, png, svg and other formats.

In addition, cloud collaboration for pure design drafts includes domestic whiteboards and foreign Red Pens. You can upload your page design draft and send the link to your boss & colleagues for real-time comments or even complaints!

Artifact 2: Generate static demonstration image in one second

https://placeit.net/

With Place it, a tool that generates various static page demonstrations, if you want to make the kind of demonstration pictures that hold a mobile phone or display an interface on a computer, you don’t have to look for material P pictures everywhere. Yes, the operation instructions are as follows -

##Select a template-->Upload the image-->Capture the image size-->Done!

Each demonstration template comes with a standard size. You can also process the size in PS and other software before uploading to instantly generate a variety of people holding iPhones, iMacs, and driving Macbooks. Pictures to demonstrate the static image effect of your design.

Artifact 3: First-class H5 design reference website

http://www.imdb. com/?ref_=nv_home

You never would have thought that IMDb, where we often read movie rating information, is actually an artifact that we can use to refer to composition and design style. ! Those posters are by no means just promotional videos, many of them are the artistic crystallization of world-class designers, which are perfect as reference for composition and design style.

Looking at the animation above that I carefully made to restore the design framework, will you instantly feel that you have wasted a lot of opportunities to learn from the master's style? The proportions of movie promotional posters on IMDb are similar to those of mobile pages, which can be used as an excellent reference source for mobile page design.

Similarly, the same is true for the domestic Douban Movie Network. You can also learn while choosing a movie.

Artifact 4: The most complete collection of codes for visual explosion

http://codepen.io/

If you have a certain programming foundation and know how to insert code into mobile pages/H5, you can also refer to CODEPEN, an animation source code website. There are many visually explosive and stunning motion effects, and most of them come with HTML, CSS, and js source codes for everyone to use.

In addition, if you want to do large-screen mobile advertising, the choice and reference of animation effects should be more advanced. Here is a website that specializes in collecting PC-side visual animation cases. Website – Codrops.

http://tympanus.net/codrops/

It has a lot of visual and interactive animations that can be previewed online. It is effective, and each case is followed by the corresponding code, and the specific application varies from person to person.

Artifact 5: The most complete collection of H5 sound effects

http://www.gamepix.com/blog/the-big-list-of- sound-and-music-assets-for-your-html5-game/

GAMEPIX is a foreign HTML5 game website that has compiled a super comprehensive sound effect Website collection, used for downloading game background music or sound effects, but is actually suitable for most mobile H5 pages. It is very rich, ranging from a few seconds of "ding dong" sound effects, a dozen seconds of sound effects for transitions between pages, to a few minutes of BGM.

This collection is divided into three types: FREE (free), FREE/PAID (half free and half paid), and PAID (paid). The free ones are still very useful.

But if the sound effects you need are mainly for games, then it is recommended that you come to Open Game Art to find them. It is updated quickly. What’s more valuable is that the audio formats are relatively complete, and most of them are uploaded by enthusiastic netizens.

http://opengameart.org

Artifact 6: The most complete collection of interactive effects

http://www. elasticode.com/allapps.php

#If you want to refer to various rich interactive effects on H5, you can use Elasticode. It has many interactive effects for you to learn from, including button clicks, page switching/jumping, text, image material appearance/disappearance, element transformation, etc.

[Advantages] These animation effects focus on the interaction of user experience, and you can directly feel the interaction process.

Artifact 7: Professional color matching, find a master

https://coolors.co/app

Professional color matching, Adobe Kuler is more commonly used in China. The color palette is convenient and there are many solutions. But if your English level is passable, you can try Coolors. It has a powerful color scheme and supports uploading pictures to choose colors.

It also has an advantage: click "Generate" and you will get a set of randomly recommended color schemes. You can drag and drop to change the color positions, bring up a list of similar color levels, and adjust the tone of the overall scheme. , saturation, brightness, warmth and coldness.

In addition, you can also use the Material palette, an automatic color matching website developed by Google, to check two main colors and automatically generate a color list with similar color levels and high coordination.

https://www.materialpalette.com

Artifact 8: The strongest compression of design materials

http://zhitu.isux.us/

For mobile page material compression, we recommend the Zhitu image compression tool developed by Tencent’s ISUX front-end team. Compared with the well-known tinypng compression tool, the compression effect and efficiency will be relatively optimized (note: the upper limit of uploaded files is 5MB).

[Advantages] It can be converted to webp format pictures (compared to PNG and JPEG, it can reduce the volume by about one-third without reducing the picture quality). Control the image output quality, and you can drag the setting bar to compare the effects before and after compression.

Artifact 9: The most convenient H5 case search engine

http://www.199case.com/

In terms of design inspiration and creative reference for mobile pages, 199case is recommended. Here is a specific classification of H5 - industry, form, festival, style, etc., so that we can better Find the H5 type you want to learn from easily and accurately.

The designer wants to find some reference cases. Although there are many materials on the Internet, they are incomplete and unsystematic. From this, we can see a complete and vivid design, from loading dynamic effects to interaction to Every detail of the sharing guide is worth learning from.

Artifact 10: Mobile page H5 production tool

http://www.ih5.cn

Functions and services continue to maintain the highest level in the market. H5 works produced using iH5 have the advantages of cross-platform, rapid iteration, continuous delivery, low development cost, developed open source ecosystem, open data interaction, and easy promotion.

The above is the detailed content of A super practical god-level cloud design artifact!. For more information, please follow other related articles on the PHP Chinese website!