Design for Developers, # 1 in series of 6

I know designers who have lost their Flash job to developers. I talked to the owner who said he felt it was easier to teach developers how to design than it was teaching a designer development concepts. Being a designer, I have to say I agree to a degree. We are more free form in both the way we work and the way we think. It's harder to get us to see things in a logical manner, as well as to get us to be as organized as needed. (After seeing a Model-Glue app. recently, I have to whole heartily say jeepers to Joe Reinhart and how complex it seems on first glance)

Since I can't help the designers think more like a developer, I can only hope to help the developers in their design (or lack thereof) skills. There is a huge overlap of skills and as a designer, I think the gap needs to be tightened up a bit. This was a session at the Frameworks conference, but will be more in-depth here as a series.

We'll start with Photoshop, move to Fireworks as it has replaced ImageReady, talk about color choices and finish with CSS. Lots of CSS, but you can find a lot of really good resouces on the web. I will condense some of those for you here as well.

Photoshop tips and tricks (Any screenshots I will add to Flickr as a new set) We'll start with some basics. A whole lot has changed in how you mock up a site now that CSS is in play instead of table based design. (uck. No more stinking tables. LOL)

How? Instead of little slices there are bigger broader areas we can use as background images. Instead of just images for navigation, I can use an image as a background, with a rollover image but have actual text as the link. I can also use my h1-h6 tags to place say a header image.

That all will be explained later in the series. First things first. Imagine a web page. It will most likely have some common elements. A header with your logo, navigation (either horizontal under the header typically or on the left side), content areas (2 column, 3 column etc.) and a footer.

In the past with table based design, you'd work it all up in Photoshop or ImageReady, and slice things up there too. Thinking in squares. Uck. What that meant was there might be times that you'd get a gap in the middle of some image. Now that doesn't have to happen, and unlike some of web 2.0 websites (that have gradients but still feel boxy) would have you believe, your site can feel much more organic as well.

How? Lets start with just the body of our site first. without tables, we have more freedom, so what are we going to do with that freedom. For an example, (see many of the designs on csszengarden.com) we could have an image behind our DIV's linked to the body tag. With CSS I have control where it sits, whether it repeats or not and if it does, which direction. Look ma, no tables.

So, we have a fun exciting background to use on our site. We could also use another trick for a background that I use all the time. I happen to like a fixed width site. It's the designer in me that doesn't like a liquid layout where my text gets re-wrapped all the time. So, I make a 2100 pixel long document in Fireworks. I then make a rectangle in the middle the width I am targeting for my page. Either 760 or 900 usually, but just depends on the audience for the site. On that rectangle I add a nice drop shadow set to 0 distance, bump up the opacity depending on the color of the rest of the background. Then I make a slice that is 10 pixels in height but the full 2100 pixels wide. Take this from the middle so you don't get a weird part of the drop shadow.

You can see a live example of this at MacCORE's website, (http://www.maccore.org) a Macintosh UG I am VP of that just went live.

The code would look like this: body { font: 12px Verdana, Arial, Helvetica, sans-serif; background: url(images/bg.gif) repeat-y center; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #272F3C; }

I feel like I need to delve into some CSS explanation before we continue with design, only because it helps to see the big picture. This would fall under "best practices". Start your CSS from the top down, meaning comment out your CSS well, and group your CSS is descending order of items on your page. I have a group for all the items on the top part of my page, then content areas, then footer CSS. It make sit easier for you to see what's what later on, and if you need to hand the CSS off to someone else, it makes more sense to them.

Also, I see people getting class happy all the time. So... style any tags first. Your body tags, your p, h1-h6, ul, li and the works. Then style your ID selectors. Remember you can only have one per page, so things like #wrapper, #header, #contentArea, #footer. Then go ahead and style anything that is going to be a class style. I personally think that helps because now I can add my personalized styling to each section. For example: My text in my footer is not likely yo be the same as the body of my site. Nor is the links in my footer. So, I can start like this:

#footer a {... #footer a:link{... #footer a:hover{... #footer p{... and so forth

Since I come from the print world initially, I think of class styles like Character Styles in InDesign. They can be used anywhere on the page. So I always make a bold, and italic, and one for any images to have some margin space to the side of it when text is wrapped around an image. And so on.

Back to design now. So, as a developer you might wonder where you can get ideas. We designers need that inspiration at times too. There is nothing wron with looking at sites like CSSvault or CSSbeauty. It even depends on how much time I have. I might get a border, or icon from iStockphoto myself. No shame in that. Designers are good at somethings and not so good at others, so it's a starting place.

I think I've rambled on way to much for now. We'll get back on track with Photoshop and Fireworks in making that design background, and maybe a pod or 2. I am super happy with DW's CSS templates, so we'll be designing around them as the series continues.

Bye for now. Dee