The fields of front-end web development and web design are becoming more entwined with one another as interface design becomes more interactively demanding. With new devices and interfaces that rely heavily on interaction married to aesthetic, design for the web is certainly no longer limited to things like active and inactive button states and grid-based design. It is instead a full range of interaction that makes web design so engagingly active.
And yet, more often than not, designers still work in an environment like Photoshop, where they hand off static PSD’s to their respective front-end developers.
With this change comes a change in responsibility and skill sets for everyone involved. This tutorial gives practical tips on how to design for this new landscape.
0. Set The Right Bars
This is a preliminary point before jumping into Photoshop. “Setting the bar” means defining specific boundaries for your project. Some of the “bars” that have to be defined are:
- Does this site need to look exactly the same in every browser?
- Do we need to support IE7 and below?
- Responsive design changes based on screen size or resolution; mobile optimized sites usually detect what browser/device you are using and redirect to a site built specifically for that device. Do we need either of these solutions?
These “bars” are on top of and supported by the brainstorming you’d do for any kind of media creation, such as defining and understanding your target audience. For instance, if you’re targeting young creatives, you’d likely not have to worry about supporting IE7. However, IE7 is still used on a large number of corporate networked computers, so if you’re designing a corporate office tool, consider supporting IE7.
0.5. Understand the Medium
Okay, now that we have those two prerequisites out of the way, let’s move into the practical application.
1. Document Your Design
For the rest of the tutorial, I am going to be using an admittedly contrived example of a web design, “Thingamajig”.
One of the most important things you can do is document your design. Most often, this happens in an external document. While an external document may suit a lot of the needs for the design (it offers a linear “guideline” format), a more effective way for front-end developers to see notes is right on the design, oriented to the object or interaction area you are referring to. In the example, you can see important notes for the design in an easily accessible “lightbox” overlay on top of all other layers.
As a designer, it is smart to include font names, colors, and as many interaction notes as possible. If you have responsive design rules, explain them. If an element is the same across every page, make that note clear. The more information you can provide to the developer spatially, the easier and quicker the process will go for them.
2. Organize, Organize, Repeat.
Some of the most tedious work a front end developer will have to do is figuring out where each element in your PSD is located. Of course, part of the way you can help is by naming your layers (which you should do!); but another incredibly effective way is to organize your layers in a way that maps to the HTML layout of the elements the developer will be creating. You can see in the example a few important things.
- Color code each folder by it’s content type. This will make it easier to get a quick overview of what folders are related. Right click on the folder layer, and choose Group Properties from the contextual menu; you can name the folder and choose the color in the next prompt.
- All “NOTES” are on one layer, at the top of the design. This will allow the developer to easily turn them ALL on and off.
- Content has it’s own folder. It’s children layers are also arranged from top to bottom based on the site design; the icons are at the top of the site, then the header (which has navigation and logo elements, and a background). Next is the article, and finally the footer.
- The Site BG is the very first thing most developers try to find. Making it completely clear where the background elements are is the first step to organizing the site.
3. Don’t get lazy
It is easy to get caught up designing and breaking rules that shouldn’t be broken. YOUR job is to work in Photoshop, manipulating images and pixels; don’t leave any of that work for the developer to do! Follow a few rules to keep from having to do incessant email ping-pong about the color of an icon or the size of a gradient.
- Eliminate ALL blending modes by either flattening the relevant layers or finding a solution that doesn’t use blending modes at all.
- Note a gradient’s start and end colors in your design. If the height of the gradient isn’t obvious, note that as well.
- ALWAYS use a grid and snap elements to it. This will keep your design sane, and your developer happy.
- DO NOT rasterize your text.
- ALWAYS include any noted fonts you used, or links to the relevant download page.
4. Lighten the Load
Part of a front-end developer’s job is to create pages that load fast. Perhaps the most important part of that task is creating pages with as few images as possible (while retaining good design and aesthetic qualities). Using fonts that are web-embeddable via @font-face and icon fonts will help with this process tremendously. Designing elements that don’t rely on shadows, rounded corners, or gradients for key interactive cues will also allow the designer to “gracefully degrade” these elements to their less-attractive, but still functional, equivalents. If you must use image elements, consider their size and detail.
The developer will have to save the images for web (a process of compression); the smaller and less detailed the image, the smaller the file-size.
NOTE: This rule is most breakable when it comes to branding elements. If your logo isn’t reproducible by CSS/typographic rules, images are absolutely necessary. This goes for all elements that are crucial to the brand and identity design.
Keep Your Files Clean
If you’re like most designers, you might try 10 things before inspiration hits. This usually means either a lot of undoing, or, if you’re smart, a lot of layers for comparison between different iterations of an idea. That’s great! However, unless versions 1-10 are going to make it into the final design, delete them! Only leave elements that will be used in the final design. There’s no reason your developer needs to see them.
Beyond this, it is probably a smart idea to utilize folders for EACH page view that you are designing. Better yet, utilize different PSD files altogether. Granted, the final folder you will send to your developer may end up being larger than desired; but the time the developer saves by seeing separate, organized, clean files for each view will likely be far greater than the time spent uploading and downloading the extra files.
Designers work in closer collaboration with front-end developers every day. This tutorial should be seen as a reason to develop a system that cuts out the difficult faults in communication, while propagating best practices and forward-thinking web development.