Are you a designer constantly telling your front-end developer to add padding or pixels and are baffled as to why the design doesn’t match the comp? 🤔 Or are you a front-end developer who’s frustrated with all the pixel pushing? 😳
Collaboration between designers and front-end developers is key for a streamline product that’s consistent across all boards. However, that collaboration can be hard to accomplish. Designers want developers to be able to build without having to hand-hold their design decisions throughout the building process. While developers want to code and then have a short design critique, so they can move onto the next feature or project.
As a front-end developer, there’s specific tools and processes that have made collaboration with my designer go smoothly and efficiently that I would like to share.
1. Sketch
First off, Sketch has been by far the most valuable tool.
Receiving comps in Sketch are easy to work with and you have the capability to copy CSS attributes. Copying a linear-gradient background or box-shadow only takes a couple of clicks.
Not to mention, it’s only a one time payment of $99 and has such an easy learning curve compared to Adobe products. A really useful feature that I use often is the SVG export. I can export my images and icons as SVG formats and manipulate the code as needed. Additionally, a developer community has been built around Sketch and multiple free plugins have been created because of this.
2. Recordit
Recordit is a free handy tool to make screencasts and GIFs. Once the recording is created it can be shared by url. This is extremely useful when working with animations. You can record an animation built or one you’re inspired by and share it with your designer for feedback.
3. Spectacle
Spectacle is a magical tool to move and resize your windows. When comparing comps to actual designs built this tool nicely splits your windows to help manage your screens. One can then easily navigate between windows and save time by using resize shortcuts.
4. WhatFont
WhatFont is a Chrome extension that allows you to click on copy in your browser to determine what font it is. The font-size and font-weight are also provided when the copy is clicked upon. Especially when using a custom font and as a developer not being able to identify or recognize fonts this has been an extremely useful tool.
5. Icomoon
Icomoon, an icon library generator, is like your own personalized Font Awesome. You can upload your icons in whatever format and make your own library in order to be consistent with your icon usage.
6. Vector Icon Resources
Flaticon and Iconfinder are great websites to explore and discover free icons. Make sure to get approval from your designer before using them!
7. Stock Images
Unsplash and Pexels are my go-to sites for free beautiful high-resolution stock images. It’s not required to credit the photographers, but it’s appreciated if you do so.
8. Style Guide
If kept up-to-date a style guide can be invaluable with designer and developer cohesion. A style guide is the source of truth for how elements, colors, typography and fonts should appear. The designer should approve of the style guide guidelines, in which the developers should work off of. I would recommend building a digital style guide whether it’s in a CMS or your code base, so it stays relevant with the current styling and can quickly be iterated upon. Whereas, a PDF of a style guide might become stale quickly and can be harder to maintain.
9. ImageOptim
ImageOptim compresses images without losing quality (lossless image compression). It can reduce the file sizes of multiple image formats as well as GIFs. Just drag and drop images into the application and it will instantly cut down your image sizes.
10. Screenshot Crossbars
Screenshot crossbars on a Mac help with alignment. Once you have the crossbars open you can drag them across your screen to check the alignment of the layout and elements. If you don’t want to cover your desktop with saved screenshots, while your crossbars are still showing just press ‘esc’ before you stop dragging the crossbars. Or if you want to copy the screenshot to your clipboard and then paste it quickly without having to save it to your desktop, press ⌘ + Ctrl + Shift + 4. Lastly, if you want to take a screenshot of your entire window, press ⌘ + Shift + 4 and once the crossbars appear you will then press the spacebar. A camera icon will appear and then you will click to take a screenshot of your window. Otherwise pressing spacebar again will bring you back to the crossbars where you can manually select the area you want to take a screenshot of.
11. Color Palette Generators
Don’t have an eye for colors, don’t worry there’s multiple color palette generators that are out there. Coolors, Color Hunt, and Adobe Color are some of my favorite.
12. HTML & Unicode Characters
Seeking to add some spark to your copy by adding emojis or just looking for the correct symbols. &What; is your source to find over 35,000 characters.
13. Inspirational Sites
Some days I’m just lacking that design inspiration. To light that fire under me, I turn to Awwwards and Muzli. I have Muzli as a Chrome extension, so every time I open a new tab I am flooded with the “freshest” design ideas and content.
14. Code Playgrounds
Are you wanting to just experiment with code to show proof of concept to your designer? I think Codepen has the prettiest UI out there for online code editors. You can easily change the view to depict your creation to present to your designer. Other common online editors are JSFiddle and JS Bin.
15. Digital Asset Management (DAM) Platform
Looking for a home for your brand or project where you can find all your necessary assets whether they’re images, logos or colors in one consolidated place. Well Brandfolder has been my solution to solving this organization of assets. It’s a cloud-based storage platform for digital assets. This platform allows instant collaboration and sharing between designers and developers. The designer can upload assets onto the platform and then the developer can either download the assets to use in their code or embed assets with CDN (Content Delivery Network) links. Instead of having to email assets or share on Slack, Brandfolder’s platform allows a seamless hand-off of assets.
—
In the end, despite the push back from each other, both designers and developers want the best for their product. 🤝 These tools I mentioned above help to create a collaborative environment and a steady workflow.