Macaw is just what I wanted

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 finally found a product that allows me to do that, from Macaw.co, a recently launched rapid web UI prototyping tool. It’s got its warts, being brand new, but I like it and I expect it to do well.

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.

Macaw user interface
blank canvas in Macaw

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.

macaw - design prototyping example
macaw – design prototyping example
Web UI Prototyping with Macaw
Web UI Prototyping with Macaw

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.

macaw generated css
macaw generated css
macaw generated source files
macaw generated source files

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.

Web is 25: word processors missed chance, static web content authoring with templates

Web is 25: word processors missed chance, static web content authoring with templates. By static web content authoring with templates, I mean: the ability to define content elements and their styling with only HTML, CSS and perhaps JavaScript, and be able to author the content elements and expect the tool to manage everything as a unit.

The web’s just celebrated its 25th anniversary. With that you’d think we’d be far along with the tools and techniques for authoring web content. You’d be right and wrong at the same time. One area is the ability to author web content based on templates.

The issue

By static web content authoring with templates, I mean: the ability to define content elements and their styling with only HTML, CSS and perhaps JavaScript, and be able to author the content elements and expect the tool to manage everything as a unit. This is what you can achieve using web content management (WCM) products. But WCM products are born just for the web,  they might sport rudimentary word processing functionality but that’s not their real purpose.

Yes, web content authoring has been possible for a long time via various means, in various degrees of coherence and complexity. However, the leading word processing software packages just never managed to provide a good way to author web content. What is the state of affairs there?

Vendor Attempts

There were attempts to do this in Microsoft Office. It would produce html formatted content for direct publishing on the web. Did you ever look at the source code that it generated? Possibly one of the most complex and opaque there ever were. It had so many dependencies and proprietary tidbits that you couldn’t consume it on non-Windows machines.

Another approach I saw was for example a product like EMC Documentum, which would embed Microsoft VBA code in Microsoft Office document templates and use ActiveX controls to communicate with the back-end system. This looked clever on the surface but it had numerous problems.  The first one was, it only worked on Windows. The second issue, the local versions of a document would quickly and frequently go out of sync with the server versions, and resolving such issue was tedious. The last but biggest drawback was that it treated Microsoft Office documents like opaque files with some metadata, so the web templates and the office templates had nothing to do with one another. This wasn’t an optimal solution, it just allowed people to somehow share and version Office documents.

Microsoft eventually came up with SharePoint, that is such a different beast that it is a category of its own. I have also experienced situations where SharePoint local views of a document piece would go out of sync with the server version, a nightmare to fix as I experienced – though, I must add that I stopped at SharePoint 2010, I haven’t used the recent ones which could have solved such issues. Again, my point here is that, SharePoint isn’t a word processing tool, it’s something else altogether.

Let’s consider LibreOffice and Open Office powered approaches, these sibling products provide a way of programmatically manipulating documents without requiring visible User Interface (UI) elements. This made them great for mail merging and versatile document outputting combined with web technologies. Even so, they don’t help much with decent template based web authoring.

Then there’s Apple Pages software. It’s hopeless with web authoring, it doesn’t support it as far as I known. However, Apple has recently come up with iCloud offering it’s office productivity functionality as a pure web browser based solution. It looks promising, it may make Apple’s products more pervasive. But this still falls short of what I am looking for, what I thought would be a genuine user need, the ability to author web content based on a template built on HTML, CSS and JavaScript standards only.

Market dynamics

There came a point where the market was split, one one side you had the traditional office document management system packages (DMS), on the other side, the pure web content management (WCM) packages. Each side of this rift was very good at what it was built for, and did poorly at the other part of the equation. So as is often the case, vendors started expanding their products, DMS products started adding more and more web authoring capabilities, and WCM products started to provide DMS functionality too. The result is a mixed blessing where not many have done as well as could. Eventually Social Media (SM) entered the scene, everybody scrambled to redraw their blueprints and product marketing.

Status Quo

I am tempted to think that the word processing software vendors were caught napping, they never truly understood how to serve the web needs. It’s as though word processing product managers never spent a single day contemplating web authoring. You’d have thought the web to be the most important market phenomena in the IT industry, wouldn’t you? If you’d have millions of people using word processors daily, a large number of those have a need to publish content on the web, making lives easier could surely add value. Nope, the vendors missed that. It might have been a case of the old pony with new tricks.

Summary

I didn’t intend to talk about content management, or web content managent or web content distribution as a main subject. That would take an entire and long blog post of its own. I just wanted to look at how the word processing vendors fared as the world wide web dawned upon us. What I have seen and experienced tells me that the vendors missed the boat. And, if we consider who the dominant players are in the word processing market, it becomes glaring that Microsoft might have let this opportunity slip up. I’ve not seen any analyst mention this so far, they all seem to be focused on mobile and tablet as the only significant disrupting.

My Blog has got a new coat, WordPress 3.8 ‘Parker’

Wordpress 3.8 “Parker”

I’ve just upgraded to WordPress 3.8, with some minor tweaks to make it my own. I like the aesthetics of this new release, Lato works well on several resolutions. Exo would be my second choice. Choosing a typeface is one of the things I need to avoid, I just can’t seem to be perfectly happy with any free ones and buying one for such a very casual blog would be senseless.

I’m actually not sure how much longer I’ll keep running this blog on WordPress, a database is just not needed to support a simple blog. Perhaps they’d fork it eventually, or I’ll just move to a markdown powered software. We’ll see.

Learning to design makes better programmers.

Conversely, learning to design makes better programmers: “Learning Rails made me a better designer” — http://goo.gl/eSnpV”

I have long been a believer in cross-discipline approach to delivering software intensive solutions. This eventually lead me to learn everything I could about user experience. I think this blog post has it just right too:

Learning Rails made me a better designer” — http://goo.gl/eSnpV

A Blg post by Jonas, 37signals.

Twitter open sourced a really useful web front-ent toolkit, it’s called Bootstrap

Twitter’s web front-end toolkit called Bootstrap is a really useful addition to the open source community.

Timing sometimes can be a strange thing, it can be nice when it works in your favour.

Just as I’ve started creating my own web UI toolkit, I get the news that Twitter open sourced their toolkit called Bootstrap. The timing couldn’t be any better for me, for the following reasons:

  • A few months ago I had come to the conclusion that 960 Grid System was a great choice for structuring web pages in a scalable manner
  • I’ve checked out lots of resources for creating nice looking page style elements, via Mashable, and I have yet to find the one “killer toolkit”. So, I’ve been reluctantly looking to make my own – with my non-existing front-end design skills, that was going to be exciting
  • Two of the projects that I am working on at the moment have now got embryonic style elements, it was time to dress them up a bit
So you can imagine the smile on my face as I went through Twitter’s blog this morning. Technical folks can’t design UI, and that’s good news for everybody. The trouble is though, technical people are often allowed to make UI design decisions, often for the lack of a better alternative (or awareness). With a toolkit like Twitter’s Bootstrap, I think those of us who can’t afford their own front-end design teams would hugely benefit by simply adopting it. The worse effect that this have may be to help reduce the amount of frankly “offending site designs” that hit the web regularly.