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.
What you'll learn
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.
Table of contents
- Getting Familiar with Sketch 9m
- Creating a Site Map 9m
- Building the Wireframe Layout and Pages 10m
- Creating a Master Page 7m
- Setting up Text and Graphic Styles 11m
- Creating a Functional Prototype 8m
- Developing a Unique Look and Feel 10m
- Styling the Site Header 8m
- Styling the Site Footer 8m
- Applying Image Treatment and Masking 8m
- Using Pre-made Templates in Sketch 7m
- Exporting Mockups, Slices and CSS 9m
About the author
Jay Boucher is a freelance illustrator and interactive designer creating games and websites for young people. He strives to create work that is both entertaining and intuitive to use, a combination of visual fun and UI best practices. Jay spent much of the 2000s as Senior Designer for MTV.com, designing sites for shows like "Pimp My Ride" and "The Real World", as well as cable channels MTV2 and MTV Tr3s. He has worked with Hearst Digital, Condé Nast and Westwood One Radio Network and currently c... more