The Designer/Developer Workflow Crisis (That Everyone’s Ignoring)

Let’s take an honest look at what passes for developer/designer workflow these days:

Designer / Developer Workflow - The Old Way

Why are we okay with this?

Sure, designers are fond using the programs they’ve used for years, and developers are busy debating DI vs. IOC, but we’re missing a bigger point. We’re ignoring how ridiculous the entire workflow has become.

I argued with some folks on Twitter about this a while ago, here’s the short version:

Here’s a bit more detail on what I was thinking.

Approaching design and development separately is horribly inefficient

I’ve been privileged to work with a lot of very talented web designers over the past decade. Most of them spoke Photoshop. To quote Scott Koon, these folks see developers as compilers who turn Photoshop into websites. I’ve also had frustrating conversations with developers over the years who just didn’t see the point in this annoying standards stuff and were perfectly happy to just give up and use tables. And it all works, in the very very short term. But it only works because the people who pay the bills don’t know how ridiculously inefficient it is.

The flowchart above is funny because it’s true, the more you experience how true it is, the less funny it becomes.

Production workers need to understand - deeply understand - what they’re producing

There’s a continual flow of developer products and frameworks which all purport to sell one product: we let you write code in languages you like, so you don’t have to mess with that yucky web plumbing, cross-browser testing, and other yucky stuff – just write code all day! And many designers prefer to work at the purely visually level, preferring to live in a world of hip fonts, color schemes, and favorite Photoshop filters. At the micro level, it all makes sense.

And yet, it’s all so wrong. As members of web development teams, our jobs exist to deliver HTML. And some images, too, but really the information’s in the HTML, so that should be the focus, right? The longer I work in web development, the more appalled I come at how little professional web developers know about the core technologies of their craft: HTML and CSS. HTML and CSS should be the lingua franca of web development teams. Designers and developers should huddle around a CSS rule, both feeling at home. Instead, I hear lip service – “Of course I know HTML! And I know enough CSS to get by…”

One of the top reasons developers and designers need to be better informed about their core technologies is that they define the natural laws of the world we inhabit. For example, architects don’t ignore physical limitations when they design buildings, leaving it to engineers to make it work, and (good) engineers don’t product ugly buildings, hoping someone else can fix it with a paint job. No, beautiful and functional buildings are built by teams that have a deep understanding of what the available materials can support, and they push them to the limit. So, too, with most other professions. Why is web development is an exception to this rule?

A comp is just another word for a specification. Why are professional web developers writing specifications, when they should be designing user experiences for the web?

Server code is of no concern or value to a website user, outside of the effect that it creates in their browser. Why, then, do so few experienced web coders care about things like CSS techniques and semantic markup?

We’re doing this today

A good designer/developer workflow is standard practice where I work (Vertigo), and I’m certain it makes a huge difference in both the efficiency and quality of the end result. It requires investments (hiring, training, educating clients, etc.), but I know they pay off many times over. For instance, we’ve been able to respond to changing requirements under very short timeframes in ways that just wouldn’t have been possible if we had designers and developers working in different silos.

So when people tell me that this whole developer/designer workflow thing is just a marketing strategy, I have to disagree. I think it works in places that have tried it, and can be developed in places that haven’t.

Today, tomorrow

One great thing about developing this skill in the traditional (HTML based) world is that it’s very transferrable to RIA technologies, like Silverlight. Designers who really get HTML+CSS can pretty quickly tear into Silverlight, often finding it easier because they can substitute vectors for images.

And I really believe that the HTML story is headed that way, too. We can already approximate things by using Canvas or SVG in all leading browsers, then shimming it into IE with things like VML. Eventually I expect IE will (finally) support SVG, and we’ll see the vision of image-less pages fully realized. And then what? Well, at that point, Photoshop comps will be more obviously pointless. It’ll be clear that they’re no more than specifications, and not even very efficient in that job.

My point: an investment the whole “designer/developer workflow” is, I think, a good short term and long term bet.

And it’s an excellent career bet, too. I’m seeing a very clear trend: integrators – those who don’t limit themselves to just designing or developing – are in high demand.

24 Comments

  • Agreed. "Web designers" should know at least html/css. preferably js.

  • I both agree and disagree. I agree that designer/developer workflow is important. I disagree that HTML/CSS is the native language where both should work. HTML/CSS is, frankly, fiddly and a pain in the ass. IMO, it's not a good medium for creatives to be working in - it just adds friction. Like an architect, a designer should understand the limits of HTML, but that doesn't mean they should have to work in HTML directly.

    That said, is there a better way than Photoshop? Probably, but we'd need a better tool for designers to replace it. I gather something like Fireworks is intended to be that tool. Blend sure as heck isn't it - that's a production tool, not a design tool.

    When I say the developer/designer workflow thing is marketing, really what I mean is that Microsoft's Blend-as-designer-tool is marketing. I certainly think the concept is good, but the implementation is a Microsoft fantasy - if only because designers work on Macs. And they don't, and probably shouldn't, be mucking with XAML.

  • A designer that cannot cut HTML is just a doodler
    Get yourself an actual web designer :)

  • I run into these issues constantly. It seems like half of the files I get from designers use Helvetica Condensed for copy or want everything to have a drop shadow.

    I would disagree a bit that HTML/CSS should be the medium of communication. It's been my experience that the quirks and issues with markup are more similar to the problems that developers face. However, your idea is sound. In the end it's all about the delivery medium and the clients/users don't care how it got their.

    While everybody on the team may not need to have in-depth technical knowledge of the delivery medium, it's critical that the team is aware that the end-result is all that the client cares about.

    One common thread I've seen at most successful agencies is a markup dev. They cut the design into HTML/CSS and provide it to the devs. They're also responsible for informing the designers of the limitations of the markup.

  • I very much agree that designing dynamic, interactive user experiences based on purely static mockups is not a long-term recipe for success.

    I work in the Expression Blend team, and we are trying hard to not ignore the problem :)

    Enabling better designer-developer workflow and deeper integration of design and designers in process of designing and implmenting interactive content and applications is an explicit goal of Expression Blend and the SketchFlow prototyping system. Enabling designers to participate directly throughout the life cycle of a design is a core component to that.

  • @Kevin - I agree and disagree with your agreement and disagreement.

    Is Blend the right tool for for HTML website design? No, but I think it's better than Photoshop, and it's moving in the right direction with tools like SketchFlow. Fireworks is better than Photoshop, Expression Web is better than photoshop, almost anything's better than Photoshop at website design. Photoshop is a great tool for creating and editing graphics. It's a great tool for *print* design. It's a horrible tool for website design, because it gives the everyone the illusion that you're designing a website when you're really just designing an image.

    And on the Mac thing - I have to believe there are good tools for website design for Mac, but if there aren't... why are designers using Mac's? That's a very convoluted argument you've got there - we can' move the industry forward because designers like Apple and Photoshop? Fine, get me someone who will do the job with the right skillset and the willingness to use the right tools for the job. And get off my lawn!

  • Christian - I'm a huge fan of Sketchflow, but I do wish that it worked with HTML/CSS design challenges, not just XAML. I like to mock up websites with SketchFlow, but in the end those are just specifications, too. Now SketchFlow + Expression Web would be interesting... ;-)
    And of course, I'm very happy with SketchFlow for Silverlight. It's a joy to use.

  • Jon,
    I both agree and disagree with your agreement and...oh, never mind.

    The crux of my point is that designers should work in the tools that make them most productive (just as developers do). Until that tool exists, they will stick with the next best thing, which is currently Photoshop. Simply claiming that HTML is the most productive way doesn't make it so. HTML pretty much sucks for rapid ideation.

    My point about the Mac is that if Microsoft is serious about building tools for designers, they need to see the world the way it is, not stick their head in the sand and dutifully build everything on Windows only. Unless they do, they're not making a serious attempt to solve the problem.





  • Oh, you missed a step there before the designer:

    "Product Management comes up with an idea for a page where disparate services that don't work well together and have an impossible API are magically integrated, then throws in a few things they saw at a conference that they think are 'neat.'"

    After that, THEN it goes to the designer, right?

  • "I disagree that HTML/CSS is the native language where both should work. HTML/CSS is, frankly, fiddly and a pain in the ass."

    Like everything else, it's easy once you know it well. A web designer, *should* be able to write proper HTML/CSS, if not some JS.

    If a web designer's duty is simply handing programmers sliced images, then let me ask:

    Who's going to ensure the html code will be semantic and accessibility compliant? designer or programmer?

    How will usability test be conducted?

    If the web designer doesn't write CSS, then will it be programmer's job to make sure the HTML will look exactly like the graphical mockup? As in good leading, line height, typography, margin, padding, etc etc.

    Do programmers keep up with the best web(front end)practice?

    It seems some approach this subject rather black or white. A traditional print designer is someone who does graphics only. Web designer should have the ability to adapt with technology. Today HTMl/CSS/JS; tomorrow, who knows?

    As far as better tools for designers: Photoshop is good. Fireworks is good. Both are better at different things. If I just wanted to design a web app, I'd use Fireworks. But for more graphical intense stuff I'd use Photoshop. If a design involves more vector drawings, I'd use Illustrator.

  • @Kevin - I'll grant that Photoshop allows designers to be more productive, but that individual productivity is meaningless. The point is team productivity, and Photoshop Drive Development doesn't deliver that.

    I didn't mention it earlier, but tools like Firebug allow for even faster iteration than Photoshop, with two benefits (1) they work with real-life browser technologies (2) the end result is CSS and HTML, which contribute to the team's goal - building a website.

    I do agree that Microsoft should build Expression tools for Mac. However, I stand by my earlier (ridiculous) assertion: designers should work on the platform and with the tools that allow them to contribute to the team. Photoshop isn't cutting it.

  • Jon,

    Excellent post! I agree with your comment on wishing Sketchflow working with regular HTML.

    The one thing you missed is that an average Web Developer knows Html/CSS. They SHOULD ALSO KNOW JAVASCRIPT. If at least enough to hack together some jQuery plugins..

    A good Web Developer knows JS and is not afraid of it.

    An excellent one knows how to build a re-usable control for a site.. Like I heard DonXML recently say (in a presentation) "You ain't a web developer if you don't do JavaScript (you're probably just a converted VB/WinForms developer)."

  • I'm surprised that this is an issue in the US. In the Philippines many web designers have to know CSS and HTML at least to become worthy of hiring, and many of them would know PHP out of trying to earn money from selling custom Wordpress and Drupal templates.

    I absolutely agree with the post however, and designers who at least know HTML and CSS are a godsend to developers who don't have time slicing up images. Or making CSS Sprites.

  • Good post Jon. The workflow you describe is why I've really started to focus on the user experience more than anything else over the last couple years. And in doing so I'm becoming better and better at CSS (especially for layout). I've known HTML forever, have written tons of JavaScript and love jQuery, but CSS has been a thorn in my side for years (mostly because of trying to test for cross-browser compatibility). I've also tried to make a more concerted effort to create simple yet effective graphics using tools like Paint.NET. I'm probably never going to be a graphics designer, but at least I can do everything else and create shiny and gradient buttons :-)

  • Great post. I saw this too in learning that I was wrong assuming my vocabulary of "designer" had to be much more than a sketcher/doodler. I thought that "web designer" would need to know CSS, HTML, PHP and perhaps a variety of other languages.

  • If your designers are doing HTML/CSS you're doing it wrong.

    Developers need to know HTML / CSS for integration at least. Designers should NOT know HTML / CSS as it causes constraint with the creative process (weighing up implementation of a particular design aspect when they should be focusing on the look, feel and usability). Obviously they need to be aware of *some* constraints but they certainly shouldn't need to care of implementation details.

    So who should do it then? Interactive developers. These guys are the glue. Typically they'll have a design background but also be a little technical and know a little programming. Flash and actionscript is usually in their toolkit so JS in the browser is not a far stretch. A good interactive designer will also have excellent HTML / CSS madskills. This gives them the perfect combination to both adlib styles (which developers are typically terrible at) and be able to implement 99% of what the designers throw at them.

  • The simple solution is tools like site grinder and xara Xtreme that output html/css from images.

    There are loads of web conversion sites where you send an image and get html/css back.

    Hence I feel this article makes no sense. Developers need css/html, designers need photoshop, there are tool and very clear methods in between.

    I guess that's what experience gives you.

  • Isn't this what MVC is good for? Let the designers deal with design, let the developers deal with all the fun bits underneath, and never the two shall meet?

  • the solution is simple:

    the "Designer" should use the same IDE that the "Developer" is using to provide the "screens" ...

  • How about talking to each other rather than throwing the design over the wall or coding up "what I d*mned well feel"?

    Sheesh.

    It should start with a blackboard overview. The designer can babble about this and that, and the dev can caution about that and this.

    "I was thinking of a nice fade-in effect, maybe Flash ..."

    "That will kill our page load time. How about I put a timer on page 1, then load page 2 after a few seconds?"

    Stop the hatin' bro,

    doug in Seattle

  • A few years ago I worked with web designers that switched to using HTML and CSS. I got used to it and really liked the results. Recently I had to use web designers that still used Photoshop to create everything. After the Photoshop comp was approved the might give use non-functional HTML with hairy generated CSS. I hated it and demanded that they work in HTML and CSS and only deliver HTML and CSS, no more Photoshop comps. We had to part ways over this requirement. They couldn't do it.

    Fast forward several months and I am back to "web designers" that can't product HTML and CSS comps and I still hate it.

  • Isn't this the whole point of the RIA trend/vision/hype???

  • "we let you write code in languages you like, so you don’t have to mess with that yucky web plumbing, cross-browser testing, and other yucky stuff – just write code all day!"

    This pretty much sums up everything I dislike about WebForms development its champions.

  • Wow, you must be working with morons (sorry for spelling it out).

Comments have been disabled for this content.