Over the years I’ve had many occasions to work with different graphic designers in producing various types of output related to the computer. Of course, I’ve helped produce web pages, but also printed documentation and marketing materials all related to software releases.
Some designers have been better to work with than others, as you would expect in any field. There are many common threads that I’ve noticed between these designers of, shall we say, “things they could do that would make things go much more smoothly than doing what they’re used to” in regard to getting software projects done.
Allow me to list a few ways that a graphic designer could improve relations with his coders.
Understand Graphic File Formats
This seems like a stupid thing to say - that a graphic designer wouldn’t understand graphic file formats. Experience has nonetheless shown me that a large percentage of graphic designers couldn’t explain the relative merits of graphic formats.
There are reasons why web developers (and in this case I’m using “developer” for “coder”) use GIFs in some places and JPEGs in others. There is a reason to use a PNG file, and there are flaws in its rendering that you need to understand.
For example, GIF files can have transparent areas, but they are binary - either it is completely transparent, or it is completely opaque. GIF files have a color limitation of 256 colors, so they are not as good for photographs as JPEGs. Unlike GIF, JPEG is a lossy format, meaning that the computer will fudge the look of the graphic trying to get the file size smaller. As a result, JPEGs are not good when precise, clear lines are needed. PNG files are nice because they can be lossless (the opposite of lossy) and can support alpha transparency (different levels of transparency), but their browser support is spotty, and IE requires special hacks to make their transparency features work.
If you are a graphic designer working with a coder to bring about a web site, for example, not knowing these things makes you look like a loser.
Photoshop is not a valid file format
Maybe it’s personal preference, but the more I think about it, the more I’m becoming firm on this issue.
Given all of the cool toys your coder could have in his arsenal, why on earth would he waste $800 or more on graphic software? No, your coder probably does not have a copy of Photoshop “laying around” like you do. If he does, it’s probably because he’s had to deal with graphic designers in the past who insisted on providing PSD files as their preferred output format.
There are many reasons PSD isn’t the end-all of graphics formats. For one, there are many different versions of PSD files. If you save in CS2, will it open in a prior version? Another thing, they’re huge. There’s no reason to send a 2GB PSD file when a 30k PNG does the job better.
“Oh, but it has layers,” you say. Layers are the devil. Layers don’t save your coder time, they save you time and let you get sloppy in your page construction. Slicing images out of a layered document is complicated. If you have created some design that has two separate web pages on separate layers (why???) then the slice areas need to be configured very oddly to get the specific slices out of the document as needed for the layout. If you were the one who had to do it, you’d understand. So just trust me - it’s a pain.
Plus, we coders don’t spend our whole day using Photoshop. It’s weird to me that we’d gain the level of proficiency that we have just because designers keep delivering their designs in that format. It takes us much longer in relative terms to do anything than you do - why don’t you just give us the graphics we need in the sizes and formats we’re going to use?
And no, you open-source Inkscape users aren’t any better for delivering SVG files. There’s still no clean way to get the images out of that format. It’s almost worse since it’s yet another tool that your coder will have to learn, one that’s not even as stable as the Adobe format.
Your canvas is bigger than that
This one always makes me laugh before I break down in tears.
A designer creates a new web page design in his program of choice. Ok, call it Photoshop. (Which, while I’m rallying against it, isn’t actually a page layout program at all - it’s photo retouch software that you’re repurposing for something else, see: Photoshop) You have to tell Photoshop the size of your file, so you give it a pretty standard 800×600 or 1024×768. Photoshop draws a nice little box for you to doodle in - and there lies your downfall.
The web may have certain soft, practical limits for width, but it does not have those limits on height. You may be thinking of keeping things “above the fold” (ah, amusing newspaper sayings), and while that applies to your design, it shouldn’t restrict you from putting certain things below the fold. Yes, it’ll be ok. Those things will still be on the page, just not, you know, at the top.
The worst offense here is cramming a full-page design into 600 vertical pixels just because you’ve set that arbitrary limit. Site visitors will not die if they have to scroll a little.
Use bigger fonts
While you’ve got that 800×600 layout open, let me hit you with another nice little factoid: Your fonts are too small. Maybe you’re trying to fit too much into the space allotted to you by Photoshop, but for some reason you’ve chosen fonts that are maybe 6 pixels tall.
I’ve spent significant brain power trying to deduce what causes this phenomenon. Why do designers think that their pretty 6-pixel-high fonts will ever translate to the web? They don’t! Actually, Firefox and Internet Explorer do different things when you try to make your fonts that small. Firefox refuses. IE displays them as small as you like. It’s not a good thing.
Still, while your fonts might look great at that size in Photoshop, that’s because they’re antialiased. That’s a complicated term meaning that the fonts are not just black pixels where the text is and white pixels where the text is not, but shades of blended gray (and even other colors!) that help the font look smooth at those small sizes. That’s great in Photoshop where you can control the graphic integrity of the image, but not when your coder is going to turn all of your text (why did you type it all into the mockup?) into, uh, text.
Causing particular dismay is when the design insists that text lines up with graphic elements on the page, since it is very difficult to have a consistent font size on different browsers on different operating systems. Insisting that the text is in pixel-perfect alignment with your graphics is outright insanity.
Use smaller fonts
It’s in direct opposition to the prior entry, I know, but designers are a varied bunch. With the last entry, you’re probably dealing with a designer who designs on the side, without much practical experience (the brother of the guy whose web site you’re building) working on an office or home computer. With this entry, you’ve got a “seasoned” designer who just doesn’t get it. Why do I say this? Because they’ve invested in a 30-inch Cinema Display, they have the resolution cranked all the way up, and they don’t have the slightest idea what the word “resolution” means.
If you’ve got a monitor that displays 300 pixels in an inch, fonts that look average-sized to everyone else are going to look really small on your screen. Don’t compensate by making the font five times bigger than it needs to be. Yikes.
You would be surprised at how many self-labeled “designers” will drop $3k on a screen to get some designer cred but don’t have the slightest idea of what they’ve gotten themselves into.
Use common fonts
Yes, there are more fonts on the web these days than just the three bland ones that everyone uses. But there is a reason why everyone uses those bland fonts - they work.
When you submit your graphic to your coder and he slices up your image and creates a nice layout, and the client asks, “Can you have this text over here (in HTML, not graphic) look like that text over there (in a weird graphic font)?” what do you think that does to the coder? Yes, it takes years off. Or at least, greys the hair a little.
Worse yet, you provide the Photoshop file with the strange font in it, but then don’t provide the font for when a change needs to be made. I know, I know, they should come back to you for design changes. But here is our (coder and client) experience with that:
Designers, perhaps due to their artistic nature, are often flaky. And so getting one of them to respond after the design is “complete” is often a difficult task.
Coders have to work with the client directly in a give and take relationship to get the functionality working. And while it’s possible for designers to do the same, the conversations are much different. For example, if the client sees a design he doesn’t like, the question is, “Can this be more blue?” or at worst, “Make this more blue.” And then the designer is free to interpret what “more blue” means.
For a coder, the questions are never questions. It’s always “this is wrong”. As a result, the client feels he has more sway over the coder than the designer, because he can concretely say, “This is wrong and it’s clear that it should be fixed in this way.” It’s just the way the universe is constructed, and that’s fine. But what happens as a result is the client will often insist that a design change be done, and the only one they can “boss around” is the coder, because the designer is aloof or the coder is actually responsive to that kind of feedback. So we’re left holding the bag after the designer has long gone off and spent their 3× fee for 1/4 the time on that trip to Tahiti.
No, I’m not bitter. Ok, I am, but that’s the subject of a separate post.
Coordinate your drop box
There are a few project management packages out there these days that’ll get the job done, perhaps not as well as they could, but done nonetheless. Use one. Coordinate with your coder to see what they use.
Insisting on FTP’ing your files to some server is a pain. Emailing several multi-megabyte files is worse. Personally, I don’t keep a real FTP client installed on my desktop system. I try to be SFTP-only here so that all access to client sites is done securely. If I’ve got to hand out FTP access to designers because they can’t switch to SFTP or use the project tracking software, that’s a pain.
Those are the big items, I think. I could probably go on about this topic for hours. It makes me crazy. Hopefully there is some enlightenment here.
