Project Starter

I'm pretty 'OCD' when it comes to my design files, folder structures and names... probably to the annoyance of my colleagues! But, to me, it makes sense! Take time to name things and organise things correctly and the next person who picks up that project will love you... and you'll love nobody bothering you about where a file is for a project you worked on 5 months ago!

At Soluis I wanted to create a set of standards that everyone could follow, and reap the benefit of. So I did... and begun to write them up here:

Sketch Document Guidelines
Folder structure
What to sync

The best way to maintain structure is to create it in the first place.

Projects come in and out, people come and go and deadlines shift around! Things don't always work out the way we want and files get messed up. People found it hard to follow guidelines when a deadline is looming, so we allowed time after projects to go back and tidy up files because, when you're maintaining loads of client projects, it's important things are versioned properly, and organised in a way that they can later be found! The best way to maintain structure is to create it in the first place! So I wrote a simple bash script that would generate all the directories .gitignore file, and .gitattributes file for git LFS (we use git for version control) which you can check out on Github. For the non-technical users, well they can just double click the file and it will run the script in the background.

Then one day I read this article by the design team over at Monzo. Well that rocks! Their system didn't make total sense for client-facing work, but that's fine... we could modify it! (Side note: I modified the version of Monzo's file cleaner sketch plugin to include phone, tablet, desktop and VR/AR artboard sizes, as it only supported phone out the box. (Update: Monzo has now updated their plugin to support any sized artboards!)). The only problem was; creating such a structure would require user input, in what devices need to be targeted. This wasn't ideal with the current method of using a bash script... especially for designers who don't venture near the terminal! I had to create something more user friendly, and also something that's useful for both client-facing and in-house product based projects.

Use what's available.

I have a good working knowledge of html and javascript based languages... but that's about it, for now! How could I create a desktop app that does what i want it to? Electron! I decided this would be a good excuse to try my hand at React, as well.

Let's look at what I wanted to achieve! Let's say I need to create a design folder structure based on a project that requires an iPhone app, iPad app, and an Android phone app. Design teams will maintain different sketch files for iPhone, iPad, Android, Web etc. so I need to give the user options, but I don't want to just list out every model of phone or tablet available like this:

That begins to look confusing with several repeating labels. I need something that will process the options provided for the user in the background... taking many of the choices out the equation! Creating a simpler interface. What if it asks the platform type first... and then populate a list of available types after? A web project, for instance, would have phone, tablet, and desktop options. An iOS project would contain iPhone, iPad, iPad Pro, etc. I also want to give the option to input a custom tag. For instance, if you are designing for a platform not provided, or just want a separate file for your iOS app icon. Like so:

So, in the current version, this example:

will output this structure:

Perfect!

What next?

At the moment it is still in early development, but in the next couple of weeks I will release the code on my Github for anyone interested in using it. Ultimately, I would like to learn Swift.. or something similar and recreate it in that. The base electron app is over 100MB in size, and this app is about 130MB... which is far too high for something that just outputs a folder structure! But it's fine for our internal use just now.