Sketch
Sketch is a vector-based design tool exclusively for macOS, developed by the Dutch company Bohemian Coding. It is widely used for user interface and user experience design of websites, mobile apps, and digital products. With a focus on simplicity and performance, Sketch offers powerful design features like symbols and styles, which allow designers to create, share, and manage design elements across multiple documents. Over the years, Sketch has gained immense popularity due to its intuitive interface, efficient plugins ecosystem, and collaboration capabilities. Its file format, ".sketch", has become a standard in many design hand-off and collaboration platforms, further cementing its position as a go-to tool for many UI/UX professionals.
Module 1: Sketch Basics
Introduction to Sketch
Sketch is a digital design toolkit built to help you create your best work — from early ideas, through to final assets. Exclusively available for macOS, it is known for its user-friendly interface and integration with plugins.
Understanding the Workspace
Sketch's workspace is straightforward, with a focus on the canvas. It has panels for layers, pages, and assets on the left, and a contextual properties panel on the right.
Basic Tools Overview
Sketch offers essential tools like Rectangle, Oval, Line, and Vector. It also features the Move and Scale tools to adjust and manipulate elements on the canvas.
Opening and Saving Files
Sketch files use the '.sketch' extension. You can export designs in formats like PNG, JPEG, SVG, and PDF. The software also supports cloud saving for collaboration and sharing.
Module 2: Design and Assets
Working with Artboards
Artboards in Sketch represent different device screens or layouts. They are essential for designing responsive UIs across multiple devices.
Using the Components Panel
Sketch uses Symbols instead of Components. They are reusable design elements that ensure consistency and efficiency across projects.
Creating and Using Symbols
Symbols in Sketch are design elements you can reuse throughout your project. Any changes made to a Symbol will reflect wherever it is used.
Importing and Editing Images
Drag and drop to easily import images into Sketch. Once imported, you can mask, resize, and adjust these images as needed.
Module 3: Prototyping and Interaction
Prototyping Basics
Sketch allows simple prototyping by linking artboards. This helps in mapping out the user's journey and interactions within the app or website.
Adding Interactions
Linking artboards in Sketch allows for basic interactions, like clicks. While it doesn't offer advanced interactions like some other tools, it's sufficient for basic click-through prototypes.
Previewing Prototypes
Sketch has a built-in preview tool that lets you experience your design live. You can also share the prototype with stakeholders to gather feedback.
Integrating with Third-party Tools
For advanced prototyping, Sketch integrates well with tools like Anima or Framer, which can be used to add complex animations and interactions.
Module 4: Collaboration and Handoff
Real-time Collaboration with Sketch Cloud
Sketch Cloud allows multiple users to view and comment on the same document, fostering collaboration among team members.
Design Handoff
Using plugins like Zeplin or Avocode, Sketch designs can be seamlessly handed off to developers, providing them with assets, specs, and code snippets.
Extending Capabilities with Plugins
Sketch has a vast plugin ecosystem. These plugins can automate tasks, add new features, and integrate with other tools, enhancing the overall workflow.
Feedback Loop and Iteration
Sketch Cloud offers a commenting system for stakeholders to provide feedback directly. The integration with plugins further streamlines the process of iterating on designs based on feedback.