This knowledge allows working on projects with a greater awareness of the limits and possibilities that are associated with websites and applications. This improves the communication between Design and Front End of Development departments.
#1 Better understanding of the project
Understanding the code changes how Web Designers think about the websites and applications they work on. Projects are no longer seen as flat images but as an interactive collection of HTML tags and CSS rules. Web Designers who had the opportunity to encode at least a few websites/applications have a better understanding of their role in their implementation. They know that their designs work as an outline, kind of a sketch that is a starting point for the development of a functioning website or application.
#2 Increased creativity
Knowing the basics of Front End Development broadens horizons and allows for true creativity, not just relying on copying solutions of competitors. Knowledge of Front End Development allows you to think ahead and predict the final result of animations or such effects as parallax (changing the placement of content on different plans and at different rates).
#3 Avoiding mistakes
Knowledge of the code allows avoiding designing solutions that can’t be encoded with the use of HTML/CSS. The designer won’t create projects that are too time-consuming or mismatched with the established budget.
Working with code is slightly different than using graphics programs, where designers are often limited only by their imagination. When it comes to code nothing is created as easily as in Photoshop so that some effects can be unattainable. In practice, many solutions that seem trivial, such as multiplication (the effect of blending layers), are unreachable with the use of HTML/CSS.
The graphics software allows for having more flexibility when it comes to the grid, what can cause a lot of problems during the development. You can read more about the grid in my article Why We Love GRID (And You Should Too!)
#4 Creating better RWD projects
It's tough to design responsive websites and applications without the knowledge of the practical operation of frameworks. Designers that know the code are able to predict how individual elements will look on devices of specific sizes. They can also analyze which parts won't need any amendments to fit every screen size. This allows to avoid creation of improper views and saves time for both Designer and Front End Developer.
#5 Better communication with the Front End Developers
As I’ve mentioned at the beginning, creating websites is based on the division of duties. Knowledge of how the code works greatly facilitates communication between departments of Web Design and Front End Development. Designers, by committing fewer errors, don’t generate unnecessary conflicts between those two teams. In the case of creative disagreement they are also able to understand the arguments of Developer, what helps in finding the optimal solution. Communication between departments becomes a dialogue, not a fight about who is right.
Designers, that know code - what their work looks like?
During my everyday work, I constantly see the positive effects of designers knowledge of code and how it affects the operation of the entire software house. I have long forgotten about the "eternal" conflict between designer and developer. We exchanged confrontation to dialogue and common search for the best solutions. Thoughtless trust in "artistic vision" and designing based on intuition are right now replaced with a rational approach to the design process. Web Designers in our company know the capabilities and limitations of web technologies and use this knowledge in their daily work.