5 Tips for Cleaning up After a Design Project

Default avatar.
June 21, 2018
5 Tips for Cleaning up After a Design Project.
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. [pullquote]When you’re iterating fast, it’s easy to end up with a long list of layers that have no names[/pullquote] 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. [pullquote]Being the guy who can save your client’s website…is a good way to maintain healthy relations with said client[/pullquote] 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”?

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…