What is
 Frontend Design?

What do YOU call a designer who also understands front-end development? Here's one (frontend) designer's point of view.

FrontEndDesign_Hero.jpg

What do you call a designer who also understands front-end development? Many titles have been thrown around in an attempt to answer this very question: interaction designer, design/UI engineer (getting warmer?), designer-who-codes, responsive designer, ….unicorn?

Personally, I’m a fan of an emerging term, “frontend designer.” It combines the key components of both job descriptions in what IMO, is the most clear, straightforward way.

The Germans do a thing — which is totally grammatically correct by the way — where they just keep squishing adjectives together to form longer and longer words when the speaker or writer doesn’t feel one exists already that adequately communicates their intended meaning. I, for one, am fine with jumping on that bandwagon if it means companies will stop posting job descriptions for “ninjas,” “gurus,” “rockstars” and the like.

Brad Frost sums it up like this:

“Somewhere between design — a world of personas, pixels, and polish — and engineering — a world of logic, loops, and linux — lies frontend design. Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.”

Ok, I admit, the javascript part makes me a little nervous. I know just enough to be dangerous. I don’t think that’s probably so unusual among frontend designers who have come from a design, as opposed to engineering, background.

Maybe it’s taking longer for that language to “click” with me because javascript is a programming language whereas HTML and CSS are not. I love this quote from Leon Barnard over on the Treehouse blog:

"Shhh…don’t tell anyone, but HTML and CSS aren’t really programming languages. They don’t compile. If there’s an error in your HTML or CSS, the browser just skips it, or does its best to show what it thinks you meant. There are no if-then statements. You can’t send a satellite into orbit with HTML and CSS.
HTML and CSS are rules for styling and structuring content. That’s it."

PREACH LEON! #micdrop.

When we’re writing HTML and CSS, we’re defining content and making decisions around appearance, usability, and interaction. We’re designing. But instead of using Photoshop or Sketch, we use a text editor and a browser. Our tools are different — our role is not.

So what’s the difference between design and front-end development?

Syntax.

Sometimes before designers hand over their gorgeous .psds to a developer, they actually write down design specs for them. “The spacing here is 24px. This background color is #fefefe.” If you’re going to do that, you might as well just do this:

div {
margin: 24px;
background: #fefefe;
}

And while you’re at it, maybe you’ll change your mind (as we designers are wont to do) and decide it should actually be more like this:

div {
margin: 0;
padding: 1.5rem;
border: 1px solid #ddd;
background: rgba(255,255,255,0.8);
}

Congratulations. You’re now a frontend designer. Now sit back, have a cocktail, and think about how you won’t have to do “visual QA”.

At Siteworx, we’ve brought front-end development onto the design side of our process — and we’re not the only ones. Companies like Shopify and Optimizely are doing the same — with resounding success.

“A UI Engineer’s ultimate goal is to create great customer experiences, just like our designers. This is why they’re on the Design team.”
Jeff Zych, Design Manager at Optimizely

Just because front-end dev is on the design side of our process (in the Kanban board and not the dev scrum) does not mean designers are now suddenly developers and vice versa. Of course we still need both unique specialties and skill sets. But, we are blurring the lines.

In designing for the web, there’s a constant push and pull between what is desired and what is wise or possible. And there should be. Let a visual designer go crazy with giant images and fancy plugins, your site’s performance will be abysmal. Likewise, let a developer make all the choices and you’ll end up with…well, Craigslist.

Whether you hire actual “front-end designers”, or have visual designers come in after a developer’s first pass to fine-tune or make “tweaks” in the code, including this cross-disciplinary role in your process will undoubtedly improve project efficiency as well as outcome.

The silos designers and developers have traditionally operated within are antiquated and unrealistic when considering the complexity and sophistication of today’s Web. How a website responds to any number of user variables — device type, screen resolution, accessibility needs, location, bandwidth availability — is the experience.

Trying to design something that stands up against all these different factors is challenging on a good day. It can be downright impossible without knowing at least a little bit about how each should inform your decisions.

Achieving a good user experience is the result of savvy execution of both visual design and code. The responsibility does not lie within one discipline or the other, but somewhere in between.

Embrace your dual nature — the creative and the technical sides that make you a “frontend designer”. Or whatever you want to call it.

GET IN TOUCH

Send us a note. Drop by. Or give us a call. We would love to hear from you.

Say hello.
Send us a note.
We park here, but work globally.
11480 Commerce Park Drive, Fifth Floor, Reston, VA 20191
  • Chicago
  • DC
  • NYC
  • Raleigh
  • Rochester
Ring. Ring.
1.844.256.0329