Hands on Sketch Training - Learn Website Design

Name: Hands on Sketch Training - Learn Website Design
Rating: 4.2 (130 reviews)

Learn web design with Sketch by duplicating every detail of some awesome looking web pages.

Created byArend Pryor

Last updated 2/2020

English

English [Auto],

What you'll 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

Course content

5 sections • 47 lectures • 13h 22m total length

Welcome to the Course2:20
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.
Teaching Style & Pace2:33
In this video I'll tell you about my style of teaching and the pace of the course.
Asking Questions2:19
Ask questions in the course Q&A and join the Slack group for peer feedback. Spend 5-10 minutes trying to troubleshoot on your own to sharpen your Sketch design skills.
Course Resources5:52

Artboards, Layers & the Toolbar30:26
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.
The Inspector27:57
When you need to customize a shape, change colors, add shadows and more, the Inspector is where you'll go to make it happen.
Exporting5:36
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.
Shapes8:20
Creating and manipulating shapes is one of the single-most important skills you need as a designer. Follow along and I'll give you a good foundation.
Working with Images3:41
In this video you'll learn how to import images into Sketch and all the fun things you can do with them to make your designs look great!
Smart Guides & Alignment Tools5:07
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.
Make Grid2:50
In this video I'll show you why you need to be using "Make Grid" and how it can save you time when designing.

Fleet Feet: Overview5:52
Duplicate a website by selecting assets, icons, and images, applying hover effects, and organizing resources, using Fleet Feet as the case study.
Fleet Feet: Header36:16
Design a Fleet Feet header in Sketch by building a 1280px wide header with the logo, lock icon, location icon, and search icon, plus a hover state and nav bar.
Fleet Feet: Hero Area33:40
Fleet Feet: Images29:38
Fleet Feet: Blog & Social Media Section - Part 124:25
Fleet Feet: Blog & Social Media Section - Part 220:34
Fleet Feet: Footer30:10
In hands-on sketch training for website design, duplicate the bottom footer, add icons and store locator text, adjust color and spacing, and finalize privacy policy links.
LinkedIn: Overview5:10
Learn to duplicate a LinkedIn page in Sketch using a content generator plugin, manage icons and assets, and install plugins via the plug-in manager to speed up website design.
LinkedIn: Search Header - Part 123:49
Duplicate the LinkedIn header in Sketch by creating a custom artboard, applying a textured gradient background, and assembling the search bar, icons, and border with precise alignment.
LinkedIn: Search Header - Part 226:15
Design a LinkedIn style search header in Sketch by building a rounded rectangle, applying gradient and borders, adding a search icon and text, and grouping elements.
LinkedIn: Nav Bar11:03
LinkedIn: Profile Header - Part 119:42
In this lecture, you duplicate a LinkedIn profile header in Sketch, import the Apple logo, adjust text, color, and typography, and refine shadows and alignment to match the header design.
LinkedIn: Profile Header - Part 224:16
LinkedIn: Profile Image & Text22:54
Design and mask a LinkedIn profile image in Sketch, align text, apply shadows, and create a blur background with a see more button for a polished profile section.
LinkedIn: Unique Insights23:25
Design a LinkedIn page layout in Sketch, building a unique insights section with shapes, text blocks, icons, charts, colors, and a try premium for free button.
LinkedIn: How You're Connected - Part 122:31
LinkedIn: How You're Connected - Part 220:03
Learn to build a LinkedIn-style profile page in Sketch by duplicating text and lines, adjusting typography and color, adding a logo, arrows, and profile images.
DamionMax: Overview2:16
Practice duplicating a web page using Sketch to model a Template Monster design. Build with icons, text, logos, photos, a nav bar, and a hero area.
DamionMax: Header & Nav34:51
Design a website header and nav in sketch, placing logo, bold and light text, social icons, a search bar, and a multi-element navigation with separators and hover states.
DamionMax: Hero Area22:52
DamionMax: Featured Projects35:40
Design a featured projects section in Sketch, building a hero area with a gradient header and five arranged images. Apply shadows, masks, and precise spacing for pixel-perfect alignment.
DamionMax: New Technologies29:30
Develop a new technologies section in Sketch by arranging four image tiles with headers and a button, applying precise colors, opacity, masks, and smart guides for pixel perfect alignment.
DamionMax: Hello There30:58
Master hands-on sketch techniques to design a hello there section for a website, building a hero area with imagery, gradient background, typography, and a call-to-action button.
DamionMax: Footer26:44
Learn to craft a website footer in Sketch by duplicating an existing layout, adding logo, title, copyright and privacy policy, and organizing category links with precise alignment, spacing, and typography.

Havana Hover Button5:09
Overview:
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.
Dual Color Hover Button10:22
Overview:
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.
Take Out Order6:43
Overview:
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.
Sunset Magazine Graphic19:40
Overview:
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.
Business Solutions Graphic17:16
Overview:
Follow along and use simple shapes and techniques to duplicate a truly amazing looking graphic.
Tablet Icon14:55
Overview:
In this video we'll duplicate a tablet icon that includes a ton of detail.

Check out Sketch for Mobile Design3:46
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.
Facebook: Overview1:56
Duplicate a familiar Facebook interface in Sketch by analyzing the status bar and top icons. Drop in Facebook icons and fake text to demonstrate layout and content placement.
Facebook: Header23:57
Design a Facebook header in Sketch by arranging icons from the Noun Project, a status bar, and icons for search, Messenger, and settings using vectors and smart guides.
Facebook: Main Menu16:25
Mobile App Icon: Yahoo Weather19:45
Overview:
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.
Sketch Mobile Conclusion2:47
Master mobile app design with sketch through step-by-step instructions, duplicating mobile app screens and using provided resources, logos, and images for practical, hands-on learning.

Requirements

Students will need a Full or Trial version of Sketch running on one of the following:
A Mac running OSX
A PC running a virtual mac OSX environment

Description

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. 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 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 Sketch 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 for Mobile Design Course: I'll give you an overview of my Hands on Sketch 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 this course is for:

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

Hands on Sketch Training - Learn Website Design

What you'll learn

Explore related topics

Course content

Introduction & Course Overview4 lectures • 13min

Basics of Sketch 37 lectures • 1hr 24min

Hands on: Duplicating Web Pages24 lectures • 9hr 23min

Buttons & More6 lectures • 1hr 14min

More Courses6 lectures • 1hr 9min

Requirements

Description

Who this course is for: