First steps in building a healthy design culture

Few but essential tips that anyone could start using from tomorrow to guide a 30+ design team towards consistent sketch deliverables

We all love Sketch and its plugins, almost as much as we feel lazy in learning how to use it properly. We all use it in our own way, which is most of the times a mix of keynote, photoshop and illustrator. Now, using Sketch as it was keynote, photoshop or illustrator makes it totally useless, and so goes for its numerous plugins. Let’s go to the point.

In companies with large design teams I noticed it gets hard to scale and grow uniformly the way Sketch is used. People are split on different accounts, time schedules, deliverables and, as the communication lowers, the way people take decisions inside their own sketch file starts diverging.

This situation triggered my curiosity and I decided to note down few practices my team and I adopted to align the way we use sketch and share design files to each others.

I don’t exclude more articles to come, but I will start with the basics: Naming your files, setup text styles and colour palettes.

Naming

Clientsname_12.06.2016_final_new_2 A problem as old as the computer itself and yet, in an era where we are programming self-driving cars, we still struggle to structure files in a way that makes sense. Naming is everything in development, especially when it comes to big enterprises, referring to objects with the same vocabulary fasten communication and moves departments in the same direction. Unfortunately, I don’t have the formula to format perfect naming, but imagine a company where there is one convention only for all the files that the company produces: suddenly everyone would know how to navigate folders and find what they are after. Easily.

Left: Reality / Right: Easy fix

But I’m not done about naming.

Assuming you take good care of naming your files, the fun usually begins when you have to navigate inside them:

Left: Reality / Right: easy fix

If you can’t see the benefit of formatting your layers right, let me give you few good reasons:

InVision: Having numeric hierarchy will help you sorting your flows on invision, but in general everywhere else you’d need to keep your screens stored.

Having numeric hierarchy will help you sorting your flows on invision, but in general everywhere else you’d need to keep your screens stored. Your colleagues: anyone working with you has the human right to work on a polished file. Nobody wants to spend time trying to understand your mess dude, so keep your layers aligned.

But I’m not done about naming YET

There is a deeper level about naming that can’t be neglected, and I admit it, it’s a thin thread between professionalism and OCD, but at least I am not the only one thinking like that, Steve Jobs obsessed a lot about crafting all the parts of its products, even the ones customers would never look at (read about it here).

Symbols, layers and groups need to be listed following a logical naming structure, hence they must make sense within your art boards. Generally the way I proceed is by following the anatomy of the page — from top to bottom.

The elements of the page are grouped from top to bottom

Jedi trick: there is an amazing Sketch plugin called Rename it which I warmly suggest you to install (it also works for artboards!)

A glance on what you can do with this beauty

Text styles

Let me say it straight, once for all (again), NO, you can’t have infinite font sizes going on your product. Neither you can add new font sizes every time you re-open that file for a new iteration. Therefore, to continue on a file inherited from the previous team you will have to stick to the style decisions they have been making. Actually, most likely, you’ll have to clean up the mess they had done before you, for example by streamlining their selection to something like the image underneath.

Also, remember to register them into your sketch so you can easily fetch the styles while designing.

6 headline styles + 1 paragraph styles + 1 link style should be enough to get you going, at least for a website.

should be enough to get you going, at least for a website. Yes. You can have styles in different colours

Now that you have them, you only need to ensure to use them consistently all across your designs, and there will be light.

Colours

It sounds so lame to say it this way, but the only thing you want to remember about colours is:

Keep using the same ones you have selected!

Sketch provides you with 2 ways of organising your colour swatches, Global colours and Document colours. It couldn’t get clearer than that: always keep your client’s main colour in global and distill fews of it whenever working for a specific product.

Normally to share colours designers send the whole file. Or even better, saving the old file with a new name, deleting all the objects and keeping the colour palette saved. WRONG

Let me clarify, this medieval way of sharing styles (I’ve seen people doing that also for text) makes sense, but it’s time consuming, for you and for the person who’s sending you the file.

Jedi trick: there is an amazing Sketch plugin called Sketch palette which I warmly suggest you to install:

This plugin helps you saving/loading either your document colours or your global colours, with one click! Anything else needs to be said?

To conclude

There is more, but I needed to get this off the way before I could possibly think to share more with the world out there. Governance it’s everything in design, no matter what stage of your career you are, at some point you’ll hit that wall.

I would love to hear your opinions, and maybe also reading some crazy cases you have witnessed about people misusing sketch; after all, sucking at something is the first step towards being good at something!