Unit Interactive

The Consummate Web Designer

by Nathan on 8.26.08 | Comments (10)

Design portfolios these days are stuffed with traditional odds and ends: a few logos, some packaging, some print, and—to appear relevant—a bit of web work. This betrays a disturbingly pervasive view of web design as being yet another socket wrench in any given designer’s toolbox. As a discipline, web design has specific needs and benefits that demand experience and informed approaches, specific to the media. Ignorance to these necessities causes those factors to be skewed, downplayed, or outright ignored in order to force the web to fit anachronistic and inappropriate ideas of design.

Web design is its own unique discipline, and therefore requires a distinct type of designer. This consummate web designer has the expertise to focus not only on aesthetic appeal, but also clean, semantic markup, empowering them to fashion the well-crafted web product that clients are growing to expect. A chronic failure to see this within the creative industries is creating needless tension and is draining countless dollars from both agency revenues, and the profits of their clients.

Designers Don’t Code. Web Designers Do.

Beyond Photoshop or Dreamweaver, the most consequential resource for a web designer is the intimate working knowledge and understanding of the web’s constraints that can only come from developing front-end code. Constraints should be nothing new to designers. No matter the media, design practitioners operate under restrictions 99% of the time. Finding ways to transcend limitations distinguishes us as artists, but only doing so when it is relevant and appropriate grounds us professionals. This is where web design breaks from the more established design disciplines: The web requires a designer with an aptitude for understanding front-end development languages and how they balance and/or constrain the aesthetics.

Any web designer’s driving focus must be to create a functional, contextual and visually appealing experience. To do this well requires a skill that every design discipline requires: the imposing of control to even the most meticulous of details. For the consummate web designer, this includes crafting the entire product, especially the front-end code. They do not merely provide the design concept because to them, that is not web design, its speculation. Handing off layouts to another person for development is surrendering the control of too many variables. Does this other person have the same intimate understanding of the project goals? Does he or she have the same level of care about details such as negative space and color distribution? Do they even know why Georgia was used in order provide an appropriate font substitute in the CSS? A web designer should understand that everything that controls the display of a site’s content falls in to their sphere of responsibility, because only a designer’s expertise is suited to deliver the scrutiny and craft needed for a truly quality product.

Designers that detest the idea of touching code don’t need to learn it. They can go off and be the great designers they know they are, but they should avoid the web altogether. Also, front-end developers that do not consider themselves design decision-makers need to realize that they inherently make decisions that directly influence the design, and should be knowledgeable about the results of those decisions. Whether they like it or not, they are playing the role of designer, and that is not a responsibility that should be low on any priority list.

Being A Consummate Web Designer is Not Idealistic—It’s Practical.

The fewer the moving parts in an engine, the more efficient it runs and the easier it is to maintain. In the communication between designer and developer, there are important points that should be communicated in order to correctly bring a client or designer’s vision to life. Most of these points are lost when the designer and the developer fail to understand the other person’s importance and function, and even in a great designer-developer relationship, consequential things are still left unaddressed. Lost points of communication can each cost time and energy, and when they are summed together, they can cause projects to become longer, more tedious, and more expensive. Even the points of communication that are addressed between a designer and developer still take time: time to formulate, time to be explained, and time to be understood.

Many shops expect their team of designers and developers to form like Voltron and attack their client’s problem, but traditional designers and developers don’t fit together so easily. The amount of knowledge that each side represents cannot be understood and trusted without a long period of successful exposure. Designers brim with history, inspiration and critical thinking. Similarly, developers have a lot of power and knowledge at their command, and are capable of so much more than making pretty pictures flash up on screen. A consummate web designer has a fully realized understanding of both sides. They have been behind the pencils and down in the code. They have seen both first-hand.

Therefore, the web designer can bridge the gap and alleviate an enormous amount of pressure by stepping in and taking control of front-end development. Once that happens, important design issues that may modify HTML structure, or CSS styles, can be decided on the fly, details can be honed to the level a designer expects (without anyone getting frazzled), and overall quality can be elevated. This allows timetables to be accelerated, and your developers get go solve the bigger problems that are holding up the launch date.

The Awakening

Most creative types who feel compelled to transition in to building front-end code initially find it daunting, due to both the constraints of the medium and a narrow understanding of development languages. For a dedicated person with the correct aptitudes, though, front-end languages can be picked up in a matter of weeks, and then extrapolated and honed to precision over years of working experience. Sure, it may start ugly, and there should be a gradual shift of responsibility, but any willing designer should be able to evolve his or her own front-end skills to a professional level.

Front-end development is a craft, and as in all accomplished design, there is an underlying order to code. This structure is conceived and organized by methodically trained thought processes, and though multitudes of software try, an automated system cannot successfully generate code. Therein lies the artistry.

As in any craft, a designer must first learn the irrefutable rights and wrongs before they can surpass them, and thankfully, there are plenty of online and physical resources to aid in that education:

• Beginner

• W3schools

  Start with the basics. This site starts with “What is HTML?”, and builds to a well-rounded understanding of front-end (and some back-end) languages.

• Colored Boxes Tutorial

  A highly recommended tutorial on modern day development practices.

• 
  Intermediate

• Designing with Web Standards by Jeffrey Zeldman

  This book clearly illustrates how and why of modern front-end practices.

• Web Standards Solutions by Dan Cederholm

  A comprehensive development recipe book that follows the best of practices.

• A List Apart

  Not only a great resource for designers, ALA keeps up to date with many aspects of development as well. The code section is a pretty good place to start.

• 
  Expert

• Google

  The most used developer resource. Hit a wall? Let Google digest your quandary. The expert’s trick is to know which solution to use when, and which are unfortunate wastes of time.

Moving from development in to design is a bit more of an undertaking. Design is intangible, and testing or research cannot definitively quantify its effectiveness. Also, the success of a design is in many ways subjective, while clean, efficient code is a measurable goal. Thankfully, though, there are traits common to both the best web designers and best developers that can ease this transition: Both understand the balance of form and function. Both believe in the importance of clear, effective communication. And both are cautious of following flashy trends.

Design is not a whimsical practice. A developer’s established understanding of logic, order and minimalism is fertile soil for design intuitions to flourish. A budding designer can then supplement this intuition with an education in the fundamental elements of design such as typography, grid systems, and a history of design communication. Finally, the crucial part is learning how to harness inspiration, develop critical thinking, and continue to cultivate these skills over a lifetime.

As with development, there are plenty of online and physical resources to aid in this endeavor:

• Beginner

• Everything

  Right now, become a sponge. Observe everything and develop a passion for even the most trivial of subject matter. This not only encourages strong design skills, but can also lead to better development.

• A History of Graphic Design by Phillip Meggs — also summarized here

  Meggs created the most exhaustive collection of design achievements. Plus, its filled with eye candy.

• Elements of Typographic Style by Robert Bringhurst — also applied to the web here

  The most referenced and celebrated book on typography’s history and practice.

• 
  Intermediate

• A List Apart

  Not only a developer’s resource, ALA has plenty of thoughts on design as well. Check out On Creativity, and Design is in the Details, or just browse the design section.

• Don’t Make Me Think by Steve Krug

  As stated before, designing for the web has it’s own unique expectations. Begin understanding them here.

• Transcending CSS by Andy Clarke

  Andy has compiled a great resource for creating designs that push the limits of CSS.

• 
  Expert

• Web Design Showcases: CSS Beauty, CSS Mania, etc.

  These sites are reservoirs of inspiration and unique design thinking. While this is surely hopeful for designers of all levels of experience, only those who have developed their critical thinking skills can decide how best to channel these thoughts, rather than just blindly mimic.

These resources are, of course, only a place to start. This in no way represents the definitive curriculum of a design or development education. Any one problem, in either the code or layout, could have myriad solutions, each with its own strengths, weaknesses, and complications. A full understanding of all these angles in the online environment is required for effective, informed design. The discipline of web design is maturing, bringing simplification—as we begin to establish precedents—and more complications—as we learn how to transcend those precedents.

The Net is no longer the Wild West it once was, and as it is tamed, the responsibilities of those who shape it will continue to grow. The consummate web designer will continually mature and evolve to meet this challenge, by intimately engaging the decisions that affect the quality and relevance of the work, not only to make him or her a more potent professional, but also to ensure lasting benefits for his or her client.