Print-Turned-Web Designers
When I was a freelance web designer, I had to take work as it came in, which often meant converting PSDs into CSS & XHTML. I have always found it frustrating to code up a design that has obviously been done by a print or graphic designer, and by that I mean anyone who calls themself a web designer and doesn’t know how to code CSS and XHTML (Dreamweaver design view and Frontpage don’t count). I don’t mean to discredit their talents or creativity, but there are certain web design rules that these designers don’t seem to ‘get’.
Web Fonts
You’d think that print designers who regularly use the web would notice that fonts like Arial Rounded or Bank Gothic can’t be used for large portions of body html text. They’ll sometimes complain when their designs came back not looking exactly like the PSD, and I have to explain to them that using images in place of text kills SEO and makes the site near impossible to update.
Screen Size and Pixel Perfection
There is nothing worse than taking a look at a PSD and realizing the sizing is all off. The width of the page is 2400px and the font sizes are all half-point sizes as though the PSD itself has been a high res Illustrator file that has just been scaled down. My heart sinks when I see edges of photos anti-aliased and what should be 1 pixel lines are 2 or 3, anti-aliased. Some designers don’t understand that vector shapes in Photoshop will have antialiased edges if you’re zoomed in to more than 100% while creating them. It drives me nuts.
Grid Layouts? What are they?
Often times a web design from a print designer will have wacky spacing and unbalanced columns. I suppose this has to do with their lack of understanding of reusable CSS. What looks good to them might not be practical for web, because while print typography is static, content on websites is dynamic. In web design, you have to consider the length of the content that will be posted. What if a leftnav link is long and wraps to two lines? How will your rounded border coupled with gradient background work then, huh?
Graphics Heavy
Okay, okay, I admit, I’m somewhat guilty of this myself. I’m often pwnd by the developers here at blubolt for having background images that are too large, but on the whole I try to keep my web designs CSS focused rather than the 1990s graphics-overkill movement. This speeds up load time and the time it takes to code the design as well.
Recycling
Occasionally I’ll receive a PSD that has a submit button looking one way on one part of the site, and entirely different on another. This is usually where I step in and consolidate the styles.
In conclusion, most of the issues discussed have to do with the importance of usability in web fonts, screen size consideration, grid layouts, graphics sizes, and continuity. When designing for web, you can’t make things frustrating for your end user or they’ll x out your site and find something simpler.
I can totally relate to this. Recently that’s all I’ve been doing for a web design agency, converting PSDs, and the last project was a text book case. Poor layout, fonts that couldn’t be used without the use of sifr, incorrect sizing.
What shouldn’t have taken much time at all led to the project being about a week late.
The designers who do this, in a web design environment need some sort of basic education on the core principles of coding, just so they have an understanding.
Great post… I couldn’t agree with you more. The most relevant was the ‘Graphics Heavy’, followed by ‘Web Fonts’. Nice job on this site.
Come on Amy……. Some of the most amazing Designers & Web Designers, NEVER learned “CODE”.
I know you don’t mean to discredit their creativity, but can you actually assume that these designers- that don’t know how to code CSS or XHTML, are Low Caliber Designers?! Think about it Amy, Good designer are aware of their surroundings. This means that they take into account web fonts or the screen size. Good designers understand tangencies created by elements too close together or columns not spaced correctly. if the deign is fluid with well forethought, the Developer can create it, Provided the designer properly communicates with them!
You’re absolutely right, Jason. I should have prefaced the entry by saying “in my experience”…! I think understanding CSS and XHTML would help any designer with the web medium on many fronts, but that’s not to say that there aren’t some designers who do stunning, usable work without said knowledge.
I can ALWAYS tell if the designer is primarily a print designer. It’s hard to pinpoint exactly what about the design screams “PRINT” but it’s usually some combination of 1) non-web fonts or bizarre font sizes like you said; 2) total disregard for what might happen if the font size is made larger or the client inserts an extra paragraph (or seven) of copy; and 3) receiving files in 300dpi instead of 72dpi. Dead giveaway.
It’s not so much that they need to know code, exactly, just that they need to know how to design for the web. It’s a totally different animal than print, and I think the primary point at which print designers fail at web design is accounting for the fluidity and flexibility of the web. Someone will always throw in an extra nav item, or extra bullet point, or extra paragraph, and the design needs to account for that ahead of time.
Absolutely. I’ve seen too many graphic designers who are stellar in print and physical just fail web interfaces brutally. It’s pretty common, the design rules are different somehow on web. Whitespace and type choice mean nothing and you have to accommodate boundaries and scale, something print designers often just don’t have enough experience with. Although the same can be said about web designers going the other way.
I couldn’t agree more!!!
I took a slightly odd path into my present job doing Graphic Design at Uni then into a job where I was immediately shown how to use Flash which I did for a few years until people started to understand it wasn’t the ‘be-all and end-all’. At this point I gradually started designing and programming (proper) websites using CSS, annoying any programmer that had the misfortune of working with me by adding outer-glows and rounded corners. Over time I have honed my style (and skills) so that I have a good balance between design and CSS possibilites, but I think I’m in the minority.
So many designers don’t understand how a page structure ’should’ look/work and the limitations/possibilities there of, but also so many programmers don’t understand and follow a designers design. I am a designer/programmer, not a programmer/designer, so I understand what CSS can and can’t do. The words I hate hearing from a client is ‘I used to be a designer, so I’d like to design the site myself and then you program it’…………… EEERRRR…. ME DONT FINK SO!!!
Nowadays I tend to leave the CSS programming to the pro’s and get them to program the main structure of things – and they do a LOT better job of it than me!!! But, I think its essential to know what can and can’t be done and most of all – best practices of how to structure things.
Oh yes, I too have had some really challenging designs that I’ve had to convert to code – from huge Illustrator screens too which was painful
Bless the designers though – they had vision – just had no clue what I needed to do to convert their loveliness into something practical.
I agree with the sentiments of your article Amy, though I’m sure you understand this can be something of a double edged sword.
I believe that a good designer will be able to design a website well regardless of their background. this is because any designer worth their salt will research the media they are designing for, and will at least do a little background to understand what is involved in the production of their design.
I have designed for a few different types of media, and web design is the only one type of design that takes me much further into the technical process once the design is finished. If I design for print, a printer prints my work. If I design a sign, a sign maker manufactures my sign. If I design a T-shirt, a t-shirt maker does that for me. What I’m getting at is that after I have understood the process behind it, I let a pro make the design happen, as they are an expert in that field. In web design however, an understanding of CSS/HTML these days seems to translate into a web designer being as much a front end dev as they are a designer. I’m not saying this is wrong, but it can take your eye off the ball in terms of design. This is because you have to go further than just having an interest in that side of things, unless you are lucky enough to have a developer alongside you to look after your coding, but this tends to be a luxury rather than the norm in my experience.
That said not everyone can be brilliant at all kinds of design, and there is where you can flip the argument. I see so many pieces of print design by web designers featuring poor typography, loose layout, and an overall lack of understanding of the printing process. This is along with (a few years ago) overuse of web elements such as gloss or gradients that just don’t work well in print. Usually these pieces of work require considerable tweaking to get ready for print causing just as much headache for print designers as that described in your post.