TL;DR: at Paraşüt we built a prototype in HTML & CSS to be able to design, prototype and iteratively test our mobile app. Works great, you should try it.

Especially in world of designing for web, CSS is such a brilliant and relatively simple way of ‘owning up’ to your design: instead of designing for a fixed size canvas and data situation, you have to define constraints and be (at least partly) responsible for how your design behaves in different situations. When designing for native mobile this is not so easy — but this story shows how we tackled it for Paraşüt’s mobile app.

About 1,5 years ago we decided to do a mobile app. Paraşüt has been a SaaS product for SME accounting in Turkey, and was exclusively a web app. From a design point of view, we had a useful and fairly scalable design system, based on Atomic Design combined with a library of utility classes. But we wanted to expand on the idea of doing expenses, invoices and contacts on the go.

We formed a 2-man team; one developer, one designer (me). At this point, our startup was mostly rooted in web technologies, which by its continuous development nature made it easier to build an agile product. For me as a designer it was the same; in the past years of designing for web, I had gotten used to being responsible for the designs I made via CSS.

“So yeah, we tried design deliverables.”

After being set on a clear course for the visual & interaction design of the app, the design (Sketch/Illustrator) files started to look a bit like this (see image).

This drove 2 people crazy: the developer, who always had to ask about one or two dimensions, colours or font-styles I had forgotten to specify, and me, who felt like using a foreign language to explain from the start a system I had figured out in another language.

(I won’t go into the details of the app’s design language too much; that’s a story for another time.)

It had another major drawback that visual design programs have: being unable to design hover states, active states, empty states, animations and transitions. The Zeplin plugin for Sketch takes care of a part of the problems but cannot solve responsive and stateful design. This is the fundamental problem of all classic ‘static canvas’ design tools.