Welcome to Mockupless
Mockupless is a design methodology that explores how code can be an effective and easy to pick up tool for interaction designers. Mockupless aimes to smooth the learning curve and to provide a selection of tools and techniques that allow you to write code quickly and with lean workflow in mind.
Any kind of prototyping brings thoughtfulness to the design workflow by enabling testing, analysis and iterations. Yet, only prototyping with code allows you to test ideas early and thoroughly, iterate effectively and make the designs as close to the final product as you can, without having to worry about the limitations of your design tools. All that within a single ecosystem.
Currently, two introductory courses are available. They teach the basics of coding and the Mockupless approach to prototyping:
Also, take a look at the prototypes inspired by Mockupless:
Technologies
Mockupless is built around web technologies. HTML, CSS and JavaScript are at the core, but some modern frameworks and tools play the crucial role in shaping the methodology:
- Flexbox and Tailwind are used to quickly create layouts that can be altered easily.
- Vue.js is used to add interactivity with the smoothest learning curve and minimum code.
- CodePen is used to create, preview and share prototypes, all in one place.
Beta
The Mockupless website is currently in beta. Here, this unscientific term means that with all the effort, passion and editing that’s been put into the website, it’s not complete and may contain some embarrassing mistakes. If you encounter one, please be patient and if you have a minute, send an email to poorbeta@mockupless.com.
This website is designed to constantly improve and evolve, and neither of these causes can be achieved without help from the community. Feel free to address you concerns, ask questions and seek help in the Gerenal channel of the Mockupless Spectrum Forum.