How to convert a Balsamiq wireframe to HTML/CSS

(This article was originally published on Yotako’s blog)

In our last post we went through the case of PSD to HTML/CSS conversion in the app development process. With this post we will go back in time, earlier in the design process, and tackle the case of wireframe into code conversion. For this purpose we will use Balsamiq, the well-known wireframing software, and see how we can combine several online tools in order to bring some innovation in the development workflow.

Designing wireframes is usually a good way to start an application project. Wireframes help to focus on usability and architecture first without the potential distraction of a fully detailed app design. They also enable to clarify the features from day one instead of wasting precious time on PSD or Sketch mockups that would potentially end up in the trash. For all these reasons it’s important to make the design and development process as iterative as possible from the beginning. And using a wireframing tool such as Balsamiq is a good way to achieve it. If you are new to wireframing have a look at this great collection of wireframes gathered by Emma Drews.

After several iterations on your wireframes you may decide to code your app from there and keep on iterating with a real code based app instead of a design. For instance, if as a developer you plan on doing the UI yourself in HTML/CSS you will probably not go through designing mockups with Photoshop or Sketch and you would benefit from rapid iterations from wireframes to interactive online previews. Getting source code based on your wireframes would enable you to save time in your front-end development.

Imagine you can get tailor-made source code based on your own wireframes and with the stack of your choice. Let’s look at a solution to considerably improve such wireframe to HTML/CSS workflow using Balsamiq and Yotako. With such solution you can develop web or mobile apps in a faster and easier way without programming manually from scratch looking at your wireframes.

Fine-tune your wireframes

In order to get the most out of Yotako your wireframes need to respect the Yotako guidelines. In these guidelines you can check the list of Balsamiq widgets Yotako currently supports. It’s also important to always put your widgets in a container (such as an iPhone or a browser window) so Yotako can apply the correct lay-out to your designs. You can also see how to use multiple pages and navigation in your wireframe so your application is already dynamic.

Example of an app wireframe designed with Balsamiq

Connect to Yotako and import your Balsamiq file

Yotako is an online tool you can use to translate design into code. Go to Yotako.io, sign up (it’s all free) and start your very first development project by importing your BMPR (the Balsamiq format) file into Yotako. In a couple of seconds your wireframe is imported and ready to be translated into the source code of your choice.

Import your design file

Select the stack of your choice

When your design is imported and ready to use, you now need to choose the code you want for your application. First tell the tool if you work on a web or a mobile application, then select the stack containing the libraries and frameworks of your choice. In this case we selected a mobile app with HTML/CSS.

Select your stack

Good to know: we are working to open source Yotako, so whatever the need you have for your code (due to dependencies or home-made code), you will be able to tell Yotako the code you want and customize it directly within Yotako.

Choose a repository and get your code

By default your code will be available on Yotako public repository on Github. If you have your own Github or Bitbucket account and want to access the code from there, just select “Connect to your repositories” and log into your personal account.

Choose a repository

Congrats, you almost created your first application using Yotako. Just click on “Create”, wait a few minutes and you will receive your code in the repository you selected. Just git clone the code Yotako provided and you can keep on working on your application.

Name your project and get your custom code

What to expect from the code

You can expect your code to be:

• Ready to use with test and build systems already set up.
• A faithful translation of the wireframes you designed on Balsamiq.

The code of your application is available on your repository

You can access a preview of your application, directly deployed by Yotako

Here you can compare the result with the Balsamiq wireframe on the left side and the app created with Yotako on the right side

Conclusion

As you can see the HTML/CSS code of the example above respects all the design properties of your wireframe (e.g. the layout), and does not make any use of absolute positioning or any other bad practices.

Hope you found this blog post helpful. In future blog posts we will show you how to convert your wireframes to useful frameworks such as Bootstrap or Materialize.

If you liked this, just click the clap button so other people will see this here on Medium as well.

If you have any question or remark feel free to reach us or just comment below.

If you are interested in what we do at Yotako, don’t hesitate to join the community on Twitter and Facebook!

Happy coding!

The team at Yotako

Originally published at www.blog.yotako.io on November 29, 2017.