Introduction to Sketch
By Samuel Hermoso (Elastic Heads) , UX-UI Designer
Joined August 2014
Learn how to design websites and apps like a professional with the pioneering user interface (UI) design software
Learn how to design websites and apps like a professional with the pioneering user interface (UI) design software
Domestika Basics · 7 courses included
-
Course 1: Introduction and Basic Characteristics
By Samuel Hermoso (Elastic Heads)
Discover the software’s tools and learn how to create your first basic shapes
-
Course 2: Shape Styles, Vectors, and Pixels Use
By Samuel Hermoso (Elastic Heads)
Learn how to add edges, color, and effects in your basic shapes
-
Course 3: Organizing Elements
By Samuel Hermoso (Elastic Heads)
Learn how to group and align layers with Smart Layout to work in an organized way
-
Course 4: Texts and Hierarchy
By Samuel Hermoso (Elastic Heads)
Create texts and modify its characteristics
-
Course 5: Scaling Your Project
By Samuel Hermoso (Elastic Heads)
Learn how to work in a scalable way with symbols, styles, and data
-
Course 6: Layouts, Grids, Smart Layouts and Prototyping
By Samuel Hermoso (Elastic Heads)
Create your first navigable prototype with Sketch
-
Course 7: Shortcuts, Tricks, and Plug-ins
By Samuel Hermoso (Elastic Heads)
Discover how to work faster and more efficiently
If you want to design a responsive interface for different devices, in a simple and efficient way, the tools on Sketch—software that has been specially developed for UI designers—make the entire process look easy.
In this Domestika Basics of seven courses, UX/UI consultant and designer Samuel Hermoso teaches you how to master Sketch from scratch. With a practical methodology, and through a series of practical exercises, you’ll be able to design your own interface of a project, for both websites and apps, in a professional way.
Start off by installing the software, getting to know its interface and basic tools to understand its main characteristics. See how to create your first shapes, as well as selecting, moving, and transforming layers in different ways.
In the second course, Samuel teaches you how to add borders, colors, shadows, and other effects to your basic shapes. Learn how to work with vectors and pixels, creating your first icons for the design of your interface through the intersection of vectorial shapes and curve drawings.
Continue by working with the shape elements in Sketch in the third course, measuring the distances, and how to group, and align your layers. Learn the main functionalities to reorganize the screens and layers with the Smart Layout tool.
Move on to the process of designing texts in the fourth course. Learn the different characteristics to improve the reading experience, maintaining concistency throughout your project. Samuel teaches you how to modify texts, creating different styles and establishing hierarchies. Explore different fonts, sizes, colors, and contrasts to create a mobile app design.
Next, learn how to work with your project in a scalable way, using symbols with the Resizing tool. See how to easily duplicate screens and implement adjustments that affect every version, to work more efficiently. Learn how to swiftly create and switch styles.
In the second-last course of this Domestika Basics, create a navigable prototype of your pages. See how to adjust your designs for different devices using column layouts and grids. Use these new characteristics to align elements automatically, creating spacing and paddings.
Finally, Samuel shows you how to make the most of Sketch by sharing some tips and tricks that will help you work quicker and more efficiently. Wrap up this Basics course with a series of plug-ins to personalize the tool that best adapts to your needs.
Technical requirements
- ⦁ A computer with macOS Mojave or higher.
⦁ The latest version of Sketch. You can download the trial version on the official website of the software.
- 100% positive reviews (67)
- 2,249 students
- 83 lessons (11h 46m)
- 7 courses
- 79 downloads (21 files)
- Online and at your own pace
- Available on the app
- Audio: Spanish
- Spanish · English · Portuguese · German · Italian · French · Polish · Dutch
- Level: Beginner
- Unlimited access forever
Reviews
Samuel Hermoso has over 20 years of experience working in consulting and digital product design. After working with different studios and agencies, he created the Elastic Heads studio, in Madrid (Spain), where he helps people, companies, and startups adapt to the new changes in the digital world and improve their digital products.
Samuel is also dedicated to teaching, he is a professor of product design, user experience and methodologies, and interactive design tools in schools such as: Ironhack, Mr. Marcel School, IED, Neoland and the European University.
Content
Course 1: Introduction and Basic Characteristics
-
U1
Welcome
-
Welcome
-
-
U2
Install the program
-
Install the program
-
-
U3
Sketch interface
-
Sketch interface
-
-
U4
Zoom and move
-
Zoom and move
-
-
U5
Preferences
-
Preferences
-
-
U6
Screens
-
Screens
-
-
U7
Insert basic shapes
-
Insert basic shapes
-
-
U8
Menus
-
Menus
-
-
U9
Transform, scale, twist, and mirror
-
Transform, scale, twist, and mirror
-
-
U10
To select
-
To select
-
-
U11
Move, copy, paste and duplicate
-
Move, copy, paste and duplicate
-
-
U12
Practice: design with geometric shapes and adaptations to different screens
-
Design with geometric shapes and adaptations to different screens
-
Course 2: Shape Styles, Vectors, and Pixels Use
-
U1
Welcome
-
Welcome
-
-
U2
Borders and colors
-
Borders and colors
-
-
U3
Working with images
-
Working with images
-
-
U4
Export images
-
Export images
-
-
U5
Vectors, rounded edges, import and export vectors
-
Vectors, rounded edges, import and export vectors
-
-
U6
Pixel perfect icons
-
Pixel perfect icons
-
-
U7
Working with vector shapes
-
Working with vector shapes
-
-
U8
Booleans with geometric shapes
-
Booleans with geometric shapes
-
-
U9
Practice: icon design
-
Practice: icon design 1
-
Practice: icon design 2
-
Course 3: Organizing Elements
-
U1
Welcome
-
Welcome
-
-
U2
Layer groups
-
Layer groups
-
-
U3
Types of layers
-
Types of layers
-
-
U4
Lock and unlock layers
-
Lock and unlock layers
-
-
U5
Measure distances, align and distribute
-
Measure distances, align and distribute
-
-
U6
Play button and align elements in header
-
Play button and align elements in header
-
-
U7
Layer order
-
Layer order
-
-
U8
Rearrange layers and screens
-
Rearrange layers and screens
-
-
U9
Reorder spaces in texts
-
Reorder spaces in texts
-
-
U10
Practice: organizing and aligning elements on a screen
-
Practice: organizing and aligning elements on a screen
-
Course 4: Texts and Hierarchy
-
U1
Welcome
-
Welcome
-
-
U2
Align and modify texts and shapes to create buttons
-
Align and modify texts and shapes to create buttons
-
-
U3
Enhance the reading experience
-
Enhance the reading experience
-
-
U4
Text hierarchies
-
Text hierarchies
-
-
U5
Paste text keeping the same style
-
Paste text keeping the same style
-
-
U6
Exercise transform buttons
-
Transform buttons
-
-
U7
Recommended text sizes
-
Recommended text sizes
-
-
U8
Text styles
-
Text styles
-
-
U9
Practice: create mobile screens combining different text styles
-
Practice: create mobile screens combining different text styles 1
-
Practice: create mobile screens combining different text styles 2
-
Course 5: Scaling Your Project
-
U1
Welcome
-
Welcome
-
-
U2
Symbols
-
Symbols
-
-
U3
Modify values with overrides
-
Modify values with overrides
-
-
U4
Fill information with Data
-
Fill information with Data
-
-
U5
Transform groups and symbols with resizing
-
Transform groups and symbols with resizing
-
-
U6
Create alternative symbols
-
Create alternative symbols
-
-
U7
Add styles to modify color overrides
-
Add styles to modify color overrides
-
-
U8
Copy-paste layer style
-
Copy / paste layer style
-
-
U9
Copy other color and fill types
-
Copy other color and fill types
-
-
U10
Shades
-
Shades
-
-
U11
Practice: preference list screen on mobile and tablet
-
Practice: preference list screen on mobile and tablet 1
-
Practice: preference list screen on mobile and tablet 2
-
Practice: screen of preferences list on mobile and tablet 3
-
Course 6: Layouts, Grids, Smart Layouts and Prototyping
-
U1
Welcome
-
Welcome
-
-
U2
12 column layout
-
12 column layout
-
-
U3
Fit elements to layout and grid
-
Fit elements to layout and grid
-
-
U4
Vertical rhythm for texts and spacing
-
Vertical rhythm for texts and spacing
-
-
U5
Use the smart layout
-
Use the smart layout
-
-
U6
Padding with smart layout
-
Padding with smart layout
-
-
U7
Prototyped
-
Prototyped
-
-
U8
Fixed elements
-
Fixed elements
-
-
U9
Preview the prototype
-
Preview the prototype
-
-
U10
Practice: UI project of a web / app and prototype of screens of a web/app
-
Practice: UI project of a web/app and prototype of screens of a web/app 1
-
UI screens project and prototype of an app 2
-
Course 7: Shortcuts, Tricks, and Plug-ins
-
U1
Welcome
-
Welcome
-
-
U2
Keyboard shortcuts
-
Keyboard shortcuts
-
-
U3
Masks
-
More expensive
-
-
U4
Find and replace colors
-
Find and replace colors
-
-
U5
Resize screens
-
Resize screens
-
-
U6
Recommendations lines and ring graphs
-
Recommendations lines and ring graphs
-
-
U7
Replace items
-
Replace items
-
-
U8
Create data lists for the Data menu
-
Create data lists for the Data menu
-
-
U9
Reduce file size and version elements
-
Reduce file size and version elements
-
-
U10
Switch window and tabs for multiple documents
-
Switch window and tabs for multiple documents
-
-
U11
The pen for drawing curves
-
The pen for drawing curves
-
-
U12
Plugins
-
Plugins 1
-
Plugins 2
-
-
U13
Practice: adapt a screen to a new brand image renewed
-
Practice: adapt a screen to a new brand image renewed
-
Practice: adapt a screen to a new brand image renewed 2
-
Practice: adapt a screen to a new brand image renewed 3
-
Practice: adapt a screen to a new image of a renewed brand 4
-
See the content of the 7 courses
About Domestika Basics
Domestika Basics is a series of courses focused on teaching the most commonly used software by creative professionals worldwide.
The content has been meticulously curated and is intended for both students going into a new creative field and more experienced professionals who want to polish their skills.
Learn with the best Domestika teachers through practical lessons, tons of resources, and a progressive difficulty that'll allow you to see results from day one.
Domestika Basics will allow you to step up your professional game and be prepared to score better projects.
-
Without prior knowledge.
Domestika Basics gives you everything you need to get started in a new creative field and become an expert in it.
-
Focused on the tool.
Discover its main components, techniques, and the tried-and-true methods you need to master it.
-
Learn fast
With a straightforward, step-by-step approach, our outstanding professionals will teach you how to get the most out of the program.
-
Certificates Plus
If you're a Plus member, get a custom certificate signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
sofia.piedrahitar
Me gustó mucho como se dan los temas, facil de entender
View translation
Hide translation
mam.profesional
Muy bien explicado. Abarca todos los temas importantes del manejo de la aplicación. Consigues la formación básica para manejar Sketch. Muy recomendable
View translation
Hide translation
alboruiz
Plusun buen curso para aprender sobre Sketch, siempre me sirve para regresar a repasar.
View translation
Hide translation
victoria_armas
Súper últil y claro. Está tan bien organizado que cuando me olvido de cómo hacer algo solo vengo aquí y checkeo lo que necesito. Muchas gracias por el curso!!!
View translation
Hide translation
Juan de Marcos
Muy claro para empezar a moverse en Sketch
View translation
Hide translation