When you get started on some new wireframes or flows, do you open a blank document and just start working?
That’s what I used to do. Most of the time I’d open an .ai file from a previous project and copy and paste whatever pieces I needed into my new file to give me a little jump start.
I did this for a long time, but it would never fail that I’d need to get things a little more organized with artboards and what not.
Finally I decided that what I was doing over and over was completely inefficient. I could be using a starter template for all of my content maps, user flows, and even base starting points for my wireframes.
I never wanted to do that because I’m not a huge fan of gigantic UI kits reused over and over for different projects.
Doing this kills creativity in a big way. Reusing extremely common elements is one thing, but entire designs results in design inbreeding. Gross.
I took the most common element from every one of my UX design projects. Things that I would either forgot to set up from the beginning and others that I’d have to dig up from some old file.
- Global Swatches
- Document Title Tag
- Hierarchical Content Map
- User Story and Flow Template
- Responsive Screens for Wireframing
Global Swatches
This is one of Illustrator’s super powers. If you stick with using global swatches for everything, you can change ALL instances of that color at anytime.
This is how good programming is done with proper variable usage. Why not design that way too?
Document Title Tag
This gives anyone viewing our final document, information about the project, the file, who created it, and what version it is.
This tag is converted to a symbol so that every instance is the same. You can pop your logo in there and update the information for any new project.
Hierarchical Content Map
Virtually every project needs to have everything listed out in an organized fashion. This helps to both visual and prioritize all of the content and features.
I’ve been creating these over and over from scratch. Now I just use this template.
User Story and Flow Template
It’s a toss up whether or not I use this exact page for every project, but it’s still pretty common.
It can really help to write a quick little story about the person you’re designing for, as well as map out a flow from beginning to end of them using your product.
Responsive Screens for Wireframing
These are pretty straightforward. 99% of the time, I design wireframes with small mobile-first components, and plot those out against larger devices to get an idea for how the content will play together across the ever-so-multi-deviced-interwebs.
All of this comes together in one glorious template, you can pull up as a starting point for each of your new projects.
Then in an actual project it might end up looking something like this...
or this...
Usage
Ok, hopefully I’ve convinced you that using this file will shave hours and hours off of your everyday workflow with Illustrator.
To use the template, download it, and place it in the following location:
Applications > Adobe Illustrator > Cool Extras > en_US > Templates > aiux-template.ait
^ Don't you love the Cool Extras folder that Adobe put in there. 😏
Once that's in place, go to Illustrator > File > New From Template... and you should see it as an option.
