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

Spoiler Alert — This is not another tutorial on how to code from a PSD (you can easily find such articles elsewhere in the web). Nor is it about a freelance service company offering you to convert your PSD to a basic HTML in exchange for some $, € or £. In this blog post we will focus on using an online tool in order to bring some innovation in your front-end development workflow.

As a developer, you may feel a bit abandoned when a designer hands off a Photoshop file to you. Indeed, you don’t always receive a detailed style guide from your designer colleague. Missing information about specs, fonts and colors is a common complain of front-end developers. If it already happened to you, you know what a brutal transition from design to code looks like and how much time you can waste on that. Let’s face it, when it comes to turning a design file into code very few solutions exist to make this transition seamless and help you boost your coding.

Imagine a tool you can use with your own custom design and a source code tailor-made with the stack of your choice and based on this design. Let’s dig into a 4 steps solution to considerably improve your PSD to HTML/CSS workflow using such tool. So you can develop web app or mobile app in a faster and easier way without programming manually from scratch looking at your PSD. Let’s have a look at this solution we named Yotako.

1. Fine-tune your PSD

Your PSD probably already respects Yotako guidelines.

If it’s not the case you will need to slightly adjust some aspects of your PSD in order to get the most out of Yotako.