Lost in Digital Design Translation

Posted on October 31, 2019

You’re a front-end developer. A pretty good one, in fact. You love CSS like Mike Vaughan loves his Los Angeles Dodgers! You can look at a design comp provided by some random designer and use your developer x-ray vision to calc the grid where the Photoshop guidelines sit in the bloated source file — WITHOUT even having to open Photoshop and wait for the damn thing to load! Hell maybe the designer didn’t even use a grid, but that’s not gonna stop you from building one and saving his ass when it comes to executing his layout responsively!

We’ve all been there. This is almost 2020. A prerequisite to earning the title of “Digital” Designer should be at the very least, knowing that you should be using Sketch over Photoshop as your weapon of choice to lay out a web page or application screen. The guy or gal who hands over a PSD to a dev and expects pixel perfection is a dinosaur, right? WRONG. Let me take a step back.

I am a Creative Technical Director

I will be honest. I received this title because I was offered a position from a forward-thinking, award-winning agency in Q4, 2018 in Southern California and I thought it was fitting. I turned down the position after I was offered a promotion at the agency that employed me at the time and thought, “hey, go ahead and give me that title in my email sig along with the bump and the creative autonomy”. I had wrestled with egos my entire career (kids, I can tell you that advertising is probably the leader in testosterone driven, irrational, illogical business decisions). This was a way to include “Creative” in my title so the next ego (any “swinging dick with an award”) that walked through the door could not piss on my team marking their so-called “territory”. What I did and how I did it did not change.

When I took the job at a traditional agency I did so with two goals in mind. Build up a team in a learning environment where digi-folks were not afraid to ask questions, or say “I don’t know”. Conversely if one did say “I don’t know”, it was followed up with “Let’s try it”. Ultimately I believe we succeeded there. It was not uncommon to hear those two phrases amongst my crew. Because of that we were able to say when we went home at the end of the week that we created the thing that did not exist before we made it.

The other goal was to spread the UX/Digital best practices culture out amongst the more traditional Art Director/Copywriter/Creative Director bunch that were kind of set in their ways. But again, conversely it was to learn from those that were legitimately the best at what they do. When we threw down with “the Brand Guy”, we really wanted to throw down. I knew it wasn’t going to be beneficial to anybody involved to have the ECD or agency stakeholder come in and  critique our wireframes, CTA hierarchy, or sitemap process. But user stories? Personas? Yes. I felt it important to involve them right away. This eliminated the dreaded “swoop and poop”. That unofficial marking of territory that happens when a creative ego feels so uninvested in a project that he/she can simply squash it and start it over “their way”.

What this also lead to was a learning environment for both sides. Our team could benefit from the larger brand picture when those guys were around. We would learn more about the overall visual language and emotional connection from the brand to the consumer and make educated decisions in User Experience that would create a seamless path from the screen to the product or service. We all wanted one thing.  To make good work. I believe we were very successful at that.

Translations and Explanations

In working with those seasoned, experienced and educated in the creative field that do not have a ton of experience in the digital aspect of design, there are often language barriers that may come up. Again, you’re the CSS gal who opens up Sketch and not Photoshop. You understand the importance of Post-Its and not giant Mood-Boards. You feel that keeping content digestible is more important than the eloquence of the prose placed on a web page where we only have 1 to 3 seconds to grab a user’s attention. The following is a quick translation guide that might help you all work together.

It feels a little tight. Can we adjust the leading to air it out a bit?

Leading = line-height;

Leading (as in metallic lead) is by definition in reference to the metal slabs that were used to create space between lines of text in a type-setting machine. The reference to feeling tight, heavy or dark is in reference to the visual weight of the text in the layout. The terms “air it out”, “lighten it up”, or “brighten it up” are in reference to that visual weight. It’s essentially about being legible and about content consumption and the feeling that is conveyed by its presentation. If your line-height is set to 1.25 in your headlines, huddle around a screen, jump into the inspector with your team and toggle it by .05 increments. You’ll benefit from the CD’s attention to detail and your CD is going to be impressed by your browser magic! Win/win. Go team.

The kerning on the “q” and the “u” look off. The tracking overall seems a bit tight.

Tracking = letter-spacing; Kerning = <does not exist />

Tracking is the uniform space between your letters — or letter-spacing. Similar to leading, the closeness of characters can influence the overall visual weight in your layout. “Tight” or “Crunched” might be used by your Art/Creative Director as an indicator that they want the letter-spacing increased.

Kerning unfortunately does not exist currently in our world. There are unique cases where we may place a span around a static title to recreate the letter-spacing on two particular characters to mimic branding that may have been preset in Photoshop, InDesign, etc. This is very rare. As we know, most content in a website or app is dynamic. It is inefficient to take the steps to override the “q” and the “u” relation in this case. You may have to explain this one a couple times. Sorry guys, no way around it. Hey, at the end of the day we aren’t solving world hunger right? I think you all will make it through this little bump in the road. I believe in you!

I see an orphan. Can we make sure that gets fixed prior to launch?

Rags, widows, orphans etc.

Wait, what in the motherless child? An orphan? You may hear these terms thrown at you from your AD and/or CD. Don’t panic. The key word for you here is “responsive”. As we know and or aware of, the web is fluid. Device types, screen sizes, operating systems and browsers are all different. We set margins and words fall where they will depending on so many variables it’s impossible to imagine all of them. Here’s a quick explanation of each of these.

Rags are wrapping lines of text that may appear shorter/longer than the rest of the lines in the block of text in the layout. Not much we can do about this one. Advice would be to change the browser size with the AD/CD present to show them that those rags don’t always exist, and in turn sometimes others are introduced due to the browser window being resized.

Widows actually do not exist on screen. This term exists as a description of the first line of a new paragraph appearing at the end of a physical page. This creates a disruption in the digestion of content when reading — a BOOK. You remember books. Those big beautiful covers that we open up and actually turn the pages? Man I love books. But I digress. Widows do not exist on the web.

Finally orphans. No, not a kid left alone in the world without parents. It’s a leftover, lonely word on its own line at the end of a block of text. This is also an item created by the fluidity of the web and the array of methods which we all view it. Stretch the browser window? No more orphan. Shrink it back down? Orphan somewhere else. There are ways to work around this. You can write a function to search out the last 2 (or more) words in an element and split them inserting a non-breaking space (&nbsp;). Just be sure not to do it with more than the last two words in an element or you may be forcing a rag! While you’re at it, be sure to check if the words contain a link or your link is gonna go about as far as my Dodgers went in the playoffs this season.

We need to make sure that Sub-Headlines are set in Gotham Black, not Gotham Bold.

Webfonts

Aah, Gotham. Such a beautiful, diverse, useful font. Thank you Hoefler & Co. By the way, if you haven’t, please watch the episode of Abstract: the Art of Design on Netflix that features the great Jonathan Hoefler himself. If you know me, you know my addiction to typography. This was wonderful.

So let’s talk about how frequently that sub-headline style is going to be utilized in the website. Let’s say this project is going to use one sub-headline per two views in the site. And let’s say that Gotham Black is not to be used anywhere else in the entire layout of the site. Gotham Black is going to weigh on our user’s load time. The way web fonts work is that the entire font library must be loaded (at least at the time of this post). So that sub-headline design choice is going to effect the overall performance of our project. Let’s also talk about how Hoefler & Co. and other type foundries, will charge a dollar amount over a certain amount of visits on your project per month. Now we have 2 libraries to worry about going over the load limit. If the UX problem doesn’t concern the team here, money will usually do the talking.

It’s About the Work

In closing, we as designers and developers of the web and screen, have so much to learn from the traditional Creative Directors/Art Directors of the world and vice-versa. The potential is there to work together and create something great, and the work will definitely reflect it, benefitting all involved (ultimately our clients). I’ll wrap with a quote on digital design that I love by Simon Collison.

Our work goes beyond borders, accessible at any time from any location, on any number of browsers and devices, at varying speeds, on multiple resolutions. And it is consumed by humans, each with a brain a little different from the next.