All work

Sonic

Year
2022
Scope
UI design, UX design, prototyping, branding
Sonic — the logo on green silk

Sonic identity in motion.

Selected brand frames and the published logo animation from the Sonic Web3 identity case. Created with Nikita Loginov and Dmytro Dintsen.

Sonic Web3 identity application
Sonic Web3 identity detail
Sonic Web3 identity graphic

A market story built from the interface.

Market activity, product benefits and the community model share the same visual language. The full homepage is shown in desktop, tablet and mobile layouts.

Sonic · Desktop · Homepage
Homepage
Sonic · Tablet · Homepage
Sonic · Mobile · Homepage

Navigation and preferences.

A cookie notice and the phone navigation menu.

Sonic · Desktop · Cookie notice
Cookie notice
Sonic · Mobile · Cookie notice
Menu
Sonic · Mobile · Menu

When a page is missing.

The 404 screen keeps the same recovery state on desktop and mobile.

Sonic · Desktop · 404
Page not found
Sonic · Mobile · 404

Before the content arrives.

Loading screens retain the product identity at each viewport.

Sonic · Desktop · Loading
Loading
Sonic · Mobile · Loading

One visual language.

Colour, type and brand applications connect the product and its identity.

Sonic · Colour system
Colour system
Sonic · Typography
Typography
Sonic · Identity applications
Identity applications
Sonic · Merchandise
Merchandise
Sonic · Brand in context
Brand in context

Every step of the swap.

Connection, token selection, transaction details and slippage precede confirmation. Waiting, pending and completed states make the transaction status visible.

Sonic · Wallet disconnected
Wallet disconnected
Sonic · Wallet connected
Wallet connected
Sonic · Token selection
Token selection
Sonic · Token selection · balance state
Sonic · Quoted swap · connect wallet
Quoted swap
Sonic · Quoted swap · ready to swap
Ready to swap
Sonic · Slippage settings
Slippage settings
Sonic · Transaction details
Transaction details
Sonic · Keep tokens in Sonic · explanation
Keep tokens in Sonic
Sonic · Confirm swap
Confirm swap
Sonic · Waiting for wallet confirmation
Waiting for wallet confirmation
Sonic · Transaction pending
Transaction pending
Sonic · Swap completed
Swap completed

A place to build.

Developer documentation and its example page, on desktop and on a phone.

Desktop · Developer Docs
Developer Docs
Desktop · Example
Example
Mobile · Documentation overview
Mobile · Contract setup

The system, explained.

The whitepaper covers the platform, market, current model, roadmap and proposed trading standard.

Desktop · Existing world
Existing world
Desktop · Future of Sonic – Roadmap
Future of Sonic – Roadmap
Desktop · Introduction
Introduction
Desktop · Platform Overview
Platform Overview
Desktop · The Market
The Market
Desktop · Towards a Universal Standard for Decentralized Cryptocurrency Trading
Towards a Universal Standard for Decentralized Cryptocurrency Trading

About.

The about page tells the Sonic story and introduces its partners.

Desktop · About
Mobile · About and partners

Features.

Each feature, from swaps to liquidity, gets its own explainer.

Desktop · Features · Overview
Desktop · Features · Using swaps
Using swaps
Mobile · Feature overview
Mobile · Using swaps introduction

FAQ.

Help topics with a search field at the top.

Desktop · FAQ · Overview
Desktop · FAQ · Using swaps
Using swaps
Mobile · Help categories
Mobile · Pick a swap pair

Roadmap.

The roadmap sets out where the platform is heading.

Desktop · Roadmap
Mobile · Roadmap overview

Logo geometry.

The logo is drawn on a strict geometric grid.

Sonic · Identity opening
Identity opening
Sonic · Brand expression
Brand expression
Sonic · Clear space
Clear space
Sonic · Logo scale
Logo scale
Sonic · Logotype construction
Logotype construction
Sonic · Logomark construction
Logomark construction
Sonic · Logo usage
Logo usage

Colour and typography.

Secondary colours, logo colour variants and the headline typeface.

Sonic · Secondary colours
Secondary colours
Sonic · Logo colour variants
Logo colour variants
Sonic · Headline typography
Headline typography

Across channels.

The identity in advertising, on the website and in social media.

Sonic · Advertising
Advertising
Sonic · Website identity
Website identity
Sonic · Social profile
Social profile
Sonic · Social content
Social content
Sonic · Developer community identity
Developer community identity

More work

Let’s make complex feel clear.