New Trends in web design: CSS3, fonts, and icons

Work flow needs to be improved

So what does that mean? It's not possible to design each of these devices. Instead, we need to improve our workflow.

Our design process and development process need to be iterative, we should use more adaptable technology, elements.

　　1.css3

Although CSS3 just came out soon, in fact, CSS3 in 1999 began to make, spent 14 years!

The previous version of the CSS is not the same, CSS3 divided into several modules-2012 years released more than 50 modules, there are 4 particularly recommended, after a lot of discussion, testing, these 4 can be said to have been very perfect. The 4 types of modules recommended by the consortium are:

Media Queries (press query)

Namespaces (name space)

Selectors (Level 3) (selector)

Colour (color)

Other modules, such as "Background and Borders", "Multi-column Layout" and "flexible box Layout" as "candidate recommendations", are also noteworthy.

There are also some examples of "CSS animations (CSS dynamic)", "CSS Transforms (CSS conversion)" and "CSS filter effects (CSS filter effect)", which are still in the drafting stage.

In addition to the 4 of the above recommended modules, there are many CSS3 technology is also popular. Including

CSS gradients (CSS gradients)

Border-radius (Border radius)

Box-shadow (Layer Shadow)

Multiple backgrounds (multiple backgrounds)

Opacity (RGBA) (opacity)

Animations & Transforms (Dynamic & conversion)

Let's take a look at the details:

CSS gradients

The introduction of CSS gradients replaces the background image and can create gradients without images

For the page load, loading faster, and the response problem is also a good solution.

Border radius

Now, we can use CSS to create rounded corners, without modifying the image can be achieved. Very convenient to achieve the image of the border, rounded corners, gradients, shadow processing-the past to achieve this effect, it is very painstaking, now very convenient.

If your client is an understanding person, you are lucky, or else you have to explain the new technology to them. Using CSS can achieve a more consistent experience of the device, rounded corners of the elegance can not be replaced!

Layer Shadow

CSS3 introduces a layer shadow, so it's easy to add a projection. But also support the text!

As with the gradient, there is no need to modify the picture effect, directly with the use of CSS can be easily implemented.

Multiple backgrounds

CSS3 the introduction of multiple backgrounds provides a highly layered background effect, extremely wonderful.

Opacity (RGBA)

IE9 up compatible, finally do not have to make a duplicate transparent image. This is why I like CSS3, simple and efficient.

Dynamic Effect & Conversion

Making your Web pages more interactive is difficult to design, but if successful, your site will be much more attractive.

　2. Network fonts

Web fonts are perfect for designers, and we don't have to spend a lot of time leveling and experimenting with fonts. Quote directly from the Internet and focus on your ideas.

Why is the network font so cool?

Web fonts are cool and can create dazzling web design. And there are a lot of choice fonts available, and there are probably hundreds of them.

Of course, not all the fonts are good, but there are a lot of good, many are suitable for design.

The network font response performance is excellent and is suitable for responsive design. We can totally discard the Convention and use this new method. Better accessibility, easier scaling of fonts, more beautiful sites.

How to use the network font?

There are many Web sites that provide Web font services:

Typekit

H&FJ cloud.typography

Fontdeck

Fonts.com

Google Fonts

Although not true, there are many types of fonts available. Many are using JS or pure CSS to import fonts, this is the Gospel of the developer. But network fonts cannot use image software to integrate with the overall design. What about the designer? But Typekit recently published a plan to integrate into Adobe CC. It seems that designers also have options.

In addition, there is no other way to integrate network fonts and images. Unless you pay for it, managing fonts is a problem and prices are a problem.

Network font options Rich, simple design, CSS implementation can improve load speed.

　3. Icon

Icons are now highly valued, can be seen as a trend, icons because of its symbolic visual metaphor, quickly create visual guidance, such as logos, mobile phone application icon and so on

Icon design to have a certain forward-looking, can be very good and content combination. Also consider the response and loading speed issues, but we have a lot of optional new technology.

Png

Lovely PNG (transparent background available) is a very suitable icon output format

But want to achieve the best results on a screen like retina, without the support of CSS and JS crowd, then you'll need some sort of CSS or JavaScript backup to make sure that.

Using the PNG format does not change your workflow. Can be stored in PS for you want a size, and then choose PNG.

PNG's ability to shrink is excellent, but zooming in can cause pixel blocks and blur

SVG (Scalable Vector graphics)

Scalable Vector graphics are also ideal for icons. As long as there is a vector based image (for example, a vector map created by AI)--or raster (Photoshop)--You can save it as an SVG scalable vector graphic to prevent images from zooming in pixels and blurring, resizing, and adapting to needs.

Especially suitable for logos and icons such as the need to zoom in the design. However, in the actual design, it is recommended to adjust the size to "in most cases used in size," so that the workload of the browser will be reduced a lot.

Network font icon

Network fonts have a strong scalability, a wide variety, recently very popular. There are a few smart guys. The network fonts and icons are combined to create a font icon.

Font icon There is some controversy: some people think that the import of a complete set of fonts, only for a few icons, not too sensible, will add a lot of burden on the page, affecting loading speed.

If you want to use the font icon, basically rely on buying, may need to spend a lot of money, but the use of tools can create their own font icon, on-demand design. Recommend Symbolset, you can buy, you can also learn their design ideas.

This is the response design in the context of the three kinds of icon design method, and the specific use of icons, here no longer repeat. Change the work flow reasonably so as to get used to the new design method and new technology.