Design your way

The complaints against Photoshop primarily focuses on the end product, and rightfully so. Although Photoshop can be used to generate some flawless designs, after laboring over a project for hours, what you may end up with is a static reproduction that is incapable of capturing the life-like experience you get from using HTML. HTML and CSS rendered pages speak for themselves.

When you preview one in your browser, you are looking at how the page will look in its final presentation. HTML and CSS are designed to utilize your browser’s capabilities to create things like fluid layouts, and progressive enhancements and animations. These capabilities are beyond Photoshop’s reach.

PS CC

If you take and even closer look at the two methodologies, you will discover a number of other disadvantages to Photoshop’s approach. For example, Photoshop’s ability to display text properly suffers greatly when displayed in modern web browsers. By comparison, the CSS class elements make the process of updating text much easier and simpler than trying to locate every instance of text you want to correct in a Photoshop document. In addition, altering the structure of pages in CSS is much simpler.

The advantages of mark-up languages like HTML and CSS over Photoshop are undeniable. Moreover, Photoshop’s attempt to stay abreast has fallen woefully short.

Yet, like most applications that inhabit the world of web design, we have, over time, developed a sort of love/hate relationship with Adobe systems flagship software. While we may love it for the common aptitude and experience we share, the shortcomings inherent in it has drove some of us to hate it.

The painful experiences we as users incurred while using Photoshop to design web pages are well known and is the driving force behind the anti-Photoshop campaign to remove it from their web design tool’s list. In fact, complaints about Photoshop’s shortcomings are so voluminous that a true web designer’s rite of passage is marked by the number of complaints he’s lodged.

Its negative points

Elements that are designed in a static environment cannot predict how such elements will react in an interactive one. Consequently, it is impossible to give a client a realistic preview of what the page will look like. And that’s far from ideal for an interactive presentation. In such situations, you often times find yourself telling the client to try and imagine what it would look like when coded. This should not have to happen when trying to explain something as simple as how a hover works.

When choosing fonts, there are some things more important than whether they are legible or not. However, with Photoshop it is difficult to tell since everything looks so great in the application. Unfortunately, the specifications you select in Photoshop may not translate well when displayed in a browser. Everything seems just a little out of kilter. When viewing the page in your browser, you see that the specifications you designated in Photoshop don’t look anything like what’s appearing on your computer screen.

So, the next time you find yourself haggling over the price of an icon, keep in mind that Photoshop is one of the most expensive web design applications around. While upgrades can help some, and Creative Cloud has been nothing short of remarkable, investing in Photoshop is an enormous expenditure compared to similar applications like Wireframing tools, code editors, and FTP clients.

Photoshop: Just a sketching tool?

The arguments for and against Photoshop is like comparing pens and pencils. Essentially, that’s what the argument boils down to: Sketching tools.

However, the problem with creating a website for a client is that most web design and development projects are not done by individuals but by a team of designers and developers. Some team members possess different skill sets than others.

Applications like Photoshop and Illustrator allow these teams to set the design before development begins. ‘Sketching’ in code is useful for showing a client specific interactive elements, but markup codes lack the adaptability, accessibility, and sharp visuals of Photoshop’s or Illustrator’s mockup.

Photoshop has outlived its time in the spotlight as the industry’s premiere sketching tool. It is time for something new and different to come along. One brilliant suggestion is that designers demand that Photoshop integrate CSS and other markup codes into their web design environment.

In an age where limitations on web design and development are prevalent, the limited capabilities of today’s sketching tools are intolerable. Both Photoshop and markup language needs to evolve and fast!

Wireframing

What we have now is an application that fails to live up to the demands of today’s web design and a workflow that is no longer adequate. In fact, even before the era of dynamic web pages, there were some fundamental flaws in the Photoshop web design process. There was a tendency to try and design pixel-perfect renderings of pages before the building process began.

Aiming for perfection in Photoshop created some serious issues, especially when clients were involved. The workflow process made it all too easy to get stuck in an endless loop with clients pushing ideas about pixel density with the inevitable result that they loss sight of the big picture.

In this case, what’s needed is a more compartmentalized approach to web design. This is something that Photoshop can definitely play a significant role in. for example, in the planning stage, the gathering of information and content, as well as the sketching relationship between different parts of the web page are all activities that are best carried out away from the Photoshop environment.

Wireframing takes this process a step further by laying out fundamental interface elements, establishing ocular relationships, hierarchies and basic interactions. Remember, this isn’t a task that Photoshop can accomplish very well. This leaves the door open for other applications.

The following is a short list of such applications:

Moqups

Moqups is a handy HTML 5 application used to create wire-frames, mock-ups, UI concepts, and prototypes.

UXPin

UXPin is a tool specially built for modern web-designers and developers, which gives them version control, and iterations and collaborative functionality that enables you to give you, your team, and your clients a unique user experience.

HotGloo

HotGloo provides you with every user interface you’ll need to design fantastic wire-frames and prototypes. And, if that’s not enough to pique your interest, just take a look at master library and all of its line of pre-built UI stencils.

Balsamiq Mock-ups

Balsamiq mock-ups give you the same speed and feel as sketching with a pencil while operating in digital medium. It also has a drag-and-drop feature and the ability to resize and re-arrange elements. You can even make changes without starting over and your work will always be clear and legible.

Pidoco

Pidoco is a web-based, prototyping software use for quickly creating clickable wire-frames and UI prototypes for web pages, and mobile and enterprise applications. It also has easy-to-use smart-sharing and collaboration features, a specification generator and much, much more.

Wires

Wires is an application that enables you to build wire-frames right inside your own browser. It is a web-based application for building wireframes.

Mockingbird

Mockingbird is another web-based tool that allows you to easily create, link, preview, and share mock-ups of your web page.

Mock-flow

The Mock-flow Wire-Framer Pro is web-based application that allows you to design and collaborate with user-interface blueprints for websites and software. It assists you in visualizing a web site’s interface, navigation and design quickly.

The Pro Photoshop Argument

In spite of CSS3’s ability to create those rounded corners that really set images apart, and those sharp drop-shadows and gradients, raster graphics are still preferable if you want your presentation to have those rich design details. But, if you use a browser to do your graphic production, you’ll have to use another tool to do the design layout. Such a process is wrought with inefficiency.

Using a browser to create designs appears to be a responsive reaction that eliminates the need to create designs at multiple breakpoints. However, designers who are versed in markup code can build dynamic websites and make changes to the design while in the Photoshop or Fireworks environment.

Some people treat in-browser designing as something new, but, in the early days of web design, it was the norm. So, why is it that only after the practice co-opting of existing design applications like Photoshop that the quality of web-based designing increased in popularity? This trend does not imply that web design will revert to old-school era web design, as technology and our creativity have long since move pass that point, but, in reality, in-browser web design is sort of a regression, rather than this monumental leap forward in web design, as some people view it.

However, this does not mean that Photoshop and Fireworks are a panacea for web design problems. The problems they have with fluidity have been well documented. But, when judged by how they handle most situations, they may be the best options available.

Until web-design tools advanced further, traditional web-design applications like Fireworks and Photoshop will remain the industry leader in web-design tools for the foreseeable future. So, it appears that in-browser designing isn’t turning out to be the panacea everyone though it would be.

As with any industry, a web designer’s ability to create fantastic web pages depends largely on what web-design tool he uses. It also depends on the project he’s trying to create. Some sites are relatively plain and can easily be designed in a web browser, while other more complicated sites are best designed using tools like Photoshop and Fireworks.

Most importantly, though, the quality of the work depends on the skill of the designer. Similarly, the choice between whether Fireworks or Photoshop is the better design tool ultimately depends on which one best suit your talents.

Conclusion

Although markup code can give the designer more of a sense of accomplishment, Photoshop can still play a significant role in the design process. Getting rid of such tools altogether would not be a good idea. At this point, what is needed is not a complete change in methodology, but a fusion of the two processes: a tool that compliments the designer’s creativity, while at the same time helping him navigate the subtleties of the Internet.

Admittedly, some web designers view Photoshop as indispensable, and it still plays a significant role in their web-design work-flow. For them, Photoshop will always be the best web-design application, until something better comes along that is.

Although it has yet to prove it can communicate with the medium the way we would like, it has proven its usefulness when it comes to the designing process. The Photoshop environment is a virtual Wonderland of creative possibilities. Denying yourself access to its array of functions can shortchange your design. So, before switching to mark-up language altogether, consider that you may be sacrificing some creativity for the sake of a browser’s capabilities. So, to preserve your creativity and guarantee a happy client, keep Photoshop in your repertoire.