The Hermeneutics of Web Design

TLDR; Web Design is open to interpretation, and the physical Photoshop designs are merely a guide. Live data, responsive web design, and CSS authoring all play their roles in deconstructing the ideal scenario on which the design was built.

WTF is Hermeneutics?

Hermeneutics is the theory of the interpretation of written, verbal, and nonverbal communication. One of the best ways to describe hermeneutics is with the interpretation of the Bible. Some sects of the Judeo-Christian faith believe the story of Adam and Eve in the book of Genesis to be fact. Others, however, see the story as a parable of humankind’s fall from grace.

Another example might be the Declaration of Independence. In which Thomas Jefferson writes, “all men are created equal.” Putting aside that this group does not include women, back then it didn’t include our current standards of “men.” Back then, slaves were given 3/5 the weight in political representation.

Physical text aside, hermeneutics can expand even further to all forms of communication, and ultimately drives at “how we know what we know.” If all forms of communication are open to interpretation, how can laws or other tenets of society exist?


Hermeneutics and Web Design

It seems that in no point in web design history has the gap between designers and front end developers been any greater. While there are many cases of people who can span both worlds, most web designers come from a more traditional print/graphic design background. As colleges and universities struggle to update their curriculum to the rate at which web technology changes, this may be a problem for years to come.

With the advent of responsive web design (RWD), there have been many attempts to move away from traditional Photoshop designs and into a more interpretive approach. Style Tiles, designing in browser, even programs like Macaw which try to bring the experience of Photoshop into the browser.

So why the sudden shift? Because the web is fluid. Content changes from page to page. Items and links need to be optimized for touch devices (44px x 44px). CSS shouldn’t be written for a page by page basis, but as a global, modular cascade.

Taking all this into account, Photoshop designs become open for interpretation. If the designer used a certain shade of medium gray on the homepage, and a different hexcode on the about page, I think we can agree that those grays can be consolidated into one. If the designer is being lax with having 9+ different heading and text styles, let’s consolidate them down to 8 for heading 1-6, body text, and intro text.

In the end, both parties want to make the best product possible, and there needs to be concessions made for whatever is best for the user. If the user is already frustrated because of the page load time due to the 10 high res image slide on the homepage, are they really going to feel better when they see your “creative” layout with the chevrons you’re so proud of?

So what do you think? What’s the best solution moving forward? Any horror stories to share?

posted in: design, Front End Development
tagged: , ,

1 Comment
  1. Dmitri Pisarev

    Hey Pete, that’s just what I’m going through right now. Like your example with hermeneutics.

    Our designer works in InDesign, and there’s somewhat better transition from there. I make her map all of the styles she uses in a project to tags and classes (there’s such a feature in InD), and export things to html. I also make her name all of the components on the page, so we would have a common vocab for the project, and also make her use object styles.
    Then I take the CSS produced by InD and refactor it the way I like , move more general things into _settings.scss file of Zurb Foundation and so on.
    So I think that’s how it should work: the designer should cleanup the project and map all of the styles correctly before handing in the stuff to front-end coder.