Experience Sharing: Web Design and Refactoring Those Things

As a designer, the most concern may be the layout is good or not, the picture is not beautiful, the visual hyun hyun, we try to do the most beautiful design draft, and then put a huge PSD file directly to the reconstruction , Everyone knows this time refactoring is hating you: I rub, such a big PSD, but also have wooden open! Originally opened a variety of browser editor god horse also open a large PSD file, the machine to card dead! ! ! Probably stuck card machine, open it, I go, hundreds of layers! Well, hundreds of layers have no problem, why I obviously drag the button, but a variety of even the layers of dragged into, and I simply can not find the layer! !

Look at what horrible things, but maybe we can change this kind of complaint simply by managing the PSD layer.

For layer management, this may be easier for everyone to ignore the operating habits, especially for beginners or newcomers, some people may say: What is worth mentioning? ! Good design draft on the line, the rest to the reconstruction! We look at the programmer's well-organized code, standardized documentation, that layer naming is not something we want to do - in fact, the following are several reasons:
1) The use of PSD groups: designers themselves, customers, engineering and technical personnel (programmers), new take over and so on.
2) PSD layer too much, then remember, over time easy to forget.
3) The project design process inevitably needs to change, modify the recommendations, leading to the design draft need to be repeatedly modified, messy layer structure is not to make you more add a worry?
4) As a http://www.aliyun.com/zixun/aggregation/7215.html "> web page remodeling workers will face your PSD file directly, disordered layers and naming are crazy ....

It seems really good management layer.

Words before looking at this picture, feel together under such a layer panel, PS: the characters inside (stage name: Chairman), photos at the annual meeting. This photo is very promising wood, there are the following small urine scared Q.

Switch, look here. Beauty will not explain. . .

Saying we have to manage the layer, a reasonable naming is the key. Look under the name and layer arrangement:

Look at a case, the design draft and the name of the HTML page corresponding to the location map. You can look at the left side of the code several nodes, made of color to distinguish between the color corresponding to the right module, the outermost wrapper is the jacket of this page, the corresponding PSD is the entire page; Next purple (header) Corresponds to the PSD on the head (LOGO + navigation); Similarly: green, yellow. Can be found in the basic order from top to bottom, of course, there are exceptions, not to mention here. See an intuitive feeling on it.

I do not like the link layer myself (the red area on the right), I prefer to group (left), according to each function to quickly build group, if you like it you use it ~ ~

Just read the HTML code and the corresponding PSD simple case, we may find the law, in order to facilitate the operation, it is recommended to name the module name, the order of the layers and the elements on the page to see the order: from top to bottom, from the left To the right.

Someone may ask: PSD layer name is casually written? In fact, not the name is referenced to the high-level language programming syntax to carry out, individuals prefer to use camel rules or underline rules, if you have to be divided, then I prefer the camel rules.

Except for the first lowercase letter of the first logical point, the first letter of the other logical points is capitalized, see the example.

Web page commonly used module name:

Direct view of the map and the corresponding Chinese and English name: the entire page (wrap / wrapper)

Header

The main navigation (mainNav), if the entire page only one navigation "nav (nav)"

Footer, or called the copyright (footer)

BreadCrumb, usually used to bread crumbs, in fact, its origins is a story, the specific story will not speak, Baidu yourself.

Search

Login ... and so on.

Understand the layer naming, maybe your PSD layer has hundreds, the layer management management.

1) What is modular
2) modular call, reuse
3) Efficiency and output

Modular definition, each module to complete a specific sub-function, all the modules assembled in some way, as a whole, to complete the functions required by the entire system. In the system structure, the module is a unit that can be combined, disassembled and replaced.
Looks like the text is a bit complicated, modular programming language inside the word, we can simplify here: According to the visual function block to create a PSD layer group, similar to the front of the header (header), login (login), search (search )Wait.

Modular set up, you can use each page as a common component, it is not necessary to re-design the same layer again, drag the packet directly to it.
Modular portal project in the official website of the design is particularly important, especially markedly efficient, there are mentioned later.

Although we named the layer, it will naturally delay some of the design time, some people may feel less efficient thing? ! On my own, I think this is a matter of designer's professional habits, and on the other hand it does not delay you from improving efficiency, and you find it handy when it comes to designing large portals.

Personal experience, when you start to pay attention to your PSD layer structure, in fact, the layer panel in the end what is not the content of each layer, so I prefer to do so:
In the layer options where the layer preview to "no", so the layer panel on the fresh, and some are structures at a glance.

Return to the topic: give a few pears. We look at the left and right sides of the content and layer changes: The basic rules are modular naming, from top to bottom, from left to right.

The same is true of the previous case.

Said in front of smart objects in large-scale web site design will greatly enhance the efficiency, if you do not believe can continue to see:

Simply put, a smart object will not appear distorted jagged and fuzzy deformation repeatedly zooming, of course, the premise is to enlarge the size of not to exceed the size of the converted to smart objects before the size.

Many large-scale official website design is the need for repeated use of the module, the usual cooking is a few to change a few, non-stop copy, drag and drop, non-stop copy style, paste style. You are tired . .
Can Weapon: In the same page if there are many elements are the same, you can put this element into a smart object, if there are changes in the layer double-click on the smart object into the editor to save it on the page The type of elements are changed over. If the same element is not on a page, you can use the "replace content" command, see the figure below:

Public modules use smart objects, batch editing, batch replacement, efficient and fast. Right-click the layer where the smart object is located, select "Replace Contents" in the pop-up menu, and replace the PSB file pre-stored in your project directory with the PSD. Here it should be noted that your stored psb file needs to be placed in your Project directory, because the default double-click smart object, open only the psb file in the temporary storage, not under your project psb file.

In addition, the material used to do when the display of smart objects can also be very convenient, will not undermine the original large print in the design can also be very convenient.

Metaphor of this example: the need to WSD LOGO in accordance with the relationship between the perspective of the bag to adjust the size of the angle, usually we are directly that a map affixed and then adjust the tone, and finally adjusted well. The result for the bag, is another direction of perspective, bitter forced we have to adjust the LOGO according to the perspective of the new bag, tired you ah. . .

In fact, the LOGO above is already a smart object, as shown above, we double-click the next layer to see:

This is the original LOGO file, intact, human children.

There is also a place to use smart objects is also very efficient, when the client often need to output N icon size, this is a quick way, the principle with just the same. Of course, such a zoom icon in the fineness is not purely handmade well. Only for a thought Kazakhstan.

To sum up: smart objects in multi-page, multi-complex public module, VI material packaging display will significantly improve efficiency.

Another topic: Refactoring, and sometimes designers complain about the page constantly Aberdeen pages do not look good on the design draft, not the spacing is the spacing is small, not the small font is the font is large, not Picture compression is too powerful to cut the root picture, or animation is not what we want effect. . . . , The more I can not blame them all, we also have a responsibility, after all, they are not a design, but my personal point of view is that reconstruction requires some PS skills or design theory, when designers do not have time to walk the page can output relatively high Quality page.

Dozens of browsers, large and small, are commonly available in the market. Since each browser renders pages differently, it is not the same page that is seen on all browsers. I use it roughly 90% of the degree of reduction to measure it, there may be some designers require a 100% reduction refactoring, then I said that reconstruction rather bitter force to ensure that the page 90% consistent with the design draft, there are a lot of work requires designers and heavy Structured participation, metaphor designers in the case of time to make good labeling, how many pixels in what place, with what color value, the height is how much the label on the page.

Reconstruction is not concerned about the code itself, you can also jump out of the code to see the visual presentation layer, if you really can not see a few pixels, you can take a screenshot on the PSD contrast, this method is very easy to find the problem, the cost is relatively low.

In the form of web pages, pictures and icons are almost all single, loading a picture is an http request, the server will read once, frequent reading plus a large number of users continue to visit, it is likely to make the server withstand Can not afford to hang up. Therefore, the need to reduce HTTP requests as much as possible, merging the background is a very effective way.
Usually the output of the background image quality percentage can be adjusted at 60-80%, for the more important icon, the picture can be adjusted to 100% output high quality pictures.
During the process of loading the webpage, or because the speed of the internet is not loaded for a moment, the short-time blank appears. Therefore, it is recommended to define a predefined background color for the area so as to prompt the user that there is content in the area.
Stop the mouse on the picture, the appropriate title or alt add, to facilitate the user in the picture failed to load when you can know what this picture is used for.
On-demand loading, asynchronous loading, similar to Apple's official website used in many places asynchronous loading, the benefit is to increase the loading speed of the main page, the user needs to load the other attachment page.
Less with CSS filters, and now should be used by very few people, are basically using elegant downgrade or prompt users to upgrade the browser.
Site before the line compression CSS and JS files, remember to remember the backup.

I like to use the word, although I did not achieve the code elegant, elegant code also need continuous efforts, some of the details enough for experts to see if you have a professional accomplishment, here is not foolhardy, or look at the picture it ~ ~ ~~~~.

Source: http://mxd.tencent.com/