Prototyping with Ionic


#1

Hi all,

I’m a Product Designer at Pivotal Labs, and I’m currently working with a company on a refresh of their native iOS app.

The design process for iOS projects typically goes as follows: low-fidelity wireframe / prototype --> validate with users --> high-fidelity mockups --> validate with users --> iOS engineering.

As a front-end engineer myself, I’m been trying to replace the third step (crafting pixel-perfect mockups in Photoshop/Sketch), and instead use an Ionic app as the living, breathing documentation of our design decisions. So far, this has gone exceedingly well, with the exception of one thing: our engineers prefer redlined, spec’ed out, pixel-perfect mockups when it comes time to real implementation. And they obviously can’t use the CSS or Javascript that I’ve written, since they live in the world of Swift and Objective-C.

Has anyone else found themselves in a similar scenario? Is there a way of using Ionic to fill engineers in on the exact measurements for UI elements (margin, padding, etc.), or exact font-sizes for typographic treatment? I’d love to leverage my background in web development on this project, but I think I may have to embrace a visual design program like Sketch to truly capture my design decisions. Is there another “code” paradigm through which I might be able to capture these decisions?


#2

Why don’t you use Ionic UI kit: http://www.sketchappsources.com/free-source/820-ionic-ios-wireframe-sketch-freebie-resource.html


#3

Hey, that’s an awesome resource. Thanks for sharing!

I guess my point is that I’d rather not hand the engineers these redlined, pixel-perfect PNGs – I’d prefer that they look at my Ionic prototype as the authoritative source for design decisions.

The problem there, and what I’m looking for advice on, is that they cant use HTML/CSS specifications in Swift/Objective -C.