As every kid knows, making cool stuff is the fun part. You dump all of your toys on the floor, and sort through them until you find what you want, and make it all fit together to build a spaceship, or something. That’s the part everyone likes.

But then someone comes in to tell you that it’s over. It’s done. Now you have to pick up after yourself so Dad doesn’t step on a Lego piece in the dark and shout bad words at 2AM. Few people enjoy this part. But as we get older, most of us realize that cleaning up after ourselves after work or play will save us trouble down the road. Web design is no exception.

If you’re new to web design (and yes, this article is for newbies), it might feel like you’re “done” when you upload your HTML files to the server, and the client says it all looks great. And sure, you’re done for now. Take a day off, or at least take a coffee break. One day, however, either you or someone else is going to have to pick up that design and play with it again. On that day, you will want to have everything put away where it’s supposed to be…

1. Clean up Your Layers

If you do a lot of design work in any graphics app, whether it’s Sketch, Photoshop, Affinity Designer, or some random wireframing app, you want to make sure that stuff is easy to make sense of. When you’re iterating fast, it’s easy to end up with a long list of layers that have no names, or that have been hidden away because you decided a previous approach didn’t look quite right.

When you’re iterating fast, it’s easy to end up with a long list of layers that have no names

Make sure every layer is named, and that you don’t have any layers or elements you don’t need. Organize your objects into groups, layer groups, and folders. Here’s a more detailed guide to organizing PSDs, which can be adapted to just about any other graphical format.

2. Clean up Your Code

HTML, CSS, and JavaScript can also add up very quickly when you’re iterating and experimenting. Perhaps you left in some bits of HTML from an element you didn’t need in the end. Maybe you wrote styles for that element, and forgot you left them in. Random class names can definitely pile up when you’re not looking.

Give your code a once-over, to make sure you’re not leaving anything extraneous in there. If you have a lot of CSS to work through (and this can happen easily), you might try a tool like JitBit to help you find CSS you aren’t using.

3. Clean up Your Files

Grab your file manager of choice and get sorting. Maybe you downloaded a framework like Bootstrap, or a library like jQuery, before realizing you didn’t need them for this project. Maybe you made some files for experimenting in, but those experiments are over.

Frankly, file management is one of those tasks I always put off ‘til later because it’s annoying, but even so, it needs to be done. You have to delete those extra files. Putting unused files on a server is bad practice, and you do not want to be trying to guess which files were actually important in three years, when you’ve more or less forgotten how you put everything together.

4. Consider Your Storage Options

Kindergartens, schools, some mechanics, warehouse administrators, and parents who’ve had a bunch of kids and have been collecting toys for fifteen years all recognize the value of clearly-labelled storage. There‘s nothing so annoying as getting kind of lost while you search through stacks of boxes for that one thing that’s got to be in there somewhere.

Being the guy who can save your client’s website…is a good way to maintain healthy relations with said client

When it comes to storing past work, having a bunch of randomly-named folders on your hard drive won’t cut it. You need a system. At the very least, you could start by separating finished projects from current projects. Then, start looking into ways to back up your files. Whether you use a local external drive, or a third-party service, a good backup solution has the benefit of both loss prevention, and freeing up some space on your local drives if need be.

This is especially important because clients lose files all the time. Sometimes they hire someone else to change things, and they mess it up. Sometimes data is lost in server crashes. Being the guy who can save your client’s website in a pinch is a good way to maintain healthy relations with said client.

5. Documentation

Now we get into “Putting Your Stuff Away 102”. Unless your project is the simplest HTML/CSS template known to man, it can help to write down some things like:

The original goals for the project as defined by the client.
The reasons why you made the design decisions you made.
Which CSS hacks you used (if any).
Which parts of the code just seem to work as long as you don’t dare to touch them ever.
Which libraries and frameworks you used, and their version numbers.

It’s also a good idea to include any resources given to you by your client, such as style guides, mood boards, and any content they provided. You never know when you’ll need to go back and refer to this material, and having it all in one place will make it much easier to pick up an old project again. Here’s a how-to guide from Envato on Design Project Documentation to get you started.

Wrapping Up

This might all seem like a lot of extra work for a four-page site that you built in a relatively short time, for example. But really, this kind of organization saves a lot of time and potential headaches in the long run.

Don’t ever under-estimate your ability to forget which file contains the latest design, or exactly why that CSS style is overriding that other one. As soon as you start on the next project, all this mental organization will evaporate.

It’s a simple question, really: Would you rather sort all of this out now, or run around frantically searching for everything you need when a past client comes asking for a “quick change” that needs to happen “today, if possible”?

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!