Design Tips and Tools for Developers

Here at MicroCreatives, we take pride in open communication, where our team, including designers and developers, can easily collaborate and communicate with each other. This is an essential part of working on a project together. We must ensure that no one involved goes out of the loop. Everything and everyone must be on track to avoid misunderstandings and lapse in procedure. It’s also important that each vertical has knowledge on the other verticals’ roles.


Previously, we discussed encouraging designers to code. Now let’s talk about the other way around. Developers who can design can save time, especially if the designer is not around or if only minor changes need to be done. With the right design tips and tools, developers can easily make front-end design changes.


Color Palette

The color palette of a web design is one of the core elements that make or break the design. The color palette must be consistent and pleasing to the eyes. It shouldn’t be distracting and obstructing the legibility of the text.

  • Colour Lovers – From this tool you can choose from over a million color combinations. Ideally, you would only need 5 colors in your palette, 2 of which are shades of light gray. Using more colors can make the design look too complicated.
  • Adobe Color CC – Out of the 5 colors, you may need more shades for effects such as shadows and mouse hovers. The color wheel in Adobe Color CC is a great tool for choosing color shades.



Rather than a solid block of color, we sometimes prefer to use patterns for background. Using patterns can refresh the eyes from the monotony of colors and lines.

  • Subtle Patterns – This site has over 400 patterns to choose from. You can also combine patterns and colors interestingly through background-blend-mode in CSS3.


Stock Photos

Using photos also make the website alive. You don’t have to worry about not having your own photos to use. There are a lot of websites that have collections of stock photos of any theme you can think of. Some even allow the photos to be downloaded for free.



It’s almost a no-brainer to always use grids when dealing with design and layout. Grids keep the spacing consistent. For developers, grids are also helpful in optimizing the website to be responsive.

  • Foundation for Sites – Most developers use Bootstrap, and grid comes with it. But if you’re looking for another alternative, Zurb Foundation’s Foundation for Sites has a flexible CSS grid.

Coding is still considered a creative profession. Developers just need to put in enough effort to work on design. You, the developer, can elevate your output by inserting creativity and beauty into your work. It’s basically working on both form and function. Make use of the above resources and tips; these should help you work faster and become more efficient when dealing with web design.