What happens when we expand the world of software design?

As software designers we are thinking of ourselves as creative professionals who try to look outside the box as often as possible, right?

I know, I’m thinking that way about myself.

But how good are we at finding new stuff outside of that box of ours and what does the box really look like?

The design box, today (Jan 2017)

Let’s look how our creative environment evolved over time, what changed and what are the trends (it’s my personal view, if you don’t agree with me, add a comment, I’ll make sure to reply when necessary):

Tools

We’ve got so many new prototyping tools! Making of demos, click-throughs, mock-ups have never been easier. In the meantime, Sketch, Illustrator and Photoshop haven’t been updated to fit modern software design process. There is still no way to design interactions layer or make the most of “continuous design” process. None of the current tools for designers helps them understand how applications they design really work.

• InVision is an online prototyping tool for linking images and art boards into flows, with animated transitions
• Axure is a standalone wire-framing app with out of the box interface objects, like Balsamiq, but more complex and with action script interaction layer. Unfortunately, even if a designer writes bunch of hard to learn code, that code is not usable in the production
• Marvel is an InVision rip-off but slightly cheaper
• Justinmind is a desktop native prototyping app for Mac and PC. Unfortunately, without a clean output, so it’s unusable in production
• Froont is a new tool to design in the browser, unfortunately it’s tailored to websites not application development
• Atomic is yet another prototyping tool with interface elements drag and drop but without code or animation values export
• Subform is an good start for designers who want to move gradually from graphical tools to an interface based on code constrains. Unfortunately Subform still isolates designers and developers in their own silos since it’s driven by properties panels and not a real code. The quality of the export is also unknown yet as Subform is not publicly available. Will it support interface interactions, with transforms and transitions?
• Principle is an interface animation tool, pretty much like After Effects or Motion since it lacks animation values export but elements can be tapped or swiped in Principle Mirror App or on your Mac
• Origami calls itself a “Studio”, whatever that means, and lets you build prototypes like guys at Facebook do, whatever that means… Anyway, it’s as powerful as Principle and as such, lacks any usable export
• FramerJS is a native app focused on prototyping interactions. Again, the complex javascript code designers need to write to control imported layers from Sketch is not usable in production (not as a clean output, only values and curves can be manually extracted). Now, at least Framer let’s designers without a lot of engineering experience feel like we are developing something (even when what we develop is not what the app finally ends-up like)
• Affinity is a native design tool and looks like a cross-bread between Illustrator, Sketch and Photoshop. Unfortunately, the “powerful” export as they call it stops at graphical formats
• Sketch got device templates and data state library from InVisionLabs called Craft. It’s a shame good folks at InVision still consider designers to make all creative decisions in software development process. Export API helps the exchange of hand-off assets but dev teams remain isolated and excluded from creative process.
• Silverflows plugin tries to turn Sketch into InVision directly in Sketch
• Illustrator got a face-lift and bunch of path related tools. The CC version got device size templates. There are some export to HTML and CSS plugins in works but the output is still based on position absolute, not flexbox
• Adobe Experience might be “the giant’s” response to needed updates in Illustrator or Photoshop. They call it XD and offer copy/paste approach from Illustrator to Experience with linking views into flows. Unfortunately, that’s where XD stops being useful as the export is limited to flat PNGs, PDFs and SVGs of full art-boards, not even specific interface elements for use in production
• Photoshop is not a tool for interface designers. Full stop.

Experiences

• We moved from waterfall and milestone process approach to Agile, “design as we go” type of process, to make changes more responsive and collaborative across teams and departments, and to speed up the “time to feedback” loop
• We started designing in the browser to get us closer to the software we are designing. Unfortunately, we still replicate the same experience of dragging elements in the art-board and style through properties panels as we were doing it when I was starting (16 years ago!)
• We can export Sketch files to apps like Zeplin to expose a set of styles to the dev team, so they don’t have to chase colours, font sizes, etc. in the separate layouts
• We can animate interfaces with FramerJS or Principle to demonstrate effects we would like to achieve. Unfortunately, the exported code or animations still can’t be use in production applications
• We can A/B test our ideas and designs using tools like Optimizely or Jaco but we don’t have a way to bring back behavioural data into our layouts to drive smarter decisions in the future. In fact, most design tools from the list above don’t include any testing functionality whatsoever
• We can also trust Molly, the first AI driven website design engine developed by TheGrid. Unfortunately, Molly is not super smart yet and it’s not made to become helpful in the design process, it’s more of a replacement tool with its own process and constrains

Patterns

• We have tested standards like Google Material guidelines
• We can learn from the community blogs like uxdesign.cc
• We have access to an abundance of ready made interface templates “to boost our creative workflow”

Skills

• We can still only drag a bunch of paths around the art-boards in one or the other sort of graphical design tool to finally present more or less animated flows of what we intend to become the final application
• We can steal ideas from ready made templates to speed up the design process and add a bit of systematic approach to our layouts
• We can quickly create prototypes to share our crazy ideas, test new patterns and introduce new experiences
• We can design responsive websites in the browser
• We can discuss and tweak our mock-ups over inline sticky comments or Slack type of communicators to speed up the exchange of opinions and narrow down implementation constrains or go further with LiveShare in InVision and sketch ideas right on top of our layouts with a tick red marker!

OK. After all this, what did really change?

The truth is, not much:

• There are more prototyping tools with Sketch export/import in the heart of most of them
• Responsive websites can be almost fully designed in the browser
• The collaboration between designers and developers becomes a real focus for innovative companies (mostly for startups, enterprise is still oriented around hand-off). Unfortunately, none of the tools offer active collaboration. Designers still don’t have access to dev environment and developers can’t make meaningful contribution to design, other than leaving a passive comment.

The world outside the box

Here comes the challenge. As I stare at an empty line and blinking cursor, couple of questions come to my mind.

What if I could become more than who I am now?

Who would I want to be, an artist or an engineer, or maybe neither?

Why not just be who I am, an accomplished, awarded designer with solid track record, “All-star” LinkedIn profile and lined up contracts?

How could I benefit the most, professionally speaking, from putting time and energy into learning new skills?

Here’s how I feel today (again, it’s January 2017, so maybe I should blame it all on New Year’s fever):

• Drawing and painting interfaces is fun but didn’t have any serious impact on my design skills apart from helping me grasp colour theory and experiment with it
• I didn’t have a chance to design interfaces using VR and can’t imagine how helpful could that be, but since it is possible to track brain activity, heartbeat, eye movement, perspiration, etc. bringing my ideas to live without moving my mouse or touching my keyboard sounds like a compelling argument at least not to dismiss it
• Design is still about how things work, therefore design is more like engineering than art. I don’t feel like current tools fit that picture too well, especially knowing that great experiences are based on real usage data, gathered in the process of repeated testing, not bias designer’s whim. How can we continuously improve interfaces when we are locked out from contributing to the implemented version of what we once designed and prototyped in a fake, forgotten mock-up?
• I’m curious about how applications I design work and I want to be able to create crucial interactions layer but I don’t want to learn everything (HTML, CSS, Javascript, Swift…) at once, nor become a developer

As my final thought, I want to share what I noticed changed after working closely with developers, writing code almost every day and realising there might be more to design tools than what we’re using today:

• I can listen and talk to developers
• Sometimes, I can even inspire a technical solution
• I’m able to speed up development process by designing within constrains, instead of forcing impossible ideas, never mind how cool they seem
• I’m capable of designing and developing my own tools to encapsulate all missing elements of modern interface design workflow like animations, transitions, state management and testing.
• The bottom line is, I became a better designer by expanding the boundaries of my design box and adding only couple new skills, coding and active collaboration.

What improvements can you see outside of our current “design box”?

Share your thoughts and comments, I will keep this post updated with the most recent list of tools, so don’t hesitate to reach out if I missed your app!