linkedin tracking
icon-sprite Created with Sketch.
Skip to main content

Web,  Mobile


220 Screens: How to Stay Organized with Your Designs

There are two-hundred and twenty screens in my Sketch file. I’ve personally spent 1,577 hours on this project over the course of 18 months with my team of ten people and with a team of over a hundred on our client’s side. This has been the largest mobile app I’ve ever had the pleasure to work on – an extremely complex user experience designed for both the web and iOS.

When we talk about enterprise design, it’s sometimes difficult to really imagine the sheer magnitude of what the project will become. It’s easy to start the project believing that your screens will always have consistent colors, behaviors, etc., and that there’s no way you’re going to let this get out of hand! No, things like that only happen to lazy, disorganized people. Then one day your developer notices that your body font size has changed by one point. “How did that happen?” you wonder, “I’ve been using text styles!” Next, the gray you’ve been using is slightly off - which is impossible because you’ve been using your swatches, right? Right?

Nobody is perfect. When the scope of a project is so large, things are going to fall through the cracks. The key is to remember to catch it and reign it back in before things get too far. Here a few ways I kept consistency in my app design process:

Use your symbols, type styles, object styles, and color palette

  • Sketch already has some great tools built in to help you. Use them! But be careful of one thing - it’s easy to change the specifics of a style without noticing it. Colors in your palette are a little bit more dummy-proof, but make sure you’re actually using them and not your eye dropper.
  • Use symbols for things like your status bar, confirmation buttons, and tab bars. Symbols can also be tricky, as it can be easy to forget that your object is tied to a symbol, and if you edit you’ll edit everywhere. You can detach your object from the symbol to tweak an instance, but if you make a global change later you’ll have to remember that it won’t update.

Create a basic design system on its own page in Sketch

  • I keep a page called Styles & Assets in my sketch file, with pages such as Typography, Icons, Buttons, Forms, Tables, and a few more. When I need to create a new element, I try to make sure I check these pages to see if I have anything similar that I can tweak. If I do create something new, I’ll do my best to drop it back into my Styles page.
  • You can also create entire screen frameworks to be copied and used as a template elsewhere in your app. This will save you from rebuilding screens over and over, and combined with the use of symbols you can save yourself many hours of redundant work.

Conduct a Design Audit at key intervals

  • This one is a little bit like a code refactor, and it can be a bit time consuming if you’re deep into the project with hundreds of screens. A design audit can range from:
    • simple: visually reviewing each screen to see if anything is out of place.
    • complex: printing out all of your screens and taking a marker to all instances of text and object types.You really only need to bring in these big guns if things have gotten too far out of hand.

Keeping consistency in your work not only will save you time from needing to rebuild work that’s already been done, but it’ll keep your team on the same page when new work needs to be created in the future. These methods were helpful on our recent project, and allowed me to turn over clean, well documented design files. Your future self and your developers will thank you!

Sign up for our newsletter


Delivered monthly, featuring great content from our blog!