Many designers don’t think about the code behind the sites they design. This is a huge problem because it slows web projects down, which costs money. The good news is designers don’t need to learn code; they just need to change the way they think.
Stopping the Chinese Whispers
Whether you’re building the latest, greatest web app or the next big online magazine, there’s nothing more important than clear communication between all your teams members - from the content authors to the developers.
It’s good business practice to make sure everyone is kept up to date with meeting minutes, the correct specs etc. One thing which is missing though, is a clear understanding of semantic document structure across the development team. This simple concept, if understood by the entire team, can save a lot of time on a project.
The way designers think
You may think, especially if you are a designer, that semantic document structure doesn’t matter - “It’s something the developers need to know about, not me”. This isn’t the case. You do need to know, but you don’t need to learn the in’s and out’s of HTML to do it. You just need to alter your thought processes ever so slightly. Unfortunately, this can sometimes seem like teaching an old dog new tricks.
Designers are a funny bunch. Most designers have two halves to them: the analytical, problem solving half and the artistic half. Sometimes, although rarely, these two halves combine to create some very special work. A lot of times though, a designer’s mind is one in turmoil.
Throughout design school, Designers are taught to solve problems, visual problems, in a very touchy-feely kind of way. Sure, we are taught to examine a brief, do preparatory work and research, and generally think (and rationalize) a lot about solving the visual problem, but when it comes down to actually producing the work, it’s a different story and the right half of the brain kicks in. We begin to think in visual terms and act very much on instinct. I’m not saying this is a bad thing, it’s just different to the way many people approach their work. If fact, in a world where it is expected to explain your decision making, it can be quite difficult for a designer. You see, turmoil.
As building in Web Standards has almost become commonplace, the use of semantically rich markup is extremely important. Not only to allow the use of CSS for presentation but also to ensure the structure of the content is presented in the way the author intended. This is where I think designers are tripping up, especially if they are new to the industry. We’re just not interested in delving into code. Wading into the latest tome on AJAX just doesn’t yank our chains - we’ve got enough on our plates trying to keep up with the shifts in graphic design culture throughout the world. Why the hell should do we need to learn code as well?
Well, the good news is. I don’t think we do.
Designers need to go back to the very roots of the content and engage the left side of the brain.
It’s not about code - it’s about meaning
Now you’ve had an insight into the dark place that is a designer’s mind, you may have an understanding why the graphic designer you’ve just commissioned to design the UI on your latest web app gives you a blank look when you mention semantically rich document structure. Don’t worry. Designers already understand semantically rich document structure, just in a slightly different way.
As we all know, in most documents there is a structure and a hierarchy of elements, from letters up to chapters.
Here’s a list, which is by no means complete, that explains what I’m talking about:
- Words - Sentences
- Sentences - Paragraphs
- Paragraphs - Sections
- Sections - Chapters
- Chapters - Document
You could of course go more granular than this, but I think it illustrates the point.
From this you can see how, by looking closely at the content, that the language can be broken up into chunks, into bits of semantically functional elements. So, you could say that documents have a conceptual structure
.
This won’t come as a surprise to you. An implied structure in a document is something taught very early on in school but you’d be amazed at how many designers forget this when they are given something to design. Sometimes the structure goes out of the window for the sake of something that looks good.
Most designers don’t think of content in these terms, they think of written content in terms of visual hierarchy - of visual importance. In the designer’s eyes, that is an essentially what semantically rich content is, it is visual hierarchy. Once a designer becomes used to thinking in this way, the whole semantic content thing becomes so much easier to swallow.
Matching models
Earlier on I mentioned how this can save your development team time and money. The key to this is matching models. You need to match models throughout the process, and there are four of them:
- The author’s model of the content
- The designer’s model
- The developer’s
- The reader’s
For a product to be successful, or for your team to work cost-effectively, these models all have to match up. The designer should understand where the author is coming from, as should the developer and the reader. If the reader understands, and likes it, then you’ve done your job well.
The common concept throughout is meaning. Understanding of the content and its presentation. Otherwise known as semantics.
It’s not just designers
Yes, that’s right. Just because you’re a journalist or a developer doesn’t mean you get off lightly.
Most journalists I’ve worked with over the years understand little of document structure. Or rather, they sometimes do but can’t communicate it effectively.
The same can be said for Information Architects (IA). Many IA’s are focused on user and functional requirements (and rightly so), but this can mean they are less focused on the semantic meaning of page elements at a granular level. In practice, that can mean a designer receives wireframes which may not match the author’s mental model.
Many developers understand semantics. In fact, many of them understand it so well they go round and round in circles trying to analyze every bit of content under a semantic microscope. This can also kill your project dead. So, lighten up developers, the meaning of content elements isn’t always black and white.
Change the way you think, and engage your (left) brain
I’m going to pick on the designers again.
Next time you hear the word semantics, or semantically rich tags, ignore them and think visual hierarchy. Or typographic hierarchy. Don’t get turned off by these phrases. It just means hierarchy.
I know I was turned off initially by the concept of semantic document structure, but once I got my head around what it meant in visual terms, this Web Standards thing everyone was talking about suddenly seemed to make sense.
Like this article? Digg it!
[…] Designers, Engage Your Brain says Mark Boulton. You don’t need to understand HTML but you do need to learn to think differently. […]
@ boulton ” It’s not about code - it’s about meaning ”
really? You always have to put two and two together. My main main Dustin Diaz did naked day to see how many websites still would stand with only HTML without the css styling. Each website should be build like that, problem is that designers do have a shortage of knowledge when it boils down to progressive enhancement and degradibility. so when js is off, the site is off as well, is the HtML not logically structured site off as well. it is really important that a designer at least be proficient in understanding these mechanisms.
Then we have imagery incorporated in asite that allows a website to communicate not only to be decorative. This is where developers might fall short. So yes, a team is the best solution only if you as eg a freelancer would not have additional skills etc. I asked in a small write-up (english is my second language but I started writing again so these skills will improve in time) about people working in the web business about their skills: a-new-breed-of-webdesigners
” Change the way you think, and engage your (left) brain ”
The left side of the brain processes information in a linear manner. It processes from part to whole.
In addition to thinking in a linear manner, the left brain processes in sequence. The left brained person is a list maker.
The left brain has no trouble processing symbols. Many academic pursuits deal with symbols-such as letters, words, and mathematical notations. The left brained person tends to be comfortable with linguistic and mathematical endeavors.
The left brain processes in a linear, sequential, logical manner. When you process on the left side, you use information piece by piece to solve a math problem or work out a science experiment. When you read and listen, you look for the pieces so that you can draw logical conclusions.
Left brain students have little trouble expressing themselves in words.
While an overall good piece, I feel it lacks in giving a tangible solution for designers. All I can really find is “ignore them and think visual hierarchy” — not a very thorough or descriptive piece of advice, if you ask me.
I guess I’m just left wanting more of a real-world solution to communicate to designers. Like, a part 2 to this article. :-)
@ Faruk
Exactly what I tought (je slaat de spijkers met koppen, man).
I worked once in a team with 3 people: multi-media designer (he did NATO website on the two screens), webdesigner (who was a webmaster and interior designer) and me the webdesigner-webdeveloper. It was great, we did not have to speak, it was intuition and telepathy.
[…] Designers, Engage Your Brain - “Designer don’t need to learn to code, they just need to change the way they think.” […]
[…] Designers, Engage Your Brain says Mark Boulton. You don’t need to understand HTML but you do need to learn to think differently. […]
[…] Are you a Designer? Is your brain engaged? Mark thinks it should be. […]
[…] Does a designer require thinking from code behind aspect of the site? Yes, as Mark Boulton suggesting in his article, designers need not to learn any code to design any site but they just need to change the way they conceive different attributes in web sites. Must read! […]
I find this to be a rather strange article, as suggested above it seems to be missing any real solution to the point at hand.
Anyway, I think any designer that is working on the web should have a good understanding of HTML/CSS it helps you know the limitations and quirks of design for the web. That being said, designers need to think outside the box and thinking in code terms can restrict them…
Ben: I take your point, a practical example could’ve helped. However, I wanted to focus on the shift in thinking rather than debating the semantic elements of a particular document (as these examples always tend to go that way).
What I was trying address with this article, despite in quite an abstract way, is the problem graphic designers have with code. I’ve worked with a lot of designers over the years - in print, web and motion design - and a lot of them still find the code a stumbling block. They don’t want to learn it because they find it difficult, or they’re just not interested in code.
Also, designers generally think in visual terms, which (in my experience) goes against the grain of thinking in terms of semantic document structure. At first glance, to the designer, there seems to be a gulf between the two. I was hoping to show there isn’t, you just need to think slightly differently.
I agree with Ben’s comment, although designers should have a basic understanding of how HTML, CSS and JS work and interact, most of them don’t. Most, however, do seem to know how they should design for it, but are unconcerned with the details, such as whether something should be a heading or in bold. It’s our jobs as developers to communicate designers ideas into a meaningful structure.
I also agree that designers like to think outside the box, and probably prefer to design for Flash over HTML, due to it’s lack of constraints - but shouldn’t having these constraints give designers more scope to work “outside the box”? Wasn’t it 37signals who said “Constraints breed breakthrough creativity“?
Good article by the way, Mark, I agree with nearly everything you said!
Sounds to me like a series of “Green” designers are being described in this article. If they are not following design documents for concepts like fucntion before form, well, they are not very good or are pretty new. Getting an illustrator to design the visual assets to a website doesn’t make them a web designer. They are an Illustrator trying to design a website (probably not to well either).
Also, designers generally think in visual terms, which (in my experience) goes against the grain of thinking in terms of semantic document structure.
The two co-relate that is just the point. It is a page, a webpage. And you need to think in terms of how they interact. Code and Art.
Some interesting words I found;
I suggest you read this:
http://terra.cs.nps.navy.mil/DistanceEducation/online.siggraph.org/2001/Panels/06_VisualizationSemanticsAndAesthetics/cdrom.pdf
Mark,
A nice article, and I second Mr. Ateş on the example suggestion: just an illustration of how the visual model, the document model and the markup model contain the same basic structure and how elements of these models relate to eachother. Perhaps indeed a sequal?
Also, I agree that designers probably shouldn’t spend to much time digging through markup, styles and scripts, but it does help for them to understand the concepts and have an insight into what’s possible and what’s not (or too hard to be worth while).
I guess seasoned web designers might very well have gained this insight already, if only through repeatedly being told off by developers, but those inexperienced in all things web may benefit greatly from your article.
@Johan:
Although this is not the place, I think you are confusing:
“Spijkers met koppen slaan”
and
“De spijker op zijn kop slaan”
which you seem to mean here.
Best regards,
Ronald.
My opinion:
If you want to a be a ‘good’ designer, then design within your box.
If you want to be a ‘great’ designer, then learn the code or developers’ boundaries and figure out how to break out of the box with your design.
The only thing that made sense was the last paragraph. I dont get why hierarchy of a page has to do with designers…. or why we have to think about markup. If we have to understand more then we do then we should get paid more. Why do coders get to not care about design but they always get paid more then us?
I don’t get why CSS is important. tables work fine… I use CSS so that the damn text wont change sizes in the browser and to do funky text hovers. I use jscript and whatever other junk I can find to make a page look nice and usable. I create a design….I hand it to the coder….and they code it….
I check my static stuff in about 7 browser versions and 3 OS’s….. I make sure it looks proper….adn then I post. Who the heck cares if the thing “validates”? You have 2 main browsers that treat the box model differently and it is a pain in the ass when it looks right in one but then you break it in another. I would rather use tables and at least now after 7 browser generations you can get it to friggin look right. Now all of a sudden you have to do this new crap that makes everything break all over again. All the crap we used to put up with like iframes and hovers etc in the late 90s is no longer a problem and now we create more problems for ourselves. AJAX?!?! We created selective refresh which manipulated the DOM in 98 and had stuff loading from the DB. But because of all the browser versions we couldn’t go to market with it because there would be lack of adoption.
WHO CARES IF IT IS A HACK?!?! AS LONG AS IT WORKS!!!!! I say down with “standards”, I say screw CSS. I say that if designers have to learn semantics, coding or otherwise we should get paid twice what coders do. Without us all the coders work wouldn’t make any damn sense anyway.
YES.. I am disgruntled and I hate my job.
For those looking for ar real world example, maybe this will help. Coincidentally, right from Mark’s own site.
There does seem to be a bit of a misunderstanding. I’m not suggesting that designers shouldn’t familiarize themselves with XHTML and CSS - indeed, designers who do, will benefit greatly from knowing the platform they are designing for. I am suggesting however, that designers don’t have to learn the code to, they already have the mental models from which to draw and create semantically rich designs.
Semantics don’t begin and end with tags.
If we have to understand more then we do then we should get paid more. Why do coders get to not care about design but they always get paid more then us?
Good coders do care about design, just as good designers care about the semantics behind the code. Instead of whining about it, why not try and understand the principles, and who knows, you might actually get paid more with a broadened skillset
It is my experience that backend developers and coders don’t appriciate semantic html to the degree that front-end designers (XHTML/CSS guys) do.
Most likley due to the fact that the web designers and front-end coders have dealt directly with the look & feel of the site where as the developers just take that html “as-is” and chop it up with databases and forms, etc. They have not had to solve the problems of semantics, seperation of content or accessibility to arrive at the final markup and so don’t appriciate the choices that have been made and simply see the end result.
It is not nearly enough just to create the XHTML/CSS pass them along and shout “next!” as designers we should follow our stuff through to the end of the design/production cycle or we just might get a nasty suprise when the email to say the site has gone live arrives at our inboxs.
If anything, good designers already understand the visual representation of document structure very well. They just do not always know how it is achieved at the code level.
The people who really need to learn about structure and semantics are the non-designer/non-developer content providers.
I think the article hits the nail on the head by listing the four different views of content - author’s, designer’s, developer’s, reader’s. Recognising that these are different views of the same content is crucial when you’re working as part of a multi-disciplinary team.
It’s about mutual respect as well as productivity. A good designer will take the time to understand the technical issues and how the site will be built. They’ll learn the basics of the code so they know what’s possible and can speak the same language. But they don’t need to be fully fluent. Similarly, a good developer will take the trouble to understand the principles of graphic design, and to see the site from the client’s and users’ perspectives too.
The best projects I’ve worked on have combined the strengths of both roles, where the designer and developer push the boundaries a little, enjoying the challenge of making the seemingly impossible happen, but not at the expense of the project as a whole.
[…] Many designers don’t think about the code behind the sites they design. This is a huge problem because it slows web projects down, which costs money. The good news is designers don’t need to learn code; they just need to change the way they think. Posted by omkar konda Filed in Web design, resources […]
[…] Designers, Engage Your Brain[s] […]
To me, no self respecting web designer lacks knowledge of basic php, maybe it’s just my frame of reference, but i have never heard of a web designer wh doesn’t know how to make at least a simple php script. I myself am both a coder and a designer, when i design, i don’t think in code because i feel like that restricts me, i let my creativity do the design work and my knowledge make it all work seemlessly.
Just my 2cents
Very interesting post
Great article, I agree with Mark Boulton.
Being a Designer I know the importance of having knowladge of xhtml/css with creative designing skills, I used it on my each project. Mark saying just the right thing, Please don’t take him wrong he is just advising that if designers change ‘how they think a little bit’ when they design something, they will find that project finished fast rather before. If he/she is designing for the platfrom, it will help dev to code it fast and easily.
After reading all the stuff, some ‘keywords’ came up to my mind, just like teamwork, project leader, interdisciplinary approach, tasks coordination, skills coordination, interactive approach. Any kind of challenge that requires a group of specialized professionals to be solved, it also requires management skills to approach it. A talented project leader will know how to make people interact in order to overcome all the restrictions coming from different fields of knowledge.
[…] Mark Boulton recently spoke via Skype to my User-Centered Interface Design class at The Art Institute of Atlanta on the principles of design as they apply to the web, and his experience in the industry. Mark has made a name for himself in the web industry as a typographer, designer, and a skilled writer on these topics. He’s perhaps best known for his insightful, self-published series of articles entitled 5 Simple Steps, which explores core design topics such as the grid, and typography, and will soon be spun into a PDF book of the same name. Perhaps you have seen some of his other articles on A List Part and Vitamin. Mark brings together two traits in his work that rarely mingle, brilliant design talent, and humility that seems to keep him learning and sharing his wealth of knowledge. […]
Dog Contact Tables For Myspace…
I don’t agree with you in 100%, but you covered some good points regarding this topic…
http://www.thinkvitamin.com/
[…] Monday, November 12th, 2007 in Flash, babble, design, development I’ve never been a fan of November. Other than getting to go home for Thanksgiving, not much about November has ever made me happy. Pessimistic, I know.Katie sent me a great article about designers that code: […]
Mr Mark, I think you have get rid of a in-experinced (left brain or Right) designers group…. that’s why your so ghasty about the so-called “designers”…. Instead you pay enough to get experienced(CSS,HTML) designers, at the end you won’t be in such a mental condition
to cry on them all the way in your article.
bye…take care of your RIGHT brain! (if it is there!)