Color and typography are two core elements of web design that not only convey the team's image and atmosphere, but also create a unique and engaging visual experience that enhances the reader experience.

• Fonts & Typographiy

Typography is an important part, a blend of reading experience and visual art.

When choosing a font, we took into account the scientific nature of the project and the importance of the reading experience, and Chillax sans-serif stood out for its simplicity and clarity, making it our first choice.

In large text layout, we tend to use larger line spacing and flexible use of paragraph spacing to create a sense of breathing between words. In addition, we more often create a contrast between the thickness of the text, and use different colors to support the prompt, creating a concise, focused reading effect.

• Color Scheme

The color scheme was carefully designed to better reflect the style of our team's project and to enhance the readability and comprehension of the content. In addition, we applied the same color scheme to the team's PowerPoint and related materials.

We combined the design with environmental concepts and carefully chose a unique and coordinated set of color schemes. The background color uses dark blue and dark green, which blend together to create a balanced and harmonious color contrast. In order to highlight key content, we introduced sea green and magenta as highlight colors. These bright and vivid colors add a light and fresh atmosphere to the entire page, representing intelligence and creativity, which is in line with the technological attributes embedded in biodegradable plastics. At the same time, we use more transparent base color effects to make the page more layered and three-dimensional.

• Elements

Appropriate element design can express the tone of the project. According to the characteristics of the project, we designed different elements with a view to creating an environmentally conscious and technologically aware web interface.

• Our program features & counterpart elements

Table 1 | The relationship between our program features & counterpart elements

Project Tone	Element
Plastic Pollution	Dark Tone Plastic Bags
Global	Latitude and Longitude
Microplastics	Magenta particles
Industrialize	Bacteria
Explore	Mountains
Outlook	Light Toned Waves

• Logo

The team logo is the image symbol of the team, and is the outward expression of the program spirit. Inspired by the logo of Shandong University, we used the combination of the ocean, mountains and the sun to create a life-affirming and recognizable team logo.

The overall color of the logo is dark green, and the art style is flattened to achieve a harmonious and balanced sense of technology. At the same time, we created different variants of the logo to ensure its visibility on any background.

• Interaction

In order to improve the reader experience and make the pages more vivid and interesting, we have introduced a lot of interactive design and motion effects into our web pages.

Among them, effects such as slide to emerge, parallax scrolling and hover highlighting are the classic effects we mainly use, which make the website more attractive, easy to use and practical by creating a smooth, coherent and immersive visual experience and enabling readers to navigate and operate more easily.

• Accessibility

Web readability design is the foundation for creating web pages for a wider audience. Good web page readability not only conveys project information more accurately, but also reduces the reader's reading pressure and creates an easy and comfortable web page experience.

• Contrast

WCAG (Web Content Accessibility Guidelines) is a widely recognized international standard for web page readability that emphasizes elements such as good color contrast and adequate font size to ensure that all readers can easily read and understand the content of a web page.

In June 2018, WCAG 2.1 became a W3C Recommended Standard. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text; WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for regular text and 4.5:1 for large text.

By using the contrast ratio and relative luminance, we checked the color scheme. The results show that all of our color schemes meet the AA or higher standards and are suitable for reading.

• Use of Color

Color accessibility is another important aspect in web readability design. The Color Universal Design (CUD) system focuses on factors such as color contrast, saturation, and brightness, which improves the attractiveness of the content and the reading experience of readers through scientific color matching. This design method is not only applicable to general readers, but also to special people with color blindness or amblyopia.

• Navigability

A website that is easy to understand and use is critical to the reader experience. Great web navigation plays a key role in this. It helps readers find the information they need quickly, improves site usability, and enhances reader satisfaction.

We use clear, concise labels to describe each navigation link, and employ a logical structure and hierarchical layout to make navigation menus easy to navigate and understand.

In addition, we take care to use obvious navigation locations, such as the top navigation bar or sidebar, as well as eye-catching navigation styles (e.g., colors, underlining, etc.) to enhance the visibility of the navigation.

• Responsiveness

With the increasing popularity of mobile internet today, cross-platform compatibility in web design is especially important. Responsive layouts automatically adjust fonts and typography to different device screen sizes and resolutions to ensure display and reader experience on all platforms.

Taking into account the screen sizes of desktops, tablets, mobile devices, and everything in between, we optimized the page hierarchy to ensure that content resizes correctly and key navigation buttons are easily accessible. Have a try!