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 on a web page.
Choose the blocks, get a website.
Watch the video on how you can choose different blocks and combine them together and export HTML file ready for web publishing.
Why a wireframing app? HTML wireframes-it’s a quick way of trying something that is accessible.
Searching on 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] …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 files 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 the 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 the first release Blueprints app included a huge pack of design resources:
- 500 HTML block sections in 17 categories
- 30 navigation bars
- 200 example pages
- Easy to use app interface
How does the app works?
You can choose different blocks(well-coded components) combine it together in the simplest interface and export to HTML in a click.
An intuitive interface makes creating website templates unbelievably quick. No matter what your web project type you can pick the best web layouts tailored to your content.
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.
An intuitive interface makes creating website templates unbelievably quick. No matter what your web project type you can pick the best web layouts tailored to your content.
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 design agencies
- 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.
BLUEPRINTS APP Included a huge pack of web layouts and example pages.
500 HTML5 ready-blocks
Find what you need easily, using quick navigation among screens that we divided into 17 categories depending on their purpose and characteristics.
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 :)
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
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 say. 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 :)
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 the beta app before its launch.
Get the demo app.
You’ll also get free demo app and 25% early birds discount when its launch.
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 auto-updates) 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)
