arrow_backward Back to blog

Design Etiquette

As designers we know that our work is successful when it is not only beautiful but also when it is useful. That’s why when working we should always keep in mind other individuals that might need to access our design files – which means… stay organized! Our files should be structured and organized for easy access. In the end it doesn’t matter which software you are using but for the purpose of this article I will use Photoshop as an example so I’ll mention PSD files and smart objects. We have outline some basic design etiquette rules that should help you to avoid issues when someone like a developer is trying to access your files.

File Handling

It is that time on the project when you have set aside a day or two to organize the files you’ve been working on so they are organized for the asset handoff (most times to the developer). So the first rule is to always have everything accessible and uploaded – set yourself a reminder for the end of the day to remind yourself to upload the latest to your file folder. Let’s start by saying that organizing files for asset handoff shouldn’t be that tedious and hopefully everything is in the cloud server where you and your colleagues saved it and that no one forgot to upload the last piece they were working on.

As designers we work with project managers, developers, and clients during the course of the project – as we all know everyone tends to work differently and may be particular about file organization. The folder structure you use is mostly a personal preference especially when working alone but when others are involved it can be helpful to collaborate to find out if there are expectations of the folder structure. During this initial collaboration we find it helpful to discuss pros, cons, ideas as to how everyone expects it to work. Make sure you, as a designer communicate to the team to let them know how you’ll manage the files – and make sure to listen to feedback when deciding on naming conventions and exporting assets.

File Naming

Choose a convention and stick to it.  When working on a project, decide early on how you’ll name your files and folders. Pick an order for the folders, use dashes or underscores (not both) and never use spaces and decide on using uppercase or lowercase. You should talk with the developers and learn what makes more sense, for example, when working on Android it’s recommended to use underscores. For some, dashes work better than underscores because it’s easier and quicker to edit the name of the file, improves the readability and if it is an exported asset dashes are recommended for SEO optimization.

Layers

Always name your layers. It can be a group or an individual layer, no one should waste time hiding and unhiding layers to know if that shape “Rectangle 3” is the one you need to export. The last thing you want is to have to go back, rename and delete those unused or dated layers when preparing a file for a client or for a teammate. Don’t be a layer hoarder, there are many useful scripts and plugins that can help you with this task.

It’s recommended to arrange everything by section, header, body, aside, footer, etc. It will make it easier to navigate the contents – before closing that file, collapse all layers, so the next person that opens it, can see the structure at first glance.

Be smart, use non-destructive edits when working on images, that means use smart objects and masks, and don’t apply the same to 10 different layers optimize your workflow, group them and use just one mask if possible. Globalize common elements, use linked smart objects either to a .psb file or use CC libraries, and symbols in Sketch. Use blend modes carefully and know your strokes – it’s not the same effect if it goes outside, inside or centered.

Tip*** be aware of the light source when using blending modes, you want to have a consistent light source it will make the components more realistic.


Icons and Images

When working on icons, it’s best if you use a shape instead of bitmap or a smart object for a vector file can work as well. The reason being- a bitmap does not scale correctly so you will not get the proper pixelation which leads to poor visual quality. Try not to color them using blend modes, people should be able to get hex values from layer properties and that will make it faster to edit the color as well. When working with images such as stock photos make sure you purchase them especially if the product is ready for production.

Type

Use text-boxes when you’re writing a paragraph and make sure the box is not longer than the actual text. It can make it difficult to select things that are behind it and can lead into frustration and then it becomes a waste of time. Make sure you use proper alignments, headings and lists elements should have their own text-box. Use CC libraries character styles to maintain consistency. Be sure to include all the fonts used in your project that are (or should be) in the assets folder especially when using licensed fonts. These folders should be in the same directory as your design files.

Assets and exporting

Be aware of screen resolution and density. Your images should be optimized either for web, print or wherever your files will be used. When working with web images, they tend to be much larger in size, so image optimization should be a priority. This will allow for faster loading on a desktop, and remove the data concern from mobile users loading an image heavy site. There is online image optimization software but you should know how to get the best image from Photoshop. It is important to keep in mind that 80% of file quality will look closely to the same image at a 100% but the file size will be considerably smaller.

As a designer, it is key to keep your files organized. This was only a short list of recommendations – be detail oriented. As mentioned before, it takes discipline but it will make everything faster and easier in the long run for you and others.

 

Other sources that we found valuable for a second opinion of design organization are:

https://www.smashingmagazine.com/2011/08/the-lost-art-of-design-etiquette/

https://www.photoshopetiquette.com

 

 

arrow_backBack

New Project Request