Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
What techniques, software or practices do you use to prepare a description of a web page for further development? I am doing some research (with little luck) in how to create description for web developers - what should be included on the web page (inputs widths, font sizes, images placement, etc). Right now I use a combination of Excel and Word documents. In complex cases this is inefficient.
Any other suggestions?
As a developer that works closely with designers, here's what I like to see:
Photoshop images of the different design styles. Usually, sites have two or three major design styles (often a front page, and everything else, sometimes a third for forms or blogs or whatever). I'd like one for each style. Preferably, with the layers optimized (that is, if you have 15 layers that make up an image of an iPod, merge them into one; I don't want to deal with "copy3 of carrier bar layer 1" a hundred times). The layered image will allow me to slice out the graphics. It's also nice if the gradients are on separate layers from the base color, so I can accurately get base colors, since I generally use CSS for colors wherever possible. (On a side note, if you're coming up with widths, placements, sizes, and exact colors and don't have a full design image, then you're falling behind in your due diligence.)
A .jpg image of each of the styles. As a developer using open source technology, I run Linux as my primary environment, which makes running Photoshop sketchy. Gimp and other tools can open Photoshop files, but sometimes things don't translate. A .jpg of your design helps fill in any discrepancies. While you don't necessarily need to do this if you know your developer has the same version of Photoshop as you, it's also useful in case they have an older version, which might not have all of the same features, either (after all, we don't live in Photoshop like you do).
If you have a textured background that can be tiled, a smaller, tileable version of said texture. The Internet is a slow beast, especially when it comes to images. If you want asphalt or wood or paper or whatever as your background, give me an image that's no more than about 100x100 pixels and tiles seamlessly. Ideally, the smaller the better, but there are certain points, especially on full-page backgrounds, that it starts causing issues again. A giant, 10000x10000 pixel behemoth of an image is going to take forever to load, waste bandwidth, and make your site look terrible while it's loading.
If you're the type to notice the difference between #ac432b and #ad442c, then notes, somewhere, about the intended hex values of colors. These can be in a Word document or on an additional layer in the Photoshop image, depending on what your developer prefers.
If you're a pixel-perfection freak, then some measurements, at the very least for the width of the main content. If your Photoshop image is 100% scale, then it should be pretty easy to get the rest, but it can be difficult to tell from the image if you intend the page to be fixed width at 1000px or to be a more full-width layout, especially if you and your developer haven't worked together before.
Notes on reactions of interactive elements. Should a menu item text change color on mouseover? What color should it change to, and should it fade to it? Will this item trigger a dropdown menu? What items will be underneath it? (The menu items may or may not come from you, but you should be aware of it so that the design is created appropriately; I've had far too many designs not take submenus into account and look odd because of it.) Should the menu fade in/out? Answering these up front will save time going back and forth later on.
Basic understanding of the web as a medium. Web design is filled with graphic designers who have migrated to web design. It's hugely important (in my opinion, at least), that you understand that web design is not print design. This means that your design will look slightly different in different browsers and on different platforms. Unless you have the money to spend two to three times as long on development (especially if you have to support legacy browsers, such as IE6), I highly recommend getting over the need for every single browser on every single platform to look exactly the same down to the very pixel as your design. Doing so will likely not only choke your developer, but also your own design (which I'm sure will have snazzy gradients, text or box shadows, and other shiny stuff in it), and for what? So you can have the satisfaction of knowing that it's absolutely identical in every browser known to man? The general public barely even knows what a web browser is, let alone that more than one exist. They won't know that your boxes should actually have a drop shadow, because they won't ever see it if all they run is whatever version of IE their computer is running, and that's okay. I have two phrases for you: "graceful degradation" and "progressive enhancement." Learn them, understand them, embrace them, love them. Your developers will thank you.
Shauna covered it nicely. In addition...
I am given a Photoshop PSD file with all layers named and in relevant groups e.g. header, footer. For sub pages or pop up content in the site the designer sorts the different layouts into Layer Groups. So basically everything is in the one file. They also give me a folder of PNG's of each layout with the name corresponding to the Layer Comp name in the PSD file - for quick reference as Layer Groups can really slow down Photoshop. If you have fonts stick them in the folder as well in case I don't have them - only if a special font.
*Edit: Ask the developer how they would like it.
THIS ANSWER IS FOR THE NON-DEVELOPER ONLY, so take this into account before you vote me down. Most everyone on this website is farther advanced than us in the tech department though wanted to publish this response for the few that may find this handy, due to also being severely tech challenged. JFYI.
For our Drupal Websites: We currently have a 3-stage process only as this is what we have found that works "for us!" I am not suggesting anyone follow this either, I just wanted to share what works for us.
To start, I am one of the designers, though again not agile with development, therefore I create everything in a simple MS Word Document, with pics and all. I utilize the "draw boxes" option often. Then, this is forwarded to our primary web-manager/developer, who will either implement the changes, "or" if heavy programming is needed, will do an Adobe Photo Shop with the HTML slices, and forward to a guy who only does the heavy Drupal Theming and Creative for us.
For WordPress Websites: WordPress Blogs are far less complicated, the learning curve less steep, therefore everything created is done "live" so to speak. If it looks good I hit publish, if I need some advice I make a telephone call, though have never needed much intercession from a heavy developer. Having said that, our banner & logo were created in MS Word and then the logo maker took it from there.
This is again, only for those that are in my boat, hopelessly developer handicapped!
Using a grid system, like 960.gs.
In this link the 960 templates for PhotoShop, Illustrator, inkscape,...
Why? From the 960.gs
Nine-Sixty
All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
