3type Web Experience

A complete design overhaul of 3type (三言)’s official website – 3type.cn. The new experience is carefully tailored for every screen size from desktop to mobile. The redesign helps 3type reach more audience worldwide while strengthening the brand’s unique identity as a Shanghai-based atypical type foundry based and helps customers find their perfect typefaces and events.

This is a solo project as I worked as both web designer and web developer. The front-end implementation embraces recent CSS standards as CSS grid and flexbox helps make the layout more delicate and fluid.

Visit the website



Client Story

About 3type

3type is a typical & atypical type foundry based in Shanghai and a team with in-depth professional and multidisciplinary research experiences. What sets 3type apart from other service providers in China is their expertise in multilingual and multiscriptual typography and type matching. Besides typeface design and selling, 3type also facilitates type tutorials, workshops and tours, with their flagship brand – TypeSchool, promoting the type-related research and education in China.

Xingkai Next drafts and TypeSchool

3type Website 1.0

Previous Problems

  • Missing key functions, e.g. exporting & purchasing fonts
  • Poor experience on mobile devices w/p responsive design
  • Inconsistent design with other 3type marketing materials

Why Redesign

Goals to Achieve

  • Rearrange the sections of the site
  • Responsive design to cover all major screensizes
  • Design overhaul to march 3type’s marketing image
  • Uncompromised experience across various browsers
  • Fluid font exploring and purchasing workflow

Former 3type website experience

What next?

So I redesigned and rebuilt the 3type website from the ground up, evolving the experience to the next level.

Assesibility

Overhauled Navigation

The navigation bar is now sticky on top with sections rearranged so it‘s always accessible. On mobile devices, the menu can be toggled with hamburger button with fluid reveal animation. A touch of background blur (CSS backdrop-filter) is added to the menu giving it a modern look.

Desktop navigation

Mobile variations

Built for All

Platform Compatibility

The rebuilt site supports all major modern browsers on desktop & mobile. CSS Grid is implemented to create a more fluid layout for modern browsers, for older devices, we made the experience uncompromised with CSS Flexbox as a fallback method.

Embraces CSS Grid

Major browsers

Major platforms

In a multilingual world

Optimum Type Setting Practice

The composition of Chinese and western mixed text requires a more complicated font-family setting in CSS. Putting Latin typefaces in front of Chinese typefaces and arrange the number and orders of Chinese typefaces can help achieve the optimum result.

Input methods

Optimized for Touch

On devices with touch input, touch will simulate the mouse hover event. The image scales up and text opacity drops.

Normal (L) and touch hover (R) state

By type designers

Full Font Specification

The font detail page displays the full specification of the typeface, including designer, design time, version number, font styles, available formats, available scripts and OpenType features. We also made some nice glyphs to help you identify the available scripts in a glimpse. You won’t find anything missed.

Script glyphs

Purchase Experience

Simple & Streamlined

Customers can customize their font order with a clear and easy-to-read form. We provide live-time culculated total in both CNY and USD to better serve our customers around the globe. You can choose among PayPal, Alipay and WeChat Pay. As the order is placed, a comfirmation email will be sent. With just a few clicks and you’re done.

Buying options pop-up

Type reading on the Web

Meet 3typezine

3typezine is a digital magazine launched in 2019 covering everything about type culture. 3typezine is unique for its not focusing merely on the industry, but also trying to relate type to every aspect of our life: fashion, photography, gaming, films, literature, religions, etc.

Though most Chinese readers read 3typezine on WeChat, we keep investing 3typezine on the web because we believe in the power of internet and a future without walls and restrictions.

3tyepzine on the web has a much better experience than its counterpart on WeChat, it adapts for all screensizes and creates an unique reading experience with its beautiful pictures and type setting. The web version also provides links to references.

Read on the web

3type.cn now live

See it in person.

Visit the website