An industry leader in the creative software market, Adobe has recently begun making forays into web applications and open-source projects online. The Still helped Adobe translate Topcoat, an open-source framework for desktop web-apps, to the mobile space while maintaining strong web-standards and usability.
Initial exploration included themes based off of a user-chosen base colour value.
The Still standardized colours across the Topcoat light and dark themes.
We worked with type size, weight and padding to ensure readability and usability on touch devices.
Development work was done in LESS to allow for future extensibility.
TopCoat Interface

Topcoat needed adjustments and refinement to be properly translated to mobile. The Still envisioned Topcoat users branching and creating custom themes, growing and enlivening the community.

New elements created for Topcoat.
TopCoat Mobile

Based on mobile design and interaction patterns, The Still proposed and created several new elements that didn’t exist in desktop Topcoat.

Screenshots from Behance's current webapp (left), and the same app with Topcoat theme(right).
Screenshots from Behance's current webapp (left), and the same app with Topcoat theme(right).
Screenshots from Behance's current webapp (left), and the same app with Topcoat theme(right).
Screenshots from Behance's current webapp (left), and the same app with Topcoat theme(right).
Screenshots from Behance's current webapp (left), and the same app with Topcoat theme(right).
Screenshots from Behance's current webapp (left), and the same app with Topcoat theme(right).
TopCoat Process

We tested the newly defined visual language by translating Behance.net’s Mobile website into Topcoat Mobile. This process helped us focus in various cross-device differences.