INTRODUCTION TO INTERFACE DESIGN

Working with color

In this learning content, we will explore how to work with the color palette in the "Text" and "Fill" fields in the Styling panel.

First, let's start with the color section in the "Text" field. Here, you can change the text colors of label and icon elements. Likewise, we can set the text color for buttons and input elements through this section.

Now let's turn our attention to the "Fill" section. Here, we can add a background color to elements or update the overall background color of the screen. In the process, you can also make use of predefined styles.

Let's see how we can change the color of an icon element when we drag and drop it on the screen. When you want to change the color of the icon, you can use the "Text" field, just like changing the text color of a label. And if you want to add a background color to your icon, the "Color" field in the "Fill" section is exactly what you need.

We've looked at the basics of working with color, but what are the characteristics of this color palette we're using?

First, we encounter "Saturation", which stands for saturation, and "Brightness", which stands for brightness. Saturation determines the intensity of colors; brightness determines how light or dark they are. The higher the saturation, the more vivid the color, and the higher the brightness, the more the hue changes.

Immediately afterwards, we are introduced to "Hue" or color tone. Hue refers to the colors created by different wavelengths of light. This is a tool to see how the hue changes when you play with it.

In third place is the "Alpha Channel". This determines the degree of transparency of a color or image. When you decrease the alpha value, the transparency increases.

Now let's talk about the "Hex code", "RGB" and "Alpha Channel value" that we use to represent our colors. Hex codes and the RGB model allow us to understand how colors are rendered in electronic devices. The Alpha Channel value sets the transparency level of the color.

Fifth, let's talk about the 16 different color options Kuika offers. These color options come ready-made and make your color choices easy.

And finally, we have a space where you can save the colors you add. This allows you to quickly find colors to use over and over again in your project. Here, you can view your saved colors as a list or grid.

You have learned the basics of working with colors. Now you are ready to make colorful and vibrant screen designs with Kuika!

In this learning content, we will explore how to work with the color palette in the "Text" and "Fill" fields in the Styling panel.

First, let's start with the color section in the "Text" field. Here, you can change the text colors of label and icon elements. Likewise, we can set the text color for buttons and input elements through this section.

Now let's turn our attention to the "Fill" section. Here, we can add a background color to elements or update the overall background color of the screen. In the process, you can also make use of predefined styles.

Let's see how we can change the color of an icon element when we drag and drop it on the screen. When you want to change the color of the icon, you can use the "Text" field, just like changing the text color of a label. And if you want to add a background color to your icon, the "Color" field in the "Fill" section is exactly what you need.

We've looked at the basics of working with color, but what are the characteristics of this color palette we're using?

First, we encounter "Saturation", which stands for saturation, and "Brightness", which stands for brightness. Saturation determines the intensity of colors; brightness determines how light or dark they are. The higher the saturation, the more vivid the color, and the higher the brightness, the more the hue changes.

Immediately afterwards, we are introduced to "Hue" or color tone. Hue refers to the colors created by different wavelengths of light. This is a tool to see how the hue changes when you play with it.

In third place is the "Alpha Channel". This determines the degree of transparency of a color or image. When you decrease the alpha value, the transparency increases.

Now let's talk about the "Hex code", "RGB" and "Alpha Channel value" that we use to represent our colors. Hex codes and the RGB model allow us to understand how colors are rendered in electronic devices. The Alpha Channel value sets the transparency level of the color.

Fifth, let's talk about the 16 different color options Kuika offers. These color options come ready-made and make your color choices easy.

And finally, we have a space where you can save the colors you add. This allows you to quickly find colors to use over and over again in your project. Here, you can view your saved colors as a list or grid.

You have learned the basics of working with colors. Now you are ready to make colorful and vibrant screen designs with Kuika!

Files

Auxiliary resources

Glossary