Should Designers Learn How To Code? My Journey… (Part 2)

In my previous article, Should Designers Learn How To Code? My Journey… (Part 1), I began answering that very question. I ended it, revealing the main reason that not only kept, but increased my curiosity in creating websites with code: SVG.

Scaleable Vector Graphics helped bridge the gap between art and programming, seeing my artistic process in a different perspective. Using bezier curves, squares, circles and polygons are second nature in building my artwork in Adobe Illustrator. The mathematical precision in making vector graphics became much clearer in a deeper level as I discovered what I can do with those coordinates inside an SVG image.

Each time I saved a graphic as an SVG, I copied and pasted the code in my code editor of choice (I alternate between Sublime Text and Brackets), then read the code from that image, something you can never do with gifs, jpegs or pngs. After knowing the basics of what that code means and how to manipulate it, I considered that my way of gingerly stepping into what a developer can do. Possibilities of incorporating irregular shapes into web page layouts filled my mind. It also opened my imagination to animating SVGs with a JavaScript library called Greensock. These two elements have made learning… fun. Fun? That’s one word I never expected as a description of my coding journey.

What attracted me about Greensock is the concept of a timeline executing more complex animations with code. I was very familiar with timelines using After Effects, Premiere Pro and Flash (now called Animate). What surprised me most was how it became a fun (there’s that word again) exercise to move shapes, change transparency, size and angles only with a line or two of code. I began creating a few personal projects. An animated Christmas card and a Drag-N-Drop Riddle game were among them. Three months later, I was finally confident enough to create a modern looking website.

My design of the FPI: Film Private Eye site.

The design of the F.P.I.: Film Private Eye website was my response to what I’ve been seeing throughout the web design landscape. The perfect placement of squares, rectangles and circles in almost every website was getting kind of boring to me. I wanted to use irregular shapes that stick out in odd places, create a layout that grabs the visitor’s attention. The only way I felt I could achieve that look and feel was using SVGs.

Reason? I love SVGs’ flexibility. It can be used as a regular image inside the HTML <img> tag or as an object in the <object> tag or, the way I built my site, combine the SVG code itself into the HTML document as an inline SVG. It was the most dynamic way for me to layout each puzzle piece shape and animate them individually at the top portion of the site, while the bottom portion gracefully changes each website section’s opacity one by one. Manipulating SVG’s code with the combination of HTML, CSS and JavaScript are the same elements I needed to update my coding skills. Not only was I making a cool looking site, I was expanding my knowledge.

Since finishing the site I went on combining my design/illustrative skills to build other sites. I used Bootstrap for a website redesign and ScrollMagic.js for scrolling animations for my portfolio site. I wouldn’t have managed to explore these different ways to design layouts for the web without learning code.

Does this mean I will ditch my creative endeavors and become a master programmer? Absolutely not! I will always consider myself an artist/designer. I consider coding as an extension to my artistic process. It helped me find an another way to express my creative vision. It also gives me the opportunity to understand some of the limitations developers constantly deal with, which is very valuable when working within a team.