Through this article, I will introduce to you some basic knowledge about design, so that the majority of developers in the usual development, can better and design, product cooperation (quarrel).

1.Color System

1.1 the Material Color Theme

Color is the most distinctive theme attribute that can reflect a brand and its style in a theme. We can categorize the 12 Material Theme colors into three categories.

  • Primary and Secondary colors: These colors and their variants are used to represent the brand. While secondary color (also known as accent Color) is optional, it helps to differentiate the brand. Variant colors are shades of Primary and Secondary colors. I used the company Logo to pick the colors.
  • Surface, Background, Error colors: Surface color applies to card, Menu and Sheet Surface colors. Background color is the color applied to the screen background, behind UI components. Error color is a color applied to a component to highlight errors. Often, these colors are not associated with the brand. Therefore, we can apply the same Surface, background, and error colors to all company-specific themes if we want to.
  • OnXXX colors: These are the text and Icon colors on the UI component.

Material. IO/design/colo…

After these colors are declared, they are applied to the UI component according to the default Material specification. This means we don’t need to specify colors explicitly for buttons, cards, bottom sheets, App bars, etc. For example, cards will be the surface color, floating Action Button will be the secondary color, and Button will be the primary color. However, the Material guide allows us to customize the colors of OUR UI components to increase brand recognition in our applications and delight our fellow designers. For example, we can choose the color of the card as the primary color to give more emphasis to the brand.

1.2 Semantic Colors

When we build the application, sometimes we may need more colors than the primary and secondary colors. One example is the visualization of data using diagrams. In the demo application, we have a pie chart where we need to use a different color for each section. Another example is the use of color as a visual indicator of different states, such as alert level, amount change, or performance change (decrease/increase).

In many cases, the colors associated with the scene are referenced by the colors of traffic lights (red, yellow, green).

  • Danger, performance decline, and staying below the target are associated with red.
  • Warning, and approaching targets are associated with yellow.
  • Safety, positive change, meeting goals are related to green.

Sometimes we need more color than traffic lights. Picking colors in a different context is often where developers fail, or get stressed out. In this case, we can get a little help from color blending on the color wheel. A color wheel is a circle that represents the relationship between colors.

The goal is to find colors that work well together. Colors have different color coordination depending on where they are on the color wheel. For example, suppose I need to assign colors to four categories. If these categories were semantically independent, I would choose a color with a square blend; If the categories could be paired, I would choose a color with a square.

In another example, let’s say I need to pick six colors for six categories. If these categories can be semantically divided into two groups, I would first pick three colors with similar harmonic properties for the first group. Then, I’ll find complementary colors for each color for the second group.

Color theory is a huge topic, and it’s not easy. Finding the right color for the background requires experimentation. However, it is still useful to know the basics of color theory when choosing semantic colors for a topic.

1.3 primarySwatch and primaryColor

In Material Design, there are two concepts that are particularly confusing. Here are the similarities and differences between them, with the help of ThemeData in Flutter.

In a design document, primarySwatch is a color sample selected from a series of similar colors. For example, in the palette below, the range of colours is primarySwatch.

So primarySwatch is not a color, it is MaterialColor, which means it is a palette of different colors that the Material Design program will use.

And primaryColor is just one of those shades. To be exact, primaryColor is usually equal to primarySwatch[500].

In general, it is better to define a primarySwatch rather than just a primaryColor. Some Material components may use different primaryColor tones for shadows, borders, and so on.

The Material design guide provides us with a tool that makes it easy for developers to set these colors.

Material. IO/resources/c…

2. Brightness

2.1 the Munsell Color System

Before discussing brightness, let’s talk about the Munsell color system (HCV color system). Below is an image that represents colors in three dimensions: Hue, lightness Value, and Chroma. As you move around the center, the hue changes. We can easily describe colors in terms of hue, such as orange, blue, red, green, pink, purple, etc. Value is the lightness or darkness of a color. It increases from the bottom up. In the center, the bottom is black and the top is white. As it moves outward from the center, the chroma changes. Chroma is about the purity, intensity, or saturation of a color.

2.2 Light vs Dark Brightness

The brightness property in our theme has two options: dark and light. Since most of the colors on the screen are background and Surface colors, the background and surface colors will have a lower value (brightness) in a dark theme compared to a light theme.

According to the Material guide, in dark themes, the surface color becomes lighter as elevation increases. For example, in a dark theme, the background color should have a lower value than the card and sheet colors. Also, the primary and secondary colors in a dark theme should have a lower chroma (lower saturation) than in a light theme.

2.3 Color Contrast

Color contrast is about positional differences in a three-dimensional color system. We need to apply color contrast in our user interface not only because it looks good, but mainly because of the accessibility of color. We should make sure that the color contrast between the foreground (text, ICONS) and the background is appropriate.

According to WCAG (Web Content Accessibility Guide) 2.0, contrast is a measure of the perceived “brightness” or difference in brightness between two colors. White text or ICONS on a white background have a 1:1 contrast. Black text on a white background has a 21:1 contrast.

The Material design guide ensures that the WCAG recommended minimum contrast ratio of 4.5:1 between background and foreground (text or ICONS) is applied. Therefore, the onXXX color (onPrimary, onSecondary, onSurface, onBackground, onError) should be selected accordingly.

2.4 the Material Palette of the Generator

Considering the 3D model, when we switched from a light to a dark theme:

  • Background and surface colors should be moved from top to bottom
  • The primary and secondary colors should be moved inward to the center.
  • The onXXX color should move from bottom to top.

It may sound too complicated to create a color system for dark and light themes. This is not complicated, thanks to the Material Palette Generator. Once we have decided on the primary and secondary colors, we can feed the color code as input to the generator. The tool generates a usable, aesthetically pleasing palette through an algorithm that takes into account hue, chroma, and numerical values. It also provides a hint about the color from the reachable point. Once you have clicked on a card, color P letters can be black or white to take into account contrast.

Chris Banes’ post gives a good explanation of choosing the right hue based on brightness. For main colors, Material designs light colors usually use 500 hues, while for dark colors lighter saturation hues (200-50 range) are recommended. The main color change for a light theme can be lighter or darker (500±200), while 500 is recommended for a dark theme.

The secondary (accent) color hues for dark and light themes can be chosen in a color similar to the primary color, except that the secondary variant color for dark themes is recommended in the 200-50 range instead of 500.

3. Typography

3.1 the Text Styles

The Material design has 13 different text styles for formatting and drawing text on the screen. 6 Headlines, 2 subtitles, 2 body texts, 1 caption, 1 overline, and 1 button. Each UI component defaults to one of these styles.

  • Headlines are large texts, ranging from 1 to 6. Heading 6 is the smallest heading and is used for application bar and dialog box headings. Headline5 is used for large text in dialog boxes. The remaining headings can be used to highlight short and important text and numbers.
  • 弹 幕 Smaller than the Headlines. They are used for the contents of the list. For example, Subtitle1 is used for heading text, and Subtitle2 is used for subheading text or text to emphasize lists that normally belong to Subtitle1.
  • Body texts are used in long texts. The default material text style in Flutter is BodyText2. BodyText1 can be used to emphasize text that is usually BodyText2.
  • Caption and Overline are the smallest styles used for comments such as image titles and diagrams.
  • Button text styles are action-related and are used for buttons, labels, dialogs, and cards.

3.2 Fonts

Each font has its own characteristics, which is a powerful tool to give information about the company’s identity, such as traditional, fun, clean, young, warm, modern, elegant, mature and so on. Typically, companies have their own branded fonts, but we don’t need to use their fonts in our applications.

To apply a font system, I first selected three Fonts from Google Fonts. Rubik, Righteous, and Source Code Pro. Google Fonts is open source, free to use, and supports Flutter directly. Second, I used the font scale generation tool to identify the 13 text style categories defined in the Material guide. This tool generates code for Flutter, Web, and Android platforms.

Material. IO/design/typo…

Material design does not allow handwritten and scripted text styles (expressive fonts) to be used as body and caption text, because they become difficult to read as the font size decreases. These styles should be used with Subtitles, although the guide still advises caution when using them to do subtitles. The font scale generator also does not allow you to select expressive fonts for body and captions. In the demo app, I still use the expressive Rightheous font in the body and captions for demo purposes, although it’s not recommended.

4. Shape

Shapes are used to express brands and emphasize different parts of the user interface. Actively applying shapes to each component without a strategy can be distracting, detracting attention, and creating ambiguity. For example, applying shapes to a bar chart can lead to ambiguity about the values represented. In the demo application, I applied shapes to almost all UI components for demo purposes, which is definitely not recommended.

So far, Material Design has two shapes and styles: rounded corners and cut corners. When applying shapes, we need to consider four different categories of UI components.

  • Compact components: Button, Chips, FAB, Snack bar, Tooltip, Collapsed state of expanding bottom sheet
  • Medium components: Card, Dialog, Menu
  • Large components: Data table, Navigation drawer, model, and standard bottom sheet
  • Finally, there are some components that we should not apply shapes to: appbars at the top and bottom, checkboxes, Dividers, Radio buttons

We can assign different values to the upper right corner, lower right corner, upper left corner, and lower left corner of a shape. In the Material guide, there is a nice table that explains the minimum/maximum number of rounded or cut corners and which corners the shape of each part can be applied to. For example, a chip can have a maximum fillet radius value of 10px, but not a cut Angle. A button can have a maximum radius of 20px and a maximum Angle cut of 6px.

I applied shapes to the UI components in the demo application based on the following observations. The ATA logo has clear rounded corners. Biohack’s logo has a sharp geometric cut. Codeland’s logo is more like a rectangle, with a very small rounded corner value at the corners.

5. Icons

The Material design icon is minimalist, modern, and is available under the Apache license, making it free to use and remix. They can be downloaded as raster or vector images. I prefer vector images to raster images because they are scalable and smaller.

The Material icon can also be used as an icon font in the Web and Flutter projects. Icon fonts are drawn with glyphs in the font, but instead of letters, ICONS and shapes. In the Android project, we added the material design ICONS from the SVG file to the resources folder as XML files. In the Flutter project, however, we do not need to explicitly add them to the project, as all ICONS can be added at once as font glyphs. Flutter optimizes the Material Design icon library by removing unused symbols from the font set. This reduces the application’s size, load time, and memory usage.

So far, material ICONS have five different themes: Fill, Sharp, round, outline, and bicolor. Flutter supports a filling, round, outline and sharp style. In consideration of brand shape, ATA will use round ICONS, Biohack will use sharp ICONS and Codeland will use fill ICONS.

Conclusion

In this article, I explained the subject properties and the corresponding Material design guide. I’ve been developing applications for years without knowing the details. When I worked in the company, my designer colleagues took care of these details and provided me with the design. When I started working on my own projects, I had to build a design system myself. The details in this blog post helped me a lot.

Part translation:

Ulusoyca.medium.com/switching-b…

Material. IO/design/colo…

I would like to recommend my website xuyisheng. Top/focusing on Android-Kotlin-flutter welcome you to visit