I’ve long been a believer in the idea that inspiration and stimulation for your work can come directly from influences that have nothing to do with the task in front of you. It’s not exactly a revolutionary idea: getting up and playing guitar can stimulate a different part of your brain when you’re in the middle of working; you can take influence from an artist in another field for the design you have at hand. The laundry list of examples is long and varied for anyone in any creative profession.
One of the things that has stuck with me for the last few years is the movie Jiro Dreams of Sushi, which I must have watched and re-watched a dozen times (thank you, Netflix). I’ve recently become enamored with another cooking series streaming on Netflix, the Anthony Bourdain-narrated Mind of a Chef, which follows a variety of chefs as they travel and cook. Most episodes focus on an ingredient, style, or location, and how it influences their culinary work.
As I’ve binged on a few dozen episodes of this latest streaming crush, I’ve been thinking a lot about how the approach to craft in cooking is enviable for those of us that work primarily in digital media. Specifically, I love watching the chefs discuss and exemplify incredible dedication to techniques that are the basis of their professions. Something as simple as hand positioning while chopping vegetables can bely years of practice and focus until the act is done sublimely.
It’s not exclusive to cooking, either — furniture builders, auto mechanics, surfboard shapers, all of these professions require a perfection with the basic physical mastery of tools and techniques to allow the creative mind to solve the bigger problems at hand. As someone who enjoys (from a completely amateur perspective) all of the things I listed above, I admire the people with the skill level to be at the top level of that kind of work.
There’s not a direct equivalent for those of us that spend our days engrossed in Photoshop or an IDE. I can’t type, “box-sizing: border-box;” for several hours a day in order to get better at CSS the same way that chopping or sanding or wrenching on something physical can help you learn. As much as we’ll talk about designing and problem solving as “muscles” that have to be repeatedly used to stay strong, I’ve been thinking about underlying things we can do to support those muscles at their best.
- Clean Code Organization — Something I’ve been thinking a lot about recently is how we arrange our code within both a project and within individual files. There’s always been talk of tabs or spaces for indentation, how project folders are arranged, etc. For me, I’ve been focusing on picking a system and sticking to it. I’ve started arranging my CSS and element attributes alphabetically, which has made me really focus on what I’m writing. I picked a naming convention (hyphenated class names, camel case IDs) which has reduced the number of times I have to switch between files to double check the name of an element I need to target or style. Basically any consistency helps write better code.
- Right tool for the job — You wouldn’t use a chainsaw to cut a surfboard outline. Ever try to cut the skin of a tomato without a serrated knife? Both things lead to more trouble than they’re worth. I’ve been trying to be more cognizant about how many extra layers of tools beyond HTML and CSS I’m adding to a given site. I’ve never been a fan of big, bloated CSS frameworks for production code, but more and more, I’m also trying to reduce reliance on jQuery and similar helpers. “$(‘.class-name’)” isn’t really much faster to write than “document.getElementsByClassName(‘class-name’)”, and depending on what you’re doing with the selected elements afterwards, the whole library could be overkill. Precision and expediency go hand in hand.
- Get your layers/symbols/artboards in line — This is the designer’s version of #1. At this point, we all know that when we’re designing anything on the web, 90% of what we’re making has to work within a system, and it should be consistent. Whether it’s Sketch or all the newfangled goodness in Photoshop CC, your elements should look the same no matter where in your design document they appear. Symbols and text styles are my best friends for creating a consistent visual theme throughout the design process, which leaves me with more attention to focus on individual design decisions that aren’t part of the system, as well as making the jump from design to development much easier. To be honest, this can be kind of a beast, and I’m still wrangling with issues around it: text styles can get out of control if there’s more than one base font size increase, because you have to duplicate every text style correctly for that breakpoint. BUT the payoff is totally worth it, because using those styles to create a really nice design style guide is an immense help.
There’s definitely no one-to-one correlation between a physical creative skill and a digital one, but learning from other professions is never a bad thing. Ultimately, I look at design and development as a craft, and paying attention to how I’m pursuing that craft means that I’ll be able to produce a better product time and time again. This list is obviously not expansive or extensive, but maybe it’ll help people trying to pursue the same things I am.