WEBAPP design elements

Since last year in charge of the company WebApp product and design work, the recent overall changed two versions, but also accumulated a number of practical experience. In the process of continuous learning, found that for WebApp can be directly used in the project on the material is more fragmented, summarized here, for the first WebApp designers in the actual project reference.

Design Size: Based on width 320px

Generally you see the mobile design size reference is based on iOS or Android, is absolutely not directly used in the design of WebApp. And the usual PS play is not suitable for viewing webapp effects.

WebApp is essentially a Web page, and its size (especially its width) is dependent on each phone's browser. If directly using the native app size design and cut to the front-end students, will cause the picture in the browser is too large, with the design of the manuscript is very large. Front-end students can also be forced to adjust the size of the picture, but may cause the image compression stretching, so designers need to apply to the size of the mobile browser material.

Introduce the actual size of my phone's browser (the height will vary slightly depending on the browser)

Combined with the width above, in the design of the webapp, it is necessary to make the actual design according to the 320px width, and give the suitable material.

It is recommended to use Webflow as a tool to view the effects of WebApp in a browser, rather than PS Play. The truth is the same, WebApp is different from Nativeapp.

* More mobile browser width problems can refer to this article: "Mobile phone version of the page width of the issue of the discussion"

Design style: Neutral, not imitation Nativeapp

This is only my personal opinion (the front-end students actually coding also made such suggestions). WebApp can be run in a variety of systems, imagine an Android browser on a IOS7-style web page, feel very vainly disobey (here do not spit all kinds of scrambled app design). So try to stay neutral and do the design that fits the product's positioning.

Thanks to Google design, the cross-platform WebApp has a more authoritative reference for designing standards. Here I agree with Novadng classmate for Material design translation: "Original quality", rather than what material design, interested can see his on Android day ppt "Designing Material".

Dynamic Compatibility: Android is a compatibility killer

The dynamic effect of gorgeous Li is no longer the patent of iOS, all kinds of JS can achieve the same effect. Note that some JS in Android do not get very good support.

I used to do some kind of effect when the first look for the implementation of the scheme for the front-end classmate reference. Suggest to do non-original action, first go to look for demo, run on the phone to see, if it is on GitHub, there will generally be compatibility tips. If there is a poor compatibility problem, designers need to balance the weight of the whole and the details, in the absence of a good solution, you need to give up some of the dynamic effect.

For example, one of the most recently done effects used headroom.js, which is used for tab scrolling to disappear up and scroll up. This use of the requestanimationframe, basically has abandoned most of the Android browser. Fortunately finally found the solution, let the high version of the Android effect can be achieved, the lower version can only give up not implemented.

Iconfont: Save time and effort, good expansibility

Previously implemented a variety of small icon display will use Sprite chart, if the icon changes, you need to modify the designer, more trouble. With Iconfont on a one-time fix, the icon into a font, do not need to load additional images, to solve the image enlargement to reduce the problem of blurring, color modification is just a change in value.

According to my actual use of experience, find iconfont best to go to Ali's www.iconfont.cn/, and there is also a tutorial to make Iconfont, if the first contact SVG, Iconfont and the like are introduced here is very clear. Do Iconfont best to http://icomoon.io/, the free version has been able to meet the needs of ordinary people, and upload the download is very stable (Ali of that often upload a problem, very headache). *icomoon free version of your Iconfont data is in the browser cache, if you change the computer or empty the cache, Iconfont will disappear.

Iconfont also has shortcomings, such as the low version of Android compatibility is not very good, unable to do colorful icon. So if there is a special need, the designer can do the picture icon alone, and the general icon suggested to make Iconfont.

Image size: Guarantee the clarity, the smaller the better

This is not just a matter for webapp to pay attention to, mobile apps need attention. If you use mobile phone traffic, open a Web page, pictures relatively large loading speed is relatively slow and very consumption of traffic. The front-end or server will compress the image, but designers need to be aware of it. And to explain the unnecessary, minimize the use of images, such as a circle or quadrilateral, the front end can be implemented, the code implementation will make the website open faster.

I used to compress the image of the tool has compress PNG, it can switch compressed PNG or JPEG, but also have a comparison of the original picture and compression, in the designer's own acceptable degree, choose the appropriate compression ratio.

Source: UI China

WEBAPP design elements