TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Handoff

May 21, 2008

A few months back at SXSW I sat on a panel that discussed how designers and developers play nice together on web projects. One of the things I never got around to mentioning was the system I use for handing off my static design work to clients and their developers for integration into their dynamic systems. Since I’ve been thinking about it a bit more in the past few weeks, I figured I ought to put this out there.

I prefer to start in Photoshop, and keep most of the big picture design work there if possible. I find designing with CSS leads me to make decisions based on what’s easiest to code, whereas moving things around the screen visually gets me better results. Your mileage may vary.

During the initial design process, my mockups for client preview are delivered as flat image files. Each is given an increasing version number like home-page-v3.png, and by about v3 or v4 I’m usually pushing for signoff to start coding.

Since most sites involve multiple page templates, I’ll often be concurrently designing some while coding others. The first one or two I do set the stage, so I try to pick templates to code that involve as many visual elements and layout variations as I can so that I’m thinking about the possibilities from the start. I’ll build out those first few, then package up the HTML, CSS, and various image files into a ZIP archive and deliver that as code-v1.0.zip.

The developer will take that and start implementing that, while I move on to designing and coding out the rest. I’ll build new ZIP files as I finish new templates and increase the version number of the archive. Each subsequent ZIP file is meant to totally replace the old. My instructions are basically, take these updated CSS and image folders and dump them on top of the last round.

The HTML poses a bit more of a challenge though; the new versions do replace the old static versions, but by at this point the developer I’m working with has started integrating them with their system, so it’s not quite as simple as overwriting pre-existing folders. There’s more manual work involved for them; they need to run a diff and apply the changes to their development version. Not a huge task, but a least a little more overhead than overwriting folders.

There’s also an assumption built into this process: I own the CSS and image folders, and will be the only one making changes to them. In cases where the developer has needed the ability to modify CSS at will, it’s proven a good idea to create a separate running development CSS file that ends up being integrated with the rest near the end of the project. Images could work the same way, though I usually find those are self-correcting; if the developer needs their own image folders outside of those I’ve built they’ll figure out how to make it all work without my intervention.

And there’s definitely a side-discussion here about designers using version control systems like Subversion. I’ve personally adapted to doing so, and what I’m describing above is kind of a manual way of doing the same thing. But the advantage to this system is that it firmly places the control of the application logic in the hands of the developers, and the designer never has to see wade around inside their Ruby or PHP or Python to find the place to change a div element’s class, for example.

I’m curious to hear how other people handle handoff, as this is simply my own system that I’ve evolved over the years as the result of preparing in advance for moving goalposts like feature requests and design changes after my work is theoretically finished. I think it handles fairly well, but perhaps there are better ways.


Stv. says:
May 21, 13h

So I’m obviously coming at from the complete other side (being a developer), but our system is similar, except that, with one exception, our design partners generally just give us the PS files, and we then chop it up and do our own CSS & HTML - because the designers I work with tend to build really ugly HTML. The designer who DOES do her own css & html has a system very similar - she provides templates & css files, and continually “owns” those, as well as images, and will send us new ones as revisions come in. We normally add one interim step - after the first round, we add in comments to her source that are things like [CODEBLOCK:1],[MENUBLOCK:2], so she knows that we’re going to be messing around in those areas and generally, not to touch them, which has helped when doing further rounds. But I certainly wish that our designers used subversion, or SOMETHING to pass things through!

May 21, 13h

I am still a student, but in any project I have worked on, a developer has been the owner of all CSS and HTML. I definitely wouldn’t mind working with a designer who took ownership of CSS, and used SVN. That would be awesome.


May 21, 14h

Same as stv, I’m a developer, the designers send me PSD files and I do the rest of the job: HTML & CSS then PHP coding.

4
Ole says:
May 21, 14h

Mercurial(HG) for distributed version control seems to work very well, as an alternative to SVN.

Speaking as a developer, I’d prefer, as written above, that designers stay the away from the HTML and in some cases also the CSS(depending on the skill of the designer).

If the designer insists on writing HTML, I’d prefer looking at versioned static page with changes commited to a repo of its own.

May 21, 14h

I work from end-to-end, all aspects are in-house. Seems like I’m lucky I guess.

May 21, 15h

At BKWLD, our designers comp everything up in Photoshop, post flattened files for each page to our client proofing server and send the un-flattened PSDs to the lead developer.

The lead developer is responsible for creating a Subversion repository that contains all the project’s assets, including comps, documentation, wireframes, database ERD and schema, as well as the development build of the site itself.

SVN takes care of all the particulars so the dev team can divvy up responsibilities in a way that best suits each project. While all of our developers are designers, not all of our designers are developers. We generally consider the build out (markup/CSS) the developer’s responsibility, not the designers.

JanB says:
May 21, 15h

Thanks for sharing your methods, you can do this more often, Dave :)

As a designer who started to code his screen designs for him self I’m both in one person, designer and code monkey. The benefits are obviously: While I’m designing I already know the best/easiest way how to put it into css/xhtml and can minimize the situations in which a design requires an gratuitous amount of markup. However, I also trap my self like you designing not what’s the best design but what’s the easiest to code.

I don’t spend much efford on naming the design versions. Mostly the become what_ever_2_green_highlights.jpg (the thing after the version number describes the major change)

I’m also sometimes switching in my role as a designer and coder. I either create a design or I get one. Then we are not working with PSDs but lossless PNGs. You may argue that a PNG doesn’t contain as much comfort as a PSD, but you’ll wonder how rarely a change in the design (like hiding layers) is required.

If you’re using a PSD anyway try to compress it with a packer like Winzip or Winrar. It’s amazing how small these files become, sometimes up to -500%. A not irrelevant factor if you have to deal with a 1 Mbit connection and 20 MB PSD files.

May 21, 15h

I think it depends on the scale of the project and - to an extent - the complexity of the development code.

For instance, in a recent Wordpress project, I handed off XHTML and CSS to the developer, ready for them to ‘Wordpress-ify’ it, and then factored in a bit of time for them sending me their ‘finished’ files for me to look over and tweak the markup and CSS where necessary. Technically there shouldn’t be any changes, but little nuances can creep in here and there so it’s nice to be able to add a little polish if required, as long as this work can be planned, accounted, and charged for accordingly. And with something like Wordpress it’s obviously a lot easier to do; I wouldn’t feel as comfortable working around ‘finished’ Perl code.

It also comes down to the flexibility of the development code, too. In another recent project (developed using RoR), the developer told me I could mark it up in any way I wanted at all and he’d work around my code. I’m not saying RoR is necessarily more flexible than another codebase - and it almost certainly depends on the developer’s proficiency - but it means we designers can have a little more freedom to do things our way. And when I say designers I refer to those who write their own (good) markup and CSS.

dandam says:
May 21, 19h

I recently stepped into a beta release of an enterprise/client web app built with Ruby on Rails and submitted my original redesign comps as image files (png). Because the original designer did the CSS and prototyped the markup, so did I.

I’m glad it happened (is happening) that way. The developers have their hands full of complex issues relating to data exchange with legacy systems as well as some serious authentication and other issues and don’t typically write much markup or css.

I have been building and adding to the img files, markup, and css and making it available in zips as well as an online prototype. This has allowed me to actually demonstrate some use cases using scripting (jquery). Some of that scripting the developers plug in directly or adapt accordingly (depending on whether or not the functions are in the Rails library).

So far, so good. I’ve been able to catch a number of things in the developer’s RoR rendering of my markup that really don’t follow web standards and might create headaches later. The developers have, in turn, helped me build production CSS that works with the way they have already named (or inherited names of) data elements for the project.

Since there is an enterprise/client management side to the project, we have, in this process, developed our own framework for building out that site and functionality relatively quickly.

It’s been interesting to introduce the developers to some markup ideas I’m not sure they would have considered otherwise and great to learn how even slight alterations in my markup and css can improve the performance of the site and allow for greater flexibility from the developer’s point of view.

Ollie says:
May 22, 00h

Hi,

I work as a xhtml and css coder for a company. It goes like this:

1. designer draws multiple versions of a design,
2. design goes to implementators and they copy, alter and implement a pre-made php application,
3. both design and application goes to me and I write css for it according to the design,
4. then it goes to testing.

It works ok though I sometimes find myself crying about programmers’ xhtml and designers’ lack of knowledge of how desgins work in real. If there is enough communication among all of those subjects, the final product is good; if, however, programmer doesn’t know anything valid, semantic code and designer doesn’t know how designs work, it’s a pain. It’s all about sharing information and getting educated.

DazzleCat says:
May 22, 01h

where i work the designer does initial design work and once that has been handed over the developer initiates version control and manages all html and css. you have some good points to ponder on.

12
Pete B says:
May 22, 01h

‘designing with CSS leads me to make decisions based on what’s easiest to code’

- yep, that happens to me too.

Laurent says:
May 22, 05h

Interesting to read about how other people work: my background is software intensive-systems so I mostly apply the processes and tools I have learned to use in other projects.

I mostly focus on making sure that information is correctly shared: requirements management, version management, issue tracking, change management…

When it comes to design, I agree that using Photoshop or similar tools give you design freedom. However, there is the backside of the coin: how long will it take to implement the beautiful design the customer has selected?
I think that starting with what is possible using CSS is a more economical viable way of working…

tom says:
May 22, 05h

When I worked for myself, your methods were very very close to mine.

However, now that I work for an ad agency things are a little different:

1. the design department is responsible for creating mockups in Photoshop under the supervision of a CSS/UI representative from the technology team and the creative director.

2. once signed off on by the client, the design is usually tweaked according to the signoff and is then handed to the tech team.

3. the tech team then codes the xhtml/css and integrates into a cms or other custom web application that the tech team has built.

Neal says:
May 22, 06h

At the company I work at, we have a web project manager, 2 developers and I am the designer. I personally think that one person should control (at least the over-all template) the HTML+CSS+Images while the others work on the server side stuff+javascript.

Once I finish the template for the site I hand it over to the developers to work on page specific projects. This seems to be a good way to go about it since I generate a standards based layout and design from the start (although unfortunately when more workers get involved that can go downhill fast if you’re not careful.) and they apply their personal flavor to the back-end code.

On a side note the designer sometimes has to act like the CSS+Standards Czar to make sure things don’t get out of control.

May 22, 10h

I’ve done much the same as your example in the past. I usually try to comment the HTML as needed to point out changes. Usually they’re minimal enough after the initial files are sent that a few comments can point out differences. Of course, it’s always nice to be able to jump into templates and alter things your self!

May 23, 07h

I must be the only designer/developer middle man that works in Illustrator 90% of the time. The layer-only interface of PhotoShop has always been a usability nightmare for me. I can deal with .5 pixel anti-aliasing more than I can with PhotoShop.

My creative director gives me two templates: a homepage and a content page usually. I create all subsequent pages by mimicking his layout and create the HTML/CSS from their and give it to the developer piecemeal.

18
Dawn says:
May 23, 07h

At the company I work for, it is the designers who slice up the PSD files, build the HTML and CSS, and do some initial development. We work in .NET, so that usually involves setting up the master pages and a few controls. We find it helps designers think about how a design is going to work in the “real world” if they are the ones having to make it work.

From that point, the project is mostly handed off to the developers, but there is constant communication between designer and developer as the project progresses, and often they have to work together to finish up various pieces, and even handling the same files back and forth.

Wolf says:
May 24, 14h

I am one of two webdesigners in a midsized webdesign and development company.

I design, write the CSS and HTML, and dive into PHP and Ruby myself to integrate the design - because I know all the tiny details about the design this can happen relatively fast. Besides, there’s always interaction issues you need to fix that are hard to mock up.

I can’t believe everyone just hands off their designs. Maybe I’m working in environments that are MVC heavy (in a sense that I only need to work in the view/template), making it easier for a non developer to integrate the design into the backend system - or maybe I’m just a weird webdesigner.

Root says:
May 25, 03h

With all due respect to the very distinguished author and commentators there - to my mind anyway - is something wierd going on here. What is apparently going on is that the *design* appears to be subject to a completely different process from developing the content around the messages, the concept and if necessary the SEO of the site. I would not employ a *designer* who can not write CSS. If they want to design in photoshop they should be in the print media or designing ads or something. You can not express functionality in print. It may be that at the very high end of world class graphical designers that the whole production system needs to be adapted to their guruness. But what they are *designing* is CSS. Not print. It isn’t a model that many agencies can afford to adopt without a lot of financial bloat.
My model:
Get content.
Markup content semantically.
Hand it to CSS stylist.

Everybody else is unnecessary overhead.

And we do not slice graphics from psd. Whatever next.

Just my 2c.

gary says:
May 26, 20h

Interesting. From my perspective it sounds like YOU are the developer AND graphic designer.

I work in govt (education dept), and here we have:
- writers (teachers) who write the content.
- Instructional Designers (ID’s) who translate that content into a website (course).
- Graphic Designers do all the pretty/practical stuff (nearly always Illustrator, and they give us the jpegs/gifs).
- Then us web developers take all the pretty stuff and the content and whack together the course using whatever we need (JS, CSS, XHTML, Flash etc). We use Dreamweaver, though mainly only for it’s text colours and find/replace.
- Sent off to QC to check.
- Sent to the client (normally an education body), who checks and asks for any changes (even if it’s from their brief), and we do them until the client is happy.

So, over here you would be doing 2 jobs. I don’t know how you and a developer do the site together, as CSS and HTML go hand-in-hand.

May 27, 12h

Now I understand why my design skills are always limited. I start with CSS … as you mentioned it force you to use the easiest CSS code :D

Most of time people send me their PSDs and I convert it to xhtml/css .

wait a sec … did I hear using (svn for xhtml/css)? gonna try that :D

DavidT says:
May 27, 20h

I’m perennially frustrated by current industry process when it comes to manufacturing a website. And, I agree with Root’s perspective. My approach as a designer and developer is to do information architecture first, wireframe it, then make it pretty.

I’ve lost count of the number of times a ‘designer’ has handed me some html/css only to have the template fall to pieces when user generated content and outside feeds are introduced to the webpage. More often than not I end up spending inordinate amounts of time fixing fragile designs or, recoding the whole thing from scratch.

My point is, html/css is the canvass of the 21st century. You can’t call yourself a web designer until you have mastered the medium within which you work. Like root says: if you can’t do front-end get into print design, that’s what photoshop is for.

Neil says:
May 27, 21h

I’ve worked for ad agencies and non-profits building pretty big websites. The smaller the team the more responsibly is given to each member. As a web designer I’m tasked with visual design and front-end development. There are times when I contribute to website documentation and design planning but this is dependent on other resources and availability. The extent to which I develop the front-end depends on timelines, functional complexity, and visual skill of the developer. I typically share a server with the developer building the site in tandem and using version control.

So the hand off between designer and developer is usually a shared server or SVN repository. I create a template directory where static XHTML pages are created and await further development. I also create a CSS and JS library.

One issue that comes up often between designer and developer is who should begin working on the server first. For developers it seems easier if there are static templates but as a designer, creating these templates would be much more efficient if the framework and logic were already in place. In the end someone always has to unwind your code a bit it do their part.

May 28, 01h

Interesting discussion. My 2 cents:

A designer should worry about the design. Indeed, he should know about css, especially the limitations of css, but most designers (and in particular conceptual designers) shouldn’t be writing xhtml/css.

I myself am an xhtml/css guy. I work for a rather small company that specializes in front-end. The process here goes as follows:

1. Make wireframes
2. Make a design or hire a designer based on wireframes
3. I get a psd file.
4. I provide xhtml for each wireframe
5. I provide css for each xhtml template
6. All templates are shipped to a technical partner.

Anyway, the handoff now is still pretty shakey, as it’s not always easy for a partner to implement the templates, we’re currently working on a system where this should be easier, though I’m not yet at liberty to talk about the specifics.

Apart from that, we use svn to store the xhtml/css, and we have meetings and an IRC channel for communication between our partners and us.

Chris says:
May 29, 12h

Seems like most of the comments in the discussion discuss a dichotomy between designing and coding, i.e. the designer designs (and maybe does some coding), the developer codes. While we all have our own talents, (I tend to be a better coder than a designer, for example), it’s the point of working together intelligently that makes for a better finished product.

I think it’s helpful if your designer can have an introductory class in coding, and for the coder to have an introductory class in design. Or read a book or two. Or do some Googling. The point being that you need to gain an appreciation for what your counterpart does. The rare exception is for one individual to be a supreme master of both design and coding. (As I mentioned, I’m a better coder than designer…and we should each recognize our own strengths and weaknesses.) But if each of us can have a better understanding of the parameters of the other’s job (i.e. “why can’t you make the website look exactly the way I designed it?!” versus “why do you design the hardest things on the planet to code?!”) then we are able to work together toward a better final product, and are better able to appreciate the limitations and options that the other has. :)

Cornbread says:
May 29, 14h

Interested to learn if any of you make use of a Styleguide when transitioning from stage to stage.

It adds time to be sure, but can reduce confusion on large projects where a producer / project manager / designer / front-end developer / back-end developer / tester / client all have their fingers in the pot. Additionally, it can help folks down the road who work on the project after you move on to other work.

May 30, 09h

—–
I prefer to start in Photoshop, and keep most of the big picture design work there if possible. I find designing with CSS leads me to make decisions based on what’s easiest to code
—–

This is a great point. Design happens with sketches on paper, and then moves into Photoshop. Designing with CSS is coding, which is why it leads to design decisions based on the coding. I wouldn’t recommend making a habit of ‘designing’ with CSS. You could probably go from pencil sketches to CSS, but Photoshop (or some other image editor) is very likely going to make an appearance in your workflow at some point. It’s also less work in an iterative design process if you keep it all in Photoshop until you have signoff.

May 31, 20h

Did you notice that on your page that display comments and a post you escape your single quote, but you don’t on the home page. Is it said that I noticed that. I guess that just proves I am no designer.

Great thought on the role of a designer!

June 03, 18h

I am a Web Designer, and this is my question:

How can one be a Web Designer and NOT code your own design???

I honestly don’t understand how some Web Designers (seems like there are WAY more than I expected) are not the ones creating the HTML+CSS of their own web designs.

“…most designers … shouldn’t be writing xhtml/css.” –> I honestly couldn’t disagree more.

A GOOD Web Designer should be able to conceptualize, design AND HTML+CSS code his/her own design, and then, hand it off to the programmer/developer team.

What I really think is not necessary is the ‘middle man’ between the design and the programming… from a project’s efficiency stand point. However, I think that’s good because it’s a ‘new’ type of work and well, more jobs out there are good for the people. But other than that, no, I don’t think is necessary.

Very nice article :)

June 11, 02h

I’m neither working as a designer or a developer, but I’ve created a couple of websites/projects over the last years, and I’ve been using several external designers to these projects, and they have been working differently. But I think it’s absolutely easiest if the designer is able to write the HTML+CSS for the design - and if you’re using a template system for generating your pages, there shouldn’t be much work change the HTML for each template, if the designer just don’t forget to use the same classes and ids.

But on the other hand, if the designer isn’t able to write good code, he or she shouldn’t try to, and just simple hand over the graphic file to someone (maybe the developer) who’s capable of writing the code.

Ricardo says: [“…most designers … shouldn’t be writing xhtml/css.” –> I honestly couldn’t disagree more.

A GOOD Web Designer should be able to conceptualize, design AND HTML+CSS code his/her own design, and then, hand it off to the programmer/developer team.]

I would like to add a short comment to this one, because I wouldn’t say that a designer by nature is a web designer. It’s correct, that one who calls him-/herself a web designer should be able to write the code too, but one who “just” calls him-/herself a designer hasn’t by nature said anything about him/her being able to code.

And sometimes I actually thing that the “middle man” is good, because I don’t want to use my own time write the template code, but at the same time, I know a couple of really good designers who I think is way better at the price, than those I can find who can also code.

Dave says:
June 11, 09h

My experience has been a mix of being the sole “web designer” from start to finish, to being one who hands off static psd files to a front-end developer.

The first experience can often result from a small agency where management will attempt to capitalize on using few to accomplish much. This often results in less-than-mediocre results.

The second experience can happen where there is a dedicated team of web specialists such as: information architects, designers, content specialists, web technologists, etc.

One thing I’ve noticed that accounts for successful web design work is having a collaborative work flow where communication is clear, no matter what your role is. The boundaries often blur between design and development and architecture, and that’s ok.

Collaboration and clear communication is key.

Buda says:
June 21, 14h

It´s strange that nobody mentioned Fireworks in this thread. It´s an amazing piece of software that allows you to work vector and raster graphics very easily. Photoshop is great, but when it comes to many elements, that´s when things get a little messy.

Other thing is, that Fireworks has a perfect Flash compatibility. Of course I only use flash for aesthetic add ons to my designs (small picture animations, banners and so).

I want to know how do you deal with complex cutt outs with Illustrator…I mean, with alpha blending and stuff..

I tried to use COREL DRAW X3, just for the fun of it, to mock up a site…but it was useless…can´t be done. At least I can´t.

Does anyone here use GIMP?

very interesting article.

greetings from argentina.

34
Matt says:
August 05, 05h

I agree with the comments that web designers really should have a good understanding of HTML code.

Many web designers have a background in print design, and in that field there is a good example of how understanding your medium is necessary to produce effective designs:

Most print presses use four colours - CMYK - and designers have to know that colours printed out of gamut will display incorrectly and look bad on a finished piece of work.

Why should the web be any different? How can people design effectively for a medium of which they know very little?

I feel sure that the majority of influential web designs produced in recent years - particularly those that typify the ‘Web 2.0’ look - were produced by people who understand code and the limitations of the web. This logically leads to effective, eye-catching designs using as little code and assets /imagery as possible.

Whenever I see website designs by print designers, they are often image-intensive and require large amounts of unnecessary markup.

The site designs that I respect the most are always put together by people who both design and code.

35
Rob says:
September 01, 05h

I always do my site research first, followed with wireframe designs, then interface designs, than the project gets handed off for the developer to create in Dreamweaver (I do the designing and developing)

I’m relatively new to CSS layout, so the CSS development is one that causes me lots of frustration (as I’m sure it does with everyone).

Can anyone tell me how long it will take before I stop feeling like CSS is this giant/massive mountain that I have to climb. I feel that it could take a whole lifetime before I understand CSS layout. geez.

Rob

Duncan says:
September 15, 02h

As a senior designer working on both web and print projects, I tend to find myself switching hats from static design to CSS and back and forth over a day.

I work in the UK, and the same problem seems to exist here. A few years back it was unthinkable for a “web” designer not to know their code, but now it seems, you can get by simply mocking up in Photoshop. I have to agree with some of the commentors here, that web-designers should have a working knowledge of html and CSS, but disagree with some, especially Root, that process should simply be code based. Everyone slices up PSD’s. Duh.

In general my process is just the same as your own. Create statics, amend and approve, markup and style, handover to developers.

And Rob, CSS will come to you, and you’ll have one of those “DOH” moments when you realise how simple it is when you understand the fundamentals. Just keep at it. :)


October 13, 17h

The way we work is that I (being the creative) design in PSD format and hand the finished files to my in-house developer for coding.

This is usually only handed over once I have had firm sign-off on all concepts and an agreement to any discussion on how it will all work and hang together in the working prototype.

I used to code a set of templates in XHTML and CSS and hand those over too but quickly realized that my time was better spent managing the client into a firm decision, and letting the developer put together clean, and competent code in usually half the time!

It works for us well and creates clear lines of distinction - my only problem now is the time it takes me to ‘finesse’ the finished XHTML and get it to display pixel precisely across all browsers.

Something which I think still is best left in the hands of creatives - no slander meant ;-)