Brian Lucid: What Is Front-End Design?
I really don’t mean to be all bloggy, but I need to write this, because it’s bothering me.
Front-End Design is a specific term that describes a set of competencies for individuals who work at the intersection of traditional front-end engineering and user interface (UI) design. A strong front-end designer should be able to:
- Understand, critique, and help improve a basic interaction…
I want to critique two points in here that seem to me to be at odds with each other. However, Tumblr truncated the original post, so I’m going to be angry about that for a minute.
Erm. So.
Create pixel-perfect page structures through front-end markup code.
Ok, good, but what if, during the markup process, you find a condition that the designer didn’t account for? Obviously, you talk to them like a person, but too often that step is ignored for the sake of “well, it’s in the comp, so I’m gonna code it up regardless” and the overall project suffers. Be a person. Ask questions, and question assumptions. Simple designer omissions and oversights can really fuck things up for a developer (said somebody who’s fucked up other developers with an oversight in a comp, and as somebody who’s been fucked up by a designer forgetting something important).
Pixel-perfection is fine and all, but it’s at odds with this:
Keep track of emerging technological trends, understand their impact from a design perspective, and educate designers to empower them to design for the greatest, most up-to-date user experience possible.
Great! I’m all in favor of that. Let’s keep making the internet better. Beautiful.
And you know what’s emerging as the New Thing That Websites Should Really Do Because Analytics Say So?
Responsive design.
It’s difficult (pronounced: time consuming, expensive, and requires actual work) to comp out *exact* pixel-perfect comps for every single display resolution and device. We usually plan out a mobile, tablet, and desktop flavors of a site design, and experiment and iterate as we code. Coding is part of the design process, and “design” doesn’t stop when the designer hits send on an email with the PSD file in it.
When you’re building a site with responsive design techniques, there’s so much variation that the old-school idea of quote-unquote “pixel perfection” simply can’t deal with. The idea of using variable widths (and breaking floats and scalable images and blah blah blah) is directly at odds with the classical idea of “pixel perfection.” So don’t strive for it, because it’ll just lead to needless frustration and the work will suffer.
So, in the spirit of George Carlin, here’s my revised list:
- Build a close relationship between designers and developers, so mistakes are caught, oversights are attended to, and iterations are natural, expected, and productive.
- Comp, code, test, repeat. Change resolutions and change devices. Then comp, code, test, and repeat.
- Understand why a product behaves the way it does.
- Keep track of emerging technological trends, understand their impact, and use them intelligently when — and only when — it helps solve a specific problem or reach a particular design goal.