Making templates for sitemaps and wireframes

Earlier this year, I began work on sitemap and wireframe templates for our team to use on client projects. Before this initiative, we used Illustrator and InDesign to design these on a project-by-project basis. This workflow was not as streamlined as it could’ve been for a number of reasons:

Our solution is a system of cloud documents in Adobe XD—a shared wireframe kit, a blank wireframe, and blank sitemap. Based on a wireframe kit my manager and I purchased, the shared wireframe kit includes common layouts and blocks for our websites, as well as base elements.

The idea is that since everything is linked to the master kit, we can adjust/add new components as needed. Each of the three files also includes an instructions layer with helpful tips for getting started:

I’m super excited to use these for real client projects so we can gain efficiency and improve our workflow. As a test, I also mocked up an example wireframe using our blank wireframe template. You can see a preview below!

More about...