November 11th, 2016

Speaking code

Coding is an essential skill for today’s designer, heck… it should be taught in schools.

“Designers should Design and Coders should Code,” right? Here is what we have to say about this phrase.

Designers who understand the fundamentals of coding are better at designing for developers. Here’s why: When developers start coding what was created by a designer, there are guidelines that must be followed. They create DIVs and assign classes or ids, stylize them in CSS and expect some distances and colors to be persistent.

Consistency is important: If you create in Illustrator what is supposed to be a Heading 3 tag on the web and the margin below is 15 pixels, the developers will create a rule for that. If there is another Photoshop document for the same project having another Heading 3 tag, the designer may not care about the distances being the same. However, this matters on the web because the same CSS rules have been applied.

 

This simple illustration shows a scenario where detail looks a bit different because the designer lacks the knowledge of styling with CSS rules.

In addition, a designer saves a lot of time due to the fact that some simple rules are known and consistency is adopted whilst designing. This makes the creative process faster.

 

There are some drawbacks to designer who neglects coding. A common one is not being able to think out of the box.

“Think outside the box, but don’t forget the box exists.” For the sake of consistency, remember the box truly exists. Although, a designer that does not code may be clueless when it comes to JavaScript trends, plugins or new possibilities (e.g. Parallax) and may not be designing for the most modern platform.

 

To wrap this up, it’s easy! Designers become better at what they do, when they have the fundamental understanding of how the development process works,  why certain programming languages are used, and how they obstruct or expand the designer’s possibilities. When there is a better sense of what’s technically realistic before the design process starts, it helps fast-track the implementation process.

 

Learn to code. HTML and CSS coding for a designer increases your professional skillset. The best part is, it’s easy!