Resources

Sketch

How to Use Sketch

Sketch is the preferred software for Mac users in the field of web design. It is made by Bohemian Labs and can be purchases as a student for around $50. It is a wonderful combination of many of the strengths of Adobe Illustrator and Adobe Photoshop with some unique features of its own. It also integrates smoothly with other popular web tools such as Invision.

Read more from the Sketch website »

Getting Started with Sketch

1. Obtain a License

   University students may have access to licenses of Sketch in select campus computer labs. Look for instructions from your professor for how to use this resource.

   If you would like to obtain a license for your own computer you may purchase one with a student discount. Learn more »

2. Learn Sketch

   If you’ve used Adobe software such as Illustrator or Photoshop you will find Sketch easy to learn.

   Here is a nice overview of Sketch

   InVision recently made a very nice set of tutorials to help folks get started with Sketch. Note that you’ll need to provide an email address in order to view these tutorials. This is a trusted site that sends a regular newsletter with excellent interactive design content.

3. Install Craft

   Craft is a plugin for Sketch built by InVision that helps Sketch and InVision work smoothly together. Craft is discussed in the tutorials above so if you skipped over them you can learn more about Craft and download it from the Craft webpage.

   In University labs, the Craft Manager plugin should be available on any computer on which Sketch is installed. Look for details from your professor regarding this resource.

Invision

How to Use InVision

InVision is a web-based tool for creating prototype mockups of websites. You essentially design screen mockups using other software, upload those screens to InVision, and then add hotspots and transitions in order to simulate how the site or application should work. The result is a prototype that you can review with users in user testing, discuss with clients, and collaborate on with colleagues.

Read more from the InVision website »

In our courses we use InVision for design review, critique, and feedback.

Getting Started with InVision

1. Create and account

   University students can create an account with InVision for free using information provided by your professor that should include an access code.

   Your student account will remain active until 6 months after graduation and allows you unlimited projects in the meantime.

2. Learn InVision

   After creating an account with InVision you can log in and learn more about how to use the tool.

   InVision also created an introductory video specifically for students.

3. Use InVision with Sketch

   InVision built a very neat plugin for Sketch and other tools called Craft. This enables some very helpful features and the ability to synchronize screens in a project straight from art boards in Sketch. Learn more »

   When working between Sketch and InVision you'll use Craft to keep the two in sync. Here's the overall process:

   • Create a project in InVision. See project details to ensure you set up the right kind of project.
   • Complete your design work in Sketch.
   • Use the Craft plugin to connect to your InVision account and upload screens to the correct project. If you're doing this for the first time, make sure the Craft Manager application is running and that you've used it to install the plugin in Sketch.
   • Back in InVision you can set up the hot spots/links and other interactive simulations on your screens from Sketch.
   • If you make changes to the screens in Sketch be sure to upload the updates to InVision again and double-check your interactive elements in InVision.

4. Use InVision for Design Feedback and Revisions

   As we will be using the Craft plugin to synchronize design comps from Sketch to a project in InVision your professor will use InVision’s commenting feature to provide feedback. Here is an overview of the typical process:

   1. Add your professor as a collaborator on the project in InVision.
   2. Use the provided submission in CULearn to indicate that you’re ready for feedback or have completed the assignment.
   3. Your professor will use the comment and workflow tools to provide feedback on any screens.
   4. You can review feedback by clicking on the project and then the Comments tab. Your professor might also use the Workflow tool to further amplify this process, so watch for announcements about this feature.

5. Use Inspect

   InVision has released an excellent extended feature called Inspect that allows you to view any screen of a project uploaded from Sketch and other tools and gather technical settings from it. This includes actual CSS code, measurements, colors, and even quick access to slices exported from Sketch.

   Learn more about Inspect »

   Note that this tool is not a substitution for good CSS practice; you should not simply copy and paste everything Inspect provides. Instead, it is a) a helpful reference you can use for measurements while building a comp and b) provides quick access to copy and paste necessary content and settings.