Hands on Sketch 3 Training - Learn Website Design
4.6 (71 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,303 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Hands on Sketch 3 Training - Learn Website Design to your Wishlist.

Add to Wishlist

Hands on Sketch 3 Training - Learn Website Design

Learn web design with Sketch 3 by duplicating every detail of some awesome looking web pages.
4.6 (71 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,303 students enrolled
Created by Arend Pryor
Last updated 7/2017
Current price: $10 Original price: $70 Discount: 86% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 13.5 hours on-demand video
  • 9 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Have the skills and confidence to design web pages using Sketch
  • Export design elements to be used during the development process
  • Design web pages that look amazing
  • Submit designs for contests on crowdfunding sites, such as 99Designs.com
View Curriculum
  • Students will need a Full or Trial version of Sketch 3 running on one of the following:
  • A Mac running OSX
  • A PC running a virtual mac OSX environment

In this course, I’ll walk you step-by-step through the process of re-creating every element on some amazing looking web pages, all using Sketch 3.  Upon completion, you'll have real-world experience building basic and advanced web pages using Sketch.  

What kind of Web Pages will I be duplicating in this course?:

  • Fleet Feet homepage
    • Header, Hero Area, Images and hover states, blog section and footer
  • LinkedIn Profile page

    • Search Header, Navigation bar, profile Details, How you're connected, etc.
  • Top Selling website Template from Template Monster
    • Navigation bar, Hero Area, Various section with multiple Images and text content

Sketch 3 is an amazing product that's gaining popularity as the top tool for designing mobile app screens, due to its very intuitive controls and ease of use. So why not use it for web design as well. If you’re interested in learning how, this course will get you up to speed on using Sketch3 in no time.

Course Outline:

  • Start with the basics: Draw and manipulate shapes, inserting images, working with fonts
  • Web Page Duplication: Follow along as we recreate some truly impressive web pages
  • Sketch 3 for Mobile Design Course: I'll give you an overview of my Hands on Sketch 3 Training for Learning Mobile App Design course.

Class Resources & Support:

  • You'll see the process I use when designing and where I get my resources
  • If you have a question, a comment, or need help, post it in the Q & A section
  • Once enrolled, you can join us on the Slack group chat to talk about the course and get feedback from myself and others who are also enrolled. Contact me to request an invitation.
Who is the target audience?
  • Beginners looking to test the waters of Graphic Design and possibly change careers
  • Developers interested in becoming a double-threat by creating their own web content
  • Experienced Graphic Artists and Web Designers who want to learn Sketch
Compare to Other Sketch Software Courses
Curriculum For This Course
47 Lectures
Introduction & Course Overview
4 Lectures 13:04

In this video I'll tell you a little about myself, we'll cover what to expect from the course, and confirm what you'll need to get started.

Preview 02:20

In this video I'll tell you about my style of teaching and the pace of the course.

Teaching Style & Pace

Asking Questions

Course Resources
Basics of Sketch 3
7 Lectures 01:23:57

In this video we'll talk about artboards and how they can make your life easier, I'll explain how layers work and then walk you through the icons on the Toolbar.

Preview 30:26

When you need to customize a shape, change colors, add shadows and more, the Inspector is where you'll go to make it happen. 

The Inspector

Knowing the correct way to export assets from Sketch is an absolute must. In this video I'll show you how to get those awesome designs out of Sketch and into the hands of the developers.



Working with Images

Smart Guides and Alignment tools are here to make your design life much easier. In this video I'll show you the best ways to use them.

Smart Guides & Alignment Tools

In this video I'll show you why you need to be using "Make Grid" and how it can save you time when designing.

Make Grid
Hands on: Duplicating Web Pages
24 Lectures 09:22:34

Fleet Feet: Header

Fleet Feet: Hero Area

Fleet Feet: Images

Fleet Feet: Blog & Social Media Section - Part 1

Fleet Feet: Blog & Social Media Section - Part 2

Fleet Feet: Footer

LinkedIn: Search Header - Part 1

LinkedIn: Search Header - Part 2

LinkedIn: Nav Bar

LinkedIn: Profile Header - Part 1

LinkedIn: Profile Header - Part 2

LinkedIn: Profile Image & Text

LinkedIn: Unique Insights

LinkedIn: How You're Connected - Part 1

LinkedIn: How You're Connected - Part 2

DamionMax: Header & Nav

DamionMax: Hero Area

DamionMax: Featured Projects

DamionMax: New Technologies

DamionMax: Hello There

DamionMax: Footer
Buttons & More
6 Lectures 01:14:05

In this video we'll duplicate a really cool looking button with an image as the background and a color overlay as the hover state. This will require playing with the opacity of the image and the hover overlay.

Preview 05:09

In this video we'll create a straight-forward looking button that has quite a bit of detail. This includes a custom icon, 3D shadow effect and a dual color hover state.

Dual Color Hover Button

In this video we'll duplicate a restaurant graphic that contains some unique, but basic elements. You'll learn how to customize a border to get a dashed line effect.

Take Out Order

The graphic we'll be duplicating in this video can be found in several variations within Sunset Magazine. I love the simplicity of this graphic and the detail. We'll use linear gradients and vector images to make it happen.

Sunset Magazine Graphic

Follow along and use simple shapes and techniques to duplicate a truly amazing looking graphic. 

Business Solutions Graphic

In this video we'll duplicate a tablet icon that includes a ton of detail. 

Tablet Icon
More Courses
6 Lectures 01:08:36

In this section I'll give you details and a peek at my popular, Sketch 3 - Mobile App Design course. Check the resources section for a discount link.

Preview 03:46

In this video we're going to duplicate the Yahoo Weather app icon. Follow along as we use simple shapes and a boolean operation to get it done.

Mobile App Icon: Yahoo Weather

About the Instructor
Arend Pryor
4.3 Average rating
394 Reviews
11,513 Students
5 Courses
UI/UX Design, Business Analyst, Health Nut, & Teacher

Hi I’m Arend, a lifelong student and teacher, here to share my knowledge and style of teaching. I’ve been involved in the tech industry for the majority of my career and have spent the last 15 years working as a Business Analyst documenting and designing everything from back-end systems, business and personal websites and mobile applications. My preferred style of teaching is to take a hands-on approach, where I walk you through real-world examples, in order to provide you with a detailed view of the concepts/topics being covered.