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

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…