To teach you the Quick Design feature draft

The topic is usually to require timeliness, so to do the project first pay attention to speed, then how can we quickly achieve a special draft? Let's discuss it together.

Type of topic:

1, the type of the model (change is only the head map, unchanged is the content of the pattern), as shown in the following figure:

2, free and unrestrained type (change is not only the head map, content rendering is also more casual), as shown in the following figure:

3, with the play type (only one head figure), as shown in the following figure: note: ①

Second, the principle of philosophy:

1. Reuse principle:

As shown in the figure above, the module will appear in the Four seasons, and we need to encapsulate this module for retention. Commonly used module classification, in order to reuse later, save the workload to improve work efficiency.

2, abandon the principle:

As much as possible application of CSS3 technology, this can avoid the use of too many pictures affect the page open speed, but also reduce the development of flash, of course, the disadvantage is that it will cause the page in the larger size of the CSS, low version of the browser display poor results;

As shown in the figure above, through CSS differentiation, the high version of the browser display, such as the left image, the lower version of the browser as shown on the right.

3, the time principle:

Usually needs are a series of, such as: micro-photography spring and autumn, micro-fiction 123, the end of the major holiday activities series;

This requires us to advance the ability to anticipate, early communication with the need to confirm the time, as soon as possible personnel technical reserves.

Third, the construction plan:

The above types of topics, the production process are similar, the topic and products are the same, most are divided by block, but the topic more visual impact, layout more casual.

General topics, building steps are usually as follows:

1, Planning classification:

Planning: Get the design draft from top to bottom after browsing, browsing can be a preliminary plan for this page, we usually plan to grid-like, as shown in the following figure:

Category: Special topics are built through the background, the background library provides a part of the package of good modules, so first find the background of the existing modules, these modules directly in the background edit the release;

As shown in the following illustration: (More than 20 public modules, including: publishers, feeds, picture lists (120, 180), attention, focus map, video, etc.)

2. Module Construction:

Public to pick out, began to build ' unconventional ' modules, special modules are specific topics specific content, this part of the need for page engineers to complete;

The principle of making a module requires the code to be as low coupled as possible, cohesion (the elements in the page as relatively independent but interconnected small parts, imagine that these small parts can be dragged anywhere in the page without affecting the normal operation of its internal elements); The writing principle of module CSS requires the beginning of the special logo of this topic, For example: Teachers ' Day – the corresponding online domain name is teacher,css preferably with t or surrogate, such as. t_top{} or. teacher__top{}, in order to circumvent the risk of CSS naming conflicts;

There are some things to focus on when building a project (note: ②),

3. Test Delivery:

After the module was built, the modules were pieced together, become a molded page, follow up the delivery of the edited content; the page delivered to the editor for the content of the Add, the page after the delivery to follow up, because not all editors are very understanding of the code, so to advance the risk control, such as: Comment Well, the code to be streamlined.

4, On-line maintenance:

Edit the content after the final line before the audit, optimize the details, and design draft screenshot to the pixel, no problem can be online promotion;

Explain：

Note: ① with the use of fast construction:

In many cases, the designer's schedule does not provide an entire draft plan, can only provide a head map, this will be the page construction to help edit the quick completion of a topic, according to the Head map page background color, content area background color, title background color and title text color, text link color, text color, etc., usually according to the previous designer's design concept , follow the following color order without a lot of deviation:

Title Background color > Content area Background color > page background color;

Main link color > Secondary link color > title text color;

Text color (usually gray for text).

According to the above ideas, quickly set up the topic as shown in the following figure:

Note: There are several points that need to be taken into account in the ② production project:

Title bar Processing:

1, many titles are reusable, here to do flexible, it is best to do the adaptive width;

2, to determine whether the title text needs to be followed by continuous changes, if necessary to constantly modify to be made into movable type;

Image processing:

1), the head chart:

The header graph advocates the application of the JPG format implementation (note: ②-①),

Although the picture as far as possible to control the size, but because the topic of the cycle and access restrictions, and then add designers cost a lot of painstaking care of the head figure can not because of the quality of the impact of beauty, the general principle is firework export quality 80~90 better, Photoshop Export quality for 70~80 better.

Usually, a pixel is not particularly high in the picture Photoshop70 the quality is approximately equal to Firework85,

The quality of PHOTOSHOP80 is approximately equal to Firework90 (depending on the size of the picture export).

2), Background:

Content background recommended with a solid color, if the solid color can not meet the recommendations as far as possible with PNG background;

3), Icon and button:

Icon and button as far as possible using CSS sprites technology, so not only can reduce the number of pictures, reduce request book, but also facilitate the subsequent unified management.

Icon,button avoid GIF, why not GIF (note: ②-②), promote the application of PNG format implementation (note: ②-③),

Note：

②–①jpg features: JPG Advantages: Photographic works or realistic works support advanced compression, using a variable compression ratio can control file size, support interleaving (for asymptotically jpg files). Broad support for Internet standards. Because of its small size, JPG is used to store and transmit photos in the World Wide web; JPG Disadvantage: lossy compression can degrade the quality of the original image data. When you edit and save a JPG file, JPG blends the quality of the original picture data down. This decline is cumulative. JPG does not apply to simpler pictures with very little color, large areas of similar color, or sharp differences in brightness.

②-②gif Features: Streaming read/write performance, successive approximation display, transparency, lossless compression and so on, GIF unique features: In a GIF file can be stored in a number of color images, if stored in a file of multiple image data read out and displayed to the screen, is one of the simplest animation, GIF disadvantage: Only 256 colors can be displayed, too much color will show poor results.

②-③png features: PNG retains the characteristics of GIF, as well as GIF does not feature: Support True color image, PNG disadvantage: Do not support animation, IE6 does not support true color transparency.

Iv. Summary:

When the time is tight, the gold ratio of the production project time should be:

Planning Classification: Module Building: Puzzle page: Test online

1:4:1:2

If: estimated need 8 hours to complete, the best solution is module classification 1 hours, build 4 hours, spell page 1 hours, test 2 hours, the first 6 hours to complete the page can be delivered to edit the content added, in the editing add content while the test can be synchronized implementation.

The application of the above points, whether concise or complex topics can easily be built.

Sometimes understanding the topic will have the wrong idea: the topic is so the matter, no one to see, coping with the past, in fact, a good topic is the beginning of marketing, cooperation resources interchange entrance;