Design vs Development

March 25, 2012, 2:46 a.m. in Web Design

Something I've been wanting to write about for a while now, is the separation of design and development in web design, common views and workflows to do with that separation, and my own personal experiences of choosing between design and development in my career.

What is "design"?

Design is a difficult word to talk about, because it has so many very slightly different definitions. Dictionary.com's definitions include things like:

  • to intend for a definite purpose
  • to form or conceive in the mind; contrive; plan
  • an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a machine to be executed or constructed.
  • to plan and fashion artistically or skillfully.

When it comes to the web, the word design can certainly mean many things. We have graphic designers, ux designers, interface designers. We design ideas, wireframes, visuals, but we also design architecture, frameworks, systems. In my opinion, no matter what part of the web process we are doing - we're generally designing or creating solutions to problems.

To me, the term Web Design encapsulates this problem solving, and any to all of the above processes. When I started learning html and making my first webpages back in Notepad, some 10 years ago, I didn't question whether I should only design how the site might look, or only write html - both Photoshop and a text editor/design and mark-up, were the tools I needed to solve the problem of creating “a website”.

Designing with CSS

For my first “proper” job, I worked for a small web design studio, and there were just a few of us, so I guess we didn't really have the option or need to split the process into many different roles. On the visual side of things, I wasn't bad at making things that looked pretty good, not through any graphic design training as such but more from a kind of intuition or eye for knowing what didn't look good and therefore, what looked better. I was just starting to learn CSS at the time to style my webpages, and things like using pure CSS navigation were beginning to really get used in the web world. So whilst I might design how the menu would look in Photoshop, I would equally consider how that would be created with CSS.

CSS is one of the main reasons I think design and development have a naturally close relationship, even when they aren't done by the same person. And certainly, the aim of my blog post is not to say I think design and development should always be done by the same person. From my experience of moving to bigger organisations I can understand that it often makes more sense to have specialists, people focusing on design and others focusing on building those designs.

But, my point is, I find it hard to see a big gap between the two, at least when it comes to front end development. Let's take something really simple like a hover effect on a button. The look of the button might be designed in Photoshop, by the designer. How about the hover effect, the designer should design how this looks too, right? But in order to do that, they have to know that a hover effect is something that can be coded into the workings of a website. And now more than ever with CSS3, we have so many effects that can be used, animations, interactions.. whose job is it to suggest those be used? If the designer knows these CSS3 properties and is designing them, they must be pretty interested in code right? And if they are, why wouldn't they want to use this code to bring those things to life? On the other hand, the front end developer has a wealth of tools at their fingertips with CSS and Javascript. It's not so odd that they might use these tools to design visual things.

My main point is... Web design is NOT static design.

It's a common workflow at many organisations, that the designer will create the mockup in Photoshop, the client will sign it off, and then the developer will build it. And we may have the steps of a UX designer/wireframer in here too depending on the particular team of that organisation.

I've been a part of this process - at separate times - as a designer, and as a front end developer. It's been incredibly interesting to be part of that from both angles, but there are still a few issues I sometimes see with the process.

Ultimately, the canvas is the browser

When it comes to web design, we are designing for the browser, and I think that seeing the browser as the last step in that process is flawed.

Let's say we need a webpage with a form on it. This has various fields and various states of validation. Maybe some parts of the form change depending on what you select. We could design this whole thing in Photoshop. Maybe we have slightly different pages with slightly different forms. Do we want to design mockups for all these states? I've been there and I would say that laying out a form in Photoshop is NOT fun especially when you want to do something like, change the width of the fields to see how that looks. I think this is where it might be handy to use Photoshop to design say, the overall style of the form fields, but use CSS in the browser to lay out the page and then.. see how it looks in the browser.

Even when it comes to something as simple as text - Photoshop isn't really a great example of how text will look in the browser. It's great for designing where abouts text may go etc, but sometimes you may use things such as the faux italicisng or Photoshop settings of text spacing - but these are never going to look exactly the same as the browser. Trying to make things very “exact” in Photoshop, I feel is not a worthwhile endeavour.

Web design is changing - maybe our workflow should

Responsive web design is something I haven't done much of myself yet, but am learning more about everyday and the main reasoning behind it is - with the number of different ways people are viewing our sites these days - mobile, ipad, etc, we really can't keep thinking of our canvas as a 1024 x 768 (or whatever it is these days ;) Photoshop document.

Our canvas should be flexible - we should plan and tweak both design and code for breakpoints depending on resolution. Now more than ever, web design shouldn't be static. Mocking up, with Photoshop how a site might look in six different resolutions, has surely got to be a waste of time.

As I said earlier, I'm not suggesting design and development should be one and the same job or necessarily done by the same person. But I think there should be a real change in a lot of the old workflows we are used to.

  • Understand the medium you're designing for, and know it well

    I'm sure a lot of designers do, but in my opinion, if you're designing for the web, you need to understand the capabilities and limitations of HTML and CSS even if you don't write them. Above all you need to understand the flexibility and dynamism of the web.
  • Designer and developers need to work closely and talk!

    I think a lot more back and forth, especially during the design process (and not just "after a sign off") is important, so we can discuss things like CSS effects, what might happen if this button is hovered over, or this menu item is selected, etc. Visual design and code is closer than ever these days, so let's discuss them together.
  • Don't get caught up on pixels and exact measurements

    Going back to the responsive design thing, people are viewing sites in so many different ways now, we should not design for the number of pixels we expect them to see, but for the experience we are giving them. I'd like to point out here that as much as I feel designers should have a good understanding of code, I think front-end developers should know/learn some design principles, to help them understand how and why a designer intended something to be that way. Then, they shouldn't need to ask for exact pixel measurements.
  • Prototype with HTML and CSS

    I see this as something that can be done between the design and development stage, and by either person. Perhaps to see how the design will look in the browser or what happens when you fill in a form or click some buttons. I think HTML prototypes can speed up the design and development process, and are also a great (and more accurate) thing to show clients to give them an idea of how their site will look in the medium it's going to end up in.

Anyway, those are just my thoughts. For me personally I've decided to focus on front-end coding, particularly more advanced CSS and Javascript stuff in my career now, but I'm still fond of the visual side of design and there's a lot of personal projects I want to work on that combine both. I listened to this interview with front end developer Jenn Lukas on The Big Web Show the other day, and her decision to choose development over design. She expresses that she never felt design was finished, whereas development is easier to walk away from when you've got something working. I feel exactly the same, and I think the reason I started to shy away from (visual) design was really that feeling. I very rarely got a day where I felt totally satisfied with what I had done, or that it couldn't be "better", and whilst it's good to want to make something better, some days it felt like design was making me more unhappy than happy because of that. However, now I've stopped designing for a day job, I'm starting to enjoy it more on the side again, and explore it without pressure, which is nice.

And one day, my ultimate plan is to be amazing at both! Somebody told me once they thought it wasn't possible to be a great designer and a great coder, but I think it is - you just have to work extra hard. ;)

Thanks for reading!