There's been a shift in the role that front-end engineers play in the website design process. Back in the day, great website design was difficult without a graphic designer; and decision-makers tended to gravitate towards brainstorming on usability and information architecture at the graphic design phase of the development process – which began and oftentimes ended before front-end engineers were really involved.
Today this is no longer the case. The role of front-end engineers has changed.
That Was Then
Before CSS3, without advanced Adobe Photoshop or Illustrator knowledge graphic designers were the ones who produced design elements like rounded corners, nonstandard OS fonts for headers, background gradients, good-looking buttons, icons, and so forth. It couldn't be done with code, and the visual medium to deliver these elements to project stakeholders was the design mockup:
Changes could be made quickly. Consequently, discussion centered around mockups; before any front-end engineering costs were incurred. Doing so was almost always more efficient and cost-effective.
Non-coding stakeholders – customers, project managers, executives – also preferred mockups because they could actually see and understand what the final product might look like. The Web was new.
For all of these reasons front-end developers found the bulk of their contribution to projects on the implementation side of things, i.e. turning completed mockups into code. They understood what kind of code the back-end team needed, and had the skills necessary to turn graphic design into pixel perfect – the standard of excellence back then – cross browser friendly code.
This Is Now
CSS3 made it possible to produce design elements directly in the browser as code rather than image mockups. Need a corner radius on an element? No problem, there is a property for that. Need to respond to different screen sizes? Done. Need a color gradient? Easy. Advances in CSS make it more efficient to produce dynamic and responsive prototypes with CSS3 rather than static mockups.
There's just too much variation, and the variation is beginning to go well beyond the typical screen sizes shown above. Browser prototyping by nature is more representative of how a webpage will ultimately look and behave across different devices. Users can instantly access and interact with a prototype on any device anywhere, but not with a mockup, and understanding the capabilities and/or limitations of browsers and devices in a constantly evolving landscape is a necessity; an area of expertise more often than not found with front-end engineers.
The Action is in the Browser
Yesterday the action centered around the design mockup, but today, usability, information architecture, and design decisions are beginning to convalesce around the point where front-end code is written, namely, browser prototyping.
Of course design mockups are incredibly useful in informing prototypes, but bringing front-end engineers to the center of the design and development process from the get go will translate into a quicker, iterative, interactive, and agile design process.
The takeaway, the role of front-end engineers has changed...
Think of yourself as a coder, an architect, and an artist. Your canvas, the viewport. You are the handshake between design and logic and can work in either realm. In addition to coding prowess, understanding the elements of good design, the "art," is essential to your success and the success of projects you participate in.
One final thought: never undervalue the hard earned design talents of graphic designers. Beautiful design is not easy.
4/18/14 Update – Since writing this I stumbled upon this article by the folks at Basecamp that really highlights some of the points I'm writing about:
Why we skip Photoshop
Want to know when the next article is published? Subscribe here. Thanks for reading!