At first, I thought that being a designer meant I was just making things look “pretty” until a professor opened my eyes (or reopened) them to all the possibilities of coding. Improving my design skills further than Adobe Illustrator and InDesign started with one simple thing: learning how to code.
Get a Different View.
Starting from the very beginning, knowing how both a website and code is structured helps immensely. Rather than just viewing your work with a designer’s eye, you start to see things as a developer. It gives you a totally different way of viewing your work from a different vantage point than you regularly normally would.
Constantly, when I’m designing a new layout for a website I ask myself, “is this possible? Can I even do that?”. Thinking from both a designer and developer view stops you from creating a crazy or wild design that is not possible with the tools at hand. It also stops you from promising something impossible to a client ( and as an added bonus saves you the time and pain of trying to figure it out).
Understand How the Site Works and How it Changes in Size.
At this point, you’ve probably noticed that websites look different depending on what device is being used - and if they don’t look different, then that’s a problem...That’s the beauty of responsive web design because it takes a brand’s page that much further!
With a typical drag-and-drop website editor, things stack from left to right, top to bottom. However, with a little bit of code magic and bullying, you can have them displayed in whatever order you want them to (shout out to Flexbox).
Some drag-and-drop website builders also don’t give you a whole lot of customization options when it comes to responsive designs. Typically, they give you desktop, tablet and mobile sizes. Yeah, sure that’s great if you’re designing for those exact screen sizes, but there are countless devices out there. A website might look great on someone’s brand new iPhone 12 Pro Max, but then absolutely terrible on a prehistoric iPhone 5. Knowing even the basics of HTML and CSS, can make sure your work looks stunning on any device.
YOU are the Dev.
Aside from giving you a new perspective on your work, coding lets you make your work look exactly how you want it to look (in web design). No longer will you have to rely on communication skills alone to explain your design to a developer. Instead, you can bully the premade template or existing website into doing exactly what you want it to do!
For instance, we used a Hubspot website template when creating a new site for one of our clients. They loved the general structure of it but asked “can these title blocks be the same width?” Of course, the theme made it easy to drag and drop everything where we wanted it to, but there were limitations to what we could actually control. Rather than telling the client, “we can’t do that because of the theme,” or having to do a long-winded back and forth with the theme devs, we were able to go into the files of the template and manipulate it to do exactly what we wanted it to.
Bottom Line: You Should Know How to Code As a Designer.
Knowing how to code (even if it’s just the basics of HTML/CSS) as a designer not only helps you and your company, but also your work - it allows your work to stand out and look exactly how you want the user to see it.