When I was in high-school, I can still remember my first introduction to Photoshop. As with most high-schools, nicknames were thrown around a lot at my school. Creatively, most of the connotations related to an animal that we best represented, either visually, characteristically, or in some cases derivative of perceived-natural body odours.
One day, I started using Photoshop to visualize these characters. I started gathering photos of my class-mates, crudely attaching their faces to the various animals they ‘represented’. They were an instant hit, met with verbal accolades of the highest order. I would print them on paper at home and bring a new one to school every week, or send them around via MSN Messenger. My classmates couldn’t wait for the next iteration.
While your introduction to Photoshop may not have been met with the same social-gratification, most designers use Photoshop for a similar reason, It’s what we’re used to and what we feel most comfortable using.
So why the long story you ask? What’s it got to do with this article? The reminiscence helps emphasise something. Photoshop, in all its glory, is still predominately a photo editing application.
The Problem
Workflows are a subjective topic, and often a highly personalized process depending on your circumstances. So there’s never a ‘one size fits all’ solution. However this doesn’t mean we can’t think critically about it.Don’t get me wrong here, I love using Photoshop. It’s a great tool and for me, it’s been my go-to design application for quite some time. It gives me the creative freedom and tools I need to feel I have control over my designs. However, for the purposes of web design, it’s becoming more of liability and less of an asset. Here’s why.
Photoshop Is Raster Based
Although not the most important, it’s one the reasons. Why use a raster based application (which is resolution dependant) to design something that eventually won’t be. A large part of the web renders through browser-engine algorithm resulting in a fluid vector-like visualization, not bitmap or raster based where pixels are fixed.“But Photoshop has vector tools!”. Sure it does, but they are still based on the Photoshop engine, which is pixel-based, not vector based. Not only does Photoshop have little vector-output support, but the UI (canvas) is raster based.
The web is increasingly moving away from low-resolution raster based output, with flat design being one of the biggest influences. It can be quite common these days to visit or design a website a website that (besides images) has absolutely no raster-based output at all, including icons.
Photoshop Isn’t All That “Pixels-Perfect”
The phrase “pixel perfect” gets thrown around the design community a lot. It’s a kind of “I’m a cool designer that knows what I’m talking about” buzzword. You throw it into a sentence and it looks like you know what you’re talking about. Unfortunately, it’s an often misinterpreted concept.Traditionally, design has dictated development. The capabilities and creativity of design software have predominately eclipsed those of web language. So the attitude has always been, “The design looks like this on Photoshop, make sure it looks EXACTLY the same on the web” – Pixel Perfect.
If you’re a web developer or a ‘hybrid designer’ like me, you’ll know exactly what I mean. I can tell you Photoshop is a real pain for development. Web development is based on code that has very little room for inaccuracy. So why design on an application that not only produces visually inaccurate representations for the web, but is based on an engine that’s resolution dependant, with resolution dependant output. If you want ‘pixel perfect’, design in Illustrator.
Designing From A Different Perspective
I’ve always designed from the WYSIWYG perspective. As in design to your wildest dreams in Photoshop, and make it look the same in development. However this methodology is becoming increasingly archaic. The web has certain constraints, however like the saying goes, “Where some see adversity, others see opportunity”. Working with-the-web is a whole lot more productive than working against it. For me Photoshop is a far-cry from doing this.Ultimately, the design will be rendered in a browser, through mostly CSS styling, which is bound by a completely different environment than that of Photoshop. The web is rendered via a device-resolution that’s dictated by the viewing device. This is most evident in flat design, in which the majority of rendering is handled server side in the browser. As the web moves towards an ever increasing browser-rendered state, raster based-design seems progressively inappropriate.
The Web is Fluid. Photoshop Is Static
This is currently a major issue for designers and one I find really important. A big part of the issue lies in the massive and rapid technological advancements that have driven major changes in both web design and development over recent years. The internet has grown from a static layout, to a highly interactive and user-experience driven collection of pages and applications.So many designers still design from a purely visual perspective; however we need to consider a lot more than just static elements nowadays. Pages are fluid, designs are adaptive and interactivity is now a major design concern. Ultimately, we no longer use the web the way we used to, so why design it the same way?
Assets Are No Longer Assets
Traditionally, web development was design-dependant, with assets from Photoshop being an integral part of the process – images, icons, measurements and comps – all based on pixels. However this design-development relationship isn’t as reliant on design assets anymore. These days, a final product relies much less on assets from the graphics application, with most of the work being rendered through mark-up styling via CSS.For example, let’s say I design a website in Photoshop. Very little, if any of the data is actually transferable to the web. Unless your developer slices the PSD elements, in which case I’d advise you to get a new developer.
Changing Work-flows
Having considered all this, unfortunately, it’s difficult to find a better solution, other than Adobe Illustrator. Adobe has released it’s Edge Tools, which are aimed at rapid prototype development, however they still rely on the traditional design workflow of starting off in Photoshop. Fireworks was a short-lived solution, but Adobe has discontinued any further development since CS6. There’s been a number of “rapid prototyping” applications released lately, however most of them focus on a PSD->Browser workflow. It would be nice to have an application that combines both, a browser render-engine based design in conjunction with the prototype.Working in Illustrator has its draw backs, however being able to create multiple art-boards in one document (for responsive design and UI setup) is a big advantage. Furthermore its vector engine and output means not only the design, but the data can be transferable to the web. Unfortunately, like Photoshop, it doesn’t cater to any interactive requirements.
A traditional web design workflow might look something like this:
Unfortunately the process from PSD -> Web Prototype is a lengthy and largely incompatible workflow.
A proposed workflow could look something like this:
Use What Works
Ultimately, when it comes to design tools, there’s no right or wrong. It’s all about using what feels most comfortable and makes sense to you as a designer. If you feel more creative in Photoshop, use it. There’s no reason to change workflows just because somebody says it’s not right. That being said, I would love to see a browser-based hybrid application that incorporates the power and creative freedom of a graphic design application, with editable web-output, kind of like Illustrator with a code editor.What do you currently use to do the majority of your web design? Have you tried any new applications that stand-out? Share your thoughts in the comments.
0 comments:
Post a Comment