New ideas for web rendering design_html/css_WEB-ITnose

In the process of web design, renderings are usually made through Photoshop. There are dozens or hundreds of layers and various PS effects to create the style effect of the web page. , and it is also easy to cut pictures into blocks or get certain picture materials directly from it.

But in the current design of responsive websites and the content uses fluid layout, it is necessary to make a PS rendering corresponding to each situation, which is a huge amount of work and seems unrealistic. In addition, when you need to modify the size or background of an element in a web page, manually modifying PS renderings is a nightmare.

This leads to new thinking about the design process and the tools used. Can it be as close to and cover various real-life usage environments as possible, while being easy to modify? The answer is to abandon the original method of making renderings in PS, and instead use HTML and CSS to build real basic web page effects, and finally obtain the renderings in the form of screenshots to display to customers. When customers make changes to a certain place, it will be very easy for you to go back and implement the changes. Maybe you only need to modify one or two lines of code in CSS. If you use less, sometimes you only need to change the value of a variable to achieve the desired result. desired effect. And these are unimaginable in the modification of traditional Photoshop renderings.

Perhaps you will criticize this for confusing style design with front-end code construction functions? In fact, HTML, CSS, etc. are just tools for making renderings. The outline of the website effect is of course similar before and after, but this is not the final front-end code and is only used for basic effect display. In the end, the code implemented on the front end of the website will also be related to the browser compatibility of the background output. It can be said that they are completely different things.

This puts higher requirements on web designers to learn basic front-end languages ​​without Photoshop. In the new era, web design is no longer able to specialize in graphics and images like graphic design. It must also be combined with Web technology to make the design closer to reality and reduce unnecessary duplication of work. Perhaps Photoshop is still the best tool for fixed layout design, but with the wave of fluid layout responsive design coming, only by breaking through the traditional design and combining it with Web technology can we stay ahead and win in the future.