On the margin of designs in .psd

To set up the world I'm talking about, let's imagine you work at a web design agency as a developer. There is a design department (even if it's just one guy), and they produce designs in .psd format as per previous client meetings.

The client then approves the designs, you, the developer, are handed the file, and off you go, build it. And then real life hits.

As an aside: I am not talking about whether this workflow is 'correct' or not. That is up to individual agencies to decide: if it suits them, it's correct, if it doesn't, change it. There are a million tutorials about other workflows, the subject of this article is not that.

The point of a design

A ton of stuff has been written about this from methodology to who to please, etcetc. There's a big section of books on Amazon about User Centered Design, and there is at least one book and several articles about Client Centric Design. Also google "client centric design".

Astounding.

So this is a no-go, because there are just as many reasons for and against both sides, and to be honest, I, as a developer, really don't care, as long as what the client wants to achieve, can. If the client says they want their users to find their widgets and they want the users to buy their widgets, the design should support that; if the client says priority #1 is to please Mr. Anderson on the board, and he likes fluffy kittens, okay, by all means.

It's the steps that weren't considered that are the problem. Most of the times a developer, unless it's a really heavy project, will not be at the kick off meeting, thus some questions won't be asked.

Most designers, at least ones I had and have the pleasure to work with get this, and to be fair, it's not the designers I have a massive massive problem with. No. It's the clients.

Dear clients...

I have no idea what preconceptions they have about design, because frankly, I've never been a client, and if / when in the future I will be a client, I have domain knowledge.

Halfway through building a site I am still missing designs for inner pages. I mean there is one design for one inner page, and that gives a general impression on how that would look like, but what about special cases?

  • What if there's no image in the header?
  • Where does that image come from?
  • What if they can't supply an image in a size that would be bigger than the header image?
  • What if the header image is designed to be 1024px by 300px, and they have a portrait image?
  • What if the image is of people, and the size is 1024px by 768px? Their heads and feet will be cropped off.

"Easy!" - says the client - "Allow us to crop the images ourselves". Yeah, but because the image is the featured image, which is also used here, here and here, the site is now not set up to handle multiple image uploads. So now I need to work around that, which is billable time for us, as a business, but not billable time for the client, because it's a "bug fix" or a "feature that they obviously asked for". What then? Why did we not build designs for these edge cases? Well, we assumed the client would supply images that are appropriate, because they know their field, they know if they can supply the images, no?

And then the dev flipped the table

I, as the developer, feel like a complete tool for not building "to spec", because sometimes I don't even know what I don't even know, because mind reading is still far beyond my abilities. (I wouldn't be a developer if I could read minds though, just saying...)

At these times, having spent about 75% of the budget, I go back to the client, and ask them what should happen when X, Y, and Z happens. It's usually some time of silence, and then a "uh... we haven't thought about that actually".

Fine... Sooo... is that included in the budget then? Is it something that the client will accept and pay more? Is it something that us, the agency should have found out in exploratory meetings? Did we, as an agency even know about this requirement? If not, is it then out of the scope of the budget, or included, because it is actually a vital part of the functionality?

Most importantly: am I doing a good job? If I stop and ask questions, I am stalling the project. If I implement something to the best of my knowledge, client will come back and tell me this is not what they had in mind. If I don't implement it, because it's missing, client will come back and complain it's missing. I know it's missing, I've built it, or rather, haven't, but a) you're running out of budget, b) I don't know what to implement, because instructions weren't given, and c) you already negotiated for that budget, so you're not going to be happy to find out there's more time needed.

In conclusion

This might sound like a "this is why I can't do my job properly" rant, and it partly is. Partly, because the clients / designers do not think stuff through every time, and it's these nuances that stop work. If you take away anything, let it be this list:

  • When designing elements, design ALL STATES. (button: normal, hover, active, down state, with very short text, with very long text, button with very long word, you get the point)
  • Design to all different viewports. Mobile / tablet / desktop / superwide desktop. Tell the developer what happens between them. (if there's a design for 480px wide (mobile), and 768px wide (tablet, portrait), what happens at 550px?). Oh, if any of the elements change between viewports, kindly design all states again, or tell the dev what happens.
  • Design notifications, grid, and have guidelines for edge cases (notifications are nice. What if there are none? What if there are 34? Should there be 34? That 3x3 grid of products is nice. What if you only have 4 products? Or 1? Or 16? What if the name of the product is 3 lines, does it break grid? Masonry? Different rows?)
  • If possible, have style guidelines instead of psds that invite for pixel perfection. It's easier to implement reusable styles than trying to pixel perfectify every page.
  • Font spacing: Kindly tell your developer how do you want the font to be spaced. Seriously, that invisible space around the heading can be any combination of padding, margin, and line height.
  • Be aware of supplying positioning info in relative and absolute units. left: 20%; will equal left: 200px; if width: 1000px;. But because it's responsive, sometimes the width is going to be different. If something else needs to align with that with padding-left: 20px;, you're going to have a bad time.
  • Pay attention to images, or lack thereof.
  • Please don't design custom social sharing buttons. I've written a lengthy article why.
  • Tell the designer / developer which bits you want changable, and what depends on what. Remember, functionality is just as much part of the design as the actual look and feel. It's called User Experience. ("I need to be able to mark posts as X, so when they are marked, they show up here and here, but not here or here" is a good one)

Anything else you can think of or if you disagree, find me on twitter at @javorszky, or shoot me an email to the address in the footer.

Gabor Javorszky

I'm a freelance WordPress / WooCommerce developer focusing on Subscriptions and advanced functionality. Get in touch: @javorszky / gabor (at) javorszky (dot) co (dot) uk. Read more on the About page.

Read More