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.
- 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.
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.
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
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.
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.
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.
- Formpree
- SVG xlink
- Namin conventions & methodologies
- OOCSS
- BEM
- Atomic Design-Approach
- Html Templating
*.kit - Google Fonts
- Codekit 3 Build process
- The "Partial" Convention
- Syntax-checking
- Transpiling
- Minifying
- Source Maps
- Assets optimization
- AOS - Small library to animate elements on your page as you scroll.
by Sergio Forés - @t0tinspire