For many designers, the process of starting a website design begins in a graphics program like Adobe Photoshop. While this approach may be comfortable and familiar, it also has its limitations, namely because the end product of this process is not a website – it is a picture of a website.

Showing a client a static JPG image of what a website is supposed to look like can cause problems for a number of reasons. First off, web browsers render elements on a webpage, like fonts, much differently than programs like Adobe Photoshop do. This can lead to unrealistic expectations of how the site will look once it is actually built and presented in the browser.

Another limitation with this typical web design process is that you cannot show interactivity or functionality in a static image of a website. Buttons and links cannot be hovered over to see how they respond, nor can responsive pages show how the layout will change for different devices and screens sizes. Really rich interactive effects like parallax scrolling and animation are also lost when presenting images of website designs, forcing designers to attempt to explain their vision for the site rather than being able to actually show that vision  to their client.

Designing In The Browser

A few years ago, a number of web professionals began touting the advantages of an approach they referred to as “designing in the browser.” Many of these designers would still use Photoshop to experiment with initial design treatments, but they would quickly move that process into the web browser and build the design with HTML, CSS, and Javascript so that the end result of their efforts would be a working webpage rather than a static image.

Initially, many people scoffed at this idea of designing in the browser, arguing that requested changes to the design would be too time consuming to implement, but the reality was that those changes could be easily made by a web professional strong in the aforementioned front-end development skills of HTML, CSS, and Javascript. In the end, design adjustments could often be made faster in the browser than in Photoshop, and once those changes were approved, the site’s development would already be well under way, saving additional time on the project!

Design Professionals Get Left Behind

The challenge to this process of designing in the browser is in a comment I have just made – to really make this process work, you need to be “strong in front-end development skills.” Design professionals who do not possess these skills, but are solely focused on the visual design aspects of a project, have therefore been unable to take advantage of the benefits of designing in the browser. If those designers really wanted to present their work in a functional manner, they had to partner with a developer who possessed the skills needed to make that happen. Oftentimes, project budgets and timelines do not allow for this collaboration, so designers have had to continue starting their process in Photoshop and present those static images – until now.

Code Free Web Design

Empowering design professionals to be able to control more of the web design process is at the heart of the cloud based web design platform, Webydo. Created “by designers, for designers”, Webydo allows you to use tools similar to the ones found in popular applications like Adobe Photoshop or InDesign to create the visual look and feel of a site directly in the browser. The reason this is incredibly powerful for designers is because that website design can then be turned into a fully functioning webpage without the need to hand-code any aspect of the site. The designer can focus on design and the system will generate the code needed to bring that site to life, giving the designer a functional, rich webpage that they can then demonstrate for their clients.

Webydo is one of the new crop of B2B web design platforms aimed at professional designers, as opposed to B2C software that are looking more for small business owners.  Unlike those DIY website platforms that are geared towards end users looking to get a cookie-cutter website up and running quickly, this B2B software is targeted to professionals who want to this software as a key element in their design business. In the case of Webydo, designers can design their website projects right in the platform and take advantage of the code-free development, website hosting, domain name registration, and even White Label and CMS-editing capabilities to present the work to their clients.

Showcasing Features in the Browser

The biggest advantage of designing in the browser is that you no longer need to explain how an animation will work or how a page will respond with different layouts for multiple devices – you can show those features in real time. Web developers building a site by hand will code these features directly into their work. Designers using a cloud-based web design platform can also show the features by taking advantage of built-in functionality that can add these aspects to a site, all without needing to work directly with code. For instance, Webydo includes many important and modern website features like pixel perfect responsive layouts, parallax scrolling, and even Ecommerce functionality.

A Better Way to Work

For many designers, the comfort and familiarity of Photoshop may be difficult to leave behind, but powerful new tools should not be discounted simply because they are not as familiar. By using a platform like Webydo and designing in the browser, you can give your work added depth and meaning that will make discussing that work with your client a more complete presentation.
Author bio:
Nir Barlev is the product manager at Webydo, a cloud-based platform that allows designers to create professional websites.