It's clear the web is missing a key tool when everyone is sharing addresses, dates, media and more in static text docs like it's still 2010. Miles Ingram and I created a web app that lets you transform that content into interactive and shareable maps, calendars, galleries, and more to communicate information the way it was meant to be seen.
Product from scratch
After creating YaHerd and AnimXYZ, Miles and I had a good foundation for creating fairly complex projects that had scalable and easy to use design and development systems. Within 6 months we had created a multiplayer information page creator that had features comparable to Notion, Craft, and other popular information tools.
Feature Presentation
We have big plans for Visible, but we needed to start with a solid foundation of features that solved some key use cases and gave us a platform to build upon. In addition to designing and helping develop complex views like custom maps, calendars, and slideshows, I created a custom landing page to describe Visible to the world and gather sign-ups for our beta.
Icons
It's the little things that make the personality of an interface distinct. For Visible I created a fully custom set of SVG icons powered by our design system CSS variables giving us full control over every property like stroke weight and fill opacities.
Colors
Consistency is key, and design system tokens help insure that colors throughout Visible are accessible, responsive to dark/light modes, and can be easily updated or refactored.
-
primary0
-
primary1
-
primary2
-
primary3
-
primary4
-
primary5
-
primary6
-
primary7
-
primary8
-
primary9
-
primary10
-
primary11
-
primary12
-
primary13
-
primary14
-
primary15
Components
Combining icons, colors, and other design system tokens, we created a component system that let us rapidly develop new features and iterate on them as we got feedback on different aspects of the user experience.
