I'm looking for a good way to help us organize and keep track of the latest version of UI elements. The simple way I've found is to have one big file, maybe 10000 X 10000 pixels with all your UI on it. Imagine a big, big, very big poster with all your UI elements. You can see them all in one shot. A postal card of all UI element. We call it a GUI. But it's hard to maintain. Do you have any tools or suggestions to be better at it?


Oh boy ... there are a lot of ways to go about organizing your UI elements. You can use screen shots, put them into a files, folder, documents, etc.

One approach that seems to work well for us is to have a living, breathing style guide. It is a little more work up front, but in the end it will save a lot of time.

The basic premise of the style guide is to place all the UI elements onto a webpage, separated/formatted for readability. Then we apply our style sheets to the page. What is nice is that we can choose which style sheet to apply and see it transform the UI elements on the fly.

Obviously, as I mentioned above, the complexity of this style guide is directly proportional to the complexity of your elements and the accuracy of the behavior for each that you want to mimic. It also depends on how you have the site structured as well.

The beauty of this approach is that as your styles change, you can see how it affects all the elements without having to go through your entire site.

I think the key is to try to come as close as possible to producing a visual snapshot of your site with once styles have been applied.

Am I helping to answer the question? Maybe you can share what web technologies you are using? PHP, ASP.NET, etc. Maybe adding some clarity to your question would be helpful as well. In other words, are you looking to organize the physical files on the site, or just maintain a good screenshot view of all the elements?

If you are just looking for tools to manage assets and/or workflow, that is a totally different answer. Hope I picked the right one. If not, I could recommend a couple of tool sets.

Hope I am making sense and that I didn't jump to conclusions about your question. Have a great day!

  • I understand why you proposing to have a style guide. I think it's a must and every project/website should have this. The problem is when a graphic designer will want to change things. I hope he didn't do only mockups, for he extract all the elements somewhere. Do you think for example we should have 1 photoshop file per elements? One photoshop file for everything and a layer group per elements? – Benoit Meunier Jun 15 '12 at 17:12

You could try using version control for this purpose, it's easy to update, and keep track of all UI elements. You could have folders for each, with image preview and code. It would be nice to have a way to browse through them, maybe an internal web page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.