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.

Content vs. Design

It’s a bit like the chicken and egg problem!

What’s there first: the content or the design?

At least that’s how the day-to-day work of many web designers and web agencies looks like:

  • Does the customer deliver the content before I start designing? So can I design it based on content?
  • Or is the customer waiting for the design to know what to create content for?

Either way, neither of the two variants leads to a satisfactory result in most cases.

If the customer creates the content first, the designer knows at least WHAT he has to design. But the customer depends too often in the air. He often does not know the possibilities of possible content design and interaction. A lead waste written in Word is then often the result.

If the designer is allowed to design first, because the customer likes to “see something first,” then placeholder content must be used – Lorem Ipsum , etc.
The customer then knows at least exactly what content he should produce and how much.

The design may look nice, but it will hardly fit the later content. Because in this case the design would be a pure facade . Totally detached from the content.

First content, then design or vice versa,
or how now?

 

Design without the right content.
Rarely a good idea

It is absolutely understandable that customers want to see a design design quickly. Only: It’s not a good idea!

Mostly it leads to frustration on at least one of the two sides and / or to an inferior result because design and content are not coordinated.

Because the design can not be the concept alone. The design does not replace conceptual and content planning.

Using dummy text and placeholder images can lead to an aesthetically pleasing design, but unrealistic design. Even worse: it suggests that the content would be secondary.

A good example is the design templates of the relevant suppliers. With high-resolution, appealing photos they look always appealing.

A good example is the design templates of the relevant suppliers.  With high-resolution, appealing photos they look always appealing.

And this is the reality: there was no budget left for the photographer!

The visitors do not come because of the design, but because of the content. The content is the most important element of the website. The design should support the contents and their statement.

Design creates structures and hierarchies. It guides the visitor. It offers orientation. But the designer must know which elements have which meaning. He needs to know what the site and the visitor have.

The shape follows the function

Of course, this old designer motto also applies in web design.
The form should be subordinate to the function.

And how does it often look like in reality?

There is only a rough design idea (like in the form of simple business cards and self-designed letterhead). You do not even need to talk about a corporate design with detailed design information. Instead, the customer may still have certain design ideas, guided by his personal taste (or even worse, by relatives or acquaintances ).

About the actual target group, namely the visitors of the later website and their needs and expectations, is not even talked.

There may be one or two links to websites that the customer likes and can “orient” on.

Very unsatisfactory the whole thing. How to make a website that is effective?

“Go back to Los”
A fresh start with concept

Before the web designer designs the first color harmonies before the customer writes the first words, a concept should be created. What has long been standard in larger web projects should also be implemented in smaller and medium-sized projects.

Decisive for the success of a web project and the targeted implementation is the conception.

That does not have to be page-long concepts. Often it is also sufficient to write down the most important aspects in written form.

As a suggestion, the following questions may be helpful:

  • Who exactly is the company (location, history, etc.)?
  • What kind of product or service is it?
  • Which target groups should be addressed with the website?
  • Which problems / needs does the target group have (concerning the products and services)?
  • Which content should therefore be created and presented?
  • Are there any communication materials (business cards, flyers, brochures, etc.)?
  • How should the website appear, what impression should be conveyed (eg collect multiple adjectives)?

Answering these questions is the basis for entering the project. It is the basis for the following points, which include not only the design and content creation. Now, basically, it is also possible to discuss what an implementation can look like. Only now do certain functionalities arise. It’s about thinking:
The problems of the users should be solved and not their own!

But is there still the question of what to do with: design or content?

The basic structure – the wireframes

Design or content? The answer should be called wireframe!

This is about the arrangement and positioning of the contents and functional elements. Here you can quickly and easily implement and discuss various options. Both the overall composition as well as individual details can be clarified here.

Wireframes have nothing to do with the visual design or even an initial technical implementation. The focus is solely on the content and its arrangement. Free from visual influences, the content structure of the individual pages can be worked out.

The type of wireframe creation can be very different. They can be sketched quickly by hand, digitally created in the graphics program or in extra wireframe software.

This is what a simple digital wireframe looks like.  Created in minutes with the online tool <a href="http://wireframe.cc" target="_blank"> wireframe.cc </a>.

This is what a simple digital wireframe looks like. Created in a few minutes with the online tool wireframe.cc .

Once the wireframes have been coordinated, design, technical implementation and content creation can run in parallel. Nobody has to wait for the other one.

Together with the concept, the wireframes are the basis of the design and technical implementation that can be invoked time and time again (especially when requests for changes come from the customer).

How much design would you like?

There should be web designers / agencies who still create complete Photoshop layouts. There are still customers who like to see fully elaborated designs before content is created, or it goes to the implementation. In addition to the fact that this process is inefficient and no longer up to date, in such designs especially the appearance is assessed. The design and only graphical elements are analyzed and less attention is paid to the contents (à la “Can the logo be a little bit bigger” or “Do they have a different font”).

But:
With wireframes, the question of colors, typography, etc. is still far from being clarified.

Instead of cobbling together complex designs in graphics programs, mood boards can help. Here, graphic ideas for the project are collected based on the results of the concept: color palettes, typographic ideas (fonts, colors), images, icons, backgrounds, etc.

For example, <a href="https://en.pinterest.com/" target="_blank"> Pinterest </a> has some suggestions for mood boards from all directions and implementation variations.

At Pinterest , for example, you will find some suggestions for moodboards from all possible directions and implementation variants.

The implementation variants of a moodboard are very broad gefächtert. There are rough collages, sometimes analogous to finely crafted digital boards.

The idea of Style Tiles has proven itself. While classic mood boards are often not concrete enough, and screen designs designed in Photoshop are too time-consuming, Style Tiles are a kind of compromise.

Even the Google image search provides some exciting style tiles as a suggestion.

Even the Google image search provides some exciting style tiles as a suggestion.

The visual direction becomes clear without losing itself in details.

Nevertheless, some design proposals for individual elements are already being designed, such as headlines, links, buttons or backgrounds.

If even more style tiles are created, you have a good decision basis for and with the customer. The basic design language can be fixed, because even changes can be made quickly.

A case for two:
Wireframes and Style Tiles

Together with the wireframes, style tiles are the basis and the prerequisite for technical implementation.

Style tiles are a kind of design scheme that sets out the basics, but is not too set. And the connection of Style Tiles to technical implementation with style sheets (CSS) is already in the name.

Together, Wireframes and Style Tiles set the direction for the implementation.

The design is not a (final) product, but a process.

Create with real content.
That’s the challenge.

Even during the implementation, the design is being further developed. The wireframes thus provide a kind of inventory list. Which content elements are needed for the project. For example, teaser blocks, sliders, order forms, product previews, etc.

Patterns instead of Pages – Design of single building blocks

Instead of designing complete pages in a graphics program, it is only possible to design individual content elements. What does a button look like? What does a form look like? And so on …

The advantage? A page is no longer seen as a single unit that, once designed, never changes again. This is also unrealistic, where pretty much every page is now based on a content management system.

Websites “live”, they change. The designer has, as soon as he has given the project out of hand (which is usually at the latest at the launch of the case), no influence on the content, or their design. And then suddenly come “editors” and maintain a whole new content, with which the designer would never have expected at this point …

If the page is designed as a “Gesamtkunstwerk”, this quickly turns out to be an optical problem. When using design patterns, it does not matter what content the customer places where. These work for themselves and in an overall system.

Example:
A newsletter subscription form can be called a design pattern. In fact, individual form fields or submit buttons could be a design pattern. If this form is designed as a harmonious unit, then it does not matter where on the website this form is installed. If it appears instead of in the sidebar at once in the footer or even in the middle of the article, it does not matter. It fits in perfectly.

The metaphor for science: Many single atoms later put together a whole website.

The metaphor for science: Many single atoms later put together a whole website.

Web designer Brad Frost has written more about the methodology of design patterns in his Atomic Design article.

It pays to use a style guide (Design Manual). All HTML elements as well as design patterns (before) are formatted here. Preferably right in one (or more) HTML files. So on the one hand, no element can be forgotten and looked up again and again if necessary.

Conclusion: “Conception first”

Who came first: hen or egg?

With a clear conscience we can answer: the concept!

Because design is not a facade.
Because content has a benefit.

The design establishes the context between the users / readers and the sender. The context between the statements and the desired effect.

The context must be right. Who do we want to address and what do we want to achieve. These questions need to be clarified. At the beginning of a project and again and again in the middle. Web design is a process. The web designer is always something of a “strategy consultant”.

So instead of content first or instead of mobile first,
It should read: Concept first

What are your project experiences? When does the design come when the content? What role does the conception play in your projects, or does it play a major role at all?

The 7 Principles of Effective Web Design

The 7 Principles of Effective Web Design

header thumbnail image

Good web design? What is good web design?

Nice looking? Selling? The customer like?

For me, a web design is good if it is effective .
But what is “effective web design” ?

Effective is clear

Where am I?

Where can I go?

How do I get there?

And how do I get back?

Questions that the visitors face. Questions that a web design should answer very quickly.

 

Anyone who comes to a website for the first time must be able to orient themselves quickly. Web design must quickly signal to him what awaits him here. Headlines, navigations, logos, teasers should give him a quick overview. A clear, non-overloading page structure helps. It allows a quick scanning of the contents.

The content of a structure should follow.

People love structures, so we give them some. Effective web design creates clear structures.

Headlines, pictures, icons, colors create meanings. These should give the viewer a grip, give clues when scanning.

Effectively is readable

Webdesign is above all typography, that is the design of the text. (See the blog post by IA Web Design is 95% Typography )

Webdesign is 95% Typography.

Most of the information we consume on web pages is written text.

Navigation points, buttons, headlines, product descriptions, articles – all texts. Texts that want to be read.

Texts we want to read. To read quickly, without that reading becomes exhausting after a short time, because the font is too small, the font is inappropriate or the line spacing is too low.

In such cases, we often avoid reading in advance, even unconsciously.

Effective web design makes texts good, that is easy to read .

Sufficient font size, easy to read fonts, which ideally support the theme of the text. In addition, line spacing, which also deserve this meaning. And a text color that has enough contrast to the background.

THAT is good typography.

 

Effective is aesthetically pleasing

Above all, our perception is about the visual. And websites are above all an optical medium.

In addition, in recent years / decades, the development that “design” is becoming an increasingly important image factor and distinguishing feature. IKEA, Apple and H & M exemplify this. Design is important not only for high-quality products, but also for cheaper ones.

A screen design should therefore also meet a high-quality optics. This does not have to mean that every website has a high-quality look, but that the design is professional. A website for a toy shop does not have to be high quality, but visually appealing.

We love and expect good design.
Also on a website.

This concerns the choice of color, the typography, the grid, the structure of the individual design elements, etc.

Professional design creates meanings and guides the viewer. At the same time it creates emotions and unconsciously communicates the positioning of the website at any time.

 

Effective is emotional

We are emotional beings.

We can think of ourselves as rational (which most of us do), above all we decide emotionally. Long before our brains come up with rational justifications.

Therefore, a website should also appeal to us emotionally. To convey to us certain emotions or to evoke within us.

Images appeal to us emotionally, more directly and much faster than text ever could. And if images are emotional, then colors are even more important, as the basis of every image.

Colors (and thus also pictures) directly achieve a certain effect.

With colors, you can easily create certain emotions. They can be used to control emotions. The targeted use of colors can cause the visitor of the website a certain emotion.

We are emotional beings. Effective web design uses this emotionality for its purposes.

Colors and pictures should therefore not fulfill an end in themselves but fulfill a specific task.

 

Effective is user friendly

That sounds good, of course – “user-friendly”.

And sounds almost so logical that you should think all the websites are there anyway. But it is not like that.

User-friendliness is often referred to as usability. And usability affects all aspects of website development and should be considered from the beginning.

Without a high usability, a website can hardly achieve its goal.

A high usability is something of a quality feature of a website. The user reaches his destination effectively and efficiently.

User-friendliness concerns the navigation, its structure and the naming of the navigation points. It concerns the contents, which must be well structured and comprehensibly written. It concerns the design that has to generate a clear visual hierarchy. It concerns the technical implementation, which ensures fast and easy operation of the website on every device.

 

Effective is flexible

One sits at his desk for many hours, looking at a 30-inch monitor.

The other sits in the train in front of his smartphone and wants to quickly look something up.

And the other has just sat down in front of his laptop and prints out his desired information.

The usage situation of users of a website can be so different.

A web design adapts to the user, his usage statement and his output device. It is not fixed on a specific situation, on a specific device and especially not on a specific screen size.

But these were websites for a long time. Very long. 1,024 pixels wide was the standard used by web designers. Since the meteoric rise of tablets and smartphones, the awareness of alternatve uses has come up and given the technical requirements thanks to media queries.

Websites are per se flexible. Let’s try to take as little of them as possible.

Responsive web design is the keyword. But only one aspect. A barrier-free access to the website, a careful handling of effects and animations, a clear contrast between text color and background color, attention to possible visual impairments (such as color blindness) and an optimized print version are other important aspects.

 

Effective is fast loading

You know that.

You come to a website, you are tense on the content and have to wait … and wait … and …

And are gone or at least already heavily annoyed. Rightly so!

The temptation is great, of course, to incorporate great effects thanks to jQuery. Lightboxes, Slider and so on. And to use beautiful large-format wallpapers.

Thanks to fast Internet connections (especially in the Web designer in the office), enormous amounts of data are no longer a problem. But that does not look like every one. Just a look at the mobile usage shows that websites with low storage requirements are clearly in the advantage.

The user does not want to wait long for loading web pages, the loading animations may still be so nice.

So clearly stated: Every bit should be well considered and justified. Files should be optimized (image files compressed, source code minimized, etc.). Scripts can only be loaded if their meaning or function is really needed. Everything else wastes only the valuable time of the visitors.

 

Web design must be effective

The observance of these seven criteria ensures that a website is good.

That it is effective.

Effectiveness is a pleasant user experience.

And then the visitor stays on the website or comes back or buys or …

What do you mean? Are there any missing aspects that make a site effective? Or what points do you pay special attention to?

The Guide to CSS3 Animations

They were already considered extinct. And nobody wanted her anymore.

However, many years ago, so soon after the onset of the Internet, at the time of the commercial breakthrough, they were ubiquitous:
First the animated GIFs in the form of rotating logos and flashing menus and buttons. Later then the Flash websites and the accompanying extensive animations.

Flash technology is no longer relevant today. Animations again. For years, they were a marginal phenomenon, but now hardly a modern website comes without animations.

What a comeback – and they have come back to stay.

Animations were frowned upon for many years because they were understood and used as a gimmick. As a nice gimmick, which offers little benefit, but a lot of “show”. In the end, however, the visitor from the operation stops, or unnecessarily difficult.

Of course, that’s still possible on websites today. Much more often, however, animations are used to facilitate the operation and to increase the user experience. Animations make websites a little bit more lively.

jQuery and other JavaScript frameworks ensured that animation effects spread almost like an inflationary one. And in recent years, CSS3 has expanded the scope of animation options.

CSS3 offers what was previously only possible with JavaScript and even goes one step further: it’s quick and easy to create animations.

This article aims to show the possibilities of CSS3 quickly and easily to create interesting animations and effects. In addition to the technical implementation, some examples and applications are presented.

The animation options with CSS3

An animation is change and movement. Our whole life is, so to speak, “animation”.

On websites, animation means a change of an object. For example, this may mean moving the object from A to B, changing the color, or the shape.

Animation also means that this change does not happen abruptly, from one moment to the other, but more or less slowly over several single steps. Normally, the observer does not notice these, because they run very fast one behind the other (as in the movies).

CSS3 thus offers the possibility to change individual CSS properties over a defined period of time.

Animation flow from a start to an endpoint.

CSS3 offers two types of animation:
Transitions & Animations

The two species are quite similar on the one hand. It can be …

  • determine which CSS property (s) should be animated.
  • set the duration of the animation.
  • set the speed of the change (eg linear or faster first, then slower).
  • determine when the animation should be executed.

The difference lies in how the two types of animation can be triggered, whether they loop (repeat) and how extensive the change
can be adjusted.

Let’s take a closer look at the two CSS3 animation options:

CSS3 transitions:
Simple animations and transitions

Transition is a transition from an initial state to a final state. The CSS transitions are limited in use. The most common use is with the CSS pseudo-class :hover . But the implementation is quite simple.

A typical application is, for example, a button that animates its background color when mouseover. Not abrupt, but flowing.
Or a link whose text color changes fluently. Or a preview image whose transparency increases.

CSS Animation hover

Typical transition:
Mouseover changes the appearance of the item.

To define a transition, at least the following two details are required:

transition-property
Defines the CSS property to be modified (eg color, background color or position).

transition-duration
Defines the animation duration.

For an example button, the CSS code might look like this:

.button { background-color: #333; transition-property: background-color; transition-duration: 1s; } .button:hover { background-color: #555; }

This spelling is clear.
But you can also summarize the instructions in a shorthand way:

transition: background-color 1s;

The animation is triggered when the mouse pointer is over the button. The change in the background color then takes a second.

In addition, the following two details can be defined:

transition-timing-function
The animation is usually linear, allowing you to control the speed. There are other values ​​that influence the speed behavior:

linear Constant speed (ie the same behavior as if not specified).
ease The transition starts slowly, becomes fast and ends slowly.
ease-in The transition begins slowly, ending quickly.
ease-out The transition starts fast, ends slowly.
ease-in-out The transition starts slowly, gets fast and ends slowly again.

And then there is transition-delay . This can delay the start of the animation.

The button script could be extended as follows:

.button { background-color: #333; transition-property: background-color; transition-duration: 1s; transition-timing-function: ease-in-out; transition-delay: .5s; } .button:hover { background-color: #555; }

And the short notation:

transition: background-color 1s ease-in-out .5s;

Only certain CSS properties can be controlled with the transitions ( display for example, not). An overview can be found at W3C – Properties from CSS .

With CSS3 Transitions, CSS properties can be changed over a set period of time.

browser compatibility

To ensure compatibility with older browsers, you should use the appropriate vendor prefixes:

-webkit-transition: background-color 1s ease-in-out .5s; // Safari -moz-transition: background-color 1s ease-in-out .5s; // Fireforx -o-transition: background-color 1s ease-in-out .5s; // Opera transition: background-color 1s ease-in-out .5s;

Keyframe animations with CSS3

With CSS3 so-called keyframe animations can be generated. The animation then no longer runs only from a start to a final state, but over several keyframes (the keyframes), representing the intermediate states of the animation. This gives you more control over the course of the animation and can also implement more complex changes. Of course, the source code is correspondingly more extensive / complex.

The other big difference to the transitions lies in the fact that here no special interaction of the user (like a mouseover) is required, but these can also be executed selbstädnig (eg directly after loading the page).

CSS Keyframe Animation

With CSS3 keyframes, more complex animations can be implemented using keyframes.

A keyframe animation consists of two parts:

1. The @keyframe rule

Sets the name and determines the course of the animation. For this keyframes are determined (at least a start and end state) and which CSS properties should change.

@keyframes name-animation { from { // Eigenschaften am Beginn der Animation } to { // Eigenschaften am Ende der Animation } }

This is a simple animation that uses two keyframes to determine the beginning and end of the animation.

2. Animation call

The animation rule can now be called by any CSS selectors. It behaves a bit like a variable in programming.

.name-selektor { animation-name: name-animation; // Name der Animation animation-duration: 1s; // Dauer der Animation animation-iteration-count: infinite; // Anzahl der Wiederholungen }

With the help of the property animation-name , the corresponding keyframe rule is called in the selector by its name.
animation-duration determines the duration of the animation in seconds.
And with animation-iteration-count the number of repetitions is determined. infinite ensures infinite repetitions, alternatively a numerical value can be entered.

The shorthand notation would be the following:

.name-selektor { animation: name-animation 1s infinite; }

There are also other properties that can be used to control the animation process:

animation-timing-function History of the animation speed. Default value is ease.
animation-delay Delay, the start of the animation. Default is 0.
animation-direction Direction of the animation. Standard is normal (forward). Alternatively, there is reverse .
animation-fill-mode Indicates whether the changes are visible during a break or after the animation. Possible values ​​are none (initial state) or backwards (state at the beginning of the animation).

The shorthand of the many animation properties would look like this:

.name-selektor { animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode; }

More complex animations with CSS3

The exciting thing about the @keyframe rules is that not only the initial and final state can be defined, but also any number of keyframes in between. If there are more than two images, these are then specified in percentages (on the timeline):

@keyframes name-animation { 0% { // Eigenschaften am Beginn der Animation } 50% { // Eigenschaften in der Mitte der Animation } 100% { // Eigenschaften am Ende der Animation } }

The following example uses five keyframes to change the background color and the border-radius:

 

The syntax for CSS3 multi-keyframe animation contains a lot of CSS code. That means too extensive animations are very quickly confusing and hard to overlook. Above all, you can not create any dependencies with CSS alone, so that, for example, an animation automatically starts only when another one has stopped. Here you will not get around to JavaScript. Similarly, if you want to trigger the start of the animation at a certain time (eg if the user has scrolled to a certain point).

CSS3 libraries

CSS3 keyframe animations can not only be cluttered, but also very fast in the creation. Since you do not always have to reinvent the wheel, there are already some CSS3 animation libraries. So practical collections of ready-made CSS3 effects.

You include a style sheet and the elements that you want to animate are assigned a corresponding CSS class. Some of these libraries also require the inclusion of a JavaScript or jQuery script, but this is explained in each case.

Typical examples of the meaningful use of such CSS3 libraries are:

  • Button Effects
  • Caption animation
  • Page Transitions
  • Pop-up window
  • Off Canvas menus for responsive webdesigns

There are some animation libraries, the following are definitely worth a look:

Animate.css
Magic.css
Effeckt.css
Anima Table

performance

With animations, you quickly get to the question of how “smoothly” they run and how it behaves with the loading time.

Browsers “draw” the page 60 times a second, meaning that the elements are (re) drawn approximately every 16 milliseconds. Any change through animations must recalculate the browser, which can be very expensive. If it takes longer for a “frame”, the next one or the next one is left out, so it can sometimes come to “jerks”.

During the recalculation, the browser goes through four steps, a waterfall principle:

Das Browser Waterfall-Prinzip

The four steps of the browser to display elements on the screen.
Source: HTML5 Rocks – High Performance Animations

The four steps mean in detail:

Recalculate style
The browser first checks the source code to see if classes, CSS styles, or attributes on elements have changed. If so, then these elements are recalculated, including possibly inherited elements (ie child elements).

layout
The browser then calculates the size and position of each item in the browser window.

Paint
The browser “draws” each element with its assigned styles to individual layers. Similar to layers in Photoshop, which are superimposed.

composite
After all elements have been created in layers, they are placed on the screen. It’s as if in Photoshop all layers would be drawn into a picture.

The waterfall principle means the earlier a change takes place, the more work the browser has, as it also affects the following steps. If the properties transform or opacity changed, he has the least work.

If, on the other hand, the position ( left , top ) or the outer dimensions ( width , height ) are changed, then the browser must also go through the layout , paint and composite steps and edit them again.

The CSS Triggers page provides an overview of which CSS properties begin at which point in the waterfall process.
And this table shows the most popular CSS properties that are being changed, most of them in layout.

Especially with regard to mobile devices so animations should be used wisely, since here the computing power is lower. If you are already surfing with smaller screens, you do not want to have to use jerky pages.

Tip:
The position and size of an element can not be changed with left, top and width, height, since these already start with the layout.
Instead, set better to transform: translate (npx, npx) and transform: scale(n) .

Conclusion

Animations can be the salt in the soup. The wild flash times are over. But parallax effects, incoming mobile menus or animated mouseover effects are omnipresent. They can facilitate the use and increase the user experience (the user experience).

The animations are like everywhere in life:
In moderation yes, just not in bulk.

With CSS3 animations you already have some great options. The transitions are enough for simple animations. If animations are to be played over and over again or if they are to be slightly more complex (with several keyframes), then there are the @keyframe animations. And for “completely wild” stuff, there is JavaScript.

Finding a color scheme for the website – Requirements & ways with many practical examples

One of the most difficult aspects of designing a screen design is choosing a color scheme for the website.

To find a color combination that suits the theme and whose colors especially match and harmonize with each other. A color combination that is easy to read in texts and also clarifies the content structure and the visual hierarchy of the website.

Color Scheme Requirements – Color Selection Criteria

There are a few aspects to consider before frolicking wildly in the graphics program on the colors. Because not all over 16 million RGB colors are available, or are useful for the website project.

Corporate analysis and corporate design

First, one should deal with the company in more detail. Sure, you should be intense anyway, but also in terms of possible shades.

What does the company stand for, what values ​​does it represent, what goals does it want to achieve? How does the company see itself, which attributes suit the company? Questions that should (anyway) be asked in a meaningful conception anyway. And whose answers are also helpful in the color selection.

And of course the question of corporate design specifications! These are not always recorded in writing in a design manual, but can also be in the form of already produced communication media. Which colors were used in the flyer, in the business cards, in the logo? Even that can be design and color specifications that you can / should comply. It must be clarified to what extent these colors are binding or clearly defined.

If there are no clearly defined color values, then the website design is the time to catch up.

 

Website goals and color psychology

What goals should the website achieve? Which effect should be generated? Which mood should be conveyed?

The answers are important to be able to select suitable colors. Because every color evokes associations in the viewer. This knowledge of the psychological effect of the colors are helpful, as well as the desired effects, the website should achieve.

Only then can color combinations be found and designed that fit the theme and the goals.

Colors achieve certain psychological effects.

 

target group

To the upper point also necessarily the target group, thus the visitors / observers of the Website belongs. For the effect is created in them, they have certain associations that need to be controlled. Depending on age, gender, culture, etc., the color association may look different.

Since the target group analysis is also part of the website concept , you can build on it well and expand it with the color theme.

 

competition

Which colors do the competitors use? Are there industry-specific shades that are used again and again?

And just as important: Are there certain shades that are never used?

Whether you then use industry-standard shades, is an individual project decision. On the one hand, this can strengthen the recognition / affiliation and the trust. On the other hand, it can increase the interchangeability and arbitrariness.

Together with the client’s corporate design, the desired goals and effects, it can then be decided whether to opt for the classic path like many competitors or consciously control color in contrast.

Usability and accessibility

It does not use the most beautiful color combination if it does not make sense to use it on a screen medium.

On the one hand, colors (as already described above) should evoke certain associations. On the other hand, but also facilitate the operation. Colors create orientation and give meaning to the elements. They thus support the visual hierarchy of the website and guide the viewer’s gaze through the content.

Since website content consists mainly of texts, readability is the deciding factor.

For example, it is not enough to have found a nice pastel-colored color scheme – but the light blue text on a pale yellow background is no longer legible.

The contrast between text color and background color determines the readability.

There is support to find a sufficient light-dark contrast so-called accessibility tools , with which one can check color combinations:

Check color combinations for accessibility guidelines using the Color Contrast Checker tool.

 

There are hurdles in the perception of color, such as the red-green visual weakness, which affects many. The color scheme should also take this into account and not create unnecessary hurdles.

Many useful information about accessibility can be found in the article Designing for Color Blindness .

Also, no extremely bright backgrounds should be present. Or two colors are superimposed, which correspond to the complementary contrast .

Rarely too many different shades are useful (exceptions also confirm the rule here). Visitors quickly get used to a color scheme on the website and then intuitively know which elements are designed and how. To overstrain this by too many color designs or even to irritate by changing color design is unfavorable and unnecessary.

Also with the color choice applies:
Less is more.

But with a little common sense you can achieve a lot (anyway in life, but also in the color choice):

Just look at the color design of the website soberly and analyze: Can you recognize all the elements well and read. What is the color hierarchy of the website, but for the content perception fade and purely on the optics limited. This results already well a first image for assessment.

Color scheme criteria Color selection

 

Methods for coloring

Of course, there is not just one way for DEN to get to a color palette. Presumably every designer has his own method, which does not have to be the same for every project.

I myself do not always find colors for my website projects in the same way. This is partly due to the different starting conditions. Sometimes a color scheme is already strictly defined and only needs to be supplemented at certain points. Sometimes only initial ideas or wishes are available to the customer and sometimes you are completely free to choose.

In addition, I always like to “drive” and surprise by artistic-creative coincidence, what happens.

However, there are always some methods that can be helpful in finding a color scheme that is suitable for a website. I introduce you to some of them here:

1. Collect color inspirations

If you still do not know the color direction or are very uncertain, you will find enough inspiration – offline as well as online. From all possible sources color combinations can be extracted:

Nature / Offline Life / Photographs

The “true” life offers enough incentives for successful color schemes. Just go around the world with open minds. Alone nature offers so many great color combinations. In addition, in the cities the houses, architecture, facades, posters etc.

It can be summarized here almost under the term “photography”, because usually the colors of landscapes, cityscapes, etc. are obtained by digital repoduction and less locally.

Color combinations of photos

Color combinations from the “real” life.

 

Graphic design

Even the diverse world of graphic design can deliver great color samples. Flyers, posters, logos, advertisements, album covers, interior design / interior design, product design etc.

Here, too, one has only to look well and examine such design products for their color.

Color inspirations from the wide world of graphic design.

sites

Sure, it’s about designing websites, so it’s a good idea to analyze other websites and include their color schemes. It is not about a 1zu1 copy, but about suggestions.

Extracted color inspirations from websites.

brandings

Even further than the website design, you can look at the corporate designs of other companies. With which color values ​​do they form their visual branding, not a few companies that have captured them in a corporate design style guide.

Color inspirations Brandings Corporate Designs

Color inspirations from brandings of other companies.

 

Color schemes websites

And how could it be different on the net: There are also websites that collect and present only color schemes. This too can be a first point of contact.

Color combinations of color inspiration websites

There are websites like Design Seeds that deliver the same color inspirations free home.

Other websites offering ready-made color inspirations:

Color Hunt
color drop
Color Favs
Color Palettes
Adobe Color
HueSnap

 

Color matching tools

And there are plenty of color tools to find color combinations. These are so abundant that I present here only a selection:

ColorBlender
ColorMe
Coolors
Color Supply

 

Properties of color combinations

Often, suitable colors / color combinations are searched for specific properties and functions.

The following selection shows keywords / attributes and matching color combinations:

Activity / dynamics: red, orange, yellow (together with blue as a contrast the effect of the mentioned colors can be increased)
Honesty: white, blue, green
Relaxation: blue, white, green
Functionality / Objectivity: White, Gray, Black, Blue
Hope: green, blue, white
Wisdom / wisdom: white, blue, silver
Performance: Blue, Gold, Red
Luxury: Gold, Purple, Black, Gray, Silver
Masculinity: Blue, Black, Brown
Modernity: white, black, red
News: White, red, yellow
Originality: silver, orange, yellow
Speed: silver, red, yellow
Safety: green, blue, white
Sympathy: blue, green, white
Confidence: blue, green, white
Femininity: Violet, white
Reliability: blue, green, brown

But also remember that it always depends on the individual case and sometimes just an alternative selection can be more interesting.

 

2. Select colors

If you have found a palette that could correspond to your own ideas, it is important to continue working. Rarely does an external color combination or your own design also suit a website implementation equally well.

On the contrary:

In most cases, some corrective actions are necessary to get a color palette suitable for the job.

As a basis, a palette of five to six shades is helpful. Sometimes only three are enough to create enough contrasts and accents (the principle could be enough to use two shades if you work with other design tools, which is a rare exception.) An example would be black and white to design).

Six shades give you a variety of design options. After all, elements such as headers, individual content areas, the surrounding block, footer, as well as interaction elements such as buttons, navigation and links, as well as texts, are to be designed.

This can also mean that the range must be correspondingly larger, especially for content-rich websites that require more design variations.

 

3. Note color properties

One color can be divided into three properties:

The hue, the brightness and the saturation.

Each color can be categorized by these three properties, and each property can be changed independently of the others.

These three color properties are interesting because they allow the individual shades to be adjusted. Because, as described above, is not equal to the first designed palette suitable. This is where the properties come into play, where you can “turn” to match the individual colors to each other.

The three properties at a glance:

The color tone

The hue is the color characteristic denoted by words such as blue, yellow, green, etc.

It is the qualitative difference to other bright colors and to achromatic colors. For slight differences, colors have the same name. If the color changes more strongly, the color name also changes.

Different shades

All colors are arranged on a color wheel. The color tone is specified as the position on the standard color wheel:

The color wheel

The color wheel with exemplary color tone selection.

For a screen design, it is often enough to select two or three color shades and then add gradations. But then the other color properties are suitable.

The saturation

The saturation of a color is also called chroma and often circumscribed in terms such as cloudy, dull, strong or clear. One can understand something like the intensity or luminosity of a color underneath.

The more colorful or pure a color is, the more saturated it is. The lower the saturation of a color, the cloudier and less noticeable it is perceived.

The saturation is something like the relationship between the color and a gray part. The more gray there is, the dimmer the color appears.

Different shades and with different saturations.

Different shades and with different saturations.
From top to bottom, the saturation decreases.

The brightness

The brightness of a color means something like light or dark. By adding white or black, the brightness value can be changed.

Colors can have the same color, but have different brightness:

Different shades with brightness gradations.

Different shades with brightness gradations.

Understanding the three color properties is important to be able to implement the following points.

Digital color values ​​- the HSB color model

In graphics programs such as Adobe Photoshop, color values ​​can be defined using different color systems.

In addition to the familiar color models such as RGB and CMYK, there is also the option to individually define the three color properties hue, brightness and saturation (the so-called HSB color model ):

H for Hue (hue):
Shades are specified according to the color wheel at an angle between 0 ° and 359 °.
The setting of the hue.

S for saturation:
Percentages between 0% and 100%.
100% corresponds to a bright color. At 0% a gray tone appears.
The setting of saturation.

B for Brightness:
Percentages between 0% and 100%.
100% corresponds to a light shade. At 0%, the tone is black.

The adjustment of hue, saturation and brightness.

The adjustment of hue, saturation and brightness.

Brilliant, saturated colors are achieved when the saturation (S) and brightness (B) are at 100%.
If the saturation is 0%, it is a dull, gray hue (or black or white, depending on hue and brightness).
If the brightness is 0%, the color is black.

hue-brightness saturation-photoshop

The three color properties and their knowledge are the basis for observing the following aspects:

 

4. Create contrasts

In my web design courses, which I manage and supervise, I regularly see beautiful color palettes that look aesthetically pleasing in their own right. Often, however, you have a “problem”: the contrasts are not big enough. Colors on websites should not only look beautiful, but are mainly used to differentiate content-related elements from each other. For example, a button on a background surface or text on a solid background.

It is about creating sufficient contrasts – between the shades themselves and between the brightnesses.

First, it should not be too many strong shades.With different brightness levels and saturation levels of the hues, exciting contrasts can be achieved:

Variants with different brightnesses and saturations.

Please note: Not every color is used the same amount! The subtle – and usually bright (he) en colors are used extensively. On the other hand, the striking, luminous, saturated hues tend to be rarer and to a lesser extent.

 

5. Design text colors

It is also important to create sufficient light-dark contrast between the text colors and the background colors. Readability is the be-all and end-all of the design.

That means to see whether from the existing palette a dark color (with a light background) exists as a text color. Often, not just one is enough, as more text colors with high contrast are needed for headlines and / or link texts.

If there are not sufficient matching text colors, these must be supplemented or the chosen color tones adjusted. For continuous texts mostly dark gray tones are suitable. Pure black rather not, because black on white on screens is too rich in contrast. At least for continuous texts, it is advisable to add a dark gray tone (or, if the background is not pure white, a deep black as text color # 000 ).

With the tool Accessible color palette builder the color combinations can be checked for accessibility .

In the case of the upper hues, there would be just six suitable text color-background color combinations. The turquoise and red-pink hue would therefore not be suitable as a text color – regardless of their aesthetic impact. With the very dark gray tone there would be twelve possible combinations.

 

6. Insert color scheme

Whether a color palette has succeeded can actually only be judged when it is used on the website. It may look just as appealing in the first place, but its suitability can only be assessed in practice.

So it can happen that color properties have to be adjusted again. Or even new shades must come to it, because not all elements with the selected hues can be covered.

Color combinations screen design

The color combinations in a screen design.

That looks pretty good, the color combinations make a pleasant contrast. On the one hand between light and dark tones and also between saturated and unsaturated colors, as well as the two striking shades turquoise and pink-red.

But, as seen above, according to accessibility rules, the tones would only be of limited suitability because too many would fall through the Contrast Checker . To do this, the brighter hues would need to be dimmed to be eligible for a text color-background color combination:

Color combinations Screendesign Accessibility

The color combinations in a screendesign according to accessibility guidelines.

Quite nice to look at, not quite as radiant as the combination before.

 

7. Design variations

Depending on the project requirement and your own working method, it may be helpful to create / try out several color variants. Or. to implement different screen design variations with the selected shades.

In comparison, then different (color) designs, which can be compared to each other well, possibly also discuss with customers and discuss.

Color combinations Screendesign variant

Another screen design variant with the same color shades.

 

Methods and procedure for finding color combinations

 

Practical example screen design

Below, I’ve incorporated different color combinations into the screen design to show how well different designs can be implemented:

Analog color scheme

If you choose colors that lie next to each other in the color wheel, these combinations usually work harmoniously. How strictly “side by side” is defined is a matter of interpretation.

These color combinations are called analogue color scheme. If a starting color is available, for example due to the customer’s corporate design specifications, it is easy to add other colors that are close by in the color circle in order to arrive at an appealing combination:

Screendesign analogue color scheme

 

Color scheme Bunt-Unbunt

One of the easiest and most effective ways to get a color pick is the mix of colorful and achromatic colors. These combinations are usually visually appealing and rich in contrast.

A – mostly powerful – color is mixed with achromatic tones. These are then grayscale and / or black and white. There are quite a few websites that are built on such a combination.

Screendesign Color scheme Colorful and colorful

And the change of the main color shows how quickly another screen design variant can be created:

Screendesign Color scheme Colorful and colorful

 

Color scheme with the complementary contrast

Complementary colors face each other in the color wheel – such as red and green. This makes it possible to implement a very high-contrast design, which is correspondingly distinctive / striking.

You just have to be careful that these color combinations are only next to each other and not used on each other. So red text on a green background does not work. Next to each other, the color tones increase enormously.

If one of the two complementary colors is only discreetly used, eg for highlights such as buttons and links, then the screen design can be pleasantly rich in contrast:

Screendesign Complementary colors

 

Color scheme trend pastel

Pastel colors are bright, bright colors that blend well with each other. They create a bright and friendly mood, but can also be bland and boring, since the (light-dark) contrast is low.

Color scheme trend color blue

In my article on the Hex Colors of the Year , I’ve named a blue tone as the trend color, blue, which is used on every second page. This blue shade is, however, strong, striking, almost luminous. He takes less back, as most blues make, but comes across striking, confident.

This shade of blue is often used by agencies or on portfolio pages and also likes to be very large. Then you do not need any more colorful shades or multicolored pictures as a supplement:

Screendesign trend color blue

 

Conclusion

The color scheme of a website is a very important design element. It decisively influences the perception and usability of the website. Therefore, knowledge of how to get good color combinations is very important.

With this article I have shown some possibilities and ways to create a harmonious color combination. Rarely (actually as good as never) will be the first attempt to succeed. Adjust the color combinations until you feel like they are harmonious and the braces are sufficient for legibility.

How do you get to your color combinations? Do you make them completely free or from which sources do you get inspired?