How to create unlimited layouts for your websites in less time with zero coding

So I make this app to solve this problem.

Blueprints app— simple layout/templates generator of putting in basic blocks elements in a web page.

Watch the video how you can choose different blocks and combine it together and export HTML file ready for web publishing.

Subscribe > on ProductHunt to get demo app before it launch

Why a wireframing app?

Searching in web I found some Reddit threads answer this question. Here some of them with my comments:

“It takes 2 actions and 2 approvals to go from design app to browser. Because from a prototype in Sketch to what it looks like on the browser and how it functions.
HTML wireframes-it’s a quick way of trying something that is accessible.
Working in Blueprints app
[HTML wireframes] …only takes one action and one approval. If the layout changes are in one branch ready to be tested and merged…”

This is also a good point, because in the Blueprints app you can export ready-to-publish HTML file immediately.

“Project wireframing helps you save precious time when designing anything in your applications or websites. …we’re talking structure (layout) and components.”
“Project wireframing is a very minimalist technique of design. …Think of it as the pencil sketch version of a website or component, only digital and way easier to achieve and edit.”

Why app based on the Bootstrap framework?

I love Bootstrap from the first version. It was my lifesaver.

But a lot of time has passed from there and technologies are changing…
so I decided to make sure again that people use Bootstrap and why.

Here are some excerpts from Reddit comments I found:

“…not using bootstrap is just a waste of time unless you really want a specific look. There’s a reason bootstrap is so popular. Especially if you haven’t started with a mock-up Bootstrap makes it very easy to make a clean looking website.

and this one

“Will it look incredibly generic? Yes. Will it be functional and take almost no time to make? Yes.”

Do customers really need this app?

So I decided now to work more closely with my customers and therefore I am sharing a roadmap and this guides me in developing.

I received this email from one of my customers who watch the first demo video and subscribed to app pre-launch:

“Hi — I am looking for a simple bootstrap layout tool to produce sales pages… Your templates are very nice and clean. Many blocks builders focus on helping people make very complex layouts but there are no tools to make simple layout forms like sales pages... 
Simple layout builder of putting in basic elements in single col centered page would be very good

thank you”

But Not only for simple single col centered layouts… built them all!

For first release Blueprints app included a huge pack of design resources:

  • 450 HTML block sections in 17 categories
  • 25 navigation bars
  • 180 example pages
  • Easy to use app interface
Every element was crafted with love to speed up your workflow.

You can use the app for:

  • Inbox for web projects ideas
  • Creating website mockups
  • Created high-fidelity wireframes
  • Created simple responsive* websites
  • Create templates for CMS integration

*Responsive means that each block was created and tested for good display on mobile devices.

How does app works?

You can choose different blocks(well-coded components) combine it together in the simplest interface and export to HTML in a click.

For whom Blueprints app may be useful:

  • for designers not familiar with programming
  • for novice developers and students
  • for IT web design and development teachers
  • for makers and startups
  • for web entrepreneurs and web marketers
  • for advanced developers when they need to quickly start simple projects
  • for anyone who wants to create a mockup/prototype/website template quickly
  • for you maybe? :)

Layouts?

In the beginning, I created the most frequently used website blocks and pages. Landing pages, startups pages, business pages, e-commerce, information sites and so on…

Then I added more blocks with a unique arrangement of elements and complexity plus few interactive elements(sliders, tabs) and sections with embed videos for showcasing. All blocks were created on Fibonacci grid rules. I also always utilize it to Z and F layouts concepts.

You can save and open Bootstrap 4 templates
http://demo.bootstraptor.com/blueprints-kit/
http://demo.bootstraptor.com/blueprints-kit/
http://demo.bootstraptor.com/blueprints-kit/
http://demo.bootstraptor.com/blueprints-kit/

I also inspired by the best sites of the world’s Unicorns and created some blocks based on their layouts. (These companies spent a ton of time thousands of dollars on making and conversion testing — now you can use their ideas and layouts.)
And from some projects that I love for inspiration. Because — why not? :)
Here is a funny tweet about :)

https://twitter.com/levelsio/status/992336153519927297

While I created all the new blocks and used my beta application to create web templates. You can also use them in the application — since the application has the function of opening and saving templates (only native Bootstrap 4).

but of course, there were people who need such web templates…

“🙌 🙌🙌 this is exactly what i was looking for” @marcantoinefon

https://twitter.com/AndreyAzimov/status/992359906631073793

Now, having received all my experience and watching many similar applications on the market. I still don’t see any suitable options for me.

All they have are extra options but too complex or difficult to learn and use interfaces as many of my customers says. Or vice versa, the functions are too poor and there is no hope of adding new ones.

In addition — the license of all such products does not allow me to create templates for sale on the markets.

So I decided to add Developer License for those who plan to sell templates on the markets(request me for this option), but not for generators or web builders, as I make it myself :)

Why Blueprints name for the app?

“You can also think of wireframes as blueprints. We can learn so much from architects, especially the fact that they don’t start developing anything until they establish the blueprint.”

How I make it.

“It will be a platform”, I thought — “but at the beginning the simplest as possible”

“Simple layout builder of putting in basic blocks elements in a single web page” … and then users will decide which functions are needed in new versions. Of course I have a roadmap, but there are too many ideas possible (:

Therefore, I plan to use the lean startup MVP philosophy this time :)

… you know this :)

who said that the Minimum Viable Product is all about to create product faster? Besides I tried to create at least a Minimum Lovable Product — for myself it takes mooooore time

Aaaannd…! after 24 weeks(!) in hard thinking and coding — I did it! :)

So the first app version is ready and you can try the application — subscribe to get beta version >

The first stage of the app is ready! So I decided to announce it on Makers Festival by Producthunt.com so you can try beta app before it launch.

Get demo app.

You’ll also get free demo app and 25% early birds discount when its launch.

Try free demo & buy now >

p.s. But even bootstrap’s not enough these days for mobile screens that require specific micro-interactions or parallax — Blueprints app also will gradually be updated(build-in app autoupdates) and new features will be added soon.

Stay tuned!

Please share your thoughts and comments as it allows you to make the application more convenient and useful for you!

Hope this app can solve the pain of some people like you and me! :)

Cheers, Anatolii (a.k.a. @Bootsraptor)