How I Organize My Website Projects Using Google Drive

 
Me pointing to my folders set up in google drive for a website porjects

Building and designing a website can get messy.

Logo files in Photoshop, website copy in Word docs, wireframes in an online tool, and attachments in emails is a recipe for disaster down the line.

The best way to keep a project on schedule is to collect and organize assets at the beginning. The more organized you are, the easier it will be for you to start building out your site in an efficient manner.

Before I build out any website and start creating assets, the first thing I do is set up my project folders. Project folders help create an organized structure for my website assets and prevent me from dealing with chaos later on.

In this post, I’ll share how I organize my website projects and provide specific examples along the way so you can learn how to keep your assets clean and tidy.


Watch a video

Watch this 4-minute video to see how I set up my project folders in Google Drive.


Free tools to help you organize your project

You’ll want a tool that lets you create folders and sub-folders that can easily be shared with others (if needed). My personal favorite tool for accomplishing this is Google Drive. You can also use other tools like Dropbox, Asana or Evernote.

For this tutorial, I’ll be using Google Drive to show you how to best organize your project folders.

How to organize your project folders

There are two ways I like to set up folders for my website projects:

1. Documents and assets folder

This folder contains all my basic documents and files relevant to the website project. Here are a few examples of what I include in this folder.

  • Project brief - This is a document I create before designing my website to help guide the direction of the project

  • Logo files - I include a sub-folder that contains all my logo files and formats

  • Website inquiries - This sub-folder includes all spreadsheets that auto-populate requests coming through my website forms

  • Templates and wireframes - I include any templates or wireframes I use to help shape my website in its own sub-folder

For example…

Here is how I have my documents and assets folder set up in Google Drive.

The documents and assets folders I set up in Google Drive

These types of files can easily get lost in email, third-party tools, or on your desktop. It’s best to set up one main folder for all these types of assets so you can easily find them later on.

2. Folders and sub-folders based on my content outline

The content outline you create during the project brief stage is the perfect way to organize your folders and sub-folders in Google Drive.

For example…

Here is the content outline I created in my project brief for tylerzipperer.com.

Content+outline+I+created+in+my+project+brief.png

I took that exact outline I created in my brief and set up folders in GoogleDrive for each page.

My project folders set up in Google Drive for my website

After I created folders for each page, I proceed with creating sub-folders for any additional pages that fall under the main folders.

For example…

My website has a drop-down that contains four different pages for my services.

Sub folders.jpg

So in my drive I set up a main folder called “Squarespace Help” and then created different sub-folders for each service page.

Sub folders set up in Google Drive for service pages.jpg

Creating sub-folders helps me keep an organized structure to my project folders. If I were to create a bunch of one-off folders for each page, things would start getting messy inside my drive.


What I include in each of my folders and sub-folders

I use the folders and sub-folders I set up for each page to store two main kinds of assets:

1. Website copy

I use different Word doc templates to help me write website copy for each page. I include the copy for each page in the relevant page’s folder or sub-folder.

For example..

Here is a Google doc template I include in my project folders for my 1:1 training service.

Example word doc template I use to create copy that I include in my project folders

If I ever need to make an update to my page’s copy, I always make sure to update it here first so I have the most updated version in my files.


2. Media files

I add all images, icons, videos and other design files to each folder or sub-folder for every page.

For example…

Here is a blog post sub-folder I created for my post, One Simple Hack to Help You With Choosing a Squarespace Template.

Example of a sub-folder I created for my blog post in Google Drive

This sub-folder contains everything from the video file, screenshoots, icons and and Photoshop templates I used to create this post.

By keeping all my copy and media files in one central location, I can easily make updates and add more content. This way nothing ever gets lost and I know exactly where to find the most updated version of a file when I need it.


Need help with organizing your project?

There you have it! A nicely organized project folder can help you save headaches down the line. Once you learn the basic structure of organizing your files, you’ll feel much more in control of your project. Have any questions or recommendations about organizing your project? Contact me or leave a comment below and I'd be more than happy to talk with you.

Me giving a thumbs up after reading this post

P.S. Did this article help? Give me a thumbs up 👍 or comment below and let me know how I did.