Category: Software

No matter if you are starting a new business or just have a product that needs an upgrade, new functionality or adaptation to a new market – Product Design is something that you really should look into or least… consider.

Why? Because you probably want to reduce costs as much as possible, build a stable product, and get more positive feedback from your customers. It is more likely for customers to write negative reviews if something doesn’t work properly with your product.

What is Product Design?

Product Design is a way of arranging different features and benefits of the product in a special way that will be presented to the final user, which is usually the customer of the product.

Why is Product Design important?

Let’s start with the basics. Most people don’t understand that the design itself can be a crucial benefit. Why? Because Product Design is flexible and changes according to different technologies.

Let’s say that you were born in the 90s and you had a walkman. However, you also noticed that they disappeared after a couple of years. Their place was taken by an iPod. Now, in 2022, an iPod is obsolete because the iPhone has everything you need, so you don’t need an additional device to listen to your favorite music.

These three devices were all designed as music players (for an iPhone it was among its core features) but their Product Design was different according to evolving technologies.

Do you need another example? Let’s say that you have a car. Why do you like it? Why did you choose this brand over another? Because of the costs, different engine or the experience when you drive it? There are a lot of car brands on the market, but they all have the same thing in common – cars. They differ when it comes to features, different purposes, colors and other elements. Some brands offer something that is so special that you can’t find it served by anyone else.

The business benefits of Product Design

Now that you know what a Product Design is and what are the simple examples of it, we can focus on the benefits. The business advantages of Product Design can be sorted in a couple of categories.

As we mentioned, there are different groups of benefits that vary through industries. If a brand is willing to invest more in a good Product Design and create something that involves the users in all of the stages of designing, then a high ROI indicator is practically a formality. So, if you focus on the user, then you can be optimistic about the product’s success – it will most likely be chosen more often than a product from another brand.

As always, business indicators are loved by the stakeholders. The issue is that the product is used by customers, so thinking about the indicators will not bring revenue itself. If, however, you focus on the final user of the product, you have a much greater chance of success.

There is, however, one main problem with understanding the point of the Product Design process. For many, Product Design is something that is relevant at the last stage of creating a product or a service. Sometimes it is implemented after the strategy has been determined, the budget has been allocated, and decisions have been made.

However, if you want to achieve success with your product, Product Design should be implemented in the first stage – as a part of the business strategy.

At the beginning, you can save costs by changing materials, testing functionalities before they go to production and evaluating other indicators. The prototyping and user testing process enables you to understand your product or service to a whole new level, saving you money and time in the long run.

If you want to achieve success with your product, Product Design should be implemented in the first stage – as a part of the business strategy.

1. Increased sales

Product Design can increase sales thanks to implementing missing opportunities, especially for the final user of the product. Consequently, if the customer loves your product, he or she will probably stay with it longer than you anticipated. Greater loyalty comes usually with lower signals of complaints and bad reviews. At the same time – more good reviews and feedback can mean a snowball or a viral effect for your sales.

After all, people are more willing to buy a product with positive reviews.

Product Design adds more value to your product or your services. Users are often willing to pay more for well-designed products. Why? That’s simple – better design means that you offer benefits for them such as better functionality, greater usability, good visual, and functional experience.

2. Lowered costs

The fact that manufacturing processes can often be reduced by substantial amounts is another of the business benefits of a Product Design.

Knowing how to reduce the costs of your process and which materials are more efficient can allow you to allocate your budget elsewhere. An important aspect of Product Design is that it allows you to spend less money on promotions in order to acquire new customers. Instead, you want to have your business partner or a customer to stay with your product for a long period of time.

Even small changes can have a profound effect on how your product is perceived.

3. Increased performance

Product Design improves business performance across the market thanks to a better relative position to the competitors. Moreover, a strong identity of your business in the industry will follow that trend. Maybe you will even be able to open up for new markets? Expanding the offer or approaching new markets are indicators that you are performing well.

Get in touch with us if you need help with evaluating or testing your current product or a potential project

Among others, we can help you with:

• Discovering where and how your design is being used in your business.
• Learning what you can do to improve your business indicators.
• Professional consulting related to the functionalities and current design process for identifying potential issues and listing ways for solving tracked issues.
• Areas of missed Product Design opportunities.
• User testing and conducting marketing research to get most valuable information about your customers base and their needs.

Color perception

The way humans perceive colors is not universal. Rather, we are capable of comparing and contrasting colors according to individually understood criteria of similarity, sameness, or distinctness. Moreover, even the choice of specific colors in the spectrum is an individual feature.

It is known that colors have a structure based on three primary colors and their combinations. After all, it is an interesting observation that only the concepts of lightness (white) and darkness (black) are basically universal, and also, if there is one, red color including reds, oranges, as well as yellows, pinks and purples up to filberts. An analysis of color naming in various languages indicates that languages distinguishing six colors have names for the light, dark, red, green, yellow, and blue.

Art perception theory [1] treats shape and color separately. Shape is indicated as a feature that better identifies the object and reveals more numerous qualitative features. Color, on the other hand, depends more on the environment, such as lighting, e.g., strong light makes reds appear brighter, while dim light serves blues and greens.

The basic concepts used in color theory are primary and complementary colors. However, a distinction has to be made between fundamental primary colors, i.e., the pure colors on which the perception of colors is built, and simple generative colors, i.e. the colors needed to gain a wide range of tones in a physical sense.

All color systems assume that a certain small number of tones is enough to obtain a full, or at least a wide color gamut. According to Hering’s color theory [2], humans have sensitivity to the colors black and white, blue and yellow, and green and red. The trichromatic Young-Helmholtz theory [4], on the other hand, assumes the existence of three basic generative colors: red, green, and filbert. Finally, in the 20th century, it was confirmed that pigments on retinal receptors respond to three wavelengths: 447 nm (blue-violet), 540 nm (green), and 577 nm (yellow).

Color theory further indicates that which colors will best form a wide range of colors depends on the method of combination: whether by addition (additive combination) or subtraction (subtractive combination). With additive combining, the eye perceives the sum of the waves (e.g., those emitted by a screen), and with subtractive combining, the impression of color is caused by the remainder left over after light absorption (e.g., stained glass).

To conclude this section, let us recall the concept of complementarity. Generative complementaries are those which, combined, produce monochromatic whites or grays, and fundamental complementaries are which, in perception, desire and complement each other. For example, Helmholz gives as complementary pairs red and blue green, yellow and blue, and green and pink red.

Want to become a part of #espeocrew? Check our current job offers and apply!

Color models

RYB

Historically, RYB is the first color model based on the discoveries of Isaac Newton. The generative colors in this model are red, yellow, and blue. The model was patented in 1719 by Jacob Christoph Le Blon. The RYB model is a subtractive one and was used for printing on white paper. RYB pigments combined together produce black. The colors that are generated by mixing the base pigments include orange (red with yellow), green (yellow with blue), and purple (blue with red).

RGB

The RGB model creates a gamut from the primary generative colors: red, green, and blue. Zero intensity of each component defines black, while the full intensity of the generative colors gives white. Equal intensity of all the components produces gray. Color ranges are defined in several ways: from 0 to 1, with any fractional value in between, or as unsigned integers ranging from 0 to 255, (8-bit). High-end digital imaging equipment often uses larger ranges, such as 10, 16, or 24 bits. In practice, for the use on monitors, printers, and the World Wide Web, the sRGB standard created by HP and Microsoft in 1996 is used.

CMY (CMYK)

The CMY model uses cyan, magenta, and yellow as the primary generative colors. The colors in the possible palette are obtained by layering the producing colors. When cyan, magenta, and yellow inks are combined, the result (in theory) is black. In practice, however, this combination results in a dark gray or dark brown. Therefore, in practical solutions, the color black is added to this model (CMYK model). It is also possible to achieve the so-called deep black by mixing generative colors and adding black. In this model, the color white is treated as no color (C0 M0 Y0 K0). The colors of the RGB model are obtained by mixing magenta with cyan (blue), magenta with yellow (red), and cyan with yellow (green), respectively.

Furthermore, the generative colors of the CMY model are obtained by combining the corresponding colors of the RGB model: red with green gives yellow, green with blue gives cyan, and blue with red gives magenta.

The RYB, RGB, and CMY models can be graphically described as cubic models: generative colors are placed on the X, Y and Z axes of length 1, and a color is defined as a point with three coordinates. Note that in the above models, it is difficult to define the concepts of color intensity, brightness or saturation. Other models are used for this purpose.

HSL/HSV

The HSL color model was developed in 1938 by Georges Valensi as a method of adding color coding to existing monochrome transmissions containing only the L signal. The model uses the parameters hue from the RGB model, saturation, and lightness. The angular coordinate starts at red (angle 0°), then passes through green (angle 120°) and blue (angle 240°) before returning to red (angle 360°). The distance from the cylinder axis defines the saturation. The vertical axis is achromatic or gray, ranging from white with a brightness of 1 o black with a brightness of 0. Primary and secondary colors red, yellow, green, cyan, blue, and magenta are arranged around the outer edge of the cylinder with the saturation value of 1. However, in this model, lightness is quite meaningless [3]. Colors can have the same lightness value, with wildly different perceptual lightness.

CIE L*a*b*

The CIE LAB model (also Lab) is a color model defined in 1976 by the International Commission on Illumination (CIE). It expresses color by indicating three values: brightness (L) and a* and b* for the four colors recognized by the eye: red, green, blue, and yellow. CIE L*a*b* was designed to be a perceptually uniform space in which the numerical change corresponds to the corresponding perceived color change. It is used to detect small differences in color.

CIE L*a*b* is a device-independent model of the standard observer. Colors refer to the averaged results of color matching experiments under laboratory conditions. The CIE L*a*b* space is three-dimensional and covers the entire range of color perception. It is based on the model of complementary colors. The brightness value (L) defines black at 0 and white at 100. The a* axis refers to the green-red complementary colors, with values negative toward green and positive toward red. The b* axis represents the blue-yellow complements with negative toward blue and positive toward yellow. CIE L*a*b* is calculated with respect to white. Although the a* and b* axes are unbounded, software implementations often limit these values for practical reasons, such as limiting a* and b* to integers in the range of -128 to 127.

LCH

To solve the problem of HSL model lightness, one can use the LCH model. The first argument specifies the CIE Lightness (L), interpreted as Lightness argument of Lab. The second is the chroma, understood as the amount of color, starting a 0 and maximum theoretically unbounded, but practically not exceeding 230. The third argument is the hue angle interpreted similarly to the hue on HSL, with 0° along the positive a* axis (red), 90° pointing along the positive b* axis (yellow), 180° along the negative a* axis (green), and 270° along the negative b* (blue). If the chroma is set to 0%, the hue component can be omitted. If the lightness of an LCH color is 0%, both the hue and chroma components matter.

Cascading StyleSheet color evolution

Let us now trace the evolution of color support in successive versions of the Cascading Style Sheets (CSS) specifications. The first version of the specification [5] was published in late 1996. Basic CSS support was provided by Internet Explorer 3, but only IE4, which was released in late 1997, correctly supported CSS1. Later implementations, such as in Netscape 4, had numerous bugs, leading it to be thought that CSS itself was flawed. Finally, in 1996, CSS1 was recommended as the standard.

CSS1

Color in CSS1 [5] is either a keyword or an RGB numeric specification. CSS1 supported 16 colors derived from the Windows VGA palette (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). However, their RGB values are not defined. The RGB color model was used in numeric color specifications. The format for hexadecimal RGB values included the # character followed by three or six hexadecimal characters. The three-digit RGB notation #rgb is converted to the six-digit #rrggbb by duplicating digits rather than by adding zeros, such as #abc converts to #aabbcc. The functional notation rgb() is also specified, which gives a comma-separated list of three numeric values in the range 0-255 or three percentage values in the range 0% to 100%. RGB colors are specified in the sRGB color space.

CSS2

In the next version of the specification [6], the color orange was added to the color list, and numerical values were defined for the colors in the palette:

maroon #800000 red #ff0000 orange #ffA500 yellow #ffff00 olive #808000

purple #800080 fuchsia #ff00ff white #ffffff lime #00ff00 green #008000

navy #000080 blue #0000ff aqua #00ffff teal #008080 black #000000

In the next version of CSS2.2 released in 2016 [7], the specification remained unchanged.

CSS Color Module 3

Unlike CSS 2, which is a specification that defines a variety of features, CSS3 was broken up into separate documents (modules). The CSS Color Module Level 3 [8], recommended as a valid specification in 2018, has been extracted from the specification.

CSS Color 3 introduces the concept of opacity taking values from 0 (fully transparent) to 1 (fully opaque), and the RGB color model has been extended with an alpha channel to the RGBA model to allow color opacity to be specified. The rgba() function was added to the functional notation to allow the opacity value to be written as the last parameter.

CSS Color 3 extends the color value with the transparent keyword, and allows it to be used in all properties that take a color value. It also extends the color list to the X11COLORS list with the addition of gray variants from SVG 1.0.

CSS Color 3 adds support for the HSL model in addition to numeric RGB colors, and the conversion from HSL to sRGB is purely mathematical. The functional notation hsl() has an equivalent that supports the alpha channel — hsla().

Are you a Front-end Developer looking for new career opportunities? Check out our open job positions and apply!

CSS Color Module Level 4

Subsequent drafts [9] of the CSS Color Module specification extends definitions of color and color space.

Color is understood as a numerical or textual definition of human perception of light or a physical object illuminated by light. The color of an object depends on how much light it reflects at each visible wavelength and the actual color of the light illuminating it, while the color of a light-emitting object such as the colors on a computer screen, depends on the amount of light emitted at each visible wavelength. Color comparisons are made by converting spectra to the CIE XYZ scale — an additive color space with luminance as the Y component.

CSS Color 4 also defines the term color space as the organization of colors with respect to a basic colorimetric model, so that there is a clear, objectively measurable meaning for each color in that color space. It also means that the same color can be expressed in multiple color spaces or transformed from one color space to another and still look the same.

CSS Color 4 also uses the concept of chromaticity as a measure of color in which the brightness component has been subtracted.

CSS Color 4 adds to the already existing color functions rgb(), rgba(), hsl(), hsla() new ones: hwb(), lab(), lch(), oklab(), oklch(), and color(). Of these, hsl(), hsla(), hwb(), lch(), and oklch() are cylindrical polar color representations, specifying color using the hue angle, a central axis representing brightness (black to white), and a radius representing saturation or chromaticity, i.e., how far the color is from neutral gray.

The color() function allows to specify a color in a color space other than sRGB, in which most other functions operate. These include P3, Adobe RGB (1998), ProPhoto RGB, or Rec. 2020.

CSS Color 4 also covers the issue of color interpolation, which occurs in gradients, compositions, filters, transitions, animations, and color mixing and modification functions. It is done by linear interpolation of each component of a calculated color value separately, in a specified color space. In some cases, the result of physically mixing two colored lights is desired. In such a case, the linear CIE XYZ or sRGB color space is appropriate because they are linear in light intensity. However, if the colors must be perceptually uniform (e.g., in a gradient), then it is reasonable to use Lab/OKLab spaces, which are perceptually uniform. To avoid maximizing chromaticity, the use of LCH/OKLCH is recommended, and for compatibility with older web content, the sRGB color space should be chosen.

CSS Color Module 5

The next draft [10] of the specification adds two new functions: color-mix() and color-contrast().

The first one mixes two colors in the given space in the given proportions. The following algorithm is used: both colors are converted to the required color space, and then the colors are interpolated. If an alpha multiplier was created during percentage normalization, the alpha component of the result is multiplied by the alpha multiplier.

The second function takes as parameters a single color, a list of two or more colors, and, optionally, a target luminance contrast. The single color is separated from the list by the vs keyword, and the target contrast, if any, is separated from the list by the to keyword. The first color that meets or exceeds the target contrast value is then selected from this list. If no target value is specified, the first color with the highest contrast relative to a single color is selected.

Follow us on Instagram for more insights from our experts!

Final remarks

According to MDN [11], CSS Color 3 is rather fully implemented in the modern web browsers. However, the CSS Color 4 and CSS Color 5 recommendations, which are still in development, are implemented partially, e.x., color(), lab(), and lch() functions are available in Safari browser, while color-mix() or color-contrast() are not available at all. 

And while color is a key element of good graphic design, still not all graphic designers’ ideas can be supported in web applications. Despite its rapid development, color in the Web still has a long way to go.

References and further reading

[1] R. Arnheim, Art and Visual Perception. A psychology of the creative eye, California 1974.

[2] E. Hering, Zur Lehre vom Lichtsinn, Vienna 1878.

[3] https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

[4] T. Young, Bakerian Lecture: On the Theory of Light and Colours. Phil. Trans. R. Soc. Lond. (1802) 92, pp.12–48.

[5] Cascading Style Sheets, level 1, https://www.w3.org/TR/CSS1/

[6] Cascading Style Sheets Level 2 Revision 1, https://www.w3.org/TR/CSS2/

[7] Cascading Style Sheets Level 2 Revision 2, https://www.w3.org/TR/CSS22/

[8] CSS Color Module Level 3, https://www.w3.org/TR/css-color-3/

[9] CSS Color Module Level 4, https://www.w3.org/TR/2022/WD-css-color-4-20220428/

[10] CSS Color Module Level 5, https://www.w3.org/TR/2022/WD-css-color-5-20220428/

[11] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility