How to Create a Sitemap in Illustrator

When you're working on a website, web application, or a mobile app, it helps to map out the experience before you dive too deep into the weeds of design decisions.

It took roughly 6 minutes to design the sitemap above. The video below is sped up 2X so you can see the process a little faster.

Download the source files here.

In the video, you'll see how you can quickly create a sitemap using the Rectangle tool M and the Line tool \. Couple those two things with the versatility of the Direct select tool A, and you've got yourself a lightening fast way to create.

Moving and Duplicating

Once you've created an object that you'd like to duplicate, you can hit cmd+shift+m to move it any desired amount horizontally or vertically. Hitting copy instead of OK allows you to hit cmd+D afterwards to duplicate the same command as many times as you'd like.

Slower Walkthrough Video

Because of some great feedback on the faster video above, I've recorded another slower version that you can follow along and see each click and drag, step by step.

Download the source files here.

See the next post in this series, "Vectorize a Logo Using Simple Shapes in Illustrator"