I get inspired when I can visually tinker with experience design. This is the reason that Macaw.co got my attenion and I adopted it almost immediately.
I hailed Twitter Bootstrap when it was launched. It helped me and many others with UI prototype work. Some seemed to prefer deploying Bootstrap default experience with little change. I don’t like that much. I would often customise the look & feel to make it a bit proprietary. Over time I came to realise that I didn’t particularly enjoy tweaking and tuning the myriad features exposed through the LESS assets. There is nothing wrong or limited with Bootstrap per se. Web browser development tools are also a good help for quickly trying out UI ideas. There are many online sites such as codepen that help you experiment with snippets and small features. These are all fine but, I just wasn’t getting inspired by any of it. What these tools lacked – that would get me excited – was the ability to just draw my idea of an entire page as I envision it, tinker only with the drawing, and then immediately get the code behind without resorting to any extra artifices. There is an emerging bunch of tools that allow you do that in a cost effective manner.
I discovered that my way of tinkering with web design worked better if I could do it visually. As I examine visual elements I get more ideas and I can iterate quicker. Going back and forth to the LESS source files and tuning design was too slow to entice me. I am not a designer by education so I make lots and lots of tweaking before I like something. As a kid I used to love drawing things. I would typically start by drawing a line or some randomly curved shape, then as I added to that some kind of shape would start to emerge and I would finalise my drawing that way. If I ended up drawing a horse or a house that was usually not even in my mind when I started. That was my way of playing with pen and pencil. It seems that is also how I can enjoy doing UI work.
For a long time I relied on Omnigraffle, not really a web design tool, and Pixelmator, also not a real UI web design tool. I’ve used Adobe FireWorks on and off for years. FireWorks is a nice tool but it never got me excited much. It seemed that I couldn’t find any product out there that I would want to stick to. That changed recently.
There’s a new product that allows you to visually design what you want, then get a baseline html and css code that embodies that. It’s called Macaw. I saw a brief video announcing its features and immediately decided to buy a license when it shipped. I got a copy at the beginning of this month, started using it, and it felt right away that this was how I always wanted to work with web design.
Aside from the immediate feedback, one benefit I particularly appreciate with Macaw is that the authoring assistants are intuitive and help you just the right way. As a non-negligeable bonus it generates a minimal base code that can be directly fed into an application design. Here are two radically different design I made with it.
I create these artefacts just like I would in Omnigraffle, however the whole experience of manipulating the elements fits perfectly with the job: desiging a web front-end. Once done, the code that Macaw generates is clean and minimal, it does link to jQuery though. So, I could just take the code I get from this and embed it in the application code. This approach is more to the point, and more efficient than say using a free html template downloaded from the web.
Before Macaw I tried several products of which many are online solutions. I won’t list them since this isn’t really a posting on product comparison. While lots of nice experiences are available I was often disappointed with the code that got generated. The problem I expect to solve with these tools is to get started with a clean slate and be able to repurpose code with minimal effort. This means that I didn’t want any dependencies in the code and that seemed almost impossible to achieve. For this reason I couldn’t settle for anything in particular and kept on to a traditional model where the UI design assets were fairly remote from the code produced to implement it. I don’t need to do that anymore, I can rely on Macaw to visually tinker with prototype designs.
Of course when it comes to serious web crafting like making animations or complex interactions Macaw wouldn’t fit the bill. Webflow for example seems to be another nice one, particularly suited to animation rich UIs. The produced code embeds relatively proprietary JavaScript code. And the business model seemed to be favourable to repeat uses or even hosted solutions. For my particular needs I saw these as compromises I didn’t really want. And honestly I would just hire a professional designer if the experience is complex or that it needs to be very sophisticated. I am an IS&T architect who believe in all-round craftsmanship. I want to deliver the whole solution. If it needs to look spiffy and flashy then I call out to professional designers.
Having used the product for a little while now, I am convinced that Macaw is the tool that I was missing so far. I can now deliver complete end-to-end experiences to clients with the tools that I am comfortable with.