We use Sketch to create comps for websites. Sketch is particularly good at mocking up UIs because of how it blends vector and bitmap artwork. Comps created in Sketch are used to communicate a design vision to the client and our team, not necessarily to show exactly what a website will look like.
We use a team-based license for Sketch. Talk with the Creative Director to set that up.
InVision acts as a hub for design-centric communication between us and clients. It provides a few different features that help us communicate design ideas:
- Mood Boards: Early in a design process, it can be helpful to collect a bunch of images that communicate a specific look and feel to aim for. InVision lets us upload images to a board and provides features for sharing them with our team and clients.
- Syncing: InVision lets us upload comps in order to get feedback from clients. This is the best way to make our Sketch files viewable by clients. The most convenient way to sync from Sketch to InVision is by using InVision's Craft plugin.
- Commenting: When comps are uploaded to InVision, notes and comments can be added by anybody viewing them. When comments are added, they exist in a physical space in the comp, which makes them useful for discussing specific parts of a design.
- Prototyping: Interactivity can be added to comps by using the Craft plugin's prototyping functionality. When installed, select a layer, press the
Ckey, and select an artboard. This will create a hot spot from the layer to the artboard. After syncing to InVision, click the hot spot to navigate to the associated artboard. By chaining these together, we can create navigable prototypes of our comps. Note: Craft's prototyping is a separate feature from Sketch's native prototyping. Prototyping can also be done entirely within InVision. We’ve had the most success using Craft’s prototyping features in Sketch. Talk to the Creative Director to be added to the Sparkbox team on InVision.
We use Photoshop and Illustrator to create original artwork and to modify existing assets. While they're more complex than newer tools, they're also the most fully-featured. Photoshop is unmatched when it comes to manipulating photos. Illustrator is good at generating complex, vector artwork. We often use these tools to work directly with assets, then import the assets into Sketch.
Talk with the Executive Assistant to set up licensing for the Adobe Suite.
Sketch and InVision work well for prototyping interactive flows, but they don’t provide many options for animation. To prototype animations or interactions, we use tools like Flinto and Principle. These provide a simple interface for creating rich, high-fidelity animations between multiple states.
Note: using these tools, it's easy to create effects that are impossible or unwise to implement. Keep this in mind while designing.
We use CodePen to flesh out design ideas within the browser. We can start from scratch, fork an existing pen, or bring in an existing CSS stylesheet or script. This lets us create and share deliverables that are closer to the end product. Sparkboxers get free Pro accounts. Talk with the Executive Assistant to set that up.
Abstract is a service that provides version control for design files. This lets us iterate on designs in a structured way, which can be helpful for larger projects involving multiple designers.
Webfonts can come from a variety of different sources.
- Fonts.com (credentials in 1Password)
- Typography.com (credentials in 1Password)
- Fonts.google.com (free, no account needed)
When using paid font services, we generally use Sparkbox’s accounts for early development and smooth setup, then have the client set up their own accounts before things make it to production.
Drawing custom icons isn't always a good idea. The Noun Project provides a massive library of vector icons. We can download and use SVGs while creating comps. To buy icon licenses for use in production, talk to the Creative Director.
Colorable: A tool that lets us test the contrast of two given colors. This is useful to ensure our colors meet accessibility guidelines.
Skitch: A tool for creating annotated screenshots. This is useful for decomping and providing design feedback.