Let the designer will be responsible for the View

TL;DR
Design tools developing really fast, let’s control css output dynamically just from Sketch

Speeding Up

User interface design is living renaissance now. As we are more shifting to information postindustrial society, the more people are engaging around Information Technology. We have more digital products and more designers who are thinking, prototyping and drawing ‘em all. A few years ago the world got a critical number of interface designers and its become profitable to make tools by designers for designers. We’ve seen the rise of prototyping tools, that helps designers to create, test and iterate prototypes faster than ever before. Designers got Sketch.app and user interface design speeds up tremendously. A big community of designers and developers every day are creating powerful plugins, that helps us remove boring routine, and work faster, better and more precise.

Conquering the Front-end

The first ring of changes that show me that I can draw more than shapes with gradients comes from InVison’s Craft. Dealing with tables or other big amounts of data were always frustrating. That copypasting seemed like never ending. When you working with enterprise sector why know what I mean. But then I’ve discovered the possibility of linking JSON to projects and working with live data on your design project. That was amazing! All different rows of data appeared just from nowhere. Now when I always asking developers for JSON data for the project or generate it by myself through CSV to JSON converters.

After that AnimaApp’s Autolayout hit the ground. With dynamic constraints feature, I can easy test behavior of every element of desing on any screen width. This helped a lot when you deliver design to a front-end developer. But those guys didn’t stop on this and released Launchpad — tool that allows you to publish responsive websites, with links, forms, hover effects, and videos! (this is not the ad, I’m really amazed by this solution). After that, I clearly understand that designers can control the view of the product, and revolution will come soon.

Developer’s Dilemma

The trend of nowadays is that front-end developer can’t and don’t want to work on HTML layout anymore. I’m not blaming them, front-end industry is crazy now, you should keep your eye on constantly changing set of frameworks and tools that born and die like mosquitos. Today’s project contains more front-end code than back end. They work under pressure of time, and making pixel-perfect layouts with right shades of gray is still an art and need a lot of time and right expertise. So I think this is the time designers should be responsible for everything they draw will deploy in real product.

Model-Sketch-Controller

Today’s desktop and web applications use model-view-controller pattern for developing user interfaces. It divides application to three connected parts:
1) Model — data, objects, and logic;
2) View — output information (this is designer place to be)
3) Controller — get input data and convert it to commands for the model.

All we need is to get Model and create connections with views that are drawn in graphic editor (Sketch in my example). As we know, programming languages are operating with objects. They can be very simple, like text fields, images and blocks, or complex ones like cards with different types of information, hierarchy and interactions. Complex objects often consist of simple objects, variables, and methods. Let’s take the card and look to the object model of it.

As you can see we’ve split the card into simple components, atoms as may notice. To get this under control all we need is to two things:
1) Define constraints of positioning of each object. This is what AutoLayout already do
2) Link every piece of object to our design to be sure that each piece of View will generate properly.

Here I see that missing plugin should work:

The thing is that we connect decoration and data to object model, and after that, dynamically exports to CSS code. As we control everything, we can experiment and play with design, and got what we’ve drawn in HTML.
“What about dynamic states?”, — you may ask. This will works the same, we just replace one atom with another

As you can see we can draw connect and reuse pieces of UI like we do it now through symbols in Sketch. I understand that there’s a lot of things to go through, but this is the feature I want to see as designer of UI tomorrow

—

Oleksandr Valius — UX Designer at Eleks, Ukraine. Also traveler, rollerblader ukulele player and bookworm who wants to save from chaos this world and his life.