TODH ❤️ 🙌 🏃 💭 Rapid Html Prototype
Built using the principles of atomic design
Full-fidelity, feature complete, clickable HTML prototype. I have merged the concept of a style guide and a prototype into a single, unified product for all design exploration to take place. As the prototype evolves, so too does the style guide, because they rely on each other. Our prototype offers a huge number of advantages over other prototyping methods.
Pain points
- Modern day web interfaces are large, complex systems of interoperable parts. If not planned thoughtfully, UI code can become overly complex and difficult to scale.
The Source of Truth for Our Product
First and foremost, our prototype acts as the source of truth for the future vision of our product. Designers, developers, product managers, other business units and key stakeholders reference it on a daily basis. It replaces the need for detailed specification documents or lengthy conversations about intentions. Plus, by working directly in the browser, we are able to present work in the final medium much sooner in the process.
Speed and Confidence
Perhaps one of the biggest advantages of our approach is the speed at which we can gain high levels of confidence in our decisions. The prototype allows us to quickly experiment with various combinations of components to see what works and what doesn't. It's like building a house out of Lego -- if one brick doesn't fit, you can easily replace it with another.
In TODH's living prototype, we can build entirely new interfaces and product flows -- that look and feel real -- in few time. This allows us to iterate more often and gives us a very high level of confidence in the decisions we make.
- We can create both the parts and the whole of a UI design system concurrently
Advantages for User Testing
By including every page of our real product in the HTML prototype, it allows our user testing participants to explore more deeply during tests, offering us greater insight into what they are thinking and how they are approaching the problem. Designers can see how users would interact with their interfaces within the context of the entire product. These types of insights would not be possible with a typical, more limited-scope prototype where only certain user flows are anticipated and designed for.
Faster Outcomes
Ultimately, as designers, the sooner we are able to see the work in the final medium, the more confident we can be about our product. By working directly in the browser, we bypass a number of steps and expedite our design process. This allows us to make confident decisions, faster.
Why
Prototypes allow us to make quick decisions about our products without having to spend time or money on the expensive process of building real things.
My "Unicorn" Workflow for rapid prototyping
- Formpree
- SVG xlink
- Naming conventions & methodologies
- OOCSS
- BEM
- Atomic Design-Approach
- Sass
- Html Templating
- Pug (Jade)
- Google Fonts
- Version Control
- Prepros Build process
- The "Partial" Convention
- Syntax-checking
- Transpiling
- Live reloading
- Html/Css Minifying & compression
- Source Maps
- Assets optimization
- Bower
- Hosted on Github Pages
To Do
- One line command to deploy "dist" folder to gh-pages directly
by Sergio Forés - @t0tinspire