and Han Xie Dong learned the web design drip

After learning a period of time with Han's web page design, feel very necessary to learn the things they have summed up, on the one hand to further consolidate knowledge, on the other hand, and share, the following is my learning experience.

First, the web design as fun, not just work.

This is actually said to be interested in, as a web designer, must be interested in web design, you can be painful and happy, or busy every day to cope with the task of customer delivery, there is only pain. Han is still in the customer to do a lot of design at the same time, there is nothing to draw a pig head or gas tank what, in fact, is a playful attitude. Why do things are very tiring, he also want to toss himself? interested in Bai! do-it-Yourself design is very cool, quite flashy things on the one hand will have a sense of achievement, on the other hand also exercise their own design capabilities, so if we are interested in web design and words, plus qinxuekulian, progress must be very fast.

Second, web design is actually the UI, so to be used as a UI concept to do the design

Han's works above is the elements of the screenshot, I believe that many people are interested in this cool light effect to copy. But in fact, as Han teaches you, the technology is not difficult to achieve, the key is to understand the light effect in place. Where is the high light, where is the shadow, where is the reflection to be able to take into account. Take the second picture login form, the brightest part of the top left and right side of the light is white, which is a level, so since there is such a bright light, there must be an outward-spreading halo around the light, which is another layer, So you can see the purple around these high lights is lighter than the purple in the distance, so if you take these things into account and master the techniques of implementation, the things you do should be very delicate and beautiful. These effects can only be achieved by adjusting the parameters of the layer style, if we just memorize the parameters of several layer styles, or save a bunch of layer styles in Photoshop without really understanding it, there is no improvement. Why does the teacher Han do this kind of light effect very much? I think it's a lot to do with the UI design he started with, and the UI has a lot to do with the structure and the light effect, which is much more complicated than the elements on the page. The following is the South Korean teacher recently designed the gas tank icon, we can carefully observe, carefully consider the high light and shadow, why is the high light and shadow placed here? Why is this shape? After that, the light effect on the page element looks simpler. So the practicing of this kind of graphic design is a very good way to improve the design ability.

Another important point in web design with the concept of UI is the details. As Ningbo's excellent designer, Xin, said in a 68Design interview, "I'll take a button to explain what is the button detail?" made the color gradient, made the glass texture of the high light, what else do you need? Now made three faces: light, dark, high light. But think about it: highlights may have more than one high light, can have multiple light sources, can have many high light. The dark part is not only dark, it may also have reflective, reflective objects, as well as reflected objects above also have high light and so on. Put these in a strong display of this button, this time, with the original button compared to see the details. "To make the design look beautiful, the details are a very important aspect of the presentation." Many designers in the creation of the details of the page elements always feel that there is no way, do not know what to do, always be criticized for the design of rough, because the idea is not deep enough to see a deeper layer of things, Xin teacher summed up these few words to give us a maze of miju.

As for the details of web design, here I would like to highlight the two web design sites that I have frequently visited, one of which is Premiumpixels, the UK's famous web designer Orman Clark's personal site, Orman Clark's main focus of this site is the design of WordPress theme, he designed the WordPress theme Although it seems that the interface is not as rich as the enterprise station, the effect of dazzling, but careful observation, the details are impeccable. In addition, Orman Clark will often share the PSD files that they have designed for everyone to download. So this site has a lot of PSD source files, and every detail of the design is very fastidious. So by studying the source files, we can quickly learn the master's skills.

Another outstanding detail of the site is dribbble, this is a good designer to display the work of the platform, almost every detail of the design is impeccable, careful analysis of the outstanding works, we can all in the creative, color, more important is the details of a lot of improvement. Before I picked out the dribbble on the 10 navigation design for a detailed analysis, wrote an article "10 Exquisite navigation menu appreciation and reviews", we can refer to. Here is the design that I picked up from the dribbble, and you can see the perfect performance of these works in detail.