The Cultural Landscape Foundation

2019
Brand Identity, Generative Design, Web Design

The Cultural Landscape Foundation (TCLF) exists to educates and engages the public to make our shared landscape heritage more visible, identify its value, and empower its stewards. The redesign represents the visual attributes of the cultural landscape, and the geometric nature of the visual system allows flexibility, adaptability and variety.

The Cultural Landscape Foundation

2019
Brand Identity, Generative Design, Web Design

The Cultural Landscape Foundation (TCLF) exists to educates and engages the public to make our shared landscape heritage more visible, identify its value, and empower its stewards. The redesign represents the visual attributes of the cultural landscape, and the geometric nature of the visual system allows flexibility, adaptability and variety.

The Cultural Landscape Foundation

2019
Brand Identity, Generative Design, Web Design

The Cultural Landscape Foundation (TCLF) exists to educates and engages the public to make our shared landscape heritage more visible, identify its value, and empower its stewards. The redesign represents the visual attributes of the cultural landscape, and the geometric nature of the visual system allows flexibility, adaptability and variety.

The Typescape System

Using the alphabetic system to construct the topographic view of the landscape by assigning each letter to a shape. When the words are typed out, they will be translated into an image. Here, the topographic view formed by text is referred as Typescape and individual letters are Typescape Letters. Ideally, the system can be built as a program to produce different topographic views determined by input text.

The Typescape System

Using the alphabetic system to construct the topographic view of the landscape by assigning each letter to a shape. When the words are typed out, they will be translated into an image. Here, the topographic view formed by text is referred as Typescape and individual letters are Typescape Letters. Ideally, the system can be built as a program to produce different topographic views determined by input text.

The Typescape System

Using the alphabetic system to construct the topographic view of the landscape by assigning each letter to a shape. When the words are typed out, they will be translated into an image. Here, the topographic view formed by text is referred as Typescape and individual letters are Typescape Letters. Ideally, the system can be built as a program to produce different topographic views determined by input text.

TCLF logo configuration, using the abbreviation TCLF in Typescape letters.

TCLF logo configuration, using the abbreviation TCLF in Typescape letters.

TCLF logo configuration, using the abbreviation TCLF in Typescape letters.

Logo configurations for their programs, typeface and color palette.

Logo configurations for their programs, typeface and color palette.

Logo configurations for their programs, typeface and color palette.

Color Palette and Typography

The color palette is inspired by the cultural landscape which consists of colors from raw building material and nature. Brown and green are the main colors of the brand and dark gray is widely implemented for black-and-white commercial usage.

Color Palette and Typography

The color palette is inspired by the cultural landscape which consists of colors from raw building material and nature. Brown and green are the main colors of the brand and dark gray is widely implemented for black-and-white commercial usage.

Color Palette and Typography

The color palette is inspired by the cultural landscape which consists of colors from raw building material and nature. Brown and green are the main colors of the brand and dark gray is widely implemented for black-and-white commercial usage.

Implementation

The flexibility of the visual identity can be widely adopted for different mediums and allows customization. For example, the business cards spell out the typescape of each business card holder. Typescape letters are incorporated as part of the UI on the TCLF website.

Implementation

The flexibility of the visual identity can be widely adopted for different mediums and allows customization. For example, the business cards spell out the typescape of each business card holder. Typescape letters are incorporated as part of the UI on the TCLF website.

Implementation

The flexibility of the visual identity can be widely adopted for different mediums and allows customization. For example, the business cards spell out the typescape of each business card holder. Typescape letters are incorporated as part of the UI on the TCLF website.

Typescape Generator

A typescape generator is designed to create customized typescape for various graphic usage. A user can input the words, adjust the configuration of typescape, and save it as SVG, png, and jpeg with the program.

Typescape Generator

A typescape generator is designed to create customized typescape for various graphic usage. A user can input the words, adjust the configuration of typescape, and save it as SVG, png, and jpeg with the program.

Typescape Generator

A typescape generator is designed to create customized typescape for various graphic usage. A user can input the words, adjust the configuration of typescape, and save it as SVG, png, and jpeg with the program.

A User-friendly Mobile Experience

The redesign of their mobile site focuses on the reorganization of content. Create a hamburger menu that organizes different categories. The main page cleans up the layout and also adopts a responsive design that creates a better proportion between images and text. The feature section on the TCLF page also guides users directly to the most important events of the month.

A User-friendly Mobile Experience

The redesign of their mobile site focuses on the reorganization of content. Create a hamburger menu that organizes different categories. The main page cleans up the layout and also adopts a responsive design that creates a better proportion between images and text. The feature section on the TCLF page also guides users directly to the most important events of the month.

A User-friendly Mobile Experience

The redesign of their mobile site focuses on the reorganization of content. Create a hamburger menu that organizes different categories. The main page cleans up the layout and also adopts a responsive design that creates a better proportion between images and text. The feature section on the TCLF page also guides users directly to the most important events of the month.

Desktop Version

Structured similarly to the mobile version of the site, the laptop version showcases important information about the organization on its home page. Moreover, to create more visual consistency, thumbnail images are black and white and will show colors on hover. The visual identity is also adopted in the UI as every section uses different typescape letters for different information.

Desktop Version

Structured similarly to the mobile version of the site, the laptop version showcases important information about the organization on its home page. Moreover, to create more visual consistency, thumbnail images are black and white and will show colors on hover. The visual identity is also adopted in the UI as every section uses different typescape letters for different information.

Desktop Version

Structured similarly to the mobile version of the site, the laptop version showcases important information about the organization on its home page. Moreover, to create more visual consistency, thumbnail images are black and white and will show colors on hover. The visual identity is also adopted in the UI as every section uses different typescape letters for different information.