Master Web Project Sketch Templates
Use this file as a base for your next web project. This sketch file comes preconfigured with desktop and mobile artboards and guides we typically design for.
Download the Master Web Project Sketch Templates
Web Component Library
The master folder includes your Web Component Library. The component library file comes preconfigured with artboards at the viewports we typically design for. The artboards include preconfigured grids that align with our base theme. It also includes your project’s font hierarchy, color palettes, low-fidelity image placeholders and low-fidelity commonly used components.
Icon Libraries
The Master Web Project Sketch Template folder also comes with an additional Sketch file that can be imported as a library into your Sketch app. The library includes common icons from Font Awesome Pro. Use this library to fast track your project and to ensure synergy with our pre-developed framework!
Website Project
This is a sample sketch file that includes the 12 column grid at default media breaks and popular screen sizes.
Getting Started
When kicking off a new web project, you should start by installing the libraries needed into your main file.
Keep your icon libraries in a place that won’t get moved often. Once downloaded, Icon Libraries should not change drastically, but check back for updates with new icons.
Do not install the Web Component Library as is. Designers should create a copy of the Web Component Library and rename the library based on what client/project they are using it for (i.e., SuddenService_LIBRARY.sketch), as to not conflict with other projects, templates or libraries. Install the renamed library into sketch and begin there.
Copy and paste the layout settings from the sample artboards in the Website Project file to your project artboards by using a plugin, or by copying the entire artboard. Designers can even start their web projects and wireframes directly in this file if desired.
Please read through the additional documentation detailed throughout this site on how to properly use each library within your project and how to hit the ground running. You’re on your way to designing an amazing website!
