We may earn an affiliate commission when you visit our partners.
Course image
Joseph Angelo Todaro

  Sketch has revolutionized the world of mobile application design by providing the tools to transform yourself into a professional app designer with only a few hours of training. This course will teach you to use the Sketch to design dynamic, development-ready mobile app user interfaces that impress clients and engage users. 

Read more

  Sketch has revolutionized the world of mobile application design by providing the tools to transform yourself into a professional app designer with only a few hours of training. This course will teach you to use the Sketch to design dynamic, development-ready mobile app user interfaces that impress clients and engage users. 

  Learn to Design Beautiful, High-Quality Mobile Application UI with Sketch's Powerful Tools and Smooth Workflow 

  • Master the essential principles and tools of Sketch.

  • Discover design techniques that will enhance your creative potential.

  • Learn and implementUI best practices to ensure quality and usability.

  • Journey from concept to completion by creating a sample mobile application.

  Find Out Why Google, Apple, and Facebook Designers Use Sketch

  Many of Silicon Valley’s most established and fastest growing companies swear by Sketch when designing UIs for mobile applications because it’s fast and intuitive, and produces stunning final products. 

  Sketch isn’t just a tool for designing pretty apps, It’s a tool for composing UI components and design patterns that scale without effort as projects grow more complex.

       When it comes to styling, we’re able to use multiple color and gradient fills, borders, and automatically scaling images on a single layer to keep out layers list clean and organized.

       It gives us the ability to reuse styles and elements throughout a design — so that you never have to waste time making the same change in multiple places. And those reused elements can be nested inside one another and then tweaked or swapped out to create powerful and flexible design systems.

  Contents and Overview 

  Whether you’re a beginner or a veteran designer with experience using Photoshop and Illustrator, you will find this course valuable in the way that it blends step-by-step instruction with hands-on, customizable exercises: 

  • Mobile App Design from A to Z: With 55 lectures and 4.5 hours of content, this course covers everything from layers, shapes, and styling to text editing to exporting finished projects.

  • Test Your Knowledge: Periodic quizzes will review key concepts and ensure that you are mastering the content.

  • Interactive Design Project: Together with the instructor, you will build a sample UI for an iPhone music player app. Included Sketch documents allow you to pick up at any point in the project.

  After completing this course, you will understand how to design high-quality mobile application UI using Sketch and you will be better prepared to meet the demands of your clients and developers. 

Enroll now

What's inside

Learning objectives

  • Master sketch to create a strong mobile app design from start to finish
  • Advanced techniques and shortcuts to design faster than most professionals
  • User interface design best practices to solve problems effectively
  • Know how to simplify visual information to clarify meaning and improve ux
  • Understand how to design for different device viewports
  • How to leverage tools to ensure pixel perfect design work
  • How to save tons of time by using shared styles, symbols, and libraries
  • How to export and hand off the assets developers need to build a real app
  • How a good ui (user interface) influences good ux (user experience)
  • Be a professional designer who creates better apps faster

Syllabus

Become acquainted with Sketch 3 by Bohemian Coding

Let's take a moment to get to know one another and talk about why we are here.

Where does Sketch fit into the world as a design application? Let's talk about what makes Sketch such a strong application for user interface design (UI design) and what makes it a better choice for this type of design work than Photoshop.

Read more

Let's get the included fonts installed into your computer's Font Book before we get started.

Let's discuss the difference between vector graphics in Sketch vs raster or pixel based graphics like images and photographs.

Time to get familiar with Sketch by learning where our tools are. Here we cover the toolbar, layers list, inspector, and touch on the canvas.

Every Sketch document is made up of simple parts. Pages, canvas, and artboards. Let's learn how the pieces come together.

Starting Your Project Right

Getting the size of your artboards right before you begin designing sets you up for success. Artboard sizes may look strange at first glance because they appear to be super "low res". Let's find out why.

Let's get into best practices for staying out of trouble with save, save as, and autosave. Autosave can be an extremely useful feature when it is properly understood and properly taken advantage of.

Let's make sure we are on the same page

Navigate about a Sketch document and interact with layers

Let's get familiar with the design elements which will combine to form anything and everything you build in Sketch.

A quick learning tip

Time to get hands on. Let's master making selections and positioning things on our canvas. We will be learning some shortcuts that make even simple navigation much faster and easier.

Sketch gives us a number of tool to stay pixel perfect. Eyeballing things works for most artwork, but in software design there is a lot to be said for visual organization and precision.

Sometimes the best way to align things is to design on a grid. Using grids and guides, spacing and aligning objects can be effortless.

As your design becomes more complex, layers will begin to get in the way of other layers. Let's look at how keep things from getting in our way.

Are you a pro at navigating around Sketch documents?

Here is the often requested cheat sheet of Sketch shortcuts. It's a giant JPG that makes for a nice desktop background :)

Create and manipulate shapes to build most of what goes into a user interface

Its about time we begin adding content to our canvas. Let's take a close look at the different vector shapes we have to choose from.

Now that we know how to add shapes to our canvas, let's begin assembling the basic shapes that will form our app.

Before we continue, let's put a little bit of polish on the elements of our blockframe to help differentiate them from one another.

Editing Shapes

Sketch wouldn't be a true vector drawing application without the ability to draw your own custom shapes. 

Here we look at the two tools within Sketch to draw our own shapes from scratch.

Let's take a moment to practice drawing with the Vector Tool.

Boolean Operations are an incredible tool within Sketch which allow us to combine basic shapes to create more complex ones. You'll be impressed with how much you can accomplish with simple shapes and Boolean Operations.

Let's take a few minutes to put Boolean Operations into practice and see how quickly basic shapes become something much more interesting.

Masking in Sketch can be very, very easy and very, very useful. On the other hand, it can be a bit confusing to figure out on your own. In this lesson I show you how to keep making simple and get your masks under control.

In Sketch, it is easy and intuitive to grab the handles around an object and drag them to scale the object up or down. The problem with this becomes clear when borders or rounded corners are involved. Dragging the handles scales the path, but does not scale the effects in proportion. This lesson demonstrates how to scale an object or group of objects along with its effects.

It's not unusual to need things to be lined up with one another and spaced even from one another. While it might be less common, you may want things lined up and spaced both vertically, as well as horizontally. In this tutorial I show you how easy it is in Sketch 3 to organize and align objects on such a grid. Also how to duplicate an object into rows and columns.

While Adobe Illustrator and Sketch are both vector drawing applications, they aren't exactly joined in holy matrimony. If you're a designer using Illustrator, these tips will make your life a lot easier when bringing artwork over.

Let's finish populating our app with graphics before we style them.

Make sure you are not geometrically challenged in Sketch

Give your design dimension and polish by using fills, borders, shadows, and more

We are ready to beginning styling our app. Let's start with our different types of shape fills. Colors, gradients, and patterns; its all here.

Let's dig into some details about one of the most important "primitives" we use for design. Colors.

Borders, or "strokes", can be used in a number of ways to style objects or paths. Let's see how width, color, joints, miters, and end caps make borders useful.

Shadows are a simple and elegant way to add depth and dimensionality to your design. Let's go over some tips for incorporating shadows.

Blending Modes and opacity allow us to get one layer to have transparency or blending with layers below. Beautiful and complex effects can be created with little effort.

There are several different types of blur effects that can be applied in Sketch. Let's compare them and review one of the more misunderstood blur types: the Background Blur.

As we style more and more objects in our design, the more we may find ourselves doing the same tasks over and over again. One of the recurring themes throughout this course is how to avoid doing repetitive tasks. Let's learn how to avoid repetitive styling.

Now that we know how to copy and paste style from one object to another, let's look at an amazing feature in Sketch that allows us to share styles between similar objects so that they always remain in sync with one another.

Time to take what we've learned and apply it to some finishing touches to our design.

Style is subjective. Knowing your tools is not.

Master the text tool and the subtle tricks that make it a pleasure to use

Time to add text to our design and get familiar with the text tools available to us.

Area text allows us to insert paragraphs of text that remain within a bounding box. Let's look at the ins and outs of text boxes and styling the text within those boxes.

When we Sketch open documents on computers that don't have the necessary fonts installed, Sketch gives us a chance to make it right. Let's look at how.

We still have some text layers to add before our content is complete. Let's wrap that up before we continue.

Type is a beautiful group of letters, not a group of beautiful letters.

Create and manage objects that synchronize throughout your design to keep changes and updates lightning fast and easy as pie

Symbols are a feature that truly set Sketch apart from other design applications. Using symbols, we can reuse design elements rapidly and keep the content of these design elements completely synchronized throughout our document. Making global design changes could not be easier thanks to Symbols.

Organizing Symbols
Symbol Overrides
Smart Layout
Nesting Symbols
More about Smart Layout
Sketch Libraries

Make sure you understand one of Sketch's greatest tools

See what Sketch can do with images without the need for an external image editor like Photoshop

While image editing is certainly better suited to raster image editing applications like Photoshop, there are still a few tools within Sketch for making simple adjustments.

Bitmap Editing
Applying Styles to Images
Workflow Pro Tips

In a world where our users devices vary in size, we find ourselves designing for multiple screens sizes more often than not. Whether you face this particular challenge or just want to make your symbols more flexible and reusable, Resizing Constraints in Sketch are sure to become your best friend. Beginners and advanced Sketch users can save a lot of time and headaches by spending a quick 15 minutes soaking up exactly how Resizing Constraints in Sketch work.

With Color Variables, you can set colors that synchronize across your document. When you make changes to a Color Variable, those changes appear across all of the layers that use it. You can create Color Variables that are local to a specific document or share them in a Library to use in other designs. Color Variables can speed up your workflow and keep designs organized. They synchronize across your document. When you change a Color Variable it will update any layer that uses it.

Mastering Color Variables
Take your final design and break it down into individually exported assets for a developer to build into an app

When you click the Export button in the toolbar, Sketch will pop down a sheet listing all exportable layers in the canvas; artboards, slices and regular layers. You can export some or all of these from there. Let's start by focusing on Artboards.

Export Presets

Exporting a layer by itself means that no other elements on the canvas will be exported with it. If there's a layer on top or a background below it, neither of those will be included in the export. This is how we break our design apart into individual assets to export for developers to build our actual app.

Last and most definitely not least, will you be able to get your design turned into something functional?

You've made it to the end!

You made it to the end of the course! Take a moment to celebrate.

Learn how to turn your designs into an interactive prototype that you can then sync to a free InVision account to share, get feedback, and handoff your designs to a develop to build the real thing.

Learn how to turn your designs into an interactive prototype that you can then sync to a free InVision account to share, get feedback, and handoff your designs to a develop to build the real thing.

Bonus material

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Provides an efficient way to create mobile app interfaces in a timely manner
Suitable for individuals with little to no experience with app design
In-depth coverage of mobile app design from concept to completion
Utilizes Sketch's powerful tools, making app design more convenient and faster
Provides insights into the methods used by top companies in Silicon Valley
Access to hands-on, customizable projects for practical implementation

Save this course

Save Sketch from A to Z (2022): Become an app designer to your list so you can find it easily later:
Save

Reviews summary

Sketch from a to z (2022): become an app designer

Learners say this course is a largely positive overview of Sketch's features that is well received by beginners and experienced graphic designers alike, despite being slightly outdated. Some of the key takeaways from the course, according to learners, include: * There are many hidden features in Sketch that can save you time and improve your workflow. * Sketch is a powerful tool for designing mobile apps, and this course will teach you how to use it effectively. * It is possible to become an app designer without any prior experience in graphic design. The course is divided into 12 sections, each of which covers a different aspect of Sketch. The sections are as follows: 1. Introduction to Sketch 2. Getting Started with Sketch 3. Drawing and Editing Shapes 4. Working with Text and Type 5. Using Symbols and Styles 6. Using Constraints and Resizing 7. Exporting Your Designs 8. Prototyping in Sketch 9. Bonus: Using Sketch with InVision 10. Bonus: Using Sketch with Zeplin 11. Bonus: Sketch Tips and Tricks 12. Advanced Sketch Features The course is taught by Joseph Todaro, who is a professional graphic designer with over 10 years of experience. Todaro is a clear and engaging instructor, and he does a great job of explaining the different features of Sketch. He also provides a lot of helpful tips and tricks that can help you become more efficient with the software. Overall, learners say this course is a great resource for anyone who wants to learn how to use Sketch to design mobile apps. The course is well-structured and easy to follow, and it provides a comprehensive overview of the software's features. If you are serious about learning Sketch, then this course is definitely worth checking out.
This course is suitable for both beginners and experienced graphic designers. If you have no prior experience with graphic design, this course will teach you the basics of design as well as how to use Sketch. If you are an experienced graphic designer, this course will teach you how to use Sketch to create mobile apps.
"This course is suitable for both beginners and experienced graphic designers."
If you are using an older version of Sketch, some of the menu options and interface elements may be different. There are a lot of keyboard shortcuts in Sketch. Learning these shortcuts can help you work faster and more efficiently. Sketch has a large and active community. There are many resources available online, including tutorials, plugins, and templates. There are many great Sketch plugins available. Plugins can add new features and functionality to Sketch. Sketch is a powerful tool that can be used to design beautiful and user-friendly apps. However, it is important to remember that Sketch is just a tool. The quality of your designs will ultimately depend on your own skills and creativity.
"If you are using an older version of Sketch, some of the menu options and interface elements may be different."
"There are a lot of keyboard shortcuts in Sketch. Learning these shortcuts can help you work faster and more efficiently."
"Sketch has a large and active community. There are many resources available online, including tutorials, plugins, and templates."
"There are many great Sketch plugins available. Plugins can add new features and functionality to Sketch."
"Sketch is a powerful tool that can be used to design beautiful and user-friendly apps. However, it is important to remember that Sketch is just a tool. The quality of your designs will ultimately depend on your own skills and creativity."
Sketch is a powerful tool for designing mobile apps. This course will teach you how to use Sketch to create beautiful and user-friendly apps.
"Sketch is a powerful tool for designing mobile apps."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Sketch from A to Z (2022): Become an app designer with these activities:
Organize and review your course materials
Consolidate your understanding by organizing and reviewing the materials provided in the course.
Show steps
  • Create a folder for the course materials.
  • Download and save the course lectures, notes, and assignments.
  • Review the materials regularly to reinforce your learning.
Review the basics of vector graphics before starting the course
Ensure a solid foundation by reviewing the fundamentals of vector graphics.
Browse courses on Vector Graphics
Show steps
  • Read articles or watch videos about vector graphics.
  • Practice creating simple vector shapes in Sketch.
Follow Sketch tutorials on YouTube
Expand your knowledge of Sketch by following video tutorials from experienced designers.
Browse courses on Sketch
Show steps
  • Search for Sketch tutorials on YouTube.
  • Choose a tutorial that covers a topic you're interested in.
  • Follow the tutorial step-by-step.
Six other activities
Expand to see all activities and additional details
Show all nine activities
Read Don't Make Me Think by Steve Krug
Gain valuable insights into user experience design principles by reading this classic book.
Show steps
  • Read the book and take notes on the key takeaways.
  • Apply the principles you learn to your app design.
Practice creating shapes and paths with Sketch
Enhance your proficiency in Sketch by practicing the creation of various shapes and paths.
Browse courses on Sketch
Show steps
  • Use the Rectangle, Oval, and Polygon tools to create basic shapes.
  • Combine and modify shapes using Boolean operations.
  • Create complex paths using the Pen and Pencil tools.
Create a mood board of UI design inspiration
Enhance your design sense by creating a collection of inspiring UI designs.
Browse courses on User Interface Design
Show steps
  • Browse websites and online platforms for well-designed user interfaces.
  • Save screenshots of UI elements that you find visually appealing.
  • Organize the screenshots into a mood board using a tool like Pinterest or Figma.
Create an interactive app prototype
Develop your understanding of the user interface design principles taught in the course by applying them to a prototype.
Browse courses on Sketch
Show steps
  • Plan the app's functionality and user flow.
  • Sketch out wireframes for each screen of the app.
  • Use Sketch to create high-fidelity mockups of the app's screens.
  • Connect the screens in InVision to create an interactive prototype.
  • Share the prototype with others for feedback and iterate on your design.
Answer questions and provide guidance to other students in the course
Strengthen your understanding by sharing your knowledge with others.
Show steps
  • Participate in discussion forums and provide answers to questions.
  • Offer to review other students' designs and provide feedback.
  • Lead study groups or workshops to share your expertise.
Contribute to the Sketch community by reporting bugs or suggesting improvements
Gain practical experience and make a valuable contribution to the Sketch community.
Browse courses on Sketch
Show steps
  • Join the Sketch community on GitHub.
  • Report any bugs or issues you encounter while using Sketch.
  • Submit suggestions for improvements to the Sketch software.

Career center

Learners who complete Sketch from A to Z (2022): Become an app designer will develop knowledge and skills that may be useful to these careers:
Product Designer
Product Designers are charged with coming up with new product ideas and improving existing ones. Knowledge of graphic design and user experience are fundamental to the role. This course can play an important role in the career of a product designer by providing the means for building an app's design from concept to completion.
UI/UX Designer
UI/UX Designers focus on building the look and feel of a website or app. This course will help build a foundation for a career in this field by providing an understanding of the principles upon which good user design is based, along with giving ample practice in its application.
Web Designer
Web Designers research and design visual elements, user interfaces, and overall functionality for websites. This course would be of great help to a web designer, as it will help them to develop their skills for creating visually appealing and user-friendly websites. Specifically, this course helps build a solid foundation in design by teaching the fundamentals of how to use Sketch.
Art Director
Art Directors oversee the visual style and imagery of a variety of media, including websites, magazines, and advertising campaigns, among others. This course will help an art director to further develop their creative skills, specifically in the area of digital art and design.
Creative Director
Creative Directors lead and provide inspiration to a team of artists and designers, helping them to translate their creative vision into actionable tasks and successful products. This course can help a creative director to develop their technical skills and their ability to communicate effectively with individuals from a variety of professional backgrounds.
Graphic designer
Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. Knowing Sketch, a powerful and widely used design software, is an asset to any graphic designer.
Front-End Developer
Front-End Developers convert the designs of websites and apps into functional reality. Being familiar with Sketch is a plus for Front-End Developers, as it is a commonly used design software in the field.
Digital Marketer
Digital Marketers help businesses promote and sell their products or services online. This course will help Digital Marketers to develop valuable graphic design skills that are essential to success in this field.
Technical Artist
Technical artists create 3D models and textures to be used in video games and films. This course will help Technical Artists to expand their skill set by helping them to master a design tool that has a wide variety of applications across a range of industries.
Computer Animator
Computer Animators use computers to create 3D models and animations. This course will help Computer Animators to develop a foundation in digital drawing and design, which they can then use to create more realistic and engaging animations.
Video Editor
Video Editors cut together raw video footage to create a polished final product. This course will help Video Editors to develop the skills that that they need in order to create visually appealing and engaging videos.
3D Modeler
3D Modelers create 3D models and textures for a variety of uses, including video games, movies, and architecture. This course will help 3D Modelers to develop a foundation in the fundamental principles of computer modeling and design.
Motion Graphics Designer
Motion Graphic Designers create visual effects and animations for a variety of purposes, including websites, videos, and presentations. This course will help Motion Graphics Designers to develop the design skills and technical abilities that they need to produce high-quality and engaging motion graphics.
Instructional Designer
Instructional Designers create and develop educational programs and materials. This course will help Instructional Designers to develop the skills that they need in order to create visually appealing and effective learning materials.
Education Administrator
Education Administrators oversee the operations and educational programs of schools and other educational institutions. This course may be useful to Education Administrators, as it will help them to better understand the needs of teachers and students who are creating digital learning materials, as well as enabling them to better understand the process involved.

Reading list

We've selected six books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Sketch from A to Z (2022): Become an app designer.
Building on the success of his first two books, Peter Nowell has updated and expanded his comprehensive Sketch guide to include all the latest features and techniques.
This classic book on design provides a comprehensive overview of the principles of good design. It great resource for anyone who wants to learn more about design.
Great option for beginners who are new to Sketch. It covers the basics of the software, including how to use the tools, create and edit shapes, and export your work.
Guide to using Sketch for professional designers. It covers everything from how to create prototypes to how to work with clients.
Provides a set of best practices for creating effective user interfaces. It great resource for anyone who wants to learn more about UI design.
Collection of best practices for using Sketch. It covers everything from how to organize your files to how to collaborate with other designers.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Sketch from A to Z (2022): Become an app designer.
The Complete Sketch 5 Course - Design Apps & Websites 2021
Most relevant
UI/UX Design with Sketch: Travel Booking App
Most relevant
Learn Figma - UI/UX Design Essential Training
Most relevant
Sketch App - Modern UI Design
Most relevant
How to Create Interactive Prototypes in Adobe XD
Most relevant
How to Create and Style an Artboard In Adobe XD
Most relevant
The Complete Figma Course – Designing Mobile & Web App...
Most relevant
Create Mockups for a Mobile Website Using Adobe XD
Most relevant
How to reuse colors and character styles in Adobe XD
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser