• 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