How to Start Using GitHub as a Designer Working with Developers

When it comes to workflow being shared between different fields of expertise, lots of issues can arise. For some members of the team it’s always going to get complicated because not everyone speaks the same language. Many relationships can become difficult, but here we’re going to focus on those between designers and developers.

Clichés would have us believe that developers don’t have any sense of creativity or aesthetics while designers don’t possess any technical skill or a logical mind. However, these stereotypes have definitely disappeared, with many projects now being completed with designers and developers working side by side.

New work methods are evidence that collaboration is the right way to deal with a project and get it to completion. In many organizations, collaboration tools are key to this. As a developer, you probably already know lots of platforms, such as Jira, Bitbucket, Confluence, Airtable, Zube, and Trello, but the main one, hands down, is the platform Microsoft bought in 2018 for US$7.5 billion: GitHub.

You might know it purely as a service website that provides hosting for software-development version control but it is way more than that. In addition to its very powerful versioning tool, GitHub enables users to collaborate and manage projects using cards, tasks, and work-step columns. It also offers the possibility to use versioning for image files, to chat via Slack through it, and even to write code for designers so they can create style guides! I have used it both as a designer and a developer, so am able extol its assets and good practices from both angles. If you’re not very familiar with GitHub yet, head to the GitHub Hello World page, and have a look at our roundup below of some useful functions of the platform.

Use GitHub to gather everything in the same place

Back in the day, I would usually drop my illustration drafts by email, on Google Drive, or more recently via InVision. But while clouds allow colleagues to comment, write reviews, or offer feedback, they don’t really offer a way to link the developer and designer teams. These are just platforms that are about trying to work. GitHub gathers, drives don’t.

Use GitHub for project management

Did you know this was possible? GitHub can be used as a project-management tool. Utilising project boards, the tool can be shared by every member working on the project. It could be described as a common language, as it’s always good not to have to use multiple tools when every communication can be made using the same platform. In addition, Kanban work columns can be generated easily—and if you’re not familiar with how to use them, GitHub has created a helpful video.

Use GitHub to store non-code content

Yes, GitHub can also be used for non-code content. Simply add your Sketch or PDF files to your repository and push them. The advantage of doing this is the same: You are gathering all your project material in one spot, meaning you won’t need to use WeTransfer anymore. The only drawback is that files are limited to 100Mo each. When JS or CSS files weigh less than a megabyte, design files can become heavy. Conclusion: Exchange creative content, such as images or small videos, with moderation.

Note: Repositories have a strict limit of 100Go, but the size recommended by GitHub would be to stay below 1Go.

Use GitHub to benefit from the versioning feature

It may not be the best at it, but GitHub’s most famous and popular feature is still versioning. It helps you compare code and samples, even when they are tiny. So now you’re probably thinking what does a designer care about that? Not so fast! GitHub informs your PDS, Sketch and other image-format files that you’ve edited them and pushed them to the repository. This feature is called rich diff, and it allows for main changes, size changes, formatting, and even file changes (with the same name or not). Several view modes will be offered: The default mode is 2-up, which gives a quick glimpse of old and new versions of images. My favorite mode is Swipe, which allows users to swipe a vertical border, making a new image appear on the right, while still showing the old version of the image on the left. Camera testing and comparing websites would certainly prefer this mode as a way of showing visitors how, for example, Huawei’s camera takes better pictures than the iPhone’s. The last view mode is called Onion Skin: By swiping a cursor, users can fade the old version of the image to the new version. Here is the official documentation. This view mode can come in very handy for project collaborators who want to allow colleagues a glimpse of what’s going on with the sketch editing or for when the change is so small, such as a new icon, it’s not immediately obvious what’s different.

Note: Here’s a small, untested tool that can be added to GitHub that may also be useful.

Use GitHub to build CSS libraries

When it comes to big projects or big brands, you are usually able to find style guides showing what font and size to use for formatting titles, and so on. Since this kind of document is loosely situated between code and design, it can provide a good opportunity for designers to build a library themselves. It may not always seem the most interesting job at times, but I can guarantee that when you have completed this type of thing, you’ll be familiar with CSS and know your design files by heart! Since it will usually also be a public document, it will be a small victory for designers in the developer world, too. In the end, if your library is built before the programming step, developers are able to access all the material needed to create project CSS files and rules.

Note: Most known style guides can be found on this website.

Conclusion

Through using GitHub, it’s possible for designers and developers to build web design and code side by side, almost at the same time—quite the opposite of the process of having the sketches created and then, a few months later, the project coded, with no communication between the two sides of the team happening at all. GitHub’s modules and blocks really do offer a time gain. Also, this is a way of thinking that developers love: React.js is built on this block logic, as building brick by brick allows for the creation of more flexible code, which is much easier to understand and debug.

When all is said and done, whether you’re using GitHub or other platforms, as in real life, collaboration between designers and developers doesn’t really depend on the tools they use but more on the confidence they are willing to place in each other. But why not use the appropriate tool to save time and avoid meeting mania and frivolous emails? Of course, it would actually be more effective if developers and designers could become the same person—after all, what could be more efficient than a “desipor” or a “developsigner”?!

This article is part of Behind the Code, the media for developers, by developers. Discover more articles and videos by visiting Behind the Code!

Want to contribute? Get published!

Follow us on Twitter to stay tuned!

Illustration by Blok