‘Add to home screen’ Designing & prototyping a native app in HTML

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.

specially 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.

“Designers, don’t stay inside your Sketch cage!”

So at that point, opened an empty index.html file in my browser, and turned on responsive design mode…

… and started to implement the design system in simple HTML and CSS. One page, one html file. Icon fonts. Exact and consistent dimensions. The file structure is nothing more than a folder with HTML files, (image) assets and (S) CSS .

Full disclosure : at Parasut, we love designers who code. We have 4 designers, each in a different (product/marketing) team, that are all comfortable writing HTML, (S)CSS and the odd line of jQuery. In practice, this means we deliver HTML mockups to developers, and manage the growth and maintenance of the SCSS design pattern library.

How does it work?

Back to the design for our mobile app. The approach was to create one html page for every mobile view. Let’s take the invoice list for example. The mobile design has a Material Design inspired list view, with a colourful top header, tabs for different list types, and a swipeable list view, with a centred plus button to create a new invoice.

As you can see, the list view design is nothing more than a