Hike One File Structure

Check out our Generic Sketch file

Guidelines

Pages

Use pages to structure your file. A typical project will contain the following pages:

• Style guide
  An interaction designer will have a wireframe version of this page, with just some text styles. A visual designer will have a page with colours, typography and icons. \

• Pattern library
  Containing components and patterns, etc. And their states and explanations.\

• Iterations
  A page(ormultiple pages) containing all the iterations you make. Usually per page, or per concept.\

• Latest version
  Make sure to clearly mark the latest versionin your file, so everyone knows this is the latest and greatest. This can be 1 page with an overview of all latest designs if it is a small project, or separate pages per page/template/design issue if it’s a larger project.\

• Flows/sitemap (optional)
  Containing flows between screens/elements? This can be a flow chart or a range of screens in order, maybe connected with arrows. Check with your ID-colleagues for best practices.

\

Canvas and Artboards

Make sure you use the same direction in which you place your iterations/versions of artboards throughout your document so others can consistently read from left to right (or top to bottom) to see a progress in your changes. Typically this will be left to right as Sketch does this automatically when duplicating an artboard, but if top-to-bottom works better for you, do it, that works too. Just be consistent.

Do yourself and colleagues a favour: Cluster your artboards + add a large label so you can easily find content in large files. subjects on a large canvas what you are working on where.

Name your layers & groups

This should not have to be mentioned, but unfortunately this isn’t done by default by everyone: Please make sure to name your layers, or at least name your groups! If you don’t do it on all your artboards, at least do it on your final/latest artboards!\

**Pro-tip:** Use smart [plugins](plugins) such as [Cleanup Useless Groups](https://github.com/bomberstudios/Cleanup-Useless-Groups) & [Rename it](https://rodi01.github.io/RenameIt/)

Responsive Design

If you’re working on a responsive project (asmost projects are) we have a few best practices:

• Check the Responsive design article
• Keep the designs for different views / breakpoints close together in the file for better readability.

Ask a colleague

Not sure how to set up your Sketch file? Ask your colleague(s)!