(Re)Adopting the Design-in-Browser Approach

• 7 minutes READ

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 realized that I had already done it in the past with far worse tools then 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.

Code

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.

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

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:

Web designer

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.

Responsive Web Design Comes Along

When the internet became mobile, we finally realized that drawing websites in Photoshop isn’t ideal. Mainly because there’s a lot of devices with different screen sizes, and drawing a website for each is really a waste of time. We wanted a solution that would speed up the web design process and produce an adaptive product that works regardless of device.

Bring back the web designer.

Web designer

We should never have replaced the web designer. We should have added other types of designers, developers and copywriters to the web design team, but keep the web designer. That’s what we’re doing with designing in browser concept. We’re bringing back the role a web designer used to have. And now, you’re not a web designer if you don’t know how to code. You may be a designer that knows how to use Photoshop to draw pretty interfaces and websites. But you’re not a web designer. To become one, learn HTML, CSS and at least basic JavaScript. Then, build a website with your text editing tool.

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

It doesn’t have to be perfect. The first website I ever built was utter crap — text, links and images (mostly animated gifs) on a dark background. But I learned how websites work.

You can’t design something if you don’t truly understand how it works.

Merely drawing a website in Photoshop is not designing. You don’t build anything with that. What you do is draw the instructions for developers to follow. You draw, you don’t build and most certainly you don’t design. It’s like if an architect drew plans for buildings, without knowing what materials would be used.

Wire-framing

Wireframing

When I was happy with the sketches I decided to make some high-fidelity wireframes. And I used Photoshop to do that —  I found out that it’s quicker than any other tool. But the goal is to simply quickly redraw sketches. In Photoshop it’s very easy to start focusing on details that don’t matter yet. That’s why this step should be done quickly (especially if you use Photoshop, Illustrator or any other graphic editing tool).

Prototype

The next step, which is important from the UX point of view, is to create a prototype. By now, I already had an idea of how the website will look. Now I had to find out how it would feel using it. And since I decided to go mobile first, I made a prototype for the iPhone. I used high-fidelity wireframes I made in Photoshop and uploaded them to Marvel. (Marvel is a great tool allowing you to quickly make prototypes from images or .psd files.)

Visual

After I tried out the prototype, I decided to make quite a few changes. The website didn’t as easy to navigate as I anticipated. (That’s why you build a prototype early in the process.) I could also make the prototype directly in the browser, but I think that Marvel app made it a lot quicker in this particular case.

Visual Design

Visual Design in Photoshop

In my plan for the website redesign, I initially had a task called “Visual Design.” It was planned to be executed after the creation of the prototype. The idea was to draw each page in Photoshop and take care of the details. But I changed my mind. I cancelled this task and went straight to coding.

Coding

I started with a blank HTML document. I decided to focus on typography with some real content first. So I took an old article I wrote and put it in the HTML. I tried out various combinations of typefaces and sizes. There was no logo, no graphics and no navigation elements. I wanted to focus on how the content on the website will look on different screens, very much in the way Tim Brown explains it here.

When I was happy with the typography, I started adding other elements. Photo background in the top area, logo and navigation were the first additional elements. That’s when I realized that the basic layout of a page and an article should always be the same — unlike what I had done in the wireframes and prototype.

And that’s why going straight to coding really is productive. You can make the changes as soon as you realize that there’s a problem. And it’s more likely that you’ll find these problems sooner, because you’re working on the actual, working product.

Final Touches and CMS Integration

In the end, the decision to skip the drawing saved me a lot of time. Drawing each of the pages would be very time consuming (not to mention that my perfectionism doesn’t allow me to make something halfway). So instead on focusing on details in Photoshop, I was focusing on details straight in the browser. After I made the mobile first website as I wanted it, all I had to do is adjust it for bigger screens and integrate it with a CMS. I decided to try a flat-file CMS Kirby instead of WordPress. (I’ll share that experience with you later.)

Final Touches

I Skipped Photoshop & Saved Time

I planned to launch my website in the second half of March. But because I skipped the drawing of the website in Photoshop and went straight into the browser and coding, I launched it on March 2. The decision to skip drawing each page in Photoshop saved me at least two weeks.

I Improved My Coding Skills

But saving time is not the only good thing about going straight to coding in browser. The other cool thing about it is, that I improved my coding skills drastically. Moving an element or changing a color takes more time and effort. But I learned all the principles of web design technologies and the abilities they offer.

Before, I only knew the basics of JavaScript and jQuery. I used to take snippets of code, change them and use them over and over again. Now I can write my own scripts. It’s something I always wanted to learn, and I did — by actually using it.

What Tools Can We Use?

Making changes in the code and refreshing the website in the browser can become slow and annoying. There are some tools that can help optimize the process. I used Brackets because it automatically refreshes the website every time a change is made to the code.

I’ve also seen developers coding in tools such as CodePen and JSFiddle, simply because these tools make it a lot easier for them to see the results to the changes in code. Brian Kall also wrote a post about designing in browser and mentions some tools that are available.

Should We Really Forget About Photoshop?

I don’t think so. The web design process includes user interface design, user experience design and graphic design. Complex user interfaces are easier to draw in Photoshop. Graphic elements can also be drawn in Photoshop. To be honest, I still draw most of the interfaces we need at Wondermags, simply because it’s way quicker.

Photoshop is a great tool. For drawing. So, should we think about websites and how they work from Photoshop’s point of view? This is what we have been doing so far and what it got us is a very complicated and unnecessarily long process.

I think it’s time to go back to the core of web design and skip the Photoshop part were not really needed, by simply start coding our websites in the text editors again. We, web designers, should never have completely abandoned that.

Matej Latin

Matej Latin is a Web, UX & UI designer originally from Slovenia. His passion for simple, clean & usable design drove him through Germany, Luxembourg and dropped him off in London, UK—where he currently works at DueDil as a Product Designer.

Posts by Matej Latin