Innovative web firms are re-imagining development with in-browser design.

. . .

In recent years, “In-Browser Design” has become the watchword for a new generation of front-end developers, who are increasingly blurring the (traditionally distinct) roles of the “creative” graphic designer and “technical” web developer.

. . .

This trend has been met with enthusiasm in some quarters, and skepticism in others. But no one denies that the shift to in-browser design is radically changing the game for web and technology developers worldwide.

Norex first adopted this approach in 2011 on the initiative of our superstar front-end developer, Justin Bellefontaine, and have been seeing amazing results ever since. Here’s what Justin has to say about the advantages of designing in-browser…

. . .

What Is In-Browser Design?

In-browser design is a technique that allows front-end developers to create dynamic, interactive web designs using code itself as the design tool.

. . .

“With in-browser design, I’m essentially using my browser window as Photoshop.”

Justin Bellafontaine, Norex Front-End Developer

. . .

In the days before in-browser design, the standard practice was to design websites “statically.” Graphic designers would produce static mockups using an image manipulation software like Photoshop, which could give a client a sense of what the final website would look like, but lacked interactive functionality.

Static Mockup, Centre for Pediatric Pain Research

You can’t click on buttons or hover over navigation links. Static mockups just showcase the visual elements of the page, including layout, colour palette, fonts, etc.

Justin explains that, “after the design has been fully arranged and completed inside Photoshop, it is exported to a static format such as JPG. From there, a front-end developer would then convert the static design into an interactive HTML template, which software developers can then add functionality to.”

Static web design is a pretty long process and involves numerous pairs of hands, each performing a very specialized task. By contrast, “with in-browser design, all of this is done in one step by the front-end developer,” says Justin.

Since adoption of in-browser design at Norex, “we still start each project with a requirements analysis (RA) and wireframes,” says Justin. “But then, instead of going to a static developer, it would end up in my hands where I would then convert the wireframes into a design directly using code.”

. . .

Why Did Norex Adopt In-Browser Design?

According to Justin, “The idea came up when we realized we were consistently getting questions like ‘how is this going to look on mobile?’, or ‘what do the buttons look like when somebody hovers over them?’

“We realized that, instead of presenting the static JPG files to the client and walking them through step by step, it might be better to present fully converted mockups (HTML) so the user can see the little details — the interaction pieces that really make for an outstanding website,” he explains.

. . .

“We thought we could take it one step further and simply skip static design all together.”

Justin Bellafontaine, Norex Front-End Developer

. . .

Cutting out the static design phase and designing directly in-browser, allowed Norex to increase their efficiency, so that “clients could see the complete design sooner,” says Justin. It also meant that “we could also take care of mobile responsiveness all in the same step.”

Contrary to some industry detractors, Justin firmly believes that in-browser design is faster and leads to better results than static design.

He asserts that, “The typical process almost requires us to design the site twice — once in Photoshop and again in code. When designing in-browser, everything is consolidated and deeper decisions can be made regarding hover effects, animations, user interaction and responsiveness.”

Justin notes that, since the adoption of in-browser design, Norex has been able to significantly reduce its project timelines.

He has also observed that in-browser design improves the efficiency of updating or modifying pages of a site after the initial design phase.

For example, with static design, “if a project has 20 pages and, after finishing the 20th page, there is a need to update a link in the footer, the designer would have to do this manually for each and every PSD file or layer folder, depending on the structure of the document. This can be a truly arduous process.”

By contrast, Justin asserts that, in the case of an in-browser design project, “the designer/coder can make re-usable ‘templates’ for common elements such as the header or footer and simply include them, using a single line piece of code, on any page. This makes maintaining individual elements much easier and faster. Updating the footer template file once will update the footer everywhere in the project in one swoop.”

. . .

Does Designing In-Browser Change Your Approach To Design?

According to Justin, designing in-browser requires you to think more critically about your design choices, and also encourages designers to focus on mobile optimization right from the start.

Desigining for mobile, says Justin, “forces you to start with the bare minimum, in terms of elements on the page and allows you to put a real focus on the primary goals the website seeks to accomplish.”

In essence, Justin believes that designing in-browser forces designers to think more like a user and to make design choices based on how users will actually interact with the site.

His experience has also shown him that in-browser design lends itself more to collaboration than does static design.

He explains, “I, personally have formal training in design, but to get the best result you really need to poll your peers and see how they perceive your design. ‘Do my design ideas make sense?’ ‘Is there anything out of place?’ I find that questions like this are more frequently discussed during an in-browser design.”

. . .

Can Anybody Design In-Browser?

Well, not exactly. In-browser design definitely calls for a greater degree of technical expertise than does traditional, static design.

In-browser designers are a kind of hybrid species, who posess the combined skill sets of a graphic designer and a coder. And it is rare to find someone who truly excels in both disciplines.

. . .

“A front-end developer must also be a designer. A designer must also be a front-end developer. That’s really the only way that in-browser design works.”

Justin Bellafontaine, Norex Front-End Developer

. . .

However, now that the proverbial cat is out of the bag, vis-à-vis in-browser design, more and more firms are feeling the pressure to step up their game.

Technology is a rapidly-changing industry, and if you want to stay in the game, you must always be on the lookout for emergent trends on the horizon.

With an ever-growing number of coders studying design, and designers studying code, in-browser design is poised to become the new of web development practice.

By embracing in-browser design, forward-thinking firms, like Norex, are taking conscious steps to stay ahead of the curve. Those who refuse to evolve with the times (entoning the mantra: “If they want my Photoshop/Illustrator/Fireworks, they’ll have to rip it from my cold dead fingers!”) are likely to get left behind.

Share This