Professional Structure & Documentation in Web Design


As designers, we don’t commonly think in terms of structure. Unfortunately, this can cause problems in design projects, both personal and freelance, as organizational issues rise up and bubble through our artwork.

Fortunately, there are some changes you can make to your routine which can help to straighten out project work. Granted, the setup may be different based on different operating systems and per-project conditions, but the core ideas will help you implement a much better organizational scheme during your work.

You may also consider networking with freelancers and other designers via Twitter to see how they set up projects. There is no objectively correct way to work, but a little organization never hurts anyone.

Creating a Resourceful Project Workspace

The first step in any project is setting up a proper workspace. There are so many options here it’s hard to say if any one way is correct or not, so take these tips with a grain of salt. It’s encouraged to use your imagination and creativity to set up project spaces with whatever structure is easiest for you.

The first major step is to organize and split up your core files. We can use a freelance web design project as an example here and list out what we’d be working with. To start, there will be PSD/AI files for graphics, links, and resources for inspiration and also the HTML/CSS/JS files themselves.

Separate Code from Creative Bits

My preferred method is to set up a new folder inside my “projects” directory. I’ll name this folder after the name of the current project I’m working on and may append a date to the end.

This folder contains two sub-folders – Designs and HTML. As you can probably guess, the Designs folder contains any and all graphics, mockups, fonts, or icons to be used on the site. This is particularly useful when working with larger projects where you’ll have to design multiple logos or branding artwork (advertisements, banners, etc.).

The HTML directory holds all of the static code used to initially develop the site. Many modern web designs will run off some type of CMS or backend system, which requires a server environment to run. This is good for the final product, but when just starting to develop a website, I prefer to code it in static HTML/CSS first to get a basic template.

This is certainly an optional step, and not all web designers need to take this route. I always suggest taking this route, though, as it saves loads of time when it comes to developing the final product. You also don’t need to jump right into a CMS template system and try to write code all at once (which can get quite messy).

Keep a Small Documentation File

Another useful item here would be a .txt file containing any and all useful information. I use this as a type of documentation, and it could be even more advanced if necessary (Word or Excel Spreadsheet).

Generally, this is placed in the root of the project folder along with the other two sub-folders. I will include links to websites with similar designs or elements I want to work with in my site or just future notes to myself on the project.

I’ll also link to tutorials that show how to develop jQuery elements or CSS styles that I want to implement. This saves time during the development process since I don’t need to write all the code from scratch. These are just a few ideas to get you started, but documentation really has no limits – it’s solely in place as a resource for you, the designer.

Properly Order all Miscellaneous Files

Keeping a neat structure for projects on your own computer is simple enough, but what about the abstract files which can’t be stored so easily? I’m speaking about e-mails and chat conversations where information is passed. These require a bit more finesse and creativity.

It’s not so out of the question to say you could keep important updates and conversations inside your Documentation file. However, you may see things getting bogged down over time with information overload, especially on larger projects.

If you use Gmail or Outlook as an e-mail client, it’s simple to categorize messages and tag them for later use (Outlook uses folders, but it’s the same idea). I haven’t personally used Hotmail or Yahoo! Mail, but they should run similar features.

Designers generally don’t want to go through their e-mail and categorize messages individually, and most times, it’s really not necessary. However, if you’re faced with a monstrous project, you’ll be thanking yourself two weeks down the road when you still have access to all your archived mail.

Label Files with Simplicity in Mind

This one may seem like a no-brainer, but it’s scary how so few designers take the time to label their files. Don’t let your designs folder fill up with “Untitled-6.psd” or “mockup3.psd” to the point where it’s a pigsty.

Label your files not only based on what they hold but adding a date to the beginning or end will keep chronological placement. This rule also goes for inside your files where you have tens of hundreds of layers stacked, one on top of the other.

Take 10-15 minutes out to rename and organize your PSD files as much as possible. It’s a great habit to get into, and you’ll be thanking yourself in the long run. If you’re the super-organized type, you may even consider creating layer folders for each individual page element such as the header or footer.

Your code is another intense busy area where structure helps. Keep notes stored in your CSS or HTML via comments in your code to remind your future self about what you were doing. I can’t count the number of times I’ve opened a project from a few months back and been completely lost in blocks of code, utterly stunned and questioning what I was even trying to do.

You may also consider keeping these ideas in a smaller XML file along with your code. This may be going a bit overboard for some, but it’s truthfully about whatever works best for you. Keeping structure and documentation as a designer is not as hard as it seems.

Although very important to the digital design process, don’t take these words as a law written in stone. These concepts are merely jumping off points that seem to work best for most artists.

The great thing about working as a designer is the freedom to work however you feel most comfortable. Once you build a structure for your work schedule, the creative process with flow naturally.

Related Topics

This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.