Traditional Techniques in Web Design?

by Matt Ward

September 20, 2010 in design

The other day I was reading through an article by my good buddy Radu Chelariau, entitled “Analyzing In-Browser Design” over on his SickDesigner blog. The article is a great analysis of the many benefits of actually designing websites in the browser itself. If you haven’t already read it be sure to check it out!

One of the things that I found interesting, however, was the way he continuously used the word “tradition”. For example, when discussing the interesting relationship between working with code and creating beautiful, visual designs, Radu writes:

What In-Browser Design does, in my experience, is break that dichotomy because it reverses the traditional order of things. By tradition, we first create a design mockup, the client gives the ok and then we start coding.

There’s a lot of truth to that statement, or at the very least a lot of interesting possibilities, but the one word that really struck me, and which I have been meditating on ever since I read the article, is this notion of tradition. Basically, what this passage is implying is that the use of Photoshop (or some other, similar, application) is the traditional way of designing websites. By implication, of course, that also means that the process of in-browser design is somehow counter-traditional.

Why do I find this interesting? Probably because I would never have formulated things this way.

In the Infancy of the Web

I only turned 29 back in July, but I feel like I’m dating myself here because I was designing my first websites all the way back in 1996, when the internet was just a young hatchling and Netscape was the king of on top of Browser Hill. So, it would seem that I’ve been doing this web design thing in at least some capacity for about fourteen years now.

And let me tell you something: when I started doing this, I sure wasn’t creating my designs in Photoshop. I was doing it all the good old fashioned way, with Notepad (circa Windows 95) and my good old, trusty browser (at that time, probably Netscape 3.0). For the little bit of graphics work that I did need to do—such as really horrible gradient backgrounds and equally horrible buttons with terrible typography—I got by with a free version of Paint Shop Pro.

How primitive is that? Honestly, probably about as primitive as what almost all other “web designers” were doing at the time.

But that’s not the point. The point is that back then I was doing all of my design (you guessed it) in the browser. I wrote out my code (badly) and played around with the HTML until I got what I wanted. CSS hadn’t really hit the scene in any big way and the used of JavaScript weren’t all that extensive yet, so all I was really using was good old fashioned pre-4.01 HTML.

And the fact of the matter is that I continued to design in the browser for years and years to follow. Even as I started to add CSS and more JavaScript into my web design/development repertoire, and even as I started using more powerful graphics software, the browser remained my primary canvas, mostly because it was just the way that I had always done things.

In other words, it was my own little tradition.

Yes, that’s right. For me in-browser design was the tradition and the concept of actually creating a complete design mockup in Photoshop was completely and entirely foreign to me. Since I was designing websites, it only made sense for me to do so in such a way as to be able to see exactly what they would look like in the browser, rather than adding in an interim step!

It wasn’t until I started to really start reading design blogs and becoming active in the design community that I even heard of the concept of designing websites in Photoshop, mostly through various tutorials like this one over at PSDTUTS+

Quite frankly, it wasn’t until 2008 (12 years after having started designing websites) that I actually created my first mockup in Photoshop. Yes, it was only 2 short years ago. Since then, I’ve done several more websites where I started in Photoshop and have learned a great deal from it, though I have already started to lean back towards in-browser design for most projects.

Tradition

By now, you’re probably getting tired of reading about my own practices and experiences, and I’m sure you’re wondering what the point of this article is. Is it bad to confess that I have actually wondered the same thing? I really don’t have any major point that will irreversibly change the way that you approach web design.

I just think it’s extremely interesting to note the way that our preconceptions of what is traditional can not only shift, but can actually undergo a complete and total reversal, based on what we perceive to be the common trend within our particular communities – even if that perception may not be an accurate reflection of reality.

I would actually guess that there are a lot of people like me out there, who started designing in the browser and did it that way for years before ever opening up Photoshop. I would also imagine that a lot of these people have probably stuck with in browser design completely and never even bothered with the whole Photoshop mockup technique, either because it hadn’t occurred to them or because they were already fully convinced of the benefits of in-browser design.

So, if this article has any real message to get across, I suppose that it would have to be this: don’t let your perceptions of the what seems to be a “tradition” in the design community (or any other community for that matter) dictate how you go about your work. Yes, the community is a great resource to help you learn about new (or not so new) techniques, and to grow and stretch yourself as a designer, but it also contains a broad range of different, and often conflicting, ideas.

As you absorb all of that material and content, it’s up to you to become a filter. Consider everything critically and thoughtfully. In some cases, you may even want to try a new technique to see how it works for you. In the end, however, you simply cannot rely on the thoughts and ideas of others to define the way you work.

You need to make your own decisions about how you go about your business, supported with your own reasons. Make your own traditions and remember what I talked about in one of my previous articles – it’s the final design that matters, not the tools or even the process that you use to get there.

Conclusion

As I wrap this article up, I want to be very clear about the fact that I have absolutely nothing against Radu’s article, and that I don’t think what we’ve talked about here in any way detracts from the fine points and arguments that he makes in favour of designing websites in the browser.

By the same token, I am also not trying to come dismiss anyone who works be creating an initial mockup in Photoshop either. That would just be downright hypocritical after everything I’ve just said about making your own choices and decisions regarding how you want to work.

Just go out there, keep learning and experimenting and do things according to your own traditions, and in the way that allows you to produce the strongest possible designs!

Netscape Image by Toshihiro Oimatsu

Powered by Shutterstock

About Matt Ward

  • Bret Juliano

    Sep 20th

    Funny, the traditional way for me was to sketch out a design (with an actual pencil and paper technique) then move into working into notepad or dreamweaver, test in the browser and tweak from there. I’ve only done a few mockups in fireworks, but most of the time I just produced the design from paper straight to browser.

  • Mary

    Sep 20th

    Ahh, not designing in Photoshop. I do that now, if only because I often do just the design, not the full layout.

    I designed my first website in high school, in 1997. And used Adobe Pagemill 2.0. Oh, yeah, I was high-tech. I think I also used Geocities to host, and used Netscape, too. I wonder if that site still exists… I remember it used frames, yellow text on dark tiled background space images, and had some animated aspects.

  • ngassmann

    Sep 20th

    Wait, so how can you “design” something in notepad. The art and profession of selecting and arranging visual elements—such as typography, images, symbols, and colours—to convey a message to a target audience. Is that not what the definition of design is in the graphic design realm? Aren’t most “web designers” graphic designers at heart? How can you not mock something up and then transfer it to an electronic medium before coding? How does a client approve a txt file when it comes to their web design?

    I really think you are confusing building/developing with designing. Form and function are very different, especially when it comes to tradition. If you were to tell me that you had a great vision for my business but couldn’t show me a sketched mockup or a wireframe, I could not hire you.

  • James

    Sep 20th

    @ngassmann I believe what Matt was trying to say was that he used Notepad to code a site. You wouldn’t show a client the code and expect them to visualize it. However, you would show the client a proper HTML page mockup which would be usable with hover states etc.

    He’s making the point (a very valid one in my opinion) that we (web designers etc) shouldn’t let our ideas of how web design is ‘traditionally’ done effect what methods we choose to use when designing.

    If designing in the browser works for you, use it. If Photoshop, Fireworks or the GIMP or anything else works, use that.

    Great article Matt.

  • trimbakeshwar

    Sep 21st

    I’ve only done a few mockups in fireworks, but most of the time I just produced the design from paper straight to browser.

  • Arslan

    Sep 21st

    Thanks for the article, I do Web designs in Photoshop And after that dreamweaver is best for coding. It works great

    Thanks again

  • Alec

    Sep 21st

    I do everything in photoshop and dreamweaver with bits of flash, couldn’t imagine creating anything other than a .htaccess file in notepad!

  • Matt Ward

    Sep 21st

    @ngassmann – I am absolutely talking about the arrangement of typography, images, symbols, and colours. I just do all that arrangement with code instead of with Photoshop. It’s just a different way of thinking about and approaching the same basic problem.

    In the end, though, what I show to my clients is a working prototype in a browser, rather than a static mockup. Saves a ton of time, since I already have most of the coding done in the initial stages.

    But, as @James said, the article isn’t about telling you how to do your own work. It’s just about the interesting preconceptions that seem to exist about what is “traditional” in web design.

  • Doug

    Sep 21st

    Nice post.

  • Sky Sparkles

    Sep 21st

    Personally never used Photoshop to design a site first I like to get straight to the nitty-gritty and experiment with my ideas.

  • Nico Burns

    Sep 21st

    “Funny, the traditional way for me was to sketch out a design (with an actual pencil and paper technique) then move into working into notepad or dreamweaver, test in the browser and tweak from there. I’ve only done a few mockups in fireworks, but most of the time I just produced the design from paper straight to browser.” – Bret Juliano

    This is almost exactly what I do! Pen(cil) and paper, code it, graphical work in fireworks. Works great.

  • Craig Pennings

    Sep 22nd

    I usually like to do some quick thumbnails and rough drafts before taking it into photoshop for the design. Figuring out layout on paper is much faster than in photoshop.

  • Kelly

    Sep 23rd

    It was great to learn how things used to be designed and still are. I’ve only just come into the web design world so I’ve only ever known about using Photoshop for prototypes. Mentioning Paint Shop Pro really took me back, I used to love playing around with that when I was younger and had almost forgotten it. For now I will stick to Photoshop as I am continuously learning new techniques to use for my designs but I can see the benefits of creating it straight in the browser.

  • Joydip Hazra

    Sep 24th

    It is very good design side.Personally never used Photoshop to design a site first I like to get straight.thank you for bringing intelligence back towards web, we spend and streamline efforts with our back end developers. It can be difficult to tie everything together.

  • flyingcowpromo

    Sep 24th

    nice post but i use photo shop,and dream waver.

    web design new york

  • TIM

    Sep 24th

    Funny I thought it was mostly common for everyone to do mock ups in photoshop and then build them in Dreamweaver and I was going against the grain by actually building my mockups as working webpages in Dreamweaver.

    From the mix of responses everyone has their own unique way of doing it.

  • mtness

    Sep 28th

    Hi there!
    Nice to read this – we probably all started out this way or another.
    For sketching out ideas for projects, I still use pen and paper!

  • ANTIVIRUS

    Oct 10th

    herp derp

  • HoChiminh

    Oct 11th

    I think this is an awesome theory!How to make a webpage depending on private custom!I think the important thing is to give a satisfied result to your client!
    Thanks for your good discussion!

  • Creative wrbsite Design

    Oct 21st

    Hi..
    great tips..for website Designing..i think photo shop and dreamwearer is a great too for web designing…

    Thanks foe leave this info..

  • Gary Callaghan

    Nov 23rd

    To be truley honest i began desiging websites in Photoshop a while ago and have been doing up until last year when i started looking more into the coding side of things more.

    I always wanted to be a web designer but i know myself i lack the creativity, so i have been teaching myself code and the past year or so every website i have created i have what i call “Browser Designed” meaning i code the layout the way i want.

    If i need graphics i use Photoshop. I must say i have completed many more projects this way and find it much easier, maybe this could help beginners who lack that spark of creativity.

  • Jo Pango

    Jul 4th

    My experience is that it depends on the website I have to build. As I studied programming languages before visual designing, then while drawing on a paper the first ideas, or even just thinking about it, I try to evaluate what can be done with code (especially with css3) and what requires more complex images designed in Photoshop.

    In case only few elements requires Photoshop design, then I build my website with netbeans, then I design some elements within photoshop. This avoids producing x number of .psd for pages with just few differences, and having to integrate them. If it is mainly complex images, i may build the site first in photoshop.

    But designing the whole site first in photoshop is not to me the best way to spend less time on a project, because sometimes, you can think in terms of integration before designing. But maybe, I think, in case of complex or more artistic designs, it gives an easier way to have an overall preview.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *