The Relationship Between Design & Code
Every 12 months or so, it seems someone blogs or tweets about the relationship between designers and developers. Que Coders Who Can’t Design And Designers Who Can’t Code by Sacha Greif. I’m not going to address Sacha’s article directly, but it’s worth a read as a lot of the points I’m going to make are in response to that perspective.
A lot of these tweets and posts seem to hinge on the “fact” that designers & developers are two very different types of people who produce two very different types of work, which causes friction in a relationship between the two. This isn’t true and really I think a lot of the friction could be traced back to articles focusing on the differences between designers & developers rather than the commonalities.
Design is structured communication of messages and emotions. When I say structured, I mean design has rules—just like code. Good design, just like good code, makes and effort to stick to these rules as—in most cases—they benefit the user. Once you have and understand that perspective, everything else is pretty logical.
The other misconception I want to clear up is that designers aren’t magically creative people, they don’t get their ideas from thin air. People are influenced by what they consume, every blog post, every podcast, everything you walk past on your way to the post office. When a designer/developer sits down to create something they draw from that experience. A designer creates for a purpose defined by brand and therefore business objectives. A developer creates for a purpose shaped by business objectives. Both products are results of logic. Design is visual logic, code is written logic, they really aren’t that different.
So, my message to designers: You can write code, it’s just another set of rules to learn and understand. My message to developers is similar: You can design, it’s just as logical as code but the decisions you will have to make wont be as black and white.
Some Tips
Now you’re ready to try new things and experiment, here are some tips that might be useful for those new to either design or code.
One of the things I do a lot now and wish I had done sooner is start designing on paper. If you’re designing a layout, start with a wireframe. You spend a lot of time manipulating the interface in Photoshop (and most other design software) rather than getting ideas down and seeing how they look. Wireframing on paper is great because it lets you compare and move through multiple concepts really quickly.
Similarly, start coding sooner. You can spend a lot of time adjusting the padding on elements in Photoshop, instead mark-up the elements you’re playing with, take a screenshot and paste that into Photoshop. At this stage you should still be playing with elements and things shouldn’t be locked down. Don’t waste time doing pixel perfect comps as they’ll rarely stay that way in-browser.
Adobe software always crashes, usually a lot. Save often and always.
Planning your code when designing makes a big difference when it comes to writing it. You’ll find it changes the way you think about elements and it usually results in more efficient markup. On the same note, planning your code in comments before writing it helps make it more efficient.
With code, big problems can always be solved by breaking them down into smaller problems. With design, big problems can always be solved by going deeper into the problem to understand it at a greater level.
Always carry a notebook and pen. Ideas come at the most random times and that feeling you get when you know you had a good idea, but can’t remember it, really sucks.
![<=======[ :]-<](http://dribbble.com/system/assets/3862/1601/screenshots/338485/retro_snake_shop_-_dribbble.png?1322786286)
12 Responses to ‘The Relationship Between Design & Code’
I agree whole-heartedly. In fact a lot of the response to my post was exactly that – “oh, I can’t design, I’m not creative”. And I think that’s a huge misconception.
In fact I’m thinking about writing an article similar to yours, about the fundamental of design explained to coders.
Please do! I’m absolutely in need for something like that. I also find particularly difficult to find resources on design of desktop applications. Of course most concepts apply to both web and desktop apps but I find most patterns and tips to don’t apply in desktop applications.
I agree there is a lot of overlap in the mental processes. I always encourage designers to learn to code, if only so you can alter a wordpress template or similar to give you a result you need, and not require assistance from someone else. However, I also strongly advise this not be taken lightly. A lot of coding is about rather boring but absolutely necessary security concerns etc. Casually dabbling in code pretty much guarantees making very insecure code. I’d comment more, but I have to fetch the kids right now. Code on!
I am 50% designer. Worked with printed media before the web. Then I slowly found myself have an equal passion for developing. So now I’m 50% developer. It’s 2 different ways of problem solving. CSS will make things look bad, PHP will generate errors. HTML “should” validate, SQL user input “has to” validate etc. Using MODX CMS where designer and developer have equal freedom and control (presentation and logic are separated). It was easy to see the difference of tasks a designer and developer have to deal with. One thing though; A developer can use free CSS and have it running right away. A designer can’t just use any PHP on his site without knowing if it secure and server is configured for it.
I develop desktop applications. Those apps on windows that seem very monolithic, heavy and strict. I had an experience developing some new functionalities with a designer and we use an approach similar to yours but in a .Net environment. We developed the interface in WPF and used the MVVM architectural pattern to ease the development. It was a wonderful experience although the designer should already have some solid development knowledge. Microsoft developed Blend that the designer that worked for us found very easy to use.
I see where you are coming from with this, but can’t totally agree. Where I’m most torn is when you say, like coding, design had rules. I’ve done plenty of both and can say with absolute certainty that the ‘rules’ of design are more so guidelines. I say that because even if you follow all of the rules, you could still end up with a bad design. In developing, however, if you don’t follow the rules (eg don’t close a tag), your program or website will not work. These are not optional rules. They must be followed if you want a usable finished product. No doubt designers and developers need some common ground and understanding of each other’s work, but asking anything above the knowledge of those basics is not practical. Professional designers will have no desire (or need) to learn complex PHP and SQL queries. I generally like developing from a designers Photoshop file because they are not limited to creating things that are only possible with CSS. They push the developer to find new ways to build things, and I love that challenge.
I am of the belief that you can be a professional designer and developer, and be more than mediocre at both. Professional designers might not have a need to learn complex PHP and SQL queries, but the desire is another story altogether.
After designing a few small projects, I became fascinated by how the developers created functionality that gave my design “meat”- a reason and purpose that complimented my design. So I learned to code. I haven’t been out of college long, so I wouldn’t say I’m an expert at either discipline, but there is no reason that a designer and a developer cannot be one and the same- if the desire exists.
Only thing i will mention here is that when I “plan my code when designing”, my design ends up a lot worse than if I push myself to be as creative and free and at the end assess what elements might need to change to then allow easier or better code. Limiting yourself to easy markup/CSS, usually results in some pretty average blocky boring designs.
Not that I disagree with the article, but to be honest I experience that a larger problem in web projects is that back-end developers often don’t understand or respect HTML and the implications of CSS overlaying the markup.
I’d take this a step further. I find that I don’t do as good a job on a project at either visual design or code design (development) unless I’m involved in both. They’re both application design.
Carson, design does have more guidelines than rules, but so does code. It’s not about syntax errors, but patterns — stuff like the DRY principle and “functions and methods should only have one return statement.” Many things really amount to personal preferences, but, in both domains, things go better when you’re consistent.
Some have mentioned that visual design doesn’t call for as much creativity as fresh design grads would like to think, but code design calls for much more creativity than recent computer science grads give themselves credit for.
You’re mostly right, but it doesn’t matter, because those similarities are insufficient to make the disciplines easy to move between. Design and Coding are more like two different languages. One you learn from babyhood and one you learn later. You may become fluent in your second language, but you will always be missing that certain je ne sais qua. Moreover, each language reflects the culture it comes from and has words which are simply not translatable. For example, the Dutch word “gezellig” has no perfect translation in English, where we usually fall back on “cozy” but the Dutch word has implications of warmth, comradeship, contentment, and settled existence when surrounded by a world which is … not hostile, but not gezellig. Linguistically these illustrate an underlying and fundamental difference in how designers and coders view their worlds and how they seek to improve them.
Pingback: Think, Design & Code: Do It All, Win It All | Seeqnce Blog