Landing Page Design with Sketch

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!

Why Sketch?

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.


Add the rectangles

How: Use shortcut = r for the rectangle tool.
Why is this important: The entire web is built in rectangles, and your design probably should be too! Also, all of the major, modern css frameworks you'll use to build sites are based on rows and columns, which form rectangles!


Add text all over

How: Use shortcut = t for the text tool.
Why is this important: Like colors and rectangles, text will make or break your design. After rectangles, text will make up one of the biggest chunks of space on your page. Stick with a single font and make lots of weight, size and color changes for emphasis throughout the page.


Organize your project

How: Highlight layers in the project and use shortcut = cmd + g to group into folders.
Why is this important: As you add new components and fill out your design, the layer pane on the left will become a huge mess without folders. Use folders to keep components modularized for easy selection and duplication.


Grab all of the icons

How: Checkout sketchappsources.com for all the icons you'll ever need.
Why is this important: Icons are a fantastic way to convey ideas quickly and clearly while polishing a design. There's so many free and open-source resources, it would be silly not to take advantage of it!


Easily duplicate stuff

How: Use shortcut = OPTION + Drag to duplicate or shorcut = OPTION + SHIFT + Drag to duplicate and maintain alignment.
Why is this important: Typically, you'll find yourself using similar components over and over in your design. This is good, because less variation means less unique code! This shortcut is huge for quickly filling out your page.


Automatic CSS !##[email protected]!!

How: Download Sketch Style Inventory plugin from GitHub. Click on some text and open up text inventory. Remove existing text styles with the minus sign. Go through your file and assign different text styles to <h1> through <h6> tags, with one <p> tag. Use Sketch Style Inventory to export everything to css. Paste into sublime. Convert everything from classes to regular <h#> and <p> tags.
Why is this important: I think we can all agree that automatic CSS needs no promotion.


Automatic CSS, for not text

How: Click on all the rectangles in your document. Use CMD+G to group them into a single folder. Right click on the group - select copy css attributes. Paste into sublime.
Why is this important: You can always export all the css in a folder using this method. So technically, you can export the css for your entire project if you put the whole thing into a folder. However, this results in a ton of unnecessary code which proves difficult to parse. I find exporting the fonts and the layout rectangles gets me so so far ahead, and the rest I can handle on my own.


Frame your application

How: Use some more awesome resources at sketchappsources.com. Make sure to resize with scale.
Why is this important: You are going to want to show off your device. Whether it's a mobile, desktop, tablet, or even watch application, framing with the device provides the user so much value to see the application in it's intended container. As the video shows, normal resizing will totally throw off the proportions of the frame turning your iPhone 6 into a PSP. Be sure to use scale on complicated, multilayer items.


Call to action

How: Literally, just set sketchappsources.com as your homepage.
Why is this important: This wouldn't be a landing page tutorial if I didn't mention calls to action. Whether it's signing up online or downloading your app, you should have the main action you want the user to take in the clearest place possible (usually top center of the page). I like to throw a second call to action at the bottom again just as a reminder to those diehards that checked out the whole page. Again, be sure to use scale here to resize the button properly.


Radial gradients

How: Use the radial gradient option in the color picker. The key here is to grab the color you are starting with and copy it. Once the gradient is applied, adjust both handles to the original color so you can't see the gradient. THEN, make slight changes for a tasteful, subtle effect.
Why is this important: Gradients are awesome for taking something that feels super plain and adding a subtle effect to it to liven it up. It can be difficult to create good transitions between randomly selected colors, so start with the original and lighten/darken one side. If you didn't notice, when we export the CSS for our rectangles, the gradient code comes with it - Sketch is awesome.


Getting polygonal

How: Same idea as the radial blur. Drop a design on top of the background, change the color to match the background so it disappears, and then make the slightest changes for a sweet and subtle effect.
Why is this important: We can add just about anything on top of our backgrounds to spice up the design, as long as the difference between the two colors is ever so slight.


What about those cool photos on the web?

How: Grab images from unsplash.com or stocksnap.io. Use gaussian blur to provide ample contrast for your text.
Why is this important: Images are key components in a lot of landing page designs, and web design in general. The tricky part with photos is if it's a main component of the design, you need to find a photo that doesn't conflict with the page's color scheme. That doesn't sound too difficult until you add that they need to have the right content AND be open-source if you're not snapping your own. Nevertheless, it looks great if you can pull it off!


Exporting Assets - Sketch's Bread and Butter

How: Exporting is VERY simple, but there's a ton of different ways you can do it. A video just wouldn't do it justice and would likely narrow your understanding of this powerful feature. Check out an excellent breakdown of the different exporting options @ tutsplus.com - sketch export options. It's worth reading from top to bottom.
Why is this important: Complex logos and vector graphics are sometimes best represented by super small pngs on the web. Sketch's export features allow rapid file generation at multiple resolutions for any aspect of your design.

I had a blast building Miyagi's landing page and delivering this talk and blog post. Sketch is a lot of fun to use and I hope this springboards your interest. You can check it out free for a month over at bohemiancoding.com.