Lessons
Introduction to Sketch
05:23 2Beginning the Web Page Design Project
05:10 3Designing the Header Section
24:57 4Designing the Main Section
12:16 5How to Replicate Layouts to Other Art Boards
12:24 6Creating the World Map Section
06:06 7How to Draw with Sketch
28:37 8Exporting Assets
12:31Lesson Info
Introduction to Sketch
Sketch is a tool that's been gaining a lot of popularity over the past couple of years. It is a Macintosh only tool, and designers across the world have been using this to do all kinds of stuff, information architecture, UX design, all the way through full fledged website design. Since we can do all kinds of things in Sketch and import all kinds of files, it's becoming a really powerful tool. And one of the biggest assets of this is that it's really fast. There's not a lot to the UI, there's not a lot to the workflow. You can quickly get artwork in and quickly start to put concepts together. So sketchapp.com is where you can download a free trial if you don't already have a license to Sketch, and before we get started, I want to talk a little bit about the UX of Sketch, because Sketch has its own sort of UX which really matches some of the Apple tools here. So the most popular desktop application user experiences are coming from Apple, Microsoft, and Adobe. So if you're familiar with a...
ny of those tools, they all have a very unique visual language to how you design and work inside of these different applications. So Sketch is going to work exactly like the tools on the Macintosh platform. So they're using the interface things that you might see in tools like Pages, Numbers, and Keynote. Next, when you're working with web design, you're probably gonna wanna use web fonts. So there's a couple of ways you can use web fonts when you're designing. In the Sketch environment, there are some plug-ins available. We're gonna talk later about the web developer community around Sketch, because a lot of different companies are making extensions for Sketch to add functionality that aren't in the product by nature. So one of the tools here, Simpli, is a plug-in that will allow you to use fonts right within Sketch without having to have the fonts activated through your operating system. Most likely, you will be using different font management tools inside of the Mac platform. FontBook is available from Apple as part of your Mac OS, then we have SkyFonts, Typekit, and Suitcase are some of the most popular. There are more, of course. And for me for my particular workflow since a lot of people might ask, I'm gonna be using Suitcase Fusion, which has an activation built in for Google Fonts. So I'll be using two of the different fonts from Google, and I'll be using Suitcase to activate those. Again, this isn't the only way you can do this, but this is what I'll be working with today. And so with that, let's switch back to the computer, and let's talk about what you get in the project files. So inside of the files, I want to walk through these pretty quick. I have three main folders in there, A, B, and C. I'm very clever like that. Inside of folder A is all of the artwork. So this is artwork that's already been sort of created that we're going to use in our content. This might be photography that you've created and already cut out or masked. This might be artwork you've created in any other tool or Sketch, but basically this is just some artwork we can import into Sketch to start working with. So I typically will make a color swatch here. We're gonna import this into Sketch and use this as something we can use the eyedropper tool to get to different pieces. We have a countertop background. We're gonna be creating a website here for a herbs and spices I guess a cooking website. We have artwork here. This is a png file that already has the artwork transparent. It's in a png file format. We have a logo. This is an eps that's white, so of course we can't see it at the moment. We have a world map and another piece of artwork that just has some spices. Again, this is a png file with all of the transparency in place. I do want to call attention to the fact that the cutting board, this is a native Photoshop file. So we will be bringing in native Photoshop, we'll be bringing in eps files as well as png and jpg into Sketch. So even though some people might do web design with Photoshop, if you have Photoshop artwork we can bring the native Photoshop right into Sketch. In folder B is just our content file. This is just simply some text that we're gonna cut and paste so we're not typing all of this individual content. Typically, you might get content from your content producers in Microsoft Word or a rich text document or in email, or sometimes maybe in PowerPoint. You can certainly cut and paste from any of those applications and paste that content into Sketch, but I provided this as a text file. And then here's a quick little example of what we will attempt to build in the next 90 minutes. If we don't get through all of this layout, that's OK. We're going to cover the basics of how this structure gets created, how we mask and crop and set type and use styles and draw inside of Sketch. The final assets you can have access to this file, so you can open this up and see how everything was put together, but I'm going to be walking you through our process for how we actually get through here. And one thing that we'll note here is we have two different art boards, and then over in the top right we have additional art boards for symbols. So we'll also be talking about how to leverage symbols inside of Sketch so that artwork that we create can be quickly replicated across different screen sizes. And the project that we're working on here has a responsive website, so I chose a responsive website because that will give us the opportunity to use a lot of the features inside of Sketch, things like multiple art boards to show the different responsive states, using styles so we can make sure that the styles match across the different screen sizes as well.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Hannah Pearce
I thoroughly enjoyed this Intro course to Sketch by Chris. He broke things down and explained things clearly, and it was great to see the layout come together. I picked up so many tips and tricks, which I hadn't come across before from youtube tutorials. I would definitely recommend this Intro course.
Anastasia Rozhkova
Liked it very much! I am completely new to Scetch and UX design - and it was a really good and not to long intro. Thank you very much
Linda
Chris is really clear on explaining how things work on sketch. He makes it fun and easy to follow along as we go.