Professional Structure and 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 differing 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 hurt 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 onto the end.

This folder the contains 2 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 in 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 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 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 2 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 which show how to develop jQuery elements or CSS styles which 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 2 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 the 10-15 minutes out to re-name 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 amount of times I’ve opened a project from a few months back and been completely lost at blocks of code, utterly stunned 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 law written in stone. These concepts are merely jumping off points which 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.

You might also like…

Accessibility Principles for the Modern Designer →
Eight Helpful Rules for Logo Designers →
20 Useful Free PDF ebooks for Designers and Bloggers →
Typography as Art →
Beginners Guide to Using the Power of Color in Web Design →