The hex colors of the year. You need to know these color trends in web design.

Pantone chooses the color of the year.

Each year.

Pantone is a manufacturer of spot colors for printing. For 15 years you now choose the Pantone color of the year. Marsala calls itself 2015 this earthy wine red, a “strong, but stylish tone” , which “enriches mind, body and soul” .

A marketing gag, of course.

The Pantone color of the year 2015 “Marsala”

The idea of ​​a color of the year is not stupid – so at least marketing technology, content, it probably has no sense. But it does not have to.

Where are the web design colors of the year?

But why does not one of the web designers choose colors?

There are also color trends in web design. So colors, which are used more frequently this year. Colors that often did not play a big role in recent years.

Colors that may not be on “everyone’s” page, but on these modern material flat design pages . On sites that are simple, of course, responsive and perhaps come up with one or the other nice jQuery animation effect.

I was looking for these color trends.

And what can I say, I found some!

 

The hex color of the year

Two colors / color combinations are left at the end of the search. You might call them the Hexadecimal Colors of 2015″ .

The clear winner is a strong shade of blue.

Blue?

Yes, a shade of blue. Sure, blue is a color used on a damned lot of websites. Blue is, so to speak, the mother of all company colors.

And this color is actually an old acquaintance. Because it reminds of the standard link color, which exists since the beginning of the World Wide Web:

Die Hex-Farbe des Jahres 2015: #0000ff

The hex color of 2015: # 0000ff

May sound unusual. I admit. Also in my trainings I always say that the link color should be adjusted first, because the standard color is mostly inappropriate .

But exceptions confirm the rule. And there are always and more and more websites that can make friends with this standard blue – or a very obvious color.

And they are fine!

This shade of blue is strong, striking. Almost bright. He takes less back, as most blues make.

No, this blue tone wants to set a signal. As a standard link color, he says, “Hey, here I am. Click me! ” .

As a color in the screen design he shows self-confidence, wants to be present. Do not take back.

Exemplary is the website of the Danish designer Jesper Winther for the use of this modern blue shade:

#0000ff – Die Hex-Farbe des Jahres im Einsatz bei jesperwinther.dk

# 0000ff – The hex color of the year in use at jesperwinther.dk

So much blue you can even leave alone. No further shades or multicolored pictures are needed here as a supplement or support.

More information about this exciting color is provided by the color tool Colorhexa . The brightness gradations of the blue tone, which can provide variety in the design, are really interesting:

Shades of #0000ff

Blue variants

It does not always have to be the exact # 0000ff color. Even (slight) gradations of this show how a strong blue can present itself as a contemporary color. Sometimes a large area, sometimes as a typographic highlight, sometimes as a duplexton for pictures.

In the pure form without further color shades, only with black / gray and above all a lot of white this blue seems to unfold its whole effect.

The following webdesigns underline this “color trend” and confirm the unofficial election for the Hex color of the year:

And if you would like to test out these blue shades in your own screen designs, you should try the following variants in addition to the standard # 0000f:

Verschiedene Blautöne

The Hex Color of the Year – Part 2

Not only the standard blue met me again and again on modern websites. There was also a collection of colors that are best described as “pastel colors”.

Pastel colors are characterized by a high proportion of white. So there are very bright shades, which can be well combined especially with each other. A small search in the picture network Pinterest gives a first color impression:

PInterest Pastelltöne

Pastel colors create a bright and friendly mood. But can certainly be bland and boring. Unlike the blue, they tend to back off.

And unlike the blue, there is not one color here. Rather, one can call the pastel colors as hex colors of the year.

The use of pastel colors on web pages can be divided into two areas. Some prefer a single pastel shade. This is used as a highlight color. The others rely on several pastel shades. Since these are rather subtle, can also be good combine several of them without the design looks too colorful.

As a pastel-colored design of the year, I would label the website of a Danish ceramic manufacturer Helbak , including the associated Hex color values:

Helbak – Pastellfarbene Seite des Jahres

Optimizing Images for the Web – Image Optimization Tools

Images are an essential part of website content. And at least since the loading time is a ranking factor for the search engines, it is important to look for optimized images.
In this article, you’ll learn about the many ways to optimize images for web pages and improve loading time and user experience.

Even on websites is often the old saying: A picture is worth a thousand words. And since we live in a time when visual content is always and everywhere around us (see Snapchat, Instagram, etc.), the importance and use of images is of particular importance.

 

Also and especially on websites pictures are therefore gladly and richly used.
However, on most websites, the image data causes the largest amount of data, as the following image shows by way of example:
In addition to a good motif selection , it is therefore important to select the right image format and then compress the images. Because the smaller the image files, the smaller the amount of data, the faster the page loads. All the greater is the user experience of your visitors and the better for the search engine ranking. A win-win situation!

Not infrequently, compression can save a two-digit percentage of data volume.

The image resolution

Before a picture is integrated into a website, it should be brought to the correct size, that is, image dimensions. The image dimensions are specified in pixels. Colloquially, it is synonymous with the image resolution spoken, but actually means something else.

The image dimensions are the pure pixel information. So for example 800 x 600 pixels. Then the pixel has 800 pixels in width and 600 pixels in height. So big is the picture.
The image resolution actually means how many pixels come to a certain unit of length. For example, how many pixels per centimeter or inch (because here you like working with American units of length). This is interesting where it comes to concrete length measures, such as when printing. Here an image must have a certain size in centimeters or inches, eg 15 x 10 cm.
And here it is important how many pixels should be within a cm. The more, the finer the image resolution. For professional printing, 300 pixels per inch are needed.

This is where the resolution of 72dpi often haunts the web. That would mean that on the web, the image resolution must be 72 pixels per inch. This is not correct ( here you can find more about this already very old myth of 72).

The image resolution is not important for images for the Web, the image dimensions are important.

The correct image dimensions therefore result from the desired display size of the image on the website. Of course this varies from website to website and from image to image.
Anyone who does not have a professional image editing program at their fingertips or wants to adjust the image size “quickly” can use the online tool Picture Resezier .

More information about pixel size and optimized saving for the web from Photoshop, there are in the video images optimized for the Web and save .

The most important image formats at a glance:

Once the image size has been set (and other relevant image edits have taken place), the image must be saved. There are many different file formats available. For the web, especially four file formats are interesting:

JPG: For pictures with many details and many colors

The JPG, sometimes also known as JPEG, stands for the Joint Photographic Experts Group and was specially developed for storing photographs. The JPG is likely to be the most widely used image format on the Web.
The JPG format is intended primarily for images with photorealistic motifs, which should be stored in good quality, but rather low data volume. For larger monochrome areas, lossy compression quickly becomes visible.

Properties of the JPG image format:

  • Well suited for photorealistic pictures with many colors.
  • Optimization options: compression adjustable.
  • Relatively low space requirement (depending on the compression).
  • Compressed with quality loss, more or less visible artifacts.
  • Strong compression = low memory requirement = poor image quality.
  • Low compression = large memory requirement = good image quality.

PNG

The PNG format (Portable Networks Graphics) is compared to the two formats already presented a relatively young image format, which was developed as an alternative to GIF.
The compression of the PNG is not as lossy as the JPG, but the amount of data is larger. The PNG can be stored as 24 bits (PNG-24) and as 8 bits (PNG-8). The 24-bit version is, so to speak, the standard for photorealistic motifs (with the possibility of over 16 million colors). The 8-bit variant can only display 256 possible colors and is therefore only suitable for motifs with few details.

Properties of PNG image format:

  • good picture quality
  • Possibilities of transparency
  • lossless compression

GIF: comeback through moving images

The GIF format can only display images with a maximum of 256 colors (8 bits). It is therefore mainly used for subjects with a low color spectrum, such as logos, icons, illustrations or navigation images. Actually, the GIF format is now almost superfluous. With its few colors, it is unsuitable for photorealistic motifs. It can display transparencies, but the PNG-8 can do that too.
What the GIF has in advance of the other two is the possibility to play (short) animations, or rather individual pictures in succession.

 

These so-called GIF animations can now partly be replaced by CSS3 animations (and / or JavaScript). From time to time, however, they can also be used effectively to explain small amounts of data to the interfaces or are also popular with the so-called cinemagraphs or as small animated images to share them in the expanses of social networks as the following examples show.

SVG

SVG format (Scalable Vector Graphics) is the only vector format in this series. So there is no image size with pixel dimensions.
Vector graphics have some advantages over pixel graphics: Because they consist of mathematically exactly described points, lines and curves, they are resolution-independent and therefore scalable. Compared to pixel graphics, which have to store every single color pixel, only parameters are stored here, so that they usually have a very small memory requirement.

Since HTML5, SVG graphics can also be integrated into websites without a plug-in. All modern browsers (also from IE9) can handle them. Wherever motifs with simple graphical content occur, the SVG format is suitable, eg for logos, diagrams or (simple) illustrations.

A very comprehensive representation and comparison of the individual image formats provides: Optimizing Images .

Tools to compress images

If image dimensions and file format have been optimized or intentionally selected and the image has been saved, the image is ready for use. But even now it can be further optimized. There are online tools (link) to further reduce the file size. This is especially interesting because images usually cause the largest amounts of data. Here it is worthwhile to optimize further.

When compressing, it is important to make sure that the visible loss of quality is not too great. That means that he is not visible, or at least not visibly disturbing.

There are already dozens of programs that can compress images. Here are some of them:

TinyPNG

The tool with the Panda: TinyPng compresses PNGs, but also JPG files – without loss of quality.
The tool is also well suited for PNGs with transparencies. From 24BIT PNGs even 8BIT PNGs can be generated, which of course significantly reduces the amount of data (according to the information on the website sometimes over 70%).
TinyPNG

If you want TinyPNG as a Photoshop plugin , you can do it for $ 50 and you do not have to go the “detour” through the website.

Compressnow

Compress Now supports JPG, PNG and GIF files and you can set the compression level yourself. If an image has been uploaded, it shows dynamically how the file size changes at different compression rates.
The image result can also be inspected immediately (at least in a small preview window). If you like the result, you can download the picture right away.
Compressnow

 

JPEG Optimizer

The name is program: This can be used to optimize JPG files. But not only the compression rate can be adjusted. The image dimensions can also be adjusted. The desired new image width is specified and the height is then adjusted proportionally.
After optimizing the old and new data are compared, so you have a nice comparison. Above all, the saved file volume in percent convinced.
JPEG Optimizer

 

Optimizilla

With the tool Optimizilla you can upload and compress up to 20 JPG and PNG files at once. For each image is then displayed large and clear the saved file amount. If you want to adjust even finer, you can also individually adjust the compression for each image. Then you can download a ZIP archive with the compressed images.
Optimizilla

This tool basically replaces the two popular Compress JPEG and Compress PNG compression tools, each of which was only suitable for one file format.

 

Compressor

JPG, PNG, GIF can be compressed with this tool. There is lossless compression, but even with lossy compression, the differences are barely noticeable.
The tool convinces above all by the modern and intuitive operation. Something not every tool can shine with.

 

Responsive pictures

At the beginning of the article I have spoken of the image dimensions in pixels and that the image should be optimized to the output size.

With responsive webdesigns, however, it is usually the case that image dimensions change flexibly. There are not only “one” image size here, but many different ones. The format-filling image on a large monitor is in its dimensions on a smartphone, of course, totally oversized.

For example, images in responsive web design can be optimized in terms of pixel density. For high-resolution displays (such as Apple’s Retina display), images with a larger pixel size can be displayed.

With different screen resolutions different pictures (with different dimensions) can be displayed. This can be realized via breakpoints.
More about this, and especially technical details including sample source code, can be found in these two articles:
5 Tips for Responsive Images with HTML
Responsive Images – , srcset, sizes & Co.

Interesting is the tool Adaptive Images . This delivers the appropriate image size to the respective screen of the visitor. So it will be, so to speak in real time, each matching image sizes created. This not only saves loading time for the user, but also saves the creation of different image sizes in advance:

Alternatives to pictures

Image size, file format, responsive images – there is a lot to consider. But it can be optimized even more if necessary. And maybe already BEFORE the decision for a picture. So there is the option to completely abandon pictures.

CSS3 techniques

The (ok, not so new) CSS3 techniques allow effects that used to be implemented on web pages only with pixel images. Shadow rolls, curves, twists, distortions, transparencies, gradients or the Blendmodi (blending modes), which are so popular in Photoshop, and others can now be implemented quite simply using CSS.

If such “effects” are implemented with CSS3 instead of pixel images, this saves a considerable amount of data.

The following small example clearly shows some of the possible effects of CSS3:

See the Pen Button.css: CSS3 Button Animations by Zixuan (Kevin) Fan ( @ kevinfan23 ) on CodePen .

 

CSS sprites

Instead of loading several (smaller) pictures, there is the possibility to save them in a big picture. And then only one CSS, showing the matching, section of this image via CSS. This saves loading time, because only one (certainly larger) image must be loaded and not several (smaller). This will reduce queries to the server. Icons (eg social networks) or country flags are popular examples and fields of application for CSS sprites.

Reload images

Normally, all page content is loaded gradually. Regardless of whether the user also looks at all content. In the current development to ever longer pages with larger and larger images (which comes to a head in the one-pagers), large amounts of data are often loaded, to which the user never gets (be it because he leaves the site before or clicks on a link) – which of course is unfavorable for both sides.

Here helps the “lazy” shop. The images are only loaded when the user, ie the browser, also reaches the corresponding point on the page in which the image is displayed. This can lead to the fact that it always takes a moment until the corresponding image is loaded, so again and again an empty space can be seen. But the initial loading of the page itself is much faster. And above all, less “useless”, because not noticed, data loaded.

For this so-called “Lazy Load” there is a jQuery plugin that can be easily integrated and do the rest:
Lazy Load Plugin for jQuery .

In order not to have this short loading effect of the empty area, the pictures can already be loaded “shortly” before the user is in the appropriate place.

Tips for pictures in WordPress

Since many readers use WordPress, I have a few tips for this beautiful CMS.

Thumbnails in WordPress

From every uploaded image, thumbnails are created by default, ie small thumbnails. In the backend under “Settings” → “Media” you can change the generated image sizes. But this is only so for future image uploads and should therefore ideally be done directly after the first set up the WordPress site.

If you need additional previews in other dimensions, you can specify this in functions.php. A few helpful tips can be found in the article image sizes in the WordPress theme .

If you want to adjust the previews later, this works well with the plugin Regenerate Thumbnails .

Compress images in WordPress

Above, I have already presented a few tools to optimize images, or the amount of data. With the plugin https://wordpress.org/plugins/wp-smushit/ the images can be compressed loss-free directly in the WordPress backend and, if desired, the file size can be adjusted. The images can either be compressed directly when uploading or at the touch of a button all already existing simultaneously (or in the free version always 25 together).

This way the pictures can be optimized later on. The plugin also indicates whether an image has already been compressed or not.

Load pictures later

Above, I introduced the technique of the “Lazy Load”. There are of course also suitable WordPress plugins, including Lazy Load WordPress .

Conclusion

Optimizing images is part of the standard work of a web designer. This starts with the correct image size and file format and sometimes ends only when “lazy loading” …

What I almost forgot: At the very beginning, of course, the question could be whether an image is needed at all . Is he irreplaceable in understanding the content? Not infrequently, large-format images are used, which should look especially “nice”. For example, large format landscapes, which are not even directly related to the topic of the website or the content. Despite all the “visuality” that we are exposed to and in which it means to “enforce” and attract attention:

Maybe it is sometimes better to use fewer images and instead refine the typography!

So, in this article, I’ve introduced some aspects and techniques to optimize your images in the future and to keep the user experience as great as possible for your visitors, or not to worsen by unnecessary amounts of data.
If you have more tips, always here in the comments!

Branding – Why the Colors of a Website Are So Important & Best Cases

In the past, horses and cattle were branded.

With the help of a fire-iron they were branded a sign on the skin. A proof of ownership or race was documented by these symbols or letters.

This brand should allow a clear assignment and recognition of the animals.

Nowadays, companies, but also self-employed and freelancers have a brand. And I do not mean tattoo. The logo is more of a brand. Other design elements such as colors, images and typography are also included. Together, they make the so-called branding .

And just as with horses, branding makes it possible to assign and recognize a company.

What exactly is the branding?

Translated into German, branding means “marking” .

Entrepreneurial labeling probably started in the consumer goods sector. Cars, cigarettes and beers were developed into so-called “brands”. The products should appear more attractive than the competition offers and should have a high recognition.

At some point not only products but also services were marked, such as insurance, postal services, consulting services, etc.

And then there was no stopping at the companies themselves. Siemens, AEG, VW have become their own brands. They are anchored in our memory. We recognize you quickly.

Branding is therefore closely related to the concept of “brand”. It goes beyond the pure trademark.

For in addition to the pure visual recognition, a branding ensures an emotional connection to the company and a concrete idea of a company in terms of content .

The popular concept of corporate identity also plays a role. This designates the identity of a company. This is quite comparable to the personality of a person.

The branding goes beyond the corporate identity, or could be described as a kind of development.

It does not matter if it’s called branding, corporate identity or brand. It is always a process that can not be created by just a few design elements. It goes beyond the visual. Also, the associations, ideas that people have of the products, services or companies shape the brand. You can not handle this branding, you can not create it directly.

In the end, it’s about emotions!

Branding provides even more emotional bonding by uniting the ideas of customers, employees, business partners and the interests and ideas of the company.

Branding wants to control this emotional process and try to influence it positively. This includes all aspects of the business card to telephone customer service.

“Branding helps differentiate products or services from competitors and keeps customers emotionally engaged.”

Branding Global Players.

The branding of large companies has impressed (left side). If the colors are changed, the recognition is no longer given (right side).

Why do you need a branding?

No matter if big or small, whether global player or freelancer, service or product. Targeted, controlled branding pays off for everyone.

The visual aspect alone ensures a high recognition value for the target group through the consistent use of certain design elements and thus remains in memory. A uniform corporate design will leave a professional impression.

An individual appearance ensures sufficient differentiation from the competition and its offers. Especially in times when many products and services are interchangeable, branding is a success factor.

With a branding, the image can be determined, thus controlling the perception of others. So it’s also about the feeling that the target group is being conveyed, or the feeling that it feels in contact with the product or the service.

Transparent, authentic and personal communication can be achieved through branding. Consistently designed branding with well-planned communication therefore offers strategic advantages and opens up new opportunities in the competition.

A brand wants to convince, of a brand, a product or a service.

Zwei Beispiele für umfassende visuelle Brandings.

Four examples of comprehensive visual branding.
More examples can be found in the Branding Journal .

The visual branding elements

The corporate design is something like the visual component of branding.

The design should convey the core messages. First and foremost is the logo design, as the most striking design element.

But a corporate design goes far beyond the logo. This includes colors, images, typography and the design grid.

It is a bundle of different components, which can also be set differently, but are still recognizable by some striking features.

A corporate design manual defines the individual design elements.

A corporate design manual defines the individual design elements.

The uniform visual appearance is the basis for a convincing brand perception and a duty for a professional branding.

The color as an emotional element

Without colors, we would not see anything. Only light and colors ensure that we can recognize visual stimuli.

So before we can interpret a logo and its statement, we have already perceived and interpreted the colors of the logo. Because without color contrasts, a logo would not be noticeable at all.

Ohne ausreichend Farbkontrast wären Texte gar nicht lesbar.

Without sufficient color contrast, texts would be unreadable.

Colors are perceived first! And colors are an aesthetic and emotional design element. They affect us, both physically and mentally.

It is said: pictures say more than a thousand words. If you like, an area with a color is already an image that creates countless associations. In this respect, this phrase applies above all to colors. (Achim Schaffrinna, diploma designer, designtagebuch.de )

Colors and their effect give us everywhere in everyday life. Even nature deliberately uses colors. Plants and animals attract loot, deter enemies, mark their territory, etc.

This color science of nature is also deep inside us humans. Your emotional impact on us is enormous.

Red always means caution or danger and is therefore used for example at stop signs or traffic lights.

Blue calms through the association with the sky and the sea and is therefore also an expression of freedom and space.

Colors generate strong emotions, even for a company.

To ensure that color recognition is high, many companies use one or a maximum of two main colors. In addition to these, other colors may individually set accents, but these main colors provide for emotionality, recognition and differentiation.

Not infrequently, that a company alone can be recognized by the color.

The use of color not only creates emotions, but also uses them specifically for branding. Colors give the company a certain personality, a feeling, an identity.

It’s less about classic stereotypes. Blue is not blue and red is not red.

The context matters!

Without it, a paint job does not make sense.

The color in web design

Colors also play an important role in web design.

Crucially, they shape the first impression of a website, because they are the first design element that is perceived.

In addition to the images used, colors also ensure the emotional impact and the mediated atmosphere of the website.

Due to their contrast and their use, colors ensure a weighting of the element. Which contents are more significant and which are less. They can generate attention, convey content, and visually group items.

Color is therefore a wonderful design tool that can convey the desired statement directly and unconsciously.

However, inappropriate colors can destroy content.

Color Branding – Best Cases

The importance of colors for branding, recognition, and the identity of a company can be strikingly demonstrated to large companies that attract media attention with a corresponding marketing budget.

brandcolors.net listet die Farbcodes der großen internationalen Unternehmen auf.

brandcolors.net lists the color codes of major international companies.

But even with smaller medium-sized companies and even the self-employed, the use of color can ensure a high degree of recognition and differentiation. The following examples are particularly successful cases for a targeted use of color with a high recognition in web design:

panicbootcamp

webguerillasdrinksoma

Conclusion

The perceptual and emotional effects of colors make them so prominent as a branding element. Consistent use of the same colors in the various media ensures recognition. Ideally, the viewer alone recognizes the company based on the color (s). This also develops a kind of familiarity. What man (again) recognizes, he finds first pleasant. He knows what he is and I do not have to reorientate first.

The use of color must match the company, the product, the service and the desired statement. Their use should be carefully chosen. A website just with colors “freshen up” or because certain employees of the customer have special color preferences, pointlessly select shades, can backfire quickly.

Unity, recognition and differentiation are the three saints of color use.

These are achieved when an individual shade has been selected that appears appropriate. Because unlike the fonts or the pictures (which, of course, both also have great significance), colors shape the overall communication and thus the branding decisively and sustainably.

In upcoming articles I will discuss the successful color choice including the selection of suitable color combinations for screen designs.