Working with Macaw to create prototypes
Since websites grew up and moved from desktop to a countless range of devices and screen sizes, approaches like adaptive & responsive web design got inevitable. It’s no longer enough to create static compositions for selected views in Photoshop and pass them to your beloved developer. You want to create a user experience gradually while involving the users, your client and the whole team. Otherwise a lot of time is lost communicating the idea and clarify questions.
“Never attend a meeting without a prototype”
Dennis Boyle (IDEO)
Design thinking uses creative techniques to understand a user problem, explore concepts for solving those challenges and test them with the help of prototypes. Prototypes are interactive, living things and have to change quickly. This article describes how I used Macaw — a “Code-Savvy Web Design Tool” — to get from a first idea to a working prototype being the foundation for development.
Resurrection of the WYSIWYG editor
Since the last time I used a WYSIWYG tool like Dreamweaver the earth has rotated many times. The generated code was often more than a battlefield and after learning HTML, CSS and JavaScript I moved quickly to a editor leaving designing and coding two separated tasks. Meanwhile a lot of new tools like Webflow or Macaw are trying to bring the two worlds of design and code back together. Started as Kickstarter campaign Macaw always tried to be a web design tool following coding formalities and rules. More gratifying when opening the application you start with a interface comparable to other design tools like Sketch or Photoshop. Designers will quickly feel comfortable having a set of tools, a big canvas and some settings to adjust the look and feel.
Creating the first mockup
At IBM my task was to create a dashboard for an existing Intranet. The goal: Give the user an overview across all his tasks and mails as well as offering him a selection of important links/news. Of course the concept should work on Desktop and Mobile devices. There was only one week for finding a design solution and developing a theme for proofing the concept to the client. So instead of creating compositions and a specification I decided to give Macaw a try.
But first I started on paper, collecting and sketching various ideas. The challenge was to keep the existing content structure in mind, which was coming from the Content Management System being used.
Discussing these sketches with the client and also some users guided me to a favored structure, splitting the page into three areas. I decided to start using Macaw instead of adjusting the sketches.
It was very easy to begin with. I set up a fluid grid and positioned the content in form of elements (text, images, …), which then got prioritized following the needs of the user. That way groups of elements were formed. When bringing these elements to the canvas Macaw made me follow HTML/CSS rules like floating, padding or positioning. It helps to have a basic knowledge of these semantic languages to understand the behavior of the elements. Otherwise you will be wondering why groups will break apart when you change the viewport.
Working with breakpoints
Talking about viewports: At the top of your canvas you can change the width of the viewport. Since the whole composition is fluid and you immediately see how your design will react, you will be getting to a point the design “breaks”. Then it’s easy to set up a new breakpoint. This breakpoints can be changed at any time. After setting up one you can change the visual properties of all your elements (font, colors, …). Also you can change the position of elements and their visibility. Compared to changing the layout within a graphic tool like Photoshop you need more time in Macaw when doing it right. Because sometimes you have to change the positioning (e.g. relative to absolute), what makes you think more about the technical limitations or your overall site structure. However I found myself swearing a lot…
Besides conveying me the rules of media queries and responsive web design, I got to some situations where I wanted to change elements and their content — in the context of making the site adaptive — but couldn’t without using a JavaScript workaround.
Amongst others this is a result of Macaw setting the breakpoint with the highest width to the default breakpoint, which also defines all the elements or rather the DOM. So if you want to build mobile first: It’s not possible.
Extending your prototype
Over time my prototype picked up feature requests from the team. To keep a glance I used components, which work like master elements. But unfortunately the handling of these is very strange: Often I changed one component but the change wasn’t reflected at every spot. Same with the styles I created. Some properties weren’t copied and other properties (like hover behavior) can’t be saved as style.
In the beginning I used a font supplied by Macaw (which uses Google Fonts). However when I wanted to use a local Webfont I got to another limitation of the application. When you want to use your own Webfont, you have to write your own code into the header and will have to publish the page every time you want to see it with this own font… Therefore the usage of Iconfonts is almost not possible.
A similar challenge was the embedding of JavaScript. It’s very easy to give your elements IDs and a discrete variables within the page outline. But when you want to bring some logic into play you have to use the tool’s code editor. This editor is like a big text box without any code completion or complex syntax highlighting as you know it from your preferred editor. You have easy access to color values and variables you used, but I wrote all the JavaScript in SublimeText and copied it back to Macaw. Exhausting. By default jQuery is always packaged with your prototype, but as soon as you want to use your own JavaScript packages you have to get through the same process I described for Webfonts.
Versioning and collaboration
Although the project was only one week long, I changed quite often the layout or individual styles. Giving the fact that my design is based on HTML and CSS I would have loved some kind of versioning. But there isn’t. So I ended up saving various versions like I do in Photoshop.
Also collaboration is a very important deal-breaker within our company. When working on big projects we try to use pattern libraries and master files to ensure consistency. Macaw doesn’t offer any features for collaboration. For example you can’t source the component library — what would be also a great feature building on the code-near aspect of this tool.
A developer view
A big advantage of Macaw is the direct export to HTML/CSS. At any time I can publish my page and give it to a client, developer or team member. This way our developer could already start setting up the grid, fonts, colors and so forth. The code served as documentation. Macaw generates clean semantic HTML and concise CSS. It’s easy to read element information right out of the source code. But you won’t be able to use the generated code without any changes. Often styles were duplicated and we had to make it consistent across all media-queries.
Having a small prototype this work the effort was quiet straightforward. The more pages you have the most likely a developer will use your prototype as specification document and not as code foundation. What’s totally okay.
Summary
Macaw allowed my to create a look and feel, while also trying out different interaction approaches. Using some JavaScript and custom CSS it was possible to finish my task in time, but I think designer without HTML/CSS knowledge would have gotten into problems. Macaw is great to create a small prototype without any complex interaction patterns. But as soon as you have a lot of breakpoints and many different elements you want to reuse, it gets complicated and frustrating. Also if you want to work with more than one person on a project, this won’t be your tool of choice.
As always: The project situation (time, team, knowledge, complexity) dictates which tools I will use in the future. But Macaw has it’s advantages when I want to create something good looking on many devices within a short time.
What do you think about Macaw? And what tools do you use to create prototypes in collaboration with developers?
