24Dec 2015

Designing in the Browser or Designing in Photoshop: Which is your Choice?

Designers turning into coders is the new cool these days. Wonder why? The only reason could be because Photoshop is dying and more number of people prefer designing in the browser. But, wait a sec, be honest can you actually ditch your traditional designing habits, those wireframing tools and your desktop publishing software for your newly acquired coding skills? Will it be worth or do you think you can manage the designing process with the new set of coding prototypes?

So now the boiling question is when do designers opt for designing in the browser?

So now the boiling question is when do designers opt for designing in the browser?

The answer is quite simple, whenever they can, they will grab the opportunity and  design in the browser. Here are some of the important reasons for why designers prefer designing in browser over Photoshop:

  • Saves time.
  • Unlike the traditional tools that uses very complex concepts and is difficult to interpret, designing in browser can be conceptualized and interpreted to clients easily.
  • It gives a great deal of consideration to the content part
  • Major focus is on enriching the design with high-quality.
  • Easier to implement and also gives you the freedom to experiment newer concepts
  • Better quality of code as the focus is on content rather than decoration.

Moreover, designs are part of a constantly changing paradigm while content stays unaffected by the revolution of change. So, this will be a brilliant way to develop great content.

While I was researching across, I found that a large number of content-centric sites designed around the browser concept fare excellently well and usually “design in browser” is implemented for the following:

  • Blogs
  • web-apps
  • CMS style dashboard builds
  • News sites
  • Informational sites etc.

If you have not yet tried out this excellent technique it is high time you started considering it.

But there are situations when you cannot use the “design in browsers” concept and I will tell you exactly when not to use it.

[Tweet “But there are situations when you cannot use the “design in browsers” concept and I will tell you exactly when not to use it.”]

At times you might have to design graphical websites that focus mainly on the branding and decoration part with minimal content. If you choose to design such a heavily branded site in the browser, then my dear designer you are going to struggle a lot. Abandon the idea today because you just can’t get it done without using Photoshop. Of course you can consider designing in the browser once you are done with the major layout designing and the graphical part of the website using Photoshop. This will render high-quality design results.

Also Read: Awesome Adobe Photoshop Tips for Web Designers

Let us check out the differences between designing in a browser and Photoshop:

Let us check out the differences between designing in a browser and Photoshop:

Take a closer look at your web development team and you will realize that almost all the designers in your team are good at coding and this is the new trend now. In short, most of the designers are developers too. Brushing apart the traditional myths when we were told that coding is not a designer’s thing, we can now see that designers are emerging as great coders and even they deny the idea of using Photoshop for designing purposes as this does not support the current website designing models.

Let us see how designing in browser works:

Let us see how designing in browser works

As we have already discussed these days designers prefer designing in the browser as they are proficient in both visual design and coding alike. A decade ago, designers would have opted to use PSD to communicate with the developers working on the CMS part to give them a sketch of what the design elements would be like. The present scenario has changed, designers provide the developers with a deeper insight into what the final design looks like by including each of the design entities such as animation and even the site’s responsiveness.

Features of designing in the browser:

Features of designing in the browser

  • A large number of frameworks such as Foundation and Bootstrap make the designing process easier as these come with a number of in-built functionalities and plug-ins that speeds up the process. When working with these frameworks, it would be an added advantage if you are proficient with the coding part as it will give you an idea of the code underlying the functionalities.
  • Usually the developers are stressed out when it comes to the coding part, so if you have strong coding skills, then it helps to reduce their load as you can easily manage the front-end while they concentrate on the other major aspects of the website. As a team you can together build magical websites.

Just like the flip sides of a coin, designing in the browser has certain limitations alongside the advantages that it offers:

  • If your coding skills are not up to the mark, then designing in the browser might become a time consuming affair. As they say “necessity is the mother of all inventions, which follows the revolutionary chain of change”, to incorporate change and the need of the era, you need to be a good coder too. As a beginner you can start by building a simple landing page.
  • And again we arrive at the golden myth which states that designers should not be allowed to code  as it deviates them from their area of specialization. It is a general rule that the tasks becomes easier and less complicated when specific people are working on different sections of the project development cycle.

Speaking about the drawbacks of designing in a browser, we come to the point when a designer can think of designing in Photoshop/UXPin:

Given a choice, I would myself prefer to design using the popular desktop publishing software- Adobe Photoshop and how can I miss out mentioning the wonder tools of Software as a Services such as the UXPin without which a design is incomplete. Though you might be an excellent coder and skilled at designing in the browser, you cannot resist using these tools to plan the initial sketch.

Photoshop and Web Design:

Here is why designers love designing in Photoshop?

  • When you design from the scratch, these tools are excellent with guiding the designers across the planning and research modules of any graphic applications.
  • When you communicate your design goals with your client (who lacks the basic concepts of designing) or a business analyst or anyone for a matter of fact, just imagine how weird it will look while you try to convey the message using the “design in browser” concept. Why complicate things when you can simply use the wireframes and make the communication easier?
  • You can use some rough papers and sharpies to sketch out your design plans and develop mockups to reduce the overall development time (as simple as that).

Still there are limitations when you choose designing in photoshop and the very reason why designers prefer designing in browser:

  • When you design a responsive website the process might get too complex and redundant with Photoshop and the translation in real time differs from the final build. This is when designers opt to design in the browser as it facilitates them with the ease of tweaking media queries to make it responsive across a variety of devices, and also it gives a real time feedback of what the final product will look like, rather than stacking up uncertain mockups designed in Photoshop.
  • When you design in Photoshop, I am sure you might have observed that there are certain complications which involves technical limitations that is quite difficult to resolve. Even simple things become too complicated when you design in Photoshop.

Lately, have you observed there is a scarcity in the number of designers in the web development team owing to the rise in designers who are skilled coders. So, dear designers either gear up and evolve or die!! It is the need of the digital era to start designing in browser.

Are you a designer still sticking to the traditional methods of designing? Have you ever tried designing in the browser? How do you rate these two approaches with regard to the designing efficiency that they offer? Share your thoughts, comments and feedback with us…

Acodez IT Solutions is a leading web designing company based in India providing a wide range of web design and development services customized to meet the client’s business requirements. We are also a digital marketing solutions provider helping our clients to strategize business specific solutions to reach out their potential customers and convert them into sales ensuring business growth. For more information or any other enquiries, you can contact us and we will respond with a free quote.

Rajeesh PK

Rajeesh P.K. is the senior web designer at Acodez IT Solutions. Being a passionate UI designer and as someone who has 6+ years of experience in User Interface Design, HTML5, CSS3 and jQuery, today, he is a multimedia specialist possessing extraordinary skills and expertise at designing websites and apps that blend in the excellence of User Experience and User Interface, which is the ultimate objective of websites. He has a flair for researching and writing articles on the latest trends in web design and development.

Get a free quote!

Brief us your requirements below, and let's connect

Leave a Comment

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

What’s new

Brand new website for Anchor By Panasonic, fully designed and developed by team Acodez, is now live.

Working on a brand new website for Axis Bank Forex - right from Information Architecture & UX, UI and Development.

Working on a brand new website for Titan Sonata. Stay tuned to see it in action!

Signed contract with Panasonic Lighting as their digital marketing agency

Brand new website for CavinKare, fully designed and developed by team Acodez, is now live.

Signed Contract for a 5000+hours Web application for an investor firm in Saudi Arabia

Working on the Logo and Brand Identity for Remit Money (by Axis Bank)

Signed contract for managing the Social Media accounts of Anchor Electricals

Working on new E-commerce Portal for Cover Story - by Future Group. Stay Tuned!

Launched new website for Panasonic Powertools

Just Inaugurated - our 4th office in India at UL CyberPark SEZ, Calicut