CoDesign Tools: Is it Time to Switch?

When it comes to web design, most of the actual design work is still done with tools like PhotoShop and Illustrator, and only later translated to code.

We seem to be stuck in a time warp – still using graphic design tools for web design.

Designing for the web is a whole different ball game. The nuances are different from general graphic design. Designing a layout that’s responsive, designing for conversion, designing for user experience are all part of the game.

And yet we’re stuck using tools from the last century (well, almost) for modern web design. Isn’t it high time we moved on to more modern tools, that were actually meant for web design?

In the past, Wix, Weebly and a host of other website builders hit the scene, but left much to be desired in terms of true design freedom and control. Collectively, they left such a bad taste that many web designers shun any kind of website ‘builder’ tool even today.

But we know technology improves and software gets better. Perhaps it’s time to revisit visual website builders?

In the last few years, there’s been a bunch of new ‘website creation’ tools that have cropped up. Tools like FROONT, Webflow, Macaw and Webydo that have been created specifically for web design. Leigh Howells calls them ‘CoDesign tools‘ – tools that let you design for the web AND create the website (aka code) for you as you design.

That’s a radical thought for some. We’re so ingrained into a our own ways of working, that it’s difficult to comprehend an alternative method – with tools that let you create live websites instead of just mock ups and generate the code for you as you go along.

While I’m thrilled at the prospect of shortened development cycles and faster turnarounds, let’s really evaluate the pros and cons to using these CoDesign tools.

(In a separate article, I’ll compare some of these tools, so that you can better decide for yourself whether they’re worth a try. In the meanwhile, you can grab a good summary over at SmashingMagazine and DavidWalsh )

Benefits to Using CoDesign Tools

1. You’re working with the real web-flow. Not just creating pictures of websites. Though many these tools imitate PhotoShop’s user interface, here you’re not just making static designs. You have to actually create the elements, the divs and style them with real CSS – albeit using a PhotoShop like interface instead of writing code. You’re designing in terms of real HTML elements.

This forces to think about how the layout will flow, how the containers will be placed and the overall complexity of your design. No more coming up with complex, contorted designs that just don’t translate to code. All without actually writing a line of code. This is great for designers keen to learn more about their craft and eager to do real web design.

2. No more showing off mock ups. You can demo live websites! You no longer have to keep sending a bunch of psd files to clients and then try explaining to them how things will look just a little different on the real website.

In fact, you don’t have to send a bunch of psd files back and forth to the developer either. And no more begging and pleading for quick code changes just before the demo.

These new age tools generate the code for you, as you go along. Meaning, you have a real live website from day one that you can demo to clients, that you can tweak as you want, when you want. And the changes are visible almost immediately.

3. Faster, more productive Design & Development cycles: Though this follows directly from #1 and #2, it needs to be stated explicitly. Can you imagine the amount of time saved without the multiple iterations back and forth between designers and developers?

While these tools do generate the code for you, it may not be fully compliant (Webflow is the only tool that generates compliant code) and will require some amount of editing – meaning you do still need to work with a developer, but the coding cycles will be shorter and faster, as will the number of iterations between designer and developer.

4. Your design holds truer to your vision: Remember the time when your developer told you the amazing feature you included couldn’t be coded? Or when the live website turned out to be so way off your design and left you wondering what went wrong in the translation from psd to code? Well, all that’s now history. With these codesign tools, you’re actually creating the live website, code and all. You see the real website upfront – it’s tangible from day one. You have full control over your design, and your website.

5. Responsive is just waaay easier: I left the best for last. No more making multiple mockups for different device sizes. No more fumbling about as you try to explain the layout transitions across different device and viewport sizes to the developer. And no more struggling with media queries. Each of these tools make it easy to build in the layout transitions at just the right breakpoints, all with a few clicks. Didn’t I say this was the best part!

6. No coding required: Didn’t I mention these tools generate the code for you?

When to Avoid Them

But it’s not all a cake walk. These tools are still developing and have some way to go before they take over PhotoShop and WordPress. If you have any of the following needs, or limitations, you may be better off sticking with your current tools and workflow.

1. Compliant, Compatible, Optimized code: Like I mentioned earlier, Webflow is the only one talking about compliant code and cross browser compatibility. Code from the other tools is often bloated and leaves a bit to be desired. If you need compliant, compatible, clean and fast code – you may want to enlist a developer to help you work on the generated code.

2. Full Fledged CMS: If you need a full-feature blog or CMS, you’ll need to think about this. Webydo has its own CMS, which isn’t as extensive as say WordPress. Webflow allows you to export the design and integrate it with WordPress as the backend – but once you export it, you can no longer edit the design in Webflow.

3. Switching between different design tools: Though most of these tools allow you to export the code, functionality to import code or design is severely limited, and in some cases, completely lacking.

4. Your own hosting: Most of these tools have their own dedicated server for you to work on and host your sites. That means you’re tied to their hosting – and not everyone likes that. Of course, you could export the code and later host it wherever you want, but be aware that these tools do not have an import option. So once you export the code, you pretty much have to hand code any further changes you want.

5. Other advanced functionality: Again, remember that these tools are still quite young and evolving. If you need an enterprise level membership website or a full fledged store, you may have to think twice – or generate the front end design with these tools and figure out ways to integrate with other back-end frameworks as required.

Alternative: Site123

For simpler sites, Site123 is a site builder with a simple pricing system that includes a free-forever plan, and a $9.80/month plan for those who need custom domains and more storage and bandwidth. Its standout feature is its sidebar-based website builder, which makes laying out pages much more efficient than traditional drag-and-drop builders, and it comes with a range of well-designed free templates.

Concluding

So while these new codesign tools are not quite perfect, I believe they do give designers a newer, better way to create web designs – a way that’s more informed and in tune with the way websites are structures, how layouts work and how things really work on the web – and at the same time putting more control and power into the hands of designers. I’m really looking forward to see how these tool evolve over time and how widespread their adoption will be.

Have you tried out any of these codesign tools? What was your experience like?

If you haven’t tried them yet, go give them a spin and let us know what you think.