Sketch is an application which has already won the hearts of UI and UX designers around the world, even though just about anybody can learn how to use it. Among all the advantages, too numerous to list here, Sketch has a big disadvantage – it is only available for Mac OS.
- Sketching is a fundamental part of the design process. It often comes early in the design funnel and sets the tone for the rest of the process. While sketching seems straightforward, there are certain ways to do it efficiently. This article will provide you with all the information you need to level-up your UX design workflow with sketching.
- Sep 29, 2020 Design the UI/UX or Import from Sketch At this point, you can start dragging widgets from the left-side panel or double-clicking them in the library on the right. You can then resize, reposition, and edit them as you need.
If there's one thing that's universal about UX designers everywhere, it's that we are always sketching.
The Oxford dictionary defines the word sketch as 'make a rough drawing of.' That's the main idea we want to get across. It's rough. It's not meant to be pristine and look perfect. It's meant to rapidly translate your thoughts onto paper.
There're so many reasons why we sketch:
• We sketch to explore concepts.
• We sketch to communicate our thoughts and ideas to others. Concepts can be tricky to explain with words. Sketching helps to get the meaning across.
• We sketch to get feedback on our ideas. Sketching can be a fantastic way to validate your concepts before you spend time wireframing.
• We also sketch to hone our ideas, to make them better, to refine them into something pure. There's almost always a way you can improve your designs. Sketching can help you get there quickly.
• Which is another reason why we sketch, because it's fast and saves you time. Switching between different ideas and concepts while wireframing is tough. You have to create every object from scratch, which takes time. If you decide to move something, that takes even more time. Plus, once you start wireframing, you naturally want to make it look nicer, which is a huge mistake early in the process.Sketching eliminates these problems.
And the best part? Almost anyone can sketch.
Even if you feel lost or like your ideas are stupid, just put your pen down and start drawing bad ideas. Keep exploring. We have to look at all possible options and iterate. To do that, we sketch.
Introducing Sketch for UX and UI will teach you how to use Sketch tools and features in order to build an interactive prototype for a mobile website.
About This Course
In this course, you will learn the basics of creating artwork in Bohemian Sketch, with an emphasis on building wireframes, mockups, and prototypes. We will focus specifically on how to take advantage of Sketch's Artboard, Symbols, and Styles features, in order to create a prototype for a mobile website. Along the way, you'll discover useful tips and tricks using Nested Symbols, Group Resizing and the new Data feature.
The course will also introduce you to the Sketch plugin ecosystem and show you how Sketch makes exporting assets fun. Finally, we'll demonstrate how to make static wireframes and mockups within Sketch and export them to Sketch Cloud,a service which allows anyone to view, download, and comment on Sketch documents.
Course Outline
Sketchpad App
• Which is another reason why we sketch, because it's fast and saves you time. Switching between different ideas and concepts while wireframing is tough. You have to create every object from scratch, which takes time. If you decide to move something, that takes even more time. Plus, once you start wireframing, you naturally want to make it look nicer, which is a huge mistake early in the process.Sketching eliminates these problems.
And the best part? Almost anyone can sketch.
Even if you feel lost or like your ideas are stupid, just put your pen down and start drawing bad ideas. Keep exploring. We have to look at all possible options and iterate. To do that, we sketch.
Introducing Sketch for UX and UI will teach you how to use Sketch tools and features in order to build an interactive prototype for a mobile website.
About This Course
In this course, you will learn the basics of creating artwork in Bohemian Sketch, with an emphasis on building wireframes, mockups, and prototypes. We will focus specifically on how to take advantage of Sketch's Artboard, Symbols, and Styles features, in order to create a prototype for a mobile website. Along the way, you'll discover useful tips and tricks using Nested Symbols, Group Resizing and the new Data feature.
The course will also introduce you to the Sketch plugin ecosystem and show you how Sketch makes exporting assets fun. Finally, we'll demonstrate how to make static wireframes and mockups within Sketch and export them to Sketch Cloud,a service which allows anyone to view, download, and comment on Sketch documents.
Course Outline
Sketchpad App
Chapter 1: Introduction
An overview of Bohemian Sketch, the digital design tool for OS X. You'll get set up with the lesson files for the course as well as receive a brief overview of the role of Sketch in User Experience (UX) and User Interface (UI) projects.
Chapter 2: Workspace and Artboards
Dive right in and begin to learn the Sketch workspace (updated for Sketch 52). You'll be using Sketch's Artboard feature in order to begin building a series of screens for a mobile website.
Chapter 3: Layer Styles and Text Styles
Discover how Sketch's Layer Styles and Text Styles allow you to control the appearance of your artwork and text from a central location and how this will improve your workflow.
Chapter 4: Using Symbols - The Basics
Using Symbols allows you to synchronize multiple elements within your project. Understanding the role of Symbols is critical to mastering Sketch. In this chapter you'll learn the basics of creating, applying, and modifying Symbols.
Chapter 5: Nested Symbols
Nested Symbols take the power of Symbols to the next level and allow you more control of your design elements. With greater control also comes greater complexity, so you'll want to follow along closely.
Chapter 6: Group & Symbol Resizing
Continue your tour of Symbols in Sketch with Group & Symbol Resizing. This useful feature allows you to specify how multiple elements within a Group or Symbol react when resized. If you're creating prototypes for responsive websites, this chapter has your name on it.
Chapter 7: Using Templates & Libraries
You'll learn how to create and use Templates in order to save time when starting a new project. In addition, you'll discover how to use Libraries in order to access (or share) commonly used Symbols across a project — an extremely useful feature for design and development teams.
Chapter 8: Working With Pages
Pages allows you to organize your prototypes into logical sections and make navigating your project a lot easier. You'll learn how to create, delete, and organize your Pages in an efficient manner.
Chapter 9: Designing with Data
New as of Sketch 52, the Data feature allows you to populate your prototypes with realistic data values, including names, cities and images. You'll learn how to use Sketch's default data sources as well as how to create and generate custom data sources.
Chapter 10: Sketch Plugins
Plugins extend the functionality of the Sketch application and are part of why the program is so popular for UX Designers. You'll learn how to locate and add Plugins to Sketch and how to take advantage of the rich ecosystem of Plugins that have been created by third-party developers.
Chapter 11: Exporting
Exporting assets is a task that few designers look forward to, but Sketch manages to make the process fun and rewarding. You'll learn how to export wireframes/mockups to PDF, learn the difference between exporting layers vs. slices and discover other cool and useful exporting tips.
Chapter 12: Adding Interactivity With Sketch
Sketch now allows you to turn your static Artboards into interactive ones. Discover how to organize your projects, add hotspots, create basic animations, and export your prototypes for collaborative purposes.
Prerequisites
- This course has no specific prerequisites, although a general familiarity with prototyping techniques and other vector applications will be useful.
Sketch Ux Kit
Software Requirements
Sketch Ux Windows
- Sketch is a Mac-only application. The latest version of Sketch requires macOS High Sierra (10.13.4) or newer.
- If you do not have a registered copy of Sketch you may download a 30 day free trial from the Bohemian website.