Sickdesigner

In my work as a web designer I’ve come across designers that are able to work in a team & others that have no consideration for the front end coder. I decided to develop on the subject and point out some of the most common drawbacks that arise when you don’t consider yourself a gear in a larger mechanism. Before everyone starts barking at me in the comments section, I do need to point out that this article refers (mostly) to designers that do not code.It’s been a circulated idea around the design community this past week, so this article seems to fit that pattern.

So, for the purposes of this article, I shall create a distinction: designer and coder.

Here are some of the reasons most coders go bald and profanities are used in web design agencies.

01

Groups

One of the first thing a coder notices when opening a layout is the grouping, or lack thereof. When starting to develop a site most coders find themselves staring at a design and pondering “How do I set this up?”, trying to make a mental structure of what you have, graphically speaking, and how it will go in code, columns, boxes, containers, interior elements (assuming no previous wireframing and prototyping was involved). All of these have to be structurally sound and well thought of before you start doing the actual work. After this tough process, the slicing of background images starts, and this is where the first drawbacks begin. You find yourself trying to hide all the content so you’re left with just the background of a certain element, the process is easily done when the designer has an organized layout with the elements divided into groups, you just keep visible the group you want and discard the rest. Sounds easy. But when you get a disorganized layout you just have to hide all the layers you don’t need for that element, which can be time consuming when dealing with a complex layout. You’ve been there too, just admit it.

Designers might say it takes too long for them to arrange a layout, I don’t disagree, but let’s say for instance you get a set of client demands and you have to make the modifications in the layout. It takes you far less time to find layers if they are well structured and labeled, than say, if you have some of the header layers, next some of the content layers, after those a piece of the footer and so on, or maybe another system. Just…HAVE a system. Even the designer has an easier time working with such a layout.

02

Guides

Guides are very important when designing a website. The current trend is using grid systems. You can use one of the well known ones around the web or you can use one of your own making. The reasons behind this trend is efficiency and consistency:

Efficiency because the layout is organized and certain areas are well determined, you can easily arrange content when following guides: big containers, small elements; no matter what the item is, it falls into place.

Consistency because you never go wrong, you don’t make the columns different width from page to page and you keep the same page width (I wouldn’t be posting it if I wouldn’t have encountered it).

For too long coders have been playing the guessing game, all because designers don’t bother to LISTEN!

03

Shapes

I found that shapes are the way to go when designing, the main reason behind this is that they are easy to manipulate in the eventuality you have to widen or heighten an element. You can recreate elements faster and without hassle and guess work.

Let’s say that your designer supplies you with a button with rounded corners, that is 100 pixels wide and 20 pixels high, and you need the same button in another page to be 150 pixels wide and 30 pixels high, the only downside is that the designer merged the button with a different layer and the shape with all the styling options were rasterized. Had he left it as a shape (with all the styling goodness intact) you could’ve selected it with the appropriate tool, just made it bigger and the styling options would’ve changed according to the new shape while remaining consistent with the initial. On the other hand, if you have a raster layer you can’t just transform it to the new size, because if you drag it to resize, first you’ll see a change in the rounded corners’ radius (scientifically called Messedup©), the blending options would change, the border that was 1 pixel wide would become 1.whatever pixels wide, the shadow would grow and so on, resulting in inconsistency. Thus you’re left with recreating the shape, trying to guess what size the shadow was, what opacity it had, recreating the gradient and so on. This is what I call the guessing game, a time consuming, elaborate work that may not yield the same results as the initial element, all because the other guy didn’t bother to LISTEN!

04

Typography

This is where most errors are made, because for some designers, how good(to be read “pretty, colorful, awesome, genius”) layout looks takes precedence over whether it can be implemented or not.

Ever had the pleasure of hearing something like this from a designer:

Designer: But, you can’t just discard that _whatever_. It makes the design pop.
Coder: It’s impossible to do with HTML/CSS alone.
Designer: Then do it with something else, images or flash or whatever it is you guys do.
Coder: :facepalm!

One of the most common things I’ve seen is using Anti-Aliasing on type that isn’t going to be used as an image . You can say I want that paragraph to be crisp, browsers only render fonts one way (normal) and though it may look good in the design, it won’t look the same in the browser, resulting in long conversations with the client explaining that it’s impossible to do that, hurting the team and the agency’s image, because of one thing the designer didn’t think of. Sure, there are cases where the client knows this, but still requires Anti-Aliased text, and that’s hunky dory as long as that’s the case, or until he decides he wants font replacement for an Arial heading. Read that last part twice. Wonder. Awe. True story.

Playing with text tracking is another setback and will make WYSIWYG impossible. Sure, a -25 value in Photoshop makes fonts like Verdana look more solid. But letter-spacing (the CSS selector) works in a different way, and a -1px for letter-spacing scrunches your text to the point where it’s absolutely illegible. This isn’t such a big deal, though, if we’re talking about, say, an H1 – large text with some tracking can be achieved accurately and legible on the web. But it has to be BIG. 12px Verdana with negative letter-spacing isn’t going to work.

Try not to rasterize text layers. It’s easier to just select the whole text and put it into code than waste time looking at the image and typing it, or copy/paste-ing from a document.

05

Links

When designing include at least the normal and over states of a button, coders don’t always realize what feel you wanted from a design. The same goes for normal links, set the over color somewhere in the design, it’s your view see it through.

06

Images

Manipulate all the images in your design, don’t just put them in and think the coder will figure it out, we waste valuable time doing that. And if you do manipulate the please try masking, avoid chopping images, because you never know when you might have to make modifications.

Whatever the differences in skill or opinion between designers and coders or even programmers, we’re all working together to create something that is, truly, beyond our individual selfs. If anything, this post illustrates the inherent connection and interdependece between code and design and the minds behind them.

To all designers and coders alike: “Remember you’re on the same team, you work together, you have the same goal: deliver a worthwhile product. Don’t ignore your part.”

by Liviu Dobre