Tangle

Tangle is a website designed for a wildlife conservation program focused on resolving the imbalance in nature. The website has been designed to inform visitors about the current status of wildlife, offer comprehensive details about the program, and present actionable ways for individuals to contribute to wildlife conservation efforts.

About Tangle

Tangle's user interface design is a testament to its dedication to wildlife conservation and restoring balance in nature. The website's interface seamlessly combines functionality with aesthetic appeal, providing users with an immersive and intuitive browsing experience.

Minimal aesthetics

Tangle uses a minimalist aesthetic using simple rectangular elements, creating an experience where content and actions take the forefront of the user experience.

Product Architecture

Tangle website's information architecture uses a hierarchical structure allowing users to quickly navigate to their required information through branches of categories and explore the website.

Sections

Tangle is designed to efficiently organize all contents, to ensure clear user journey and seamless navigation.
Its contents has been consolidated into four main sections:

Visit

• Hours & admission

• Map

• Tours & Guides

• Group Visit

Exhibition

• Current

• Upcoming

• Past

Events

• Current

• Upcoming

• Past

Explore

• The Collection

• Artworks

• Artists

Tangle's sections

Landing Page

Landing page consists of key highlights of the museum, presented in an variation of content layouts to make different sections distinguishable and user journey interesting.

• Hours & admission
• Current exhibitions
• Events
• Collections
• Store
• More to explore

Call to action buttons are used in between for user convenience.

Task Flow

Tangle has a one-path flowchart for a specific mission.

Tangle's exhibition details

Tangle's artwork details

Layout

Grid system

Tangle uses grid system to ensure clean and organized layout.

Tangle's grid System

Elevation

Tangle's UI uses color to express elevation differences between elements, rather than shadows. For example, cards show the boundaries of their containers by having a color distinct from the background, without casting shadows.

Tangle's elevation

Color

Color theme

Tangle's color scheme is kept to black, grey and white, which acts as a blank canvas that accentuates the artworks and images on the website effectively, directing the user's attention to the visual elements. Adding additional colors could potentially divert the user's focus, especially considering the presence of vibrant images on this website.

Tangle's color theme


Accessibility

Color Contrast

Text legibility is preserved by an adequate contrast between the font color and the background. For WCAG 2.1 AA compliance, text should have a color contrast ratio of at least 4.5:1 (larger text at least 3:1).
NMMA has a minimum contrast ratio of 8:1 for normal text which complies WCAG 2.1 AA.

Typefaces

Type scale

Tangle's type scale provides the typographic variety necessary for its content. The website uses ‘Circular’ as primary typeface, making use of the variety of weights available with Circular Light, Regular, Medium, and SemiBold. ‘Playfair display’ has been used as secondary typeface.

Tangle's Type scale

Circular

Tangle uses the sans-serif typeface Circular as primary typeface.

Circular’s letterform

Playfair Display

Tangle uses the serif typeface Playfair Display as secondary typeface.

Playfair Display’s letterform

Iconography

Tangle's custom icons are designed with a linear style.

1. To create consistency, all of NMMA’s icons share the same underlying grid structure.
2. A collection of NMMA’s icons

Shape

Categories

Components are grouped into shape categories based on their size.
Shape categories let you set multiple component values at once. Shape categories include:

• Small components
• Medium components
• Large components

Tangle's shape categories

Components

Buttons

Tangle's buttons

Image List

Horizontal Carousel

This image list uses a horizontal carousel inviting the user to continue to scroll sideways and explore content.

Tangle's buttons

Grid

Grid layout is used to show artists.

Tangle's image grid

Motion

Tangle's motion design uses emphasized easing and longer durations to establish a bold and delightful experience.

Launch screen

Tangle uses a parallax animation to introduce the museum by dynamically showcasing its name and providing a glimpse of select artworks within its collection.

Tangle's launch screen

Panning animation

Collections are shown in slow horizontal movement of the artworks. Artwork’s labels appear while hovering over it.

Tangle's panning animation to show artworks

@2024 Tyler Schmidt All rights reserved.

@2024 Tyler Schmidt All rights reserved.