Today we have released the Envato Market ‘Structure Styleguide’ to the public.
https://market.styleguide.envato.com
A Structure Styleguide is a special breed of living styleguide, designed to document an application’s UI logic and all of the possible permutations of the UI.
The goal is to have a complete and shared understanding of how an application behaves in any situation, even in the most uncommon edge cases, without having to laboriously recreate each scenario by hand.
What does it do?
The Envato Market Structure Styleguide is the very same tool that our developers, designers, user experience experts and product team use day-to-day to build Envato Market. It is a living, breathing work in progress and its various elements are likely to change at any time without warning.
Although at this stage only a small percentage of the application lives in the styleguide, we are continually adding more as we develop new and exciting features or have the chance to improve existing ones.
Why do this?
Although the content itself may not be super useful to anyone else, we hope that by making it public we can share our knowledge and experience of a development technique that we have been refining for the past two years and found tremendously beneficial in building complex user interfaces: Styleguide Driven Development.
By making it public, we hope that other people can learn first-hand the benefits of a Structure Styleguide and how to effectively document an application’s UI so that nothing is out-of-sight, out-of-mind and ultimately neglected.
Resources
To learn all about ‘Structure Styleguides’ as well as ‘Styleguide Driven Development’, here are a bunch of resources we’ve put together:
- Styleguide Driven Development (blog post)
- Simplifying your workflow with SDD - Agile Australia Conference 2015 (slides)
- Example Component (gist)
Update: We have been actively working on a new design for Envato Market to provide better design and user experience, as a result the market styleguide will no longer be maintained. Please use our new, updated site envato.design.