There is no such thing as 'designing' in the browser
Design is not about techie tools, it’s about human imagination, argues Robert Rawlins
We work in an unusual industry, one which, until relatively, recently never existed and is constantly forging new job roles, ones which are blurring the lines between high-technology and fine-art.
This means that you have people like me, four-eyed, nasally congested computer geeks picking up our paintbrush and trying to be creative, or beret wearing, wine drinking, long-cigarette smoking art graduates cracking open a text editor to start compiling code.
We come equipped with an ever changing set of design tools to help us achieve this skills crossover, the latest fad of which is "the browser"... and this has gotten my spectacles all steamy because I can't help but feel there's been a substantial oversight ...
We are humans, not machines
Design is not about techie tools. It is about human imagination, human emotion and human interaction. We are creating these things for real people. Soft, pink, squidgy people; it must fulfill their desires and whims, and forgive their foibles.
The nature of us as creators means that we don't have our best inspirational moments while sitting in our IDE – we have them whilst laying in bed in the early hours, standing in the shower, walking in the woods or while doodling on a piece of paper.
Run free
Creative thinking can only happen in a medium that allows imagination, discussion and experimentation to run freely.
The human brain is capable of firing billions of neurons a second, this is a huge amount of creative power to capture, and you might, if you're ever so very lucky, have time to scribble the odd one down on paper, or to close your eyes and focus hard enough to remember it – but many of your ideas will be a momentary, un-noticeable flash ... blink, and you've lost half a dozen.
Do you really have time to sit and code those ideas? How many more will be lost in the interim?
Free love
Communication and discussion are key elements of design – drawing on the huge wealth of experience that your stakeholders have in their business is important. Giving them a medium in which they feel comfortable to share their ideas, explore their own creativity and effectively communicate it to you is vital.
Every time you put technology in the way of this process, you stifle them! Even if stumbling just for a moment, their whole pace and the richness of that creativity will be lost.
But avoid temptation
Advancing technology and the advent of HTML5, CSS3 and mobile devices means those of us creating things on the web have an incredible amount of power at our fingertips. However, with great power, comes great potential to go roaming where you're not welcome.
Ever since the inception of the <marquee /> tag or animated gif – us geeks have fallen victim to the temptation to crowbar the latest technology into our designs, regardless of whether it's appropriate or tasteful to do so. Until we learn to separate ourselves from this technology during the design process and focus more closely on the problem solving, we're bound to make this mistake again and again.
Engineering needs a design
What happens in the browser is engineering. While closely married to design, they are different things, and it's important that we recognise the distinction. Engineering is about materials, methodical thinking, mathematics and computing. It's about finding a way to implement a concept and finding compromise at the limits of technical capability.
Design, on the other hand, is about finding a solution regardless of the technical limitations, in order that they can be furthered. The whole time we continue to work within the boundaries, they will never expand.
I think people become confused because truly inspired and solid engineering can become beautiful in its own right – engineering as art. But regardless of how stunning the engineering, if the fundamental design challenges have not been elegantly solved first, then the end product is moot.
Design is not something born of the browser
It's not a mere product of the tools you use, it is about the way you think – a state of mind, an attitude, an approach. It starts in your brain as nothing more than a glimmer, then it grows as you play and toy with the ideas and it is refined through free-flowing discussion and feedback.
By constraining yourself within the confines of a piece of software, let alone one as complex as a browser or IDE, you will stifle your creativity, choke conversation and be drawn away from the most elegant and simple solutions.
These things are design, without them it cannot exist.
"Designing in the browser" is a myth – there is no such thing. Nobody has ever done it, and nobody ever will.




10 comments
Comment: 1
Visual design and communication (aka web design) starts with a strong idea, and ideally a strong story to tell. Tools should not matter as much as the idea and how well it's communicated.
But until we can just upload our pencil and paper sketches and have them be websites, the tools we use do have importance. The workflows we choose impact how quickly and easily we can iterate on design ideas to polish them and bring them to the level they need to be. Using tools that are not suited for web design wastes your time even if you don't realize it yet.
I've built a little something that I hope can bridge this gap - between engineering within the required technological limits of the web and HTML / CSS as a communication platform, and between design tools that provide that fantastic creative freedom, and allow for 'happy accidents' of design. I very strongly believe and agree with you that designers shouldn't be hampered by code-views and complicated IDEs.
My app, Edit Room happens to run in a web browser, but it's much more like designing with a desktop layout/design application than anything that's come before it. It gives you creative freedom while keeping you true to your medium, without needing to write any code. I've built this tool to allow the real design to happen between your brain and your hands, while staying out of the way and just letting you create.
I encourage all to check it out at http://www.edit-room.com/
Thanks for the article!
Comment: 2
Comment: 3
you say: Do you really have time to sit and code those ideas? How many more will be lost in the interim?
well while your spending 20min getting a perfect dropshadow in photoshop how many ideas have YOU lost?
Guess what technical limitations are real, and people who consider those and either try to solve them or work with them in mind usually have the most beautiful and usable work.
"By constraining yourself within the confines of a piece of software, let alone one as complex as a browser or IDE, you will stifle your creativity, choke conversation and be drawn away from the most elegant and simple solutions."
why is designing this way constraining? maybe to you, but to me I feel like a whole new set of options have been given to me. I can now design interactions and gain insight on usability. Things I can't do with static mockups.
Comment: 4
OK sure, but why beat up on one method of rendering design over another?
"Do you really have time to sit and code those ideas?"
I don't know, do you really have time to mock them up in Photoshop, and then render them again later in CSS, etc? I don't advocate sketching in the browser, or taking notes in the browser. Paper and words are kind of great for that. But creating a static, abstracted representation of the thing you're going to have build at some point anyway seems like a vestige of the graphic design process that does not apply to web design.
Unless, of course, the reason for sticking with Photoshop, etc. is because of a lack of skill with front-end coding. In which case we might conclude that you're "constraining yourself within the confines of a piece of software," and maybe it's time to hit the books.
At some point all the perfect ideas in your brain must emerge and be tested in the real world. Often that real world lives in a browser. It's all about context, my man.
A few more thoughts on the blog:
http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do
MG
Comment: 5
Comment: 6
There are billion of creative website ideas but that doesn't matter. What matter is if you can make your idea real. With real interactions in a real environment (I.e the browser).
Paper isn't real, Photoshop isn't, the browser is!
Comment: 7
Absolutely right that the browser does offer a large number of benefits with regards to putting the design within it's final context, however, I still believe that the fundamental part of the design process, the real make or break, big decisions happen before the prototyping phase.
The work within the browser to produce a mock-up is about engineering, it tests the feasibility of the design and pushes back against it, if something doesn't work then it needs to be redesigned - it's a fantastic way to prototype your designs, however I don't believe it's an effective design tool in itself.
So this could all boil down to semantics, "designing in the..." vs. "prototyping in the..." which may seem trivial, but it actual has importance.
@emilsundberg hits the nail on the head, design is not about the way something looks, it's not about shinny buttons or rounded corners, however this is a premis that many don't appreciate, and their first port of call in the design process has long been to jump into photoshop and start drawing meaningless shapes, or skinning a generic CMS or eCommerce framework, rather than spending time researching the problems, experimenting and conversing with stakeholders.
For some 'designing in the browser' is about later stage prototyping, however for many there is a worrying trend, caused by the advocacy of the catch phrase which implies that it is a silver bullet, leading the many who don't yet understand the value of fundamental design in completely the wrong direction.
Being a competent programmer does not make you a designer. Being a competent Photoshop artist does not make you a designer -- Respecting the need to research, idealize, discuss and iterate DOES.
Techie tools have the potential to enhance creativity, and given the nature of the end product it's of course important that we take them into consideration - however, I don't believe they should be at the center of our attention.
I felt someone needed to refocus the attention back on the human nature of the process, because this will influence the quality of the design far more than the tools you use.
Comment: 8
A) Designing in the browser is what we did in 1998 and that's why all our websites looked like they were designed in 1998, designing in Photoshop means that the designer can make things look the way they want to look in much less time and with much less constraint. Obvioulsy this can present challenges to the front-end coder in building the damn thing and making it look like the PSD files, but that challenge ultimately leads to much better looking sites that don't look like they were "designed in the browser".
B) Building something in the browser without using wireframes and PSD designs first is akin to starting to build a house without asking an architect to draw up some plans and sketches first, it's just backwards.
I seriously don't get the "designing in the browser" thing, it's not even possible to design in the browser.
Comment: 9
Like other folks have said, adding constraints is an important part of design. You start off with pen and paper to be free from constraints, but then you move to Photoshop to test your design with the constraints of pixels, monitors, real content, etc. Moving to the browser itself then is a natural progression, as it's the medium our design is ultimately going to live in. Designing a website on paper or in Photoshop is sketching; designing in the browser is painting with oils.
So I'm all for designing in the browser. It's a great canvas. We just need better paintbrushes.
(Bias disclosure: I'm a designer on Typecast, so I obviously think there's huge potential for the browser to be a canvas for design)
Comment: 10
OK? So how the hell could Judo win this comparo, with Judo practitioners basically besting every other martial art out there? And by the way, many Judo guys are also among the best cage fighters... how is this possible?
The answer is simple: Judo can be practised full on, full contact, all the time. Lethal sports can't. This means that all other martial arts sacrifice realism and create hesitations and interruptions in practise; you pretend to kick people in the face in practise, but you don't actually do it. This means that when push comes to shove, you try to do something that you are not very used to and haven't practised completely realistically.
In other words, working consistently within a certain set limitations can make them second nature and you have the chance of becoming truly masterful within them. Sometimes good enough to make stuff better within these limitations than stuff other people do without limitations! -> If you want designs that work great in the browser, you should work within these limitations consistently, until they are second nature.
Wow... I'll call this the Judo argument for designing in the browser.....