A Roundup of New Tools That Mingle Visual UI Design & Code

A Roundup of New Tools That Mingle Visual UI Design & Code

by | Nov 3, 2018 | Blog, Roundup

I’ve been intrigued by the potential endgame of a single environment that could satisfy the needs and modes of operation for both visual UI designers and developers. Convergence of tools has been a theme of my “Looking Ahead” new year blog entries for 2017 and 2018.

Typical UI Design tools still offer an excellent working model for quickly manifesting design ideas at any level of fidelity. Many of us know of situations where a well-executed mockup that took 30 minutes to render in a design tool (drawing pictures of screens) might get a dev estimate of many hours or days to execute (QA’d production code).

As long as that dynamic exists, many designers will continue to prefer WYSIWYG drawing tool interfaces over working directly in code – especially when they are early in the ideation process.

Popular tools like Figma, Sketch and AdobeXD continue to make moves toward exporting out to React and potentially other libraries. However, as of now, these are one-way, and the real deal will be bi-directional or zero-conversion options.

Here’s a roundup of new tools looking to shorten or even eliminate the distance between drawings of screens and production-ready code (in alphabetical order).

Alva

Alva – “Alva lets you design interactive products based on components engineered by your developers. And guess what – we are entirely open source.”

Haiku

Haiku – “Design components that snap into any codebase: Unlock your creativity with the world’s most expressive UI builder”

Interplay

Interplay – Fast prototyping that combines the power of design systems, production code components and live collaboration.”

Iterative.ly

Iterative.ly – “Iterate on top of your live app using your design system. Launch an experiment in under 10 minutes. Continuously improve your product.”

Modulz

Modulz – “The visual code editor for designing and building digital products—without writing code.”

Supernova

Supernova – “Design and development tool unlike anything you’ve experienced. #nomoresnippets – always a production-ready code.”

Now Part of The Amazing Team at Theresa Neil Strategy + Design

by | Jul 6, 2016 | Blog

As of mid-March 2016, I’ve joined the UX Strategy and Design firm founded by my long-time colleague Theresa Neil. Time has been flying by and the projects, team and clients are wonderful.

I plan to post more about the work we are doing. In the meantime, you can find me collaborating (virtually and IRL) with a team of about 20 other experienced design pros, working on projects that require:

  • User Research
  • UX Strategy
  • UI & Visual Design
  • Prototypes & Demos

The ‘wear’ in wearables, stands for wear and tear

by | Jan 10, 2016 | Blog

casio-WSD-F10

Casio Smart Outdoor Watch – WSD-F10. Source: casio.com

Those who understand that “wear” is a verb, will succeed in wearables

Companies, that are showing early success in wearables, address wear as a verb and make it the guiding principle of the holistic user experience for their products. This is why Apple Watch is getting critical feedback lately about needing to move Apple Watch marketing away from fitness and go all-in on the luxury, style and work/productivity markets. Read Cult of Mac’s article “Fitness apps are ruining the Apple Watch. Apple should scrap them.” for a thoughtful exploration of this argument.

Apple products don’t prioritize ‘wear’ as a verb, because Apple does not embrace a design philosophy that considers ‘wear and tear’. If they did, they’d design mobile and wearable products that survive real-world use vs. requiring a consumer to care for their devices as if they were a newborn baby. (more…)

Adobe’s Comet will collide with Earth some time in 2016

by | Oct 6, 2015 | Blog

Designers, Competitors and Adobe have Time to Prepare

Adobe announced Project Comet, among with a lot of other interesting stuff, at their 2015 MAX conference on October 5. Depending on the types of tools you’ve been using recently, this news may mean different things for your workflow. For those who primarily use Adobe tools, Comet may look new to you. If you have been experimenting with the surprising number or new design, prototyping and interaction/animation tools that have risen in popularity over the past few years, you may see Comet as reactionary (but, perhaps compelling nonetheless).

http://max.adobe.com

Image Credit: Adobe.com (Note: image resized using Affinity Photo – to emphasize competitive pressure)

When Adobe announced artboards for Photoshop, there was a lot of talk about Adobe copying Sketch. This seems fair to say, however it also seems a little bombastic when you consider that Adobe Illustrator has had artboards for years. However, it’s clear that Sketch has become known for developing designs on artboards and easily exporting final artwork assets at various pixel densities. It’s success has also been buoyed by a growing ecosystem of independent plugins, UI Kits and other resources.

With the announcement and demo video for Comet, similar cries of ‘copying’ will continue as we notice familiar aspects of various prototyping and design tools in Comet. However, there were also some pretty cool things shown in the Comet demo that seemed ahead of the competition. For example the ease of mocking up repetitive data like lists and grids via Comet’s “Repeat Grid” tool. (more…)