SketchCasts is closing. Read the announcement and what the future holds. Read more
Loading video..

Get access to 150+ videos on design and code to boost your skills

become a member
love watch later
16 minutes | 09 Apr 2014

Creating a website mockup (part 1)

We finish this *beginners oriented series* with a two part episode on how to create a website mockup.

  • Artboards are a great way to organize your project
  • You can tweak Sketch's source file to change the Artboards presets, allowing you to create folders of artboards (I'll show you how on a future episode)
  • Keyboard Shortcut: R to create a rectangle shape
  • To import an image just drag it to Sketch's window
  • If you want to give different colors to the same text block use the color option under More menu instead of the fill tool
  • The only way to crop an image on Sketch 2 (wink wink) is to mask it with another shape. Right click on the shape and select "Use as Mask"
  • To use the "Background blur" create a separate shape on top of the elements you want to blur, apply the blur and transparency, and give it a tint color if you like
  • After selecting an object you get some align buttons on the top left of the canvas, giving you quick access to align elements
  • If you use a lot of text blocks of the same style (lets say a body/header/paragraph style) you can create a Style under the "More" tools, and clicking on the little plus butotn on the bottom
  • You can add a color to the presets by hitting the plus button under the presets grid of colors for quick access
  • It's helpful to create a layout grid, especially for web design. You can tweak the grid settings for your needs
  • Use the "Distribute Horizontally/Vertically" to space the selected objects with the same distance from each other
  • Select an object and hold the option key to see the distance across the elements (hover other objects)
  • Login to see the download links.

Rafael Conde