Skip to content

Commit

Permalink
Update design-design_tools.md
Browse files Browse the repository at this point in the history
  • Loading branch information
nrleak authored and jeremyloyd committed Dec 5, 2019
1 parent 151cd04 commit 8f206ea
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions design/design-design_tools.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
# The Design Tools We Use and Why We Use Them

## Sketch for creating comps
## Sketch for Creating Comps
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 for design communication
## InVision for Design Communication
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](https://www.invisionapp.com/craft).
- **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 `C` key, 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.
- **Prototyping:** Interactivity can be added to comps by using the Craft plugin's prototyping functionality. When installed, select a layer, press the `C` key, 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.

## Photoshop and Illustrator for creating artwork
## Photoshop and Illustrator for Creating Artwork
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.

## Flinto/Principle for advanced prototyping
## Flinto/Principle for Advanced Prototyping
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.
**Note:** using these tools, it's easy to create effects that are impossible or unwise to implement. Keep this in mind while designing.

## CodePen
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.
Expand Down

0 comments on commit 8f206ea

Please sign in to comment.