As a designer and team member, working in sync with your team can make you better at your job and a more efficient worker. That is easier said than done. Following some simple design etiquette will create a standard that we can all abide by to work together effectively. Here are some basic rules to get you started:
Working Off a Networked Server
When designing in a team, saving to a networked server or shared location should always be the standard. Imagine this: Your deadline is nearing and you’re set to revise a comp that your fellow designer has worked on. But, that file is nowhere to be found because it’s saved to his desktop. Don’t be that guy/girl, always save your work on the network server.
You shouldn’t need a knife to cut thru the layers upon layers that make up the comp. Use folders to organize the layers, and arrange them by their section such as header, body, slider, footer, etc. Naming the layer or folder makes it easier to navigate for obvious reasons. Also, delete unused layers! This will reduce the amount of cursing the next designer who touches your file(s) will release.
Standard File Names
There can be hundreds of files for one client, so file naming is an important part of the logistics when saving. I like to save by client, project, file and version. So, it might look like this: client-summersale12-banner_v1.psd. When saving out the actual work files, you want to label it for its function.
Example: bg-header.jpg or btn-nav.jpg.
If it’s page or function specific, include its defined location as well for easier grouping in the file structure.
Example: home-banner.jpg, or internal-bottom-cta.jpg.
This may not apply to all situations, since all brands do not always have a styleguide (they should!). But if they do, all team members should abide by the brand rules. Consistency is important across all elements created for the brand. At TM, we create styleguides for our development and marketing teams to use across any application or platform – defining colors, typography, logos, types/treatments of images and the usage of all of these are integral to ensuring that consistency remains intact no matter who is working on the project.
Made for Web
We’ve already mentioned the nomenclature for files; it usually applies to the assets that you will save for the web. But there are a few things to initially focus on when working specifically for the web:
- Optimizing file size: You want to conserve the file size as much as you can while still maintaining a proper quality. There are a variety of solid image optimizers out there (TinyPNG is great), but even within Photoshop or your desired graphic editing software, there are options to save at optimized quality/sizes that won’t drastically effect your presentation grade while ensuring proper load times and page loads are retained.
- Selecting a web-friendly font: When selecting a font, I like to choose one that will be able to convert to a web font or that is already available as a web font. Not all fonts are free to convert to web, so beware. Additionally, limit the amount of fonts you select – 2 or 3 (including different weights) are my focused cap, but keep it as minimal as possible while being able to retain the brand of the project you’re working on. Adding additional font files to your page load will do nothing but bog down the performance.
- Save files out in the correct format: Without getting into too much detail, make sure you understand what applications your development or marketing teams will be using your assets for, so that you can provide the correct format and sizing for each. For example: JPGs for photographic images, PNG/SVG for illustrative images. Make sure you’re also providing the correct size. If it is SVG, it’s scaleable so it is not as important. But for anything pixel-based, provide the right size so that the developer can serve up the right version at the right time.
This just cracks the surface of what it means to be smart and efficient as a designer when working for the web. Leave us a comment or contact us if you have more questions!