14 comments

  • Vince SchwidderVince Schwidder, over 4 years ago

    Super interesting Zander, I'm always on the lookout to improve these processes in our team too. I have a question in regards to your naming conventions.

    On the one hand you mention for files and folders "We use clear, descriptive names that refer to the part of the app and the flows it contains.". However, when it comes to artboards you mention "We don’t use descriptive names for our artboards, we number them instead.".

    1. Do you feel those contradict?
    2. How do you explain the purpose of an artboard to your team without a descriptive artboard name?
    2 points
    • Zander BradeZander Brade, over 4 years ago

      Thanks Vince! So, I was waiting for someone to point this out. To answer your questions:

      1: I would argue that they don't contradict. They're different things and their naming conventions serve different purposes. Files/folders are named as such for quick, intuitive access through Spotlight and Github search. Artboards aren't navigated like this, and so we've prioritised their naming for how they are exported and shared, hence the ordered number.

      I'd also mention that in a scenario where you're discussing designs, eg. a handover meeting, it's easier for an engineer to say "hey can you go to 503" than "hey can you go to the Account View – Profile Dropdown (Selected) screen", which would lead to ambiguity as to what artboard content they're referring to and where exactly it lives on the page. Obviously a complete hypothetical but hopefully that makes sense?

      2: I touched on this a bit here: https://twitter.com/zancler/status/1072792693774970880. Short answer is through communicating in person and via the handover tools we use. Maybe you could also argue that if a screen's purpose isn't clear from looking at it, then its not doing its job anyway. Though I appreciate thats avoiding a whole load of nuance.

      Great questions :)

      2 points
  • Account deleted over 4 years ago

    Good idea but the master page is annoying.. Wish you could change it in the settings. Same for the margins between artboards. I looked for something more customisable and found the plugin "Artboard tricks" it does basically the same thing without the need of a master page (e.g. if you are using abstract it's not useful) + it gives you the option to choose the margin you want

    2 points
    • Zander BradeZander Brade, over 4 years ago

      Hey Romain, thanks for the feedback.

      With regard to the master page, is it that you wish the name "Master" to be different, or that you don't want the page name validation there at all?

      And for margins, I think that's totally fair, maybe a next version could offer configuration of padding, though right now we don't actually have a fixed margin, as its the co-ordinates of the grid that dictate the margin.

      Thanks for sharing Artboard Tricks, it looks great and has lots of the same functionality – I'm gonna have a dig around and see how it works!

      1 point
      • Account deleted over 4 years ago

        Hi man,

        I guess you could have the option to set up a rule to validate a master page or something? Or whatever custom page you want? For the margins, I think you are right, the the grid system is a good idea, but if your artboard is a custom size it doesn't seem to work... Thanks for the plugin tho! Really good for a first version :)

        0 points
      • Jon MooreJon Moore, over 4 years ago

        Alé Muñoz's plugin "Artboard Manager" does beautiful artboard arrangement, and it allows you to customize margins and spacing.

        Alé heads up Sketch's dev team, so it always works perfectly.

        https://github.com/bomberstudios/artboard-manager

        0 points
  • Account deleted over 4 years ago

    I'm going to copy those naming conventions. Cheers for sharing. Also - Monzo kicks ass and the design/onboarding is fantastic.

    1 point
  • Francesca NegroFrancesca Negro, over 4 years ago

    Great article and tool! I have found that not all designers are fans of naming conventions and structure and numbering the artboards is a great idea as it takes out all personal interpretation/initiative thus minimizing error. Just a question though: I like working on different pages as it keeps a cleaner space,; do you happen to have the general "master" page as well as other pages in order to organize the screens?

    0 points
  • Jesse C.Jesse C., over 4 years ago

    You mentioned you keep the Sketch files (and related resources) in Git. Do you do anything special, or just keep them in there? By special, I mean using some tool for viewing them, merge conflicts, etc. We're trying to find a good versioning approach for our design files, but haven't been satisfied with anything we've tried.

    0 points
    • Zander BradeZander Brade, over 4 years ago

      We have another tool that we use on top of Github that automatically exports our artboards, but aside from that its all pretty vanilla Git.

      Right now every designer merges directly to Master and we've managed to avoid issues with conflicts pretty successfully, but I anticipate this will start breaking very soon, so from early next year we'll start requiring designers to work in branches and make PRs when a piece of work is finished.

      I do find viewing files through Github a pain in the ass. Do you have any tools or suggestions that could make this easier?

      1 point
  • Rob GillRob Gill, over 4 years ago

    Great article, I started writing a comment, but I ended up going off on one and it’s turned into a full-on blog post about how I follow a similar process myself, I’d love to know what you think and if you use any of these plugins as well.

    File Cleaner is amazing and if far quicker than my current workflow. However the rules it need to operate successfully are quite strict.

    Eg, what if I don’t want a “Master” page? Or what if I want my artboards to be called a name and then a number? Would you consider adding some setting to allow you to tweak he defaults?

    0 points
    • Zander BradeZander Brade, over 4 years ago

      Hey Rob, that is so, so cool – thank you for sharing, I've passed it onto the full design team.

      You're right, it's very strict and very opinionated, and will bring roadblocks unless you're willing to work within its parameters. So when we do a public v2 of this (probably mid Jan), we're going to include exactly those things. I think it makes a lot of sense to have these things configurable.

      For the moment the source is available on Github if you'd like to manually make the changes.

      1 point