Being a front-end designer
A lot of designers don’t believe in knowing how to code, and that’s (sort of) okay.
Design is an incredibly deep and complex vocation. It requires knowledge of color space and interpretation, psychological theory, controlling emotional responses from an audience, not to mention all the technical knowledge and understanding that has to occur.
As a result, I’ve met and worked for a lot of designers who don’t know how to code, which is problematic only for one very specific reason: if you’re building a staircase, I really hope you know how to pick the right kind of wood.
Know your tools.
In the grand scheme of everything a designer is expected to know, being able to code themselves is a bit of a tipping point. Designers can’t be expected to know everything, no matter how simple.
The rub is that you should understand the medium you’re working with.
My first job out of college, I worked as a paper engineer and designer for packaging. I had to know everything about paper. Not just the weight and color and texture, but a deeper understanding of the grain, how the paper would fold properly, how much of my print was lost to grip by which printer, and even how the ink might respond to folding and perforation based on what type of printing I was requesting.
I had to be an expert in the world of paper. My job expected it of me, and I delivered every day. When my company at the time needed ways to shave pennies off each unit of a package, I was the guy who figured it out. When a proof came back with a major error, guess who identified that the printer flipped the cyan plate upside-down?
This jerk right here.
Building for the web shouldn’t be taken for granted.
Learning and understanding HTML, CSS, and JavaScript is a pretty big undertaking. You are essentially being asked to learn a whole other person’s job, an occupation which is itself extraordinarily complex and even dizzying.
Everything is possible on the web. The question is if it should be done.
- A good friend who is far wiser than I am
I would argue, however, that it doesn’t have to be that massive, though. Knowing how it works is certainly a huge step forward. You might not know every facet of CSS or even the basic styling of it, but knowing, for example, the difference between inlining your CSS versus calling to an external stylesheet, or knowing how to optimize CSS for specific pages or above-the-fold content is a big win for your product.
Even better, knowing and understanding the weight of your web product, how long it takes your audience to load it, and knowing when to pull back on certain awesome animations and beautiful tricks to make sure content loads quickly is a pivotal skill that many designers sorely need.
A library like jQuery is a great way to quickly build and scale a simple website with a lot of animations, but you’re also loading a relatively heavy set of tools with a lot of functionality that you might not need or ever use. It’s certainly not the fanciest or most fun task, but realizing your product’s potential and optimizing is an important part of a product designer’s job.
It’s not necessarily the nuance of it, but the construction of it that’s most important.
Where do I even start?
Learn to code
If you’re curious about building better websites, the clearest answer is to learn to code a bit. Download a text editor and try putting something together yourself. Learn to code responsive emails, or build your new website. At the very least, take a look at some simple CodePen projects and copy them until you get a good footing for yourself.
Talk to your developers more
If your schedule is too packed to learn on your own, your tech team is a great resource for learning more about the web, and most of them are more than happy to help you understand what they do all day. In fact, I’m sure some of them are just waiting for you to speak up.
Don’t be embarrassed. They probably already know your understanding of website architecture on a very personal level, but they’ll be ecstatic that you’re trying to get better. Have them host a workshop to teach you and your team more about how to be better. I’ve found in my years that a six-pack of beer is often more than enough compensation.
Some topics to ask about:
- Show me how CSS is loaded vs JavaScript; what could we do to optimize?
- What libraries are we using and what do they do?
- What browsers do we support, and what can we do to design better for those browsers?
- What devices do we regularly see as traffic in our website?
- Tell me about image compression and what we can do better.
- How do we handle components?
- What CSS animations are optimal and which ones aren’t?
- What’s the proper way to handle event listeners for scrolling? What’s ideal vs most optimal?
- What can I do right now to make your job easier?
That last one will win you so many brownie points.
Learn how to make common components rather than unique ones
Atomic design systems are pivotal in this day and age. Maintaining a core system, much like Google’s Material Design Guidelines, will not only help get products up faster, but is essential in making certain the brand you are responsible for maintains the same experience wholly through the user’s journey.
Start taking a look at your own design ecosystem. What can be streamlined, what can be combined, what needs to remain separate. Talk to your developers about what they might think is best in keeping your styles pared down, not just for their sanity, but for your own, as well.
Poke at your own product (until it falls apart)
Run your website through Google Page Speed see how it ranks. Look at what Google suggests for optimizing your site and make the right decisions and ask the important questions to ensure users on slower internet speeds can access your site.
- Use the inspector to see how long it takes to load your site.
- You can also use the inspector to emulate low-bandwidth users by throttling the speed.
- Check the loading of your site on LTE, and even 3G, if you can.
- Always have an old phone lying around for testing. Not everyone is on the latest and greatest like you are!
- Learn to use and understand your analytics tools, especially Google Analytics. See where users are dropping off and how much time they’re spending on a certain page.
Stay motivated, stay curious
If you ever find yourself getting bored in design, working in code can actually help unleash some real creative flow. Not only are you designing something beautiful that you made, but you can actually help in realizing it in a substantial way, and bring it for more people to see.
One of the best pieces of advice I have for you as a designer: don’t stay in the dark. You may not have to learn how to code yourself, but knowing how it works, how it functions, and what you can do better will make you a much stronger, much better designer.
Learn the rules before you break them.
