Fanbyte Design System

Fanbyte Design System

The Basics

A design system created to support the need for a core experience with unique treatments for several verticals.

Media

No items found.
View All Images

Context

Fanbyte required a redesign of the site in 2023 to focus on providing guides and tools for live services games such as Final Fantasy XIV and Destiny 2. Along with this, the site needed to migrate CMS platforms.

Minimal Disruption of Brand

Fanbyte has gone through multiple iterations over several years, so maintaining consistency with the brand was key to avoid unnecessary disruptions to existing users and overall user perception of the site.

Insufficient Accessibility Support

Basic elements on the site were inconsistent with color contrast pairs, element hierarchy, and more which impacted fundamental accessibility as well as SEO.

Restrictive Design Patterns

Many of the existing design patterns made it difficult to adjust core page layouts, including challenges with ad placement.

Outcomes

Modular, Extensive Design System

The design system follows an atomic methodology to ensure optimal reuse and consistency throughout the site. Fundamental visual accessibility standards were baked in to atomic elements so that larger components would be as clear and readable as possible.

Extensible

Additional sublibraries were established for primary game titles that the site provided content and tools for so that layouts and modules could utilize stylistic overrides to make the corresponding verticals on the site feel more connected and cohesive to the particular game title.