This post is a replication of a talk I gave on landing page design with Sketch. The video should be posted soon, including some fun live coding in the middle. Until then, enjoy words!
Sketch is an advanced super-child of Paint with laser sharp focus on web design. Like Paint, you simply throw stuff on the canvas and move it around until you have the perfect design. Unlike paint, you can design web pages lightning fast, utilizing web-based components that will appear exactly the same in the browser. In fact, Sketch will give you the CSS for the majority of items on your canvas (yea, that's right; automatic css)!
Design first, code later. This is so important to understand.
In the time it takes to whip up a full design in HTML & CSS, one could create twenty or thirty different versions of the design in Sketch until it looks exactly the way you'd like. At that point, no time will be wasted coding unusable designs. Ben Silbermann designed 50 different versions of Pinterest before he landed on a launch-able layout. Can you imagine having to code each different version before you could see if you liked it? Sketch is here to rescue you from that approach!
Why is Sketch so good?
Vectors on vectors: Sketch is entirely vector based (unless you want to intentionally manipulate bitmaps). This means your designs are infinitely scalable with perfect resolution across all platforms!
Built for the web: Every single thing designed in Sketch can be replicated in code, pixel perfect.
Automatic CSS: Exporting CSS for items and fonts on your canvas is a snap, which I demonstrate below.
Crazy-simple UI & UX: Sketch is intuitive out of the box. It's just so easy and fun to use.
Exporting: This was Sketch's bread and butter out of the gate. You can export assets at multiple resolutions without breaking a sweat.
Let's design a landing page in Sketch!
The Gfycats below will take you through the critical steps in designing a landing page with Sketch. You can hover over any of the Gfycats for playback controls. This tutorial steps through building the landing page for the community skill-sharing iOS application Miyagi, built by myself and the rest of the phenomenal WildDonut team. Check out a live demo of our landing page at miyagi.us and download our app in the iTunes store!
After that shameless plug and before we kick things off, I must mention dribbble.com. Dribbble is THE place to go for inspiration. I always head over to dribbble to garner ideas about layouts, colors, and fonts before kicking off a new project.
Cool, let's get started by going to File > New From Template > Web Design!
Extend the canvas
How: Click on the canvas title, then change height in the right pane.
Why is this important: The default templates don't allow you to design long webpages. Extending the canvas lets you account for everything the user would see after scrolling.