Page designer page design process should also pay attention to the page performance

What are some of the issues that a web designer should consider when making a specific design? Business, product, information structure, interaction, vision ... Don't forget the page performance. I advocate in fact has always been a small workshop like the entrepreneurial Team collaborative development model, we can communicate quickly, even if the designer did not pay attention to the page performance of this point, the front-end students can quickly remind him, because they are always together. And now in the standard project flow, we have multiplied the cost of communication, unless it is isolated from the retreat (even if the retreat, the front-end students are most likely to accompany the development), the front-end students in the page design process is difficult to communicate with the designer page performance problems.

Page performance is not just a problem for front-end students

The importance of page performance no longer repeat, personally, I can endure a Web site to load the DOM and CSS time is 5 seconds, or will not hesitate to close the Web page. The above wordy for half a day, actually just want to illustrate a problem, designers need to consider page performance. In fact, designers are a "generalist" role. In the traditional design field, most design masters are proficient in several industries, such as Colani. In the process of design fully take into account a variety of factors, this is the difficulty of design, but also the key to the achievement of a good design. In the past, the web Designer to do psd artwork, throw to the front-end engineers to do demo of the era has passed, because the Internet progress, the user progress.

The application of native controls--on page performance, designers should first consider

The native control of the browser has its drawbacks: the appearance of IE is difficult to control; it cannot support richer and more complex interactions, and so on, but it is very compatible with browsers, where users need to laboriously fill out a form, native controls can improve performance compared to non-native controls, allowing users to operate smoothly. This is why on some banks ' websites or clients, a native select is used instead of many supporting complex interactive controls, such as choosing a bank. In the premise of meeting the design requirements, the primary control will make your page faster, compatibility better, your front-end students will be a lot less complaining. Designers should understand that when writing a control in a specific application, it's not just a matter of showing what the user can do, it's a lot to do: validation, security, compatibility, framework, etc. Here can see the Tenpay payment page of the JS request number, will scare you jump.

I encountered a good control interaction design when I was using the Merchant Bank's Professional Edition client. The requirement is to fill in the bank card's opening branch, give the user an input let him to fill out clearly is not reliable. CMB's practice is to first give a search box, let the user input keywords, such as I live in West L. District, I entered the West Lake two words, the page refreshed after the return of a list of results, from the user to select a branch, so the results of the search filter, only about 10, easy to identify. And I learned this kind of operation only two times, and the extra benefit is that the page reacts fairly quickly during the operation. And when I chose the Bank branch on other sites, encountered provinces and cities, and then select Branch linkage control, input + drop-down list mixed control, select the time can be convenient and correct selection, but I clicked the control when the corresponding speed but there is a delay, the heart slightly uncomfortable, this is the difference. For an application comparison of native controls and complex controls, I can see an old article: Easy-to-use and lightweight interactive design.

As the HTML5 standards become more perfect, the new native controls will meet more requirements, such as the external data source XML, browser built-in different data types of validation, which will greatly reduce the volume of JS. This, of course, relies on a further decline in domestic IE6 market share (currently 60%). It is believed that some lightweight, non-native controls will slowly be incorporated into HTML standards, such as date controls that have plagued many people.

The frame of the page--the designer can also help the front

I don't entirely agree that designers have to understand the code, which should vary from person to person. But a good web designer must be considered for the page frame, as small as a control on a page, large to a project. This is the accumulation of experience, not relying on the understanding of the code, and design principles of consistency is closely related. Not only less than two pictures, less two lines of code, fully consider the design of CSS framework, component reuse, image segmentation and integration, these can improve the performance of the page more than one grade, while ensuring a sense of design.

I feel in the daily work and learning, we discussed design design page performance is very few times, and it is the Project Designer and front-end the main differences, in order to eliminate this divergence, the best way is to improve mutual understanding. I have in the company to share the front-end knowledge of the designer, to the front-end to share Photoshop knowledge, but also for everyone to make progress to better products and applications. In fact, in their own blog practice to improve the performance of the various methods of the page, is quite light and effective, the practice of common sense has been transformed and refined, become knowledge, this I very much agree with the White crow and thousand birds view.

Http://www.shimuuu.com/blog/web-designer-should-focus-on-page-speed