running words around
design education and visual communication
authored by chris m hughes

The Holy Grail of Digital

Wednesday, 15 January 2014

After an extended sabbatical, a good way to start back on textwrap is by looking at Macaw, the much anticipated new web design tool, created by Washington-based designers Tom Giannattasio and Adam Chris, and due to launch at the end of this week.

Macaw might just be the holy grail of digital design - a wireframing and mockup tool that fully integrates print design paradigms and then exports layout as semantic, valid HTML and CSS.  Neither Photoshop or Illustrator, the two design tools from which Macaw draws much of its functionality, are equipped to do this. The implications are a faster workflow, greater scope for UI specialists to create workable ideas, and a closer creative connection between design and development.

The past two years or so has been a tumultuous period for digital which has changed the way many designers approach the screen design workflow. That change has really been all about adopting tools which can handle fluid layouts and resolution-independence, like Illustrator and Sketch. There are three major developments which have facilitated this shift:

1) The emergence of Responsive Design as a standard requirement
The age of static screen sizes, the notion of 'above the fold' interfaces, and the standard 72ppi screen resolution are long gone. Not good news for Photoshop.  With fluid screen widths and heights, a range of resolutions to cater for, dynamic image resizing, and an emphasis on grids and visual clarity to achieve consistency and proportional layout, vector-based tools Illustrator offer a superior design environment. Illustrator provides a resolution-independent workspace, multiple artboards and canvas sizes, re-useable symbol assets, and exceptional type, measurement and alignment tools.

 2) The Flat Design trend
The migration of print-schooled designers to digital was the driving force behind the reinvention of screen design as a flat, minimalist experience, and with CSS3 able to render gradients, shadows and border effects, the skeuomorphic rendering in Photoshop mockups started to look naff very quickly. Vector shapes, clean lines, and SVG graphics (rendered via CSS3) have improved useability and style. Illustrator's block shapes, clean vector curves and 2D rendering look great, plus SVG can be exported directly as CSS3 to run in HTM5's canvas tag. Plus UI icons and kits are almost exclusively designed in vector formats.

3) The golden age of Web Typography
Once CSS3's @font-face became a reality, typography on the web was changed forever. As well as decent leading and letter-spacing controls, CSS3 now also has optimised legibility, letterpress effects, and even jQuery kerning. Being able to import a huge variety of new typefaces through resources like Typekit, Font Squirrel and Google Fonts has revolutionised web design by allowing ideas and composition techniques from print (such as mix and match typography) to transform and dominate landing page design. Illustrator's superb type controls, and its ability to create character and paragraph styles are ideal for the job.

The demise of both Flash and Fireworks have also played their part in the move away from the Photoshop workflow. But there is still a gulf between visual design and the browser, because you can't export Illustrator wireframes or mockups as HTML5 and CSS3.

This is where Macaw enters the story. Macaw was designed to offer all the advantages of Illustrator's layout tools - shapes, typography, fluid screen sizes and layered positioning - to streamline web production by converting visual layout directly to standards-compliant valid code.

Calling itself “the code-savvy Web design tool,” Macaw creators Tom Giannattasio and Adam Christ say the software is designed to push HTML as the “standard deliverable at every stage of the process – from conception to deployment.” In their sneak peek video, Giannattasio and Christ walk users through creating a blog page with Macaw.

Macaw's Features
Users of Illustrator, Photoshop (and InDesign) will recognise many of Macaw's layout features. Elements can be dragged onto a fluid canvas and positioned exactly to quickly create accurate wireframes and mockups for multiple screen sizes. There are excellent shape, asset, library, colour and typography panels, a draggable, adjustable grid, and some very useful touches such as nudging, snap-to-grid and a style guide generator. CSS settings for attaching backgrounds, positioning elements absolutely, and using complex layer groups is also catered for, and the really cool preview mode allows the layout to act like a browser window to test scrolling and navigation. Once the layout is finished, you can name your layer stack and elements as semantic html5 tags such as article, header, section, aside. This file can then be exported as HTML5 and CSS3, and Macaw produces very clean, semantic code.

Macaw will definitely offer a good alternative to Adobe's tools, and graphic designers will be able to prepare working layouts without having to resort to templates and bespoke online editors.  If they are passing files onto developers, the production process will be greatly speeded up. A measure of the interest in Macaw was demonstrated when the recent Kickstarter campaign met its goal of $75,000 in just 24 hours.  Roll on Version 1.0 on Friday 17th.

The Macaw website covers all the main features of the tool, including this great sneak peek  -