David Braun

Draftium — Turbo prototyping tool for websites 🚀

Featured
127

Draftium is a turbo prototyping tool which helps you to build a website structure in a few minutes with ready-made blocks.

Add a comment

Replies
Best
David Braun
Hello, PH world. We've done 500+ websites for our customers during the last 6 months and realized that the main challenge is not to develop the website for a customer but to collect the content and synchronize the vision together. We started to look at many prototyping tools and found that all of them operate with elements and it takes hours and hours to complete the prototype for a client - it doesn't work us internally. So we've had to build our own turbo solution. This is how Draftium was born. Now, we've decided to release it as a free tool for other developers, studios and marketers to improve their process internally and externally. We see the future of the tool as one single place for ideating with the customer and collecting all digital assets from him and the feedback too. Hope you guys will enjoy the product and provide a valuable feedback. All ProductHunters get 75% off the Pro plan with promo code: PRODUCTHUNTER
Knight 
@david_braun when will the promo end ?
David Braun
@imknight it ends January 1
Emme SINGER
@david_braun Firstly, I love the tool. Working with it, I didn't find an option to put a looping background video (typically home/landing page); and then to overlay words on top of that video. The Calls to Action are all 2-step processes: that is, the user enters hir name and phone; User requests a demo and gets a thank you. ......... So, what about an option that allows for a series of questions, each connecting to the next, with a progress bar at the top? The maker/customer decides how long the series should be and has an END/Thank you option to end the series. Allowing for an image to be uploaded into the footer would also be useful. So, I sound like I'm at a smorgasbord! sorry. .... But, it's in Beta ... so I thought I'd add my 2cents worth 😉
David Braun
@esinger Thanks Emme. Background video is on the way. Form wizard is in roadmap. Images in footer - good idea
Emme SINGER
@david_braun CONGRATULATIONS!!!!! 🖋 Design Tool of the Year: Draftium !!!! WELL DONE GUYS, you have worked HARD and certainly deserve it :-)
Stas Shyshkin

I have been testing alpha version of Draftium before the launch and must admit it has greatly simplified my work. So when I need to create a landing page, I make a quick wireframe (with copy) in Draftium and pass it on to UX designers. They already see what I want to get as a result and so we spend less time on numerous iterations.

Pros:

Clean and simple UI, saves a lot of time

Cons:

Would like to have a greater choice of blocks but I think they'll do that

David Braun
Great point, Stas. Copywriters like Draftium because they know exactly how much text should be published.
George Nurijanian
Why would you choose Draftium over LeadPages or similar?
Eugene Polev
People ask me on Fb is this a tool for lo-fi or hi-fi prototypes? The truth is: you can make both on Draftium. Create a draft structure from simple blocks in a few minutes and you are done with lo-fi mockup to discuss the concept. Add real texts, images, interactions and animations and it will be hard to tell whether it's a prototype or a live website. See examples below: Lo-fi: http://usejoylofi.draftium.site/ Hi-fi: https://usejoy.draftium.site/
Emme SINGER
@eugene_polev So, there are issues/bugs ... been using product all week as a vision communication tool. 1)Sometimes "preview" and "comment" show the mockup; sometimes they don't. .... 2)Sometimes an element saves to the intended page AND saves to other UNintended pages at the same time, creating some confusion. 3)Sometimes people using the link to a prototype get really weird unintended effects in their version, like element duplications sitting on top of each other, creating a "double-vision" effect; or complete unintended repetitions of elements one after the other. So this is a great product and absolutely useful. BUT please work on these issues or it will defeat the purpose as a team-collaboration/visioning tool.
Eugene Polev
@esinger Thanks a lot for your feedback. Wrote you in PM to have a deeper understanding of the issue.
Bogdan Tar
Is this react based app?
David Braun
@bogdan_taran Thanks for the question. Code is written on ReactJs and Rxjs, based on Functional Reactive Programming principals. At the backend we follow the paradigm "Infrastructure as a Code". We use Terraform and HELM to deployment our Kubernetes autoscaled cluster. P.S. I hope I said this right. Just asked our CTO - I don't understand these words 😄
Bogdan Tar
@david_braun Nice stack, thanks. Are you hiring?))
David Braun
@bogdan_taran if you know these words then yes, please PM
Eugine Dychko
Finally someone thought of prototyping tool for complete non-designers like me. Thanks guys!! What features does Pro plan has? Is the free plan limited in terms of projects or time?
Victoria Abed
@eugine_dychko I’ve got your pain. 😉 When our team shared Draftium concept, my thoughts were the same. Because I’d tired to draw the moqups for designers on paper or in Power Point. You can use Draftium for free and you are able here to create up to 3 prototypes and use free library of ready-made templates. You can work with free plan forever if you feel that those options are enough for you. Pro plan allows you to create unlimited amount of prototypes and use extended library of templates (there are more than 300 up to date), removes branding, and provides you with priority support. BTW: Check David’s message above - today for PH community PRO acc is super available :)
Pavlo Pavlenko
Love the simple interface and choice of templates. The only question for now is why are they all in b&w?
Eugene Polev
@pavel_pavlenko Based on our experience diving into colors and styles too early in website development process usually leads to lots of iterations and may shift focus from things which really matters in the beginning of the web project - structure and content. Converting structure in a full-fledged website is a next step in our roadmap.
Pavlo Pavlenko
@eugene_polev Thanks for the explanation. This definitely makes sense.
Igor Sokolov
How one shares this prototype with developers?
David Braun
@mirmidonez when you publish the prototype there is an option to share a link with an ability to leave comments like in InVision.
Victoria Abed
@mirmidonez Hi, thanks for your interest to Draftium. You can publish you prorotype online, get the link and share it with your developers. Moreover in collaboration mode you can add your comments right on the mockup the make the task more clear. Hope you will enjoy the experience! 😉
Andrew Alex
A great tool to sync your vision with the entire team. Takes literally minutes to create a prototype. Also loved the collaboration feature - reminded me of Pro products like Sketch and InVision, but in this case for free.
David Braun
@andrew_alexeyenko thanks a lot. The main difference is - we operate with ready-made customizable blocks and it speeds the process up to 5 times. Although you loose the flexibility a bit.
Ihor Shevkoplias
We are using Moqups for prototyping and it's been great. Your product seems to offer a better idea of what the final product will look like. Looks like a great tool for web development agencies. Good luck!
David Braun
@igorua thanks a lot. We used Muqups too but it takes too much time to get a multi-page prototype. This is how we came up with the blocks idea.
Colin Winhall
@igorua Another Moqups user here. Will be looking at this product for a possible switch.
Daniil Kopilevych
Draftium looks awesome. Congrats on the launch! What are your plans in terms of further product development?
David Braun
@daniil_kopilevych thank you. The next things on the agenda are: 1. Grant editing access to others like in GoogleDocs. 2. Export the code to Wordpress Guttenberg. 3. Export of digital assets from the draft to Dropbox, GDrive, etc
Olesya Novik

Awesome tool for marketers and those who just want to build trendy website within few hours.

Made a prototypes of my company's landing pages.

Pros:

Handy tool

Cons:

I believe it doesn't have any cons.

Victoria Abed
Thank you for your comments, Olesya. Hope you will love being with us🙌
Piotr Bartoszek
Great jobs guys, upvoted!
David Braun
@piotr_bartoszek thanks a lot. I read Owwly btw - great resource. Would be awesome to get some review there - we can provide you with the Pro plan to evaluate the product at its full potential.
Yura Krisarchuk
Great product! Good luck, guys:)
Victoria Abed
@yuriy_krisarchuk Thanks for your support 😉
Jaha Ganiev
Looks woow!
Eugene Polev
@jahaganiev Thank you! It would be great to get your feedback after the real usage.
David Braun
@jahaganiev thank you so much
Nicholas

I have yet to use it, but from the video alone, it looks like something to further speed our process.

Update: Loving this product. The makers are checking all the right boxes and what I love about it beyond the relatively generous free tier as well as the package this fits into, is the overall intent behind it. To cite a comment I made: "Absolutley love the motivation behind this: the combination of simplicity, speed and frictionless workflow paired with tasteful results," it just makes for an awesome combination not to be missed.

Pros:

Clean interface, fast workflow.

Cons:

(None)

Andrii Pavlov
Wow. Nicholas truly thank you for this review! I showed it to our developers, and they were happy like a kids that just get their Christmas present. Reviews like this one motivate us to make even better product. Cheers!
Nicholas
Can't wait to use this on a project, it's looking awesome. Out of curiosity, any plans for getting this for use cases outside of proptotyping and for final output like web builders?
Andrii Pavlov
@atomicnicholas Hey Nicholas! Looking forward for your feedback after using Draftium! As for web builder – actually we already made one. It's all started with idea of simple but powerfull sitebuilder. And we made it – it's called Weblium. For now it works in studio mode. Check David's Braun (CEO) first post here. After all we do plan to bring life in Draftium prototype with one click, applying smart UI kit and convert it to final website. Summarizing all that, the flow will be like: - you (or your customer) create prototype with one of the template, - apply your (or client's) content, - few revisions in collaboration mode to check is everything is fine - choose UI kit (magic) - you got a all-devices compatible website, with cloud hosting and other cool stuff already from the box
Nicholas
@andrii_pavlov Now that is an awesome workflow. I already found the many included templates a big timesaver, but removing too many steps involved in the . normal workflow yet maintain the intended quality of results with (the most) minimal input (lazy does it) makes for an incredible selling point. Something powerful (but in effect complicated) web builders fail to do seamlessly. Absolutley love the motivation behind this: the combination of simplicity, speed and frictionless workflow paired with tasteful results, like a holy grail that's finally coming to fruition.
Andrii Pavlov
@atomicnicholas Glad to hear that! Our mission is to make this process smooth and flexible at a time.
Anna Ponomarenko
I tried a bunch of different tools for prototyping. But this one is definitely one of my favorite. Really easy-to-use prototyping tool. Nice work. Did you thing of continuing the flow and give an option to some kind of transform UX to UI?
Victoria Abed
@anna_ponomarenko Thanks for sharing your experience, Anna. Actually we have website building platform which name is Weblium (weblium.com) that could help you convert ready-made prototype into a website on a single platform.
Yar Bose
Awesome product, upvoted!
David Braun
@jaroslav_bosenko Thanks a lot. Appreciate your support.
Nitesh Manav
Just upvoted. Looks super clean and beautiful. How is it compared to Invision? Any integration possibillity with WordPress ?
Andrii Pavlov
@niteshmanav Thanks Nitesh! Invision can't "code" your prototype to the level when it's act like a real website. Also Draftium prototypes compatible with 99% of devices already from the box. So there's no need to design mobile and tablet version. In fact Draftium like Invision that code your wireframes. We plan to integrate with WordPress 5 Gutenberg in both sides. As for now we can manually convert prototypes from old WordPress right in Draftium.
otto schmidt

guys, awesome! definitely recommend to all those who involved in web development.

comment mode - so simple, but so powerful and useful tool to connect developer and client in one workspace. respect!

Pros:

fast mockup development; great ui/ux design; lots of website templates:

Cons:

as a developer i want to choose between more than one color palette;

David Braun
Thanks a lot, Otto. We are working now on giving your client not only comments-only access, but also an editing access too.