No More Napkins

I can’t tell you how many times I’ve grabbed a napkin or piece of scrap paper and scribbled out a mockup for a design idea I have. I have done this with clients, for my own sites, even for ideas that come to me at midnight. But now Adobe has released an app that lets me scribble my ideas on my iPad and they appear as a tidy mockup like magic. And it even pastes in placeholder text without my needing to.

I had the opportunity to play with the new comp designer from Adobe, Adobe Comp CC, and it’s a lot of fun, but what I found most enjoyable was how easy it was to draft a quick mockup. And instead of looking like horrible stick-figure sketches, Adobe Comp converts them into nice, sharp mockups. I can even include my own images that I’ve uploaded to the Adobe cloud.

But I find Comp hard to explain in writing, so I’ve created this video for you to see what I mean.


The Hardest thing About the New Dreamweaver Extract Function…

Dreamweaver CC 2014.1 offers a new feature that is pretty neat, especially if you are used to designing your web pages in Photoshop and then converting those comps to HTML and CSS. It’s called Extract and all you need is a PSD file to import into Dreamweaver and use the Dreamweaver extract function.

Dreamweaver Extract Function
Dreamweaver Extract Function

In the past, when you’d create a PSD comp of a website, you then had to manually write down the details like colors, fonts, sizes, and so on. Later on, Photoshop added an export function to let you export your files to Fireworks where you could get the CSS, colors, fonts, sizes and so on. Then there was an option to generate image comps or copy the CSS from your layers.

But the Dreamweaver Extract function is more than all that. You can now open the layered PSD file in the Extract feature in Dreamweaver and then capture the colors, fonts and gradients as CSS that you can import right into your Dreamweaver file.

Dreamweaver extract shows page details
Dreamweaver Extract shows page details like colors and fonts.

Note there are still some things missing, like rounded corners and box shadows, but it’s definitely a lot easier to import a PSD comp into Dreamweaver than ever before.

So What is Hard About the Extract Tool?

For me, the hardest thing about it is using the CSS it gives me and not continuing to tweak things. I will go in and change the CSS so that it’s formatted differently (read: I change the indents).

Assuming I can get over needing obsessive levels of control over how my CSS looks, I think I will enjoy using Dreamweaver Extract.

Dreamweaver extract shows layer details
Dreamweaver Extract shows layer details for each layer of the PSD

Macaw – A Visual Responsive Web Page Editor

Macaw is a new web editor for web designers and developers. It was one of the first visual RWD (responsive web design) editors available. It came out to Kickstarter backers on December 31, 2013 and debuted to the public in 2014. It is based on the same style of design as graphics tools like Photoshop to help you “draw the web” rather than code it. This should make it easier for web designers to use to create decent HTML, CSS, and even JavaScript to pass on to developers or post directly to the web.

About Macaw

  • Operating Systems: Macintosh and Windows
  • Publisher: Macaw, LLC
  • Price: $79

Best Things About Macaw

  • It is very easy to create responsive designs with multiple breakpoints.
  • There is a shortcut to add placeholder text that is really easy to use.
    (type “lorem#p” where the # is the number of paragraphs you want, then hit the tab key and that number of paragraphs of placeholder text will appear in your document).
  • Macaw generates decent looking HTML, better than you might expect for a WYSIWYG editor.
  • Macaw allows you to choose what elements, classes, and IDs to use.
  • It is reminiscent of image editors like Photoshop, making it more familiar to designers.

But There are Some Drawbacks

  • It can be slow to respond at times.
  • Extra container elements were added that I didn’t expect.

I enjoyed using Macaw. I built a 3-breakpoint simple responsive design website faster than I ever have in the past, and that includes the time it took me to figure out how to use the tool. This, in itself, is pretty amazing to me.

Some of the Features I Really Enjoyed

  • Resizing elements based on the grids was easy.
  • Grouping elements and then giving the resulting container a name like HEADER resulted in HTML5 semantic code much more easily and quickly than I thought possible.
  • I was able to create a responsive design with three breakpoints in very little time.
  • I loved the outline view. Like with Photoshop layers,it was really nice to be able to show and hide elements just by clicking the eye icon. This also helped me see how the code would be written.
  • I chose a random font from the list that was included, and they automatically added the web font code from Google for me. I could also use my own fonts, but there were a lot of choices (even if most of them seemed to be sans serif…).
  • I love that they have a shortcut to add multiple paragraphs of placeholder text right in their text tool.
  • The CSS and HTML it generates can still be a bit more DIV heavy than I would write, but with the outline tool, it’s possible to see that and get rid of some of the extraneous tags.

Get Macaw!

It’s a cool web editor.