3 things UI Designers can learn from the developers around them.

Being an only UX/UI designer in a team of full of developers is hard because every day you have to struggle hard to keep everyone on the same page while handling and sharing deliverables like UI pages, icons, illustrations, design specs.

I was doing my work perfectly being a UI Designer, but still, I was struggling on the part of the collaboration and sharing design files and organising my design files as I was working back and forth with the developers.

I had too much on my plate, I was designing hundreds of screens, a lot of icons and some illustrations but collectively it was a mess. There was no structure, no proper specification in my design files. Sometimes, it took me more minutes to find a certain file whenever a developer or my product manager asked me for a file. So, while I was busy designing the UI aesthetically pleasing, on the other hand, I created a mess of hundreds of files that even I cannot understand and get through it.

The design system is one of the ways to design and organise the different components that will be used in the system but still I needed a system to better organise this design system.

So in the need of the help, I did some online research and along with it, I asked my developer friends about how they manage their files among a team of 20 developers and how they make it easy for themselves and their team to share files without going to every person’s desk.

We, designers and developer, may work with different screens but the kind of work we do at the core is common, which is creating and organising files.

So, here I am sharing what they have shared with me, and things which can help UI designers and web designers to improve the quality of the work and organise them in a better way.

1. File Structuring (versioning )

No matter how big the project you are working on, it is always better to organise your files in a manner so that they become easier to understand for you, and also for all the people working in the team.

Structuring your files helps you to see clearly everything you have done in a more clear way. And it will help you in designing the UI files in a better way and moreover, it will save you time in managing your everyday work.

So always try to create a proper file structure for the project you are working on.

Tool: Abstract is the best design versioning tool for designers.

How to keep your design files neat and tidy

Being unorganized is the worse, especially when it comes to finding and managing your design files. Find out the benefits from having a good filing system...

99designsPeter Vukovic

2. Naming Conventions & guidelines

When you are done with structuring your files in a clear way, the next thing is how you are gonna find them, mostly by the names you have given to them.

This is the thing which all my developer's friends told me to learn as they believe naming is the only way to structure your code or mess your code and being a developer, it is their first principle to create their naming convention so that everyone could name the elements in a similar way, so that it will be easier for them to locate and find them.

So creating a naming convention for your design files or components is very important because it will help you and other fellow designers to find the required files in a simpler way.

Along with the naming convention, you need to define your guidelines about using the design files, however, sometimes this might be included in the design system, but sometimes when you don’t have a design system, you can create a set of guidelines for your team members to know how to use the design components.

Staying organized as a designer

New Haircut’s Head of Product Design on the habits that’ll help you and your design team be more organized and collaborate better.

Manav Khurana,

Best practices for design system naming conventions | Inside Design Blog

Quit making developers crazy and learn the naming conventions that will save your design system.

Inside Design BlogShayna Hodkin

How to choose an artboard naming convention | Inside Design Blog

Artboard naming should be a science. Gone are the days of “Homepage_final_FINAL_copy6,” long live consistent processes and conventions.

Inside Design BlogKacy Boone,

3. Comments (annotations)

Comments or annotations in design files are like the why’s behind the design decisions and they make the person looking on your design to get your why behind designing that design in that way.

Other than naming, Commenting is one of the things which all the developer have made it as a practice and it helps other developers know what changes have been made by which person and when.

So, like commenting we can have annotations in our design files, so that we don’t need to explain every single thing to everyone, at least people can have a general idea about the design.

Commenting in your design help you record the changes that have been made gradually in the design files.

Mostly, It helps the new onboard designer who does not have any knowledge about that particular design. And commenting and annotating can help them understand the design files in a better way and it can reduce the human work of explaining the whole design to the new onboard designer.

Design Basics: Annotating Your Work

As Wayfair continues to build out our growing design org, we’ve been crossing t’s and dotting i’s on our training materials for entry-level and experienced designers alike. We thought it might be…

Wayfair Experience DesignDan Lachapelle

Design annotations that will make your developers happy

As a designer, have you ever been bombarded with questions about your design specs? Imagine the project you’re working on is nearing the implementation phase, so the developers on your team are…

UX CollectiveGrace Noh

Conclusion

So these are some of the lessons I learned from the developers in my team.

Simply designing aesthetically pleasing UI is not enough when you are in the team, you are there who is summing up the work for the whole team and it is your responsibility to do your work in a way that everybody understands it in the best way, make them struggle less.

So, thanks to all the developers who have helped me in organising my design files.

Thanks for reading.