15

How do you organize screen states in Sketch?

over 2 years ago from , Product Designer

I'm currently working on a large website/dashboard. Many of the screens have one or more states per page for example an empty state, expand a field, drop downs etc. The way I design all of these states is by duplicating the main screen artboard and make a second version with the other state.

The issue we are having right now is when we upload our screens to invision the prototype has over 100 screens including states and our developers overlook some of the UI changes between different states of a page.

  1. This is a two part question? How do you organize your states in a sketch file. Do you do another page just for states, What is your process?
  2. The second part is what's the best way to hand-of states to developers?

20 comments

  • Yannick Antoine, over 2 years ago

    I organize my states by collecting them on a different page and then put them on seperate artboards. This way I can combine them in InVision to hand to the developers. I usually also make a preview of all the states on 1 artboard as an extra screen to give the developers a good overview of all the different options.

    5 points
  • Tom ReinertTom Reinert, over 2 years ago

    This is a huge issue and I haven't seen a good solution.

    Elements having different states is such a crucial part of product design and none of the tools I've seen makes it easy to create them.

    I hope we will see a tool that really enables us to design interactive layouts.

    5 points
  • Dan WilkinsonDan Wilkinson, over 2 years ago

    I would say that the best way to hand-over something like this to developers would be in some sort of visual style guide.

    There are plenty of examples if you do a quick search, such as...

    Handing over using Zeplin would also help the developer too. Good luck!

    2 points
    • Charlie McCullochCharlie McCulloch, over 2 years ago

      Absolutely. Mockups are for telling a story. Style guides are for explaining the nuts and bolts of how it looks. Trying to do both at once is a waste of time and confusing for colleagues.

      0 points
  • Brad Siefert, over 2 years ago

    This is what I do:

    XX.YY.ZZ - Name of Screen, Screen Description, Different States

    XX = Epic # YY = Screen # ZZ = Optional, States of the Screen #.

    No one has ever complained, mostly people are happy with the level of specificity. I wonder if anyone has thoughts on a better way.

    Example Screenshot: http://d.pr/i/w1Ui

    1 point
  • Mike A.Mike A., over 2 years ago

    Nobody's using States plugin (http://states.design/)? I'm still trying to figure out whether it's good or not ...:)

    1 point
    • Rolando MurilloRolando Murillo, over 2 years ago

      Jus tried it.

      Good news: very nice, it reminds me of a feature Photoshop has that does pretty much same thing.

      Bad news: it made Sketch crash for me. I was abusing the plugin a little by switching between states fast but worth noting.

      0 points
  • Steven CavinsSteven Cavins, over 2 years ago

    I create a "states" artboard which is a bit loose and not structured like the UI itself that has all the necessary states of things. I'd recommend taking a look at Shopify's Pattern Library (in Sketch), which appears to lay things out this way as well (albeit more methodically/public facing than I find is necessary for internal work.)

    0 points
  • Aaron Sampson, over 2 years ago

    The best approach I've found with my team, is to insure that each prototype is built with hotspots on every comp in order to navigate it. That way the developers are clicking on the actual elements that have the state changes.

    Along with that, I've found that leaving "Tour Point" note types on comps that have subtle changes between them. These notes have a blue pulsing dot when you land on the comp, which help them get noticed more than the standard note type.

    0 points
  • Cristian MoiseiCristian Moisei, over 2 years ago

    The solution, if you use pro grade software like Photoshop, is to use hidden groups and colour code them - I use blue for states that can be turned on and off and orange for notes layers. It doesn't take much work to make sure they work out of the box and everyone else can use them (i.e. use a background layer to cover the old content behind it, use smart objects to make sure re-used elements stay in sync), and this is even supported by handover tools like Avocode.

    Image

    I can't tell you for sketch though.

    0 points
  • Christian BehrensChristian Behrens, over 2 years ago

    tl;dr – Screen types vertically, screen states horizontally.

    1) Create a sitemap to identify all screens of an app (or pages of a site). Assign each screen a name and a unique ID as prefix. I normally use a dot notation to reflect content hierarchy, for example

    • 1 Stories
    • 1.1 Story Details
    • 1.2 Post a Story
    • 2 Jobs
    • 2.1 Post a Job
    • 3 Podcast

    2) In Sketch, create an artboard for each screen in your sitemap. Arrange them vertically, label them with the prefix and name. Add a suffix ‘0’ to the artboard name, for example 1.1 Story Details 0. This will be the screen's default state.

    3) If a screen has multiple states, duplicate the corresponding artboard and adjust its state. Arrange different states of the same screen horizontally. For each new state, increase the suffix by 1.

    4) The result is an OCD-grade organised Sketch file that translates nicely into structured exports for Zeplin or InVision, for example:

    • 1 Stories 0.png
    • 1 Stories 1.png
    • 1 Stories 2.png
    • 1.1 Story Details 0.png
    • 1.1 Story Details 1.png
    • 1.2 Post a Story 0.png
    • 2 Jobs 0.png
    • 2 Jobs 1.png

    0 points
  • Cory MalnarickCory Malnarick, over 2 years ago

    Is your issue specifically that it's hard to navigate 100+ screens in invision for creating your prototype?

    Does your prototype require all 100+ screens?

    0 points