Website Planning and Design in Sketch

In this Sketch tutorial we’ll go through the process of planning and designing a website using Sketch 3. Software required: Sketch 3, Dreamweaver CC, HTML5, CSS3.
Course info
Rating
(55)
Level
Advanced
Updated
Nov 9, 2014
Duration
1h 45m
Table of contents
Description
Course info
Rating
(55)
Level
Advanced
Updated
Nov 9, 2014
Duration
1h 45m
Description

In this Sketch tutorial we’ll go through the process of planning and designing a website using Sketch 3. We’ll cover all of the basic tools available in Sketch and take our site design step-by-step. We’ll start with site maps to communicate the breadth of our site, then move on to wireframing page layouts and, finally, design graphics and text styles to give it a consistent look and feel. By the end of this Sketch training, you’ll have learned how to create web-ready layouts and graphics to hand off for development. Software required: Sketch 3, Dreamweaver CC, HTML5, CSS3.

About the author
About the author

Jay Boucher is a freelance illustrator and interactive designer creating games and websites for young people.

More from the author
Email Template Design in Sketch and HTML
Advanced
2h 6m
Oct 26, 2015
Creating Web and App Prototypes with InVision
Intermediate
1h 38m
Mar 18, 2015
Introduction to Sketch
Beginner
2h 14m
Dec 17, 2014
More courses by Jay Boucher
Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hello, everyone. My name is Jay Boucher and I'm a freelance web and game designer specializing in online media for kids. I spent eight years as a designer for mtv. com, designing sites for MTV, MTV2, and MTV Tr3s. My latest projects involve creating games and animation for renowned children's book illustrator Ezra Jack Keats and in this course, we're going to design a website for an imaginary Indie Game Development Studio using Sketch 3 and some of the key takeaways from watching this course include learning how to work with Sketch as a user experience and user interface design tool, plan website user flow by creating site maps, layout page structure by designing wireframes, develop an overall look and feel by designing master pages, styles, and symbols, and ultimately delivering page comps, slices, and CSS for handoff to development and by the end of this training, you'll have learned how to use Sketch to deliver assets at each stage of the site design process from initial information architecture through final asset delivery. I'm excited to work with Digital-Tutors and share these techniques with you. So let's get started with the first lesson.