10

Ask DN: Artboards Naming Conventions

almost 6 years ago from , Designer.

I know the use of artboards is already a pretty divisive topic, but just accepting the fact that every sketch file has to be named properly. I am curious on what your take on Artboard naming conventions. Do you name with verbs for actions or nouns for states? or a totally different way that I never heard of.

Example: ArtBoardNameState (CalendarEmpty) ArtBoardNamePrompt(CalendarAdd)

10 comments

  • Hugo CornejoHugo Cornejo, almost 6 years ago

    Tricky question. There are a few trade-offs involved:

    • Project size. Are we talking 10 screens or 1000?
    • Project maturity. How likely it is that you'll revisit those files during the next 6 months?
    • Team size. How many people are working on those files?
    • Team growth. How often do you need to train and onboard a new person into your process and conventions?
    • Team shape. Are you sat next to developers? Would they benefit of agreeing the same naming conventions?
    • Exporting. Do you need to drag those artboards into prototyping tools?

    Here at Monzo we use incremental numbers over a strict artboard grid. Every new flow starts on 100, 200, 300 while new screens in the same flow go 101, 102, 103. If Something can't be clearly explained using that matrix we create a new flow.

    Example: https://i.imgur.com/2A7KGiC.png

    4 points
  • tony wtony w, almost 6 years ago

    I've been using Artboard Tricks for a while now. It does the job pretty well and even has some options for customization.

    1 point
  • John Jackson, almost 6 years ago

    As Hugo said, it really depends on the project. If I only have a few screens that won't be used in a prototype, I might name them like this:

    desktop / dashboard mobile / dashboard

    If I'm going to prototype them, which requires more screens, I tend to name them like this:

    desktop / dashboard 1.0 desktop / dashboard 1.1

    Though it's a pain in the ass when you need to add an additional art board in the middle of a flow.

    0 points
  • Jens Roels, almost 6 years ago

    HI,

    We have the following artboard naming convention

    viewport-section-screennumber-screenname-state

    l-010-010-profile l-010-020-profile-empty

    l-020-010-dashboard

    s-010-010-profile

    We increment with 10 so we can later add more screens in between.

    We have our own plugin to sort all the screens. Sort your screens based on the section numbers, making it easier to group layers within a flow or section. This way you still get an overview of a flow for all breakpoints you’re designing for.

    This mode will sort screens by grouping them by breakpoint first, and section second. This makes it easier to view all your Desktop screens at once. - All screens of a specific section with

    More info and download link here: https://novemberfive.co/blog/responsive-workflow-design-sketch/

    0 points