Drive For Design: Linking Project Documents

Travis Miller
Web Development
Published in
4 min readJul 23, 2014

--

Overview

I’m back home refreshed and energized from my time at Front End Design Conference in St. Petersburg, Florida. I was lucky enough to speak about my experiences working remote back home in The Bahamas. A part of the talk discussed some of the tips and tricks I’ve learned while trying to improve my workflow to be more efficient.

For those who don’t know, I am an adamant user of Google products. One I use frequently for my line of work is Google Drive. This free and powerful tool allows everyone with a Google Account to use cloud products and services like Docs, Spreadsheets and Presentations to create and capture information that can be shared with your team.

Trying to streamline my workflow I had an epiphany; everything in Google Drive is a link:

Knowing this and using intro your advantage has huge benefits to the design process and I highlight below.

Note: For demonstration purposes I’ve created sample project documents to demonstrate the use cases. I also use Google Chrome as my preferred browser, so don’t hate.

Use Cases

Organizing Your Projects

The first one is a no brainer, but a definite time saver. What’s one of the most common thing we do for those long ass URLs we want I save for later? You Bookmark em! And since Google Drive Documents (and folders) are all links, you can do the same with them as well.

When looking for documents in Drive I found myself spending too much time digging through folders and using the search bar to find the right documents I needed at the time. Now there all there and organized right in the Bookmarks bar for me to jump right to.

Just create a folder (and if necessary subfolders for your project, click the star icon, point to your project folder and you’re done.

Connecting Site Maps To Wireframes

Creating Site Maps and Wireframes are two very important and related deliverables that tend to get separate from each other as a web design project progresses. Linking can help us connect the two so that we can always align one with another.

We use Google Drawings to create our Site Map and Wireframe example. Here’s a simple implementation:

  • Open your Wireframe drawing from Google Drive
  • Copy the URL of the document from the Address Bar.
  • Within your Site map generated in drawings, highlight the label used within the box diagram that represents the page within the website.
  • Click on the hyperlink option in the Google Drive, paste the link copied from your matching Wireframe drawing and set the hyperlink to point to that document.

And you’re done! Now your Site Map will connect to your Wireframes that will make it easier for you to maintain your docs throughout your projects while keeping the context of the design.

Linking to Core Documentation

Let’s take linking a step further. Let’s say you have a core document that team members outside of the primary designers and developers need to review or refer to the main document for clarity.

If you like to keep your structured like I do, I get a lot of help when I have a Table of Contents in my document when I need to find a specific page. Did you also know that The hyperlinked list generated from your Table of a Contents has it’s own special link as well?

If you check your URL after clicking a ToC item to jump to that section, Google drive adds a hash reference id to the end of the URL. You can copy and use this.

https://docs.google.com/document/d/.../#heading=h.p1ob9scc4zlg

Creating these URL ifs for your doc is easy:

  • Add Headers and Sub-headers that will represent each key section of your document.
  • Generate a Table of a Contents going to Insert > Table of Contents
  • Click on the Hyperlink for the designated section. Copy the link with in the ToC or within the Address Bar
  • Use The Link Where Needed To Connect Back to the Core Document

Wrapping Up

Now Your designers and developers can link to their necessary documents and your non-designer/development teammates can also stay in the loop with a shared maintainable and relevant document all in one place.

This isn’t a standardize practice but it is something I thought was very useful so I put it to work. I know some others have adopted Google Drive to match their workflow and they’ve discovered some things worth sharing so please feel free to share!

--

--

Travis Miller
Web Development

Web Designer, Developer & Bahamian native obsessed with design, strategy and building stuff with my own two hands. http://www.travismillerweb.com/