Design for non-designers and developers

Alright, last time on I went on a bit of a tangent. I started talking about fireworks for design elements, and ended up talking about CSS. It’s hard though, because CSS is such an important part of design these days, it’s hard to talk about one without the other. For this edition, we will just focus on design elements.

I want to start with fonts because there are too many designers out there using weird fonts for their mock ups. This throws developers off. I got an email from one today asking if non-standard fonts were the norm these days. NO, they are not! To many print designers are designing web pages these days. Designers who have never made HTML from one of their designs. To them… STOP IT. So I might as well start from the top and talk to designers and developers alike.

Everything that is text besides the company logo, and maybe some headers should be live. So, when someone puts together a mock up of what the page will look like, they should be using one of the 11 fonts that that are common to both a PC and Mac. Another thing to consider here, and this is indeed for the developers, is that all text should be included in your mock up. Why? So you can see how to design the page for more text. It could be greek text if you don’t have real content, but the most important thing is not to have any anti-alias. For those who don’t know what anti-alias is, it’s where the program fills in the pixels to make it look like it’s smooth. In a program like Photoshop, there is a setting in the Control bar to change it from Smooth, to either Crisp or none. That will make the text more like the text in XHTML.

Colors are something us designers don’t think anything about, but seems to be something developers find to be a foreign concept. My
suggestion is to spend some time with Kuler. Kuler lets you easily pick from their favorites, or create on your own 5 colors that go together. So, you can have your main color and accent colors for your site super fast. No fuss, no muss. Of course, you will likely base those colors off a logo. Just think in terms of what will compliment the logo. Plus, all gray doesn’t cut it. I’ve seen my share of sites that are just shades of gray. There are other colors you can use, not that an occasional gray doesn’t work, just not all the time.

We’ll start with a super simple background that looks great with fixed width sites. Take a look at MacCORE and you’ll see a site that was made to go with a fixed width and has a background image that is 2100 pixels wide, by 20 pixels tall. In the CSS, the slice is first centered, then given a repeat of Y. We’ll look at the CSS later.
This is a scaled down example of of a background color, with a white box centered. The box gets a drop shadow with zero distance, and about a 9 pixel size to make it stand out.

I’d like to take a second here and talk about other types of sites, and looks. We could have chosen an elastic or liquid layout for the page. Many developers like the look because the page expands with the browser. Sprint’s site is designed like this. It is possible to make a site look good, and be liquid at the same time, but a little harder then a fixed width site. In my opinion, it’s all in the content. If a site doesn’t have a ton of content, but more graphics, a fixed width works best. It keeps the text from re-wrapping around graphics in an odd manner.

If a site has a ton of content, liquid works best. It is nice to use when a 1024X768 size is the target. For those with large monitors, they can decide how much text in on a line at a time. The design would be much different, so we can explore that next time.

Some times, a header is just that, a header for the page with the logo in it. The one thing you want to avoid if possible is for the header to overwhelm the page. Not that you won’t see many pages where it was a design element for the header to take lots of room, like on Pownce’s site. It works for them because the login is also in the header and it’s more important then the content to regular visitors. The initial pages information should always be visible above the page fold. That’s when the page is viewed at the target size (800X600, 1024X768) in the browser.

On our sample site, MacCORE (a local Mac user group), I wasn’t sure when I made it if we were going to put a login in the header, or on a specific page, so I know it was going to be a background image. The plus of that would mean I could use text over top of the image, have just the logo be on the page itself. That could allow for a better printed page because the logo would be the only graphic that prints. Keeping ink to a minimum.

This site called for a 2-column page with header and footer. Because I didn’t want to take precious room for navigation on the side, our navigation is under the header. The main objective with the navigation was to make 1 button with an up, and an over state. The client wasn’t sure what the wording would be, so it was important that the text be live text that could be changed at any time.

So I made them all the way across the page and experimented with width and text until I thought it looked good. The plan was to have the over state visible when the user was on that page to show them visually what page they were on. A easy bit of CSS makes that happen, which we’ll show later in the series.

Breadcrumbs and secondary navigation:
With a set number of menu links, there needed to be secondary navigation on this site. I used a simple gradient for this. This could have been used for breadcrumbs instead of secondary navigation.

Content area:
For the content area the client wanted something more than just a white background. So, we had to include a gradient that went to white, which is our background color. This is a very important concept in design; allowing for longer pages. So we took a gradient and went from that color to white in a distance that would allow for a short page, or longer page. Our gradient here was just 350 pixels tall and 10 pixels wide. It was just a repeat of X, and not Y. We could have made it the same width as the page, but it would have been a much larger image, and the goal is always a fast loading page.

For the side pod this is just a colored box, so no graphic was used here. It is purely a CSS element, but next time I’ll show how to make a good pod with rounded corners.

The footer on this site is 100% CSS. No graphics here either. We decided on this just because we knew Apple needed certain legal information, and wasn’t sure what else we might need in there.

Next time:
We’ll look at some design choices for liquid layouts, and how to make pods. See ya next time.