They're letting designers code now?

They're letting designers code now?

Summary: Dave Shea, author of CSS Zen Garden was a morning speaker at An Event Apart 2009.What separates visual design tools from coding tools?


Dave Shea, author of CSS Zen Garden was a morning speaker at An Event Apart 2009.

Dave Shea at AEA 09

What separates visual design tools from coding tools? The best way to establish visual thinking is by using "GUIs".

You need a source-code view, syntax-highlighting text editor. A very cool tool that Dave Shea showed us how to redesign a website on the fly by sampling the colors of a photo on a page, sending it to Photoshop to get color data then applying them to HTML elements by dynamically applying them to a CSS file.

This is a cool idea, but it could be faster. He could use ImageMagick on the PHP side and get the CSS values all in one shot.

Should designers code? :)


Shea then spoke about "user interface" design. Instead of designing a single page, we are building interfaces.

Once JQuery became more usable, designers could start implementing Javascript a lot easier. But it can be dangerous if they don't start following good coding practices.

2010 is a really exciting time on the web. As a front-end client-side engineer, there is a bucket of CSS tricks that we should all know about by using progressive enhancement.

  • opacity - element {opacity:[0-1.0]}
  • text-shadow - element {text-shadow: top left width color}
  • box-shadow - element {box-shadow: top left shadow color}
  • border-radius - element {border-radius: [all] top left bottom right}
  • @font-face - This is not the most performance-friendly method, but it's the easiest. Typekit is the standard now, but there will be competition. FontSquirrel lists all of the best free open-sourced fonts.

The <canvas> tag is all Javascript. Once designers unlock the knowledge to write object-oriented user interfaces in JS, we won't be able to use the <canvas> tag. We are better off learning Processing JS.

Webkit is not on mobile, so we are kinda stuck.

CSS 3 and HTML 5 are awesome drafts, but it will be a while before the Microsoft team catches up to the development cycle of the rest of the web.

In the meantime, yes, designers should learn how to code. They become a new level of designer when they learn to use web standards and practices.

I consider myself "in-the-middle" just like everyone else who works on the display layer of the web. The best part is the learning process.

Shea had some really good points, but I think we need to work harder as designers to get our hands dirty in the code.

More from Event Apart 2009:

Topics: Software Development, CXO

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.


Log in or register to join the discussion
  • Confused...

    1st, I'm supremely Jealous of anyone at AEA.

    2nd, It's refreshing to see a web development post on ZDNet.

    3rd, it was very confusing, and the headline was misleading.

    Yes, designers should code, and, in my experience, those that don't aren't really equipped for web design, and have to have their hand held through the process by the front-end.

    I'm, a front-end designer/developer, and I know my code, and my print design.
    • Just wait

      My posts will get better as the day goes on :) Stay tuned.
      Andrew Mager
  • Designers code?

    That's a laugh. Most designers I meet can't even
    figure out what an object is, so just forget advanced
    topics like inheritance or interfaces.

    HTML, CSS, endless javascript libraries... It's all a
    joke. As Silverlight and Flash become more powerful,
    the HTML weenies and their pathetic attempts at
    building applications will look increasingly archaic.

    In 5 years, some of the dinosaurs will still be
    plugging along and one day they'll be giving a
    demonstration of a prototype to a potential customer
    when they'll be asked, "This looks like shit, why did
    you do it in HTML?"

    And yes, this includes the most horrific joke that is
    HTML 5.
    • sorry

      but in 5 years I wish I could see your face when html (specifically html 5) and css are still at the top. Sure, flash is huge and silverlight is just as cool, but they will never become the [i]standard[/] for the web. The standard for the most extreme interactive content? yes.

      I am right.. I said it, cause I am.. soo very right.
    • I agree. Flash is where it's at.

      Silverlight may or may not be better, but I've developed code using MS software and later finding out the massive amounts of changes MS puts in between versions... what's the point of learning the rules if THEY keep breaking them all the time? My time is valuable too...
  • This is news?

    Microsoft Expression Studio: Released two years ago. Lets designers get their hands dirty in application and web work while they collaborate with conventional developers coding the back end using Visual Studio.

    Expression Design: Raster AND vector graphic design tool combining features of both Illustrator and Photoshop. Produces output in XAML, among other formats.

    Expression Blend: UI builder for XAML. Supports "code once, run anywhere" development for applications based on WPF or web apps based on Silverlight.

    Expression Web: Standards-compliant WYSIWYG [X]HTML editor. Includes easy-to-use CSS editor.
    • Hey, did they fix the widdle buggie-boo in Expression where

      creating media gallery templates generated an illegal symbol that IE ignored but affects every non-IE browser?

      When I upgraded to the Expression Blend 2 suite, I discovered that right away. Contacting microsoft, they told me to wait for the next version - version 3 of the suite.

      So I did one better: I dropped MS's slop and went to Adobe, with the Mac OS because I got tired of the usual problems in Windows not being fixed, even after a decade (screen resolution between users, other user-centric vs system-centric registry settings, inability of the registry to maintain itself or compress itself, file-level fragmentation.............)

      Thanks for the advertisement, however. I thought it was worth responding to because MY customers cannot wait 18 months for a bug to be fixed.
  • RE: They're letting designers code now?

    Personally, I think any designer worth the title should at least have some basic understanding of the codes they choose to implement.

    The more you understand, the more powerful and efficient your designs can become. The problem with many "designers" is the result-oriented "plug-and-go" mentality of finding Googled solutions, rather than figuring out what's really happening (i.e. someone posted a basic java slideshow code and was asking where they could get something like that ... but randomized ... It would have taken less time to learn how the slideshow worked, and make the necessary tweak :/ )

    Ultimately, coding (or even a mild understanding of it), is one of the gauntlets that separate the rapidly rising rate of "point-and-drag" designs and the folks who believe it is a both a visual and organizational craft. A couple of weeks grinding through basic java/AS/php will open many novices' eyes to the similarities, the power, and the refreshing logic behind coding. For the more complex, I'll leave that to the coding warriors.