(Re)Adopting the design-in-browser approach

I sat down and was going back from drawing a website to actually coding in a browser. It seemed hard and maybe even impossible. I was scared. Could I do this? But how hard could it be? I’ve done this before…

I got so used to designing (drawing) websites in Adobe Photoshop that I didn’t know where to start. Then I realised that I had already done it in the past with far worse tools than the ones we use now. Web design is not graphic design. It may consist of some of the elements of graphic design but it’s not the same.

So why did we start drawing websites in Photoshop in the first place?

What Happened to Web Design?

To find an answer we have to go back to the definition and the core of web design.

According to Wikipedia, the term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up.

When I started taking interest in web design all we had was Notepad to work with. We learned the basics of HTML and designed websites with just that. Later CSS came along, so we learned and started using it. What else do you need?

It’s not that simple. Websites started to evolve. More and more, we started using graphics to enhance websites and make them prettier. Higher bandwidth speeds made that possible. Soon, PHP, ASP, SQL, CMS, SEO, JavaScript and Flash animations all became a part of the web design we know today. It became too much for a web designer to have all the knowledge needed to build a website from scratch. So we divided the role like this:

We killed the web designer. We replaced him with a graphic designer that had to draw the website design in Photoshop and send it to a web developer to start transforming the PSD to HTML and CSS. Consequently, the web designer forgot how to code and started drawing most of the time. He drew all the pages of the website and all the interactions and website elements in Photoshop. He drew lines, backgrounds, images text and other typographic elements. He drew everything. It’s easy to draw a pretty website in Photoshop once you master the tool. It was up to the web developers to actually build the website, based on those drawings. We ended up with an overcomplicated process that either didn’t bring the best results or took a very long time to do.

This article was written as a guest post for Designmodo

Read the full article on Designmodo →

Matej Latin

I’m a self-taught designer proving that you don’t need a design degree to make a career in design. I went from doing boring graphic design work to working for big tech companies as a Product Designer. I thrive in the grey area between design and web development and I wrote a book about web typography for designers and web developers.

Triple Your Salary Guide cover

Get the design salary that you deserve

Increase your salary by learning when to switch jobs, which skills to improve and how, and how to find a UX-mature company to work for.

Download the free guide

Related posts

Leave a comment

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