Web Design Without Adobe Photoshop

5
2809

The Early Days

I remember using Photoshop 5.5, the first version to introduce “slices” and the “Save for Web” dialogue. It was a miracle. A designer who knew nothing about HTML at the time could design whatever he wanted and at the click of a button he had a beautiful web site. Granted that website was comprised of a very complex set of tables, and sliced images and spacer shims. Remember those days?

It has been a long time since then, the program has come a great distance in the web design world. Then again, so have a lot of other applications. I must tell you, I love Adobe products, chief among them, Photoshop. However, in this article I want to tell you why I am happily moving away from using Adobe Photoshop in my Web design and user interface design workflow.

Can we do web design without Adobe Photoshop?

What is Photoshop?

First things first, lets be honest, and understand what Photoshop really is and what it was created for.

Photoshop is the industry standard image and photo editor application. As far as pushing pixels this program is the Incredible Hulk. I can’t think of a single program that even comes close to it’s capability in that area. Let’s face it, it’s called Photoshop for a reason, not Webshop.

Over the years Adobe has continued to bake in features that have made it a tool for web design despite more qualified competition, like Fireworks for example. When Adobe purchased Macromedia and embraced Fireworks, I, like many other designers ignored it. We were used to Photoshop, plain and simple. Fireworks according to many was a far better and more focused product for web design and prototyping. Sadly Adobe will not be improving or adding features to this program so we are still stuck with the massive Swiss Army knife that is Adobe Photoshop. You have heard the term Jack of all trades, Ace of none? Well I feel that Adobe for many years has tried to make Photoshop the app of choice, and it has worked (let’s forget the whole ImageReady thing). Despite all the work I have done with photoshop over the years in the UI and Web design industry, I firmly believe today that it’s just not the right tool for the job (and in hindsight never really was).

In Photoshop CC 2014 they have add a lot of shape editing and other features like paragraph and character styles in some attempt at retaining a market share. Honestly though, as an Adobe advocate I hope they are cooking up something new to replace Fireworks, as a web design or rapid prototyping tool, something leaner and more focused.

Some reasons why Photoshop is not the right tool for Web design

Right now as a Creative Director and designer for a Drupal development and web design agency I am forced with the task of finding the best possible workflow that will impress clients and create a workable deliverable for our front end developers. I am very comfortable with Photoshop’s interface and can create just about anything my mind can conjure up. Let’s face it though, it’s not inherently something that is developer friendly or even practical when designing for adaptive interfaces and multiple page templates. Below is a list of some of the cons of Photoshop for Web design:

  • Often files are very large, consisting of many layers, layer groups and/or layer comps, making revisions and asset handoffs more cumbersome than need be.
  • Multiple PSDs for the different page templates (mobile and desktop as well) – this makes for a very full project folder on larger projects.
  • Revisions across multiple PSDs can be inefficient, and time consuming. Using linked .PSB files can help somewhat but it’s not ideal.
  • Mobile design workflow is poor
  • Large overhead (application-wise) for one task. If you are only designing interfaces/web designs then 90% of the image editing goodness of Photoshop sits unused.
  • Consistency in styles across multiple page designs can be challenging to maintain.  Character and Paragraph styles only affect the current PSD, and to be honest, I find them ungainly and buggy right now (as of CC 2014).

So what is Photoshop’s replacement?

That’s a good question, one I am still trying to answer. One could argue that Fireworks is far superior to Photoshop in web and interface design… and I would have to say it’s true (it was designed for that purpose, whereas Photoshop was not). Unfortunately, Adobe will no longer be updating Fireworks, and it may be sometime before we see a direct replacement for it-if there is even one in the works. Adobe Illustrator and InDesign offer some solutions for better workflows with master pages in Indesign, better styles management, and art boards in Illustrator. Some other options include, Adobe Edge Reflow,  Adobe Muse, Macaw (read my review here), and a little gem called Sketch. Reflow, Muse, and Macaw all offer WYSIWYG design experiences to generate interactive experiences and nice designs, however they do have their drawbacks as well. Sketch by Bohemian Coding looks very promising at the moment but it’s still early for me to fully disclose my findings with working with it.

In conclusion

It’s time for Photoshop to be used for what it truly was designed for and move aside for a more focused application, that will allow for faster iteration, revision, and more organized project structure. I will be revealing in a future article my final choice and a review another article, so stay tuned!

 

5 COMMENTS

  1. what is Photoshop’s and firework replacement
    When Adobe decided to offer their software as subscription I decided to find replacement for them as you mention there is not many options but I find few
    1-Photoshop replacement
    a-Mac: Pixelmator, Acorn and Ormr image editor
    b-win: Paintshop pro, Photoplus and Ormr image editor
    Note: Ormr is a new tool still in beta much easier than photoshop

    2-Firework replacement
    a-Mac: sketch
    b-win: RealDraw Pro

LEAVE A REPLY