The Post-PSD Era
Are we entering the Post-PSD Era of web design?
Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. Pixels get pushed, details are sweated, pages are printed out, hung on walls, and presented to clients. Clients squawk their feedback, then designers act on it. They repeat this dance until everyone is content (or until nobody gives a shit anymore, which happens more often than you’d think). Only then do those pristine comps get handed (more like shoved) over to developers to build.
It’s an increasingly-pathetic process that makes less and less sense in this multi-device age. I’m not making a case for ditching Photoshop altogether and designing solely in the browser (where are the blend modes in Chrome dev tools again?) but rather better understanding how we use Photoshop in modern web design (thanks Trent).
Photoshop is great for:
- Creating and editing graphics. Duh. Creating/editing graphical elements is Photoshop’s wheelhouse.
- Establishing what Andy Clarke refers to as design atmosphere: the colors, textures and general feel of a design. This in my opinion is Photoshop’s greatest advantage over designing things solely in a browser or on paper.
- Sketching – No doubt Photoshop, napkin sketches and paper prototypes can be much faster than coding out a prototype. However, I will say with tools like Codepen it’s getting pretty damn easy to sketch out an idea in code pretty fast.
- Developing Style Tiles, mood boards, etc. Again this more or less relates to the atmosphere of the design.
Photoshop is not great for:
- Creating fully fleshed-out comps – It’s literally impossible to articulate every environment, resolution, user preference and circumstance in Photoshop. Stop trying. Stop with all the “iPhone view,” “iPad view” and “Cinema display” view. There’s far more to it than that.
- Articulating states – Hovers, clicks, and other interactive elements are better prototypes than in shoddy Photoshop layer comps. There’s a lot more that goes into how something works (performance, responsiveness, ergonomics, general feel) than just the visual differences. Again it’s one thing to sketch out an idea, but I can speak from experience that designers can go overboard with this type of thing.
Use what tools you’re comfortable with, but know when those tools stop making sense. Play the tools in your toolkit to their respective strengths, and sort out a way to communicate your design ideas to clients without forcing them to envision what a fully-polished final printed out product could look like.
Perhaps this post should have been named Death to the Waterfall.
72 Comments
John Locke
Excellent point of view, Brad. This is exactly how I design. I research the site objectives, wireframe on paper, collect images for a moodboard and color palate, and then I fore up Photoshop. Photoshop is awesome for getting a rough idea of how those elements are going to look, and I can change colors quickly, make changes to the basic idea, and then go code in the browser.
I started my own Web design journey around 2009 or 2010, so I have less old habits to break than other designers the same age as myself. This is the future; it allows much quicker iteration, but people who design primarily in Photoshop will naturally resist for a while.
I’ve seen many of your presentations online. You’re a very smart and talented person, but most importantly, you seem very down to earth. Thanks for listening.
Eric Mobley
I disagree. I can’t think of a scenario where coding & designing at the same time would be faster and more efficient than taking care of design first (Photoshop, Fireworks, whatever your tool is) and then moving on to coding & development only after the design is approved.
Christian Krammer
I’d really love to agree, but unfortunately most of the time you need to show something like a “comp” to the client so that she can imagine how the website will look like just about.
I would be the first one to start with wireframes and go straight into HTML with a website, but that’s not always possible.
However such a comp should really be a “one way ticket”. Make a comp in Photoshop, iterate on it in HTML. Everything else is wasted time, as far as the comp isn’t miles away from what the client was expecting.
maxw3st
I used to make wireframes in Illustrator. Now I find it quick and easy to set a 1px red border on a * {} rule in CSS and layout the basic DOM structure of the HTML. You get a nice wirframe look quickly, and it’s easy to make changes to the layout if needed.
If you don’t like red for your wireframes, pick any color you want.
maxw3st
Doh! That should be wireframe look.
Dan Mall
The problem is that we set up clients to expect to approve designs as a preview of what a final site will look like. Or worse: they expect it and we don’t do anything to reset that assumption.
Get rid of the expectation from the outset and it opens way more doors for flexible processes.
Spencer Cooley
Agree.
I would also like to add that it is important to steer the client in the correct direction. The majority of the time their initial concerns are completely mislead. It is the job of the professional to tell the client that doing three iterations of a colorful dinosaur in the corner is a waste of time and money.
What really matters is how the site is bringing in leads/actions. Wire-frames on paper work fine. I don’t even take on clients if I can tell that they want to take control of every micro detail of a project (which is what psd to code workflow encourages). Photoshop is good for giving them a general look and feel, but what really matters is layout, interaction, and call-to-actions.
Jono
Totally agree with Dan, it’s all about expectations. You also have to manage the project very tightly, and deliver flawlessly – which means constant education about what’s next…which is, more or less, setting expectations.
John Locke
I think that many people are still stuck on the idea of how the website looks as “the design”, while that’s only part of the equation. We are now living square in the beginning (yes, it’s only the beginning!) of the mobile first era. Unless you (and your clients) want to spend 3 times as much time mocking up comps, you have to start thinking about the process differently, and yes, educating your clients about how and where their websites are being used.
This doesn’t even begin to dig into the design decisions that you will have to make about what elements are most essential to begin with, and which ones to add in as the resolution grows.
Now those people who work at agencies may not have the power to make these bold decisions on their own, but that doesn’t mean pretend that the Web doesn’t change all the time. We’re not still building sites in tables. It’s part of the fabric of the medium.
It all comes down to how the agency thinks. I know agencies that still don’t build responsive sites. Again, you might not have the power to change things all at once.
Maybe I’m naive, but isn’t the point of showing a client a finished comp to set the exact expectation of what they’re going to be getting? If you are fortunate enough to control your design process, build a prototype in HTML that the client can interact with and iterate on THAT. You can’t interact with a comp, much less at a myriad of resolutions.
Ashley Frasier
I agree with those above that changing expectations from the beginning is where the process can begin to change. I work at a small shop and we are trying our best to integrate new processes for our clients which include designing in the browser rather than relying on flat design prototypes.
We have found that from client to client our process changes. Instead of trying to make every client fit into what we think should work we are finding that our process keeps changing depending on HOW the client understands and adapts to the idea of using the browser from the start. It has been pretty interesting!
But what we have found is that if we know we have a complex ‘module’ we will take the time to build out the flat design details and show it to the client if we feel they need that visual reference. We then send them these modules one at a time in the browser as they are being built so the client sees the progress and how it works in their browser of choice.
tom hermans
excellent point of view. Photoshop indeed still has it’s place, but for eye candy and the creation of art and assets.
Comping/wireframing/prototyping is so much easier in html/css. Okay, it ‘looks’ harder and it ‘seems’ harder and the first baby steps feel like you’re wasting time, but if you spend time on the overall lay-out, where you actually lay out the elements, the modules and such without going into “paint” mode, you’ll get far pretty quick.
and then with less/sass etc it’s so cool to make quickly multiple “colored” versions to hand your client mockups.
Plus, if they want to change an item, a color, etc.. changes are applied site-wide, over all templates.. That’s where the speed win lies.
Oh, and the look on their face when they add: “can we have mockups for mobile too” and you give them a basic idea by resizing your browser..
It looks like you thought of everything.. which you kinda did, with yr mobile first, responsive approach in the wireframing/proto stage..
Bob Firestone
As a developer I hate to get handed a bunch of PDF’s and get told go make this. Give me some basic wireframes, a grid spec and a color scheme to guide me while building the code. Once the basic functionality is working get the designer back in to make changes to the layout, modify colors, textures, and fonts.
Romulo_Ctba
Well, I usually make the sketch in photoshop (start with grey shapes, than make it beautifull) than I code it with less images as possible. Most of PS effects I can do with css3, just a few things need to be saved as jpg, or png. No problem with that, and making the design in PS is, for me, faster than coding or hand-drawing it.
Sam Weller
Great article Brad.
There is no such thing as “final artwork” in the digital world.
Danjim
I guess it depends of your work environment. Agency side with difficult clients (Changing their minds of what they are after), or client side (Agile/not agile). Iterating design utilizing visual tools and code at the same time may be suitable in some projects, it may lead to great discoveries and more valuable/usable designs. On the other hand it could also mean desaster and a out of control project.
Perhaps a wise approach is “Stub·born in the vision but flexible in the details…”
Gonzo the Great
.. Adobe calls Photoshop “Image editor software”, I rest my case ;-P
Cory
Where I work we tend to work out ideas/layouts on a large dry erase board. Then I like to just sketch out by hand and wire frame html/css. It is much faster to get a general idea of where the design is going. When it comes to responsive html/css wire frames to me are the fastest to work with.
Jachin Sheehy
I think the bigger issue here is about the place of content (for sites) and functionality (for apps) in the design process.
This presents as two problems:
1. Either, trying to lead a project with visuals by second-guessing (missing, non-existant, promised) content or interactions
2. or, trying to design content or interactions with Photoshop which was not intended for either
Antonio Pratas
I agree… a little. Even though I totally agree that it’s extremely troublesome to design a full website in photoshop (native controls, forms, scrolls, text, little details that so easily exist in the browser), I can’t see myself designing a website out of Photoshop, because that’s the place where I can change things around and test them out easily. Sometimes I wish that I could use CSS to change colors in Photoshop and sizes, to be able to change more than one element at a time, but in PS is where the final website comes to life. And when I develop it, it’s just a matter of copying the layout, it’s the easiest yet challenging part.
Casper Klenz-Kitenge
You hit the nail on the head, pointing out the death of waterfall. This is much more about process than tools.
Good design comes from tight feedback loops. The primary concern, then, should be with spending the least amount of effort needed, to gain the insights that’ll inform our decision about how the design gets the job done.
No two processes are alike, and as Ashley points out above, they change with each client. Value is added where wasteful parts of the process can be eliminated. This, in my mind, is a key factor in how great designers approach their craft.
I wrote some notes on this last year, for anyone interested: http://cabgfx.com/2012/03/16/removing-waste-in-your-design-process/
Great post, Brad. Thanks for sharing.
Tristan Denyer
I agree, and I second Ashley’s comment “changing expectations from the beginning.” For decades (or longer) we have been breaking our backs over delivering “pixel perfect” comps to the client and getting them to “sign off” on it so we have something that we can shove back in their faces when they come back during development (and they always do) with a change, or six.
Well, it’s time we embrace a new era of web design, be flexible and stop sweating the details and changes so much when we know it will change anyway before it ever goes live. Quit making some web designer stay til 9pm on a Friday so they can update all the 32 different comps for all the possible view states/devices, and print out 12 copies to show the client and say, ‘yes, see, your new font choice of Verdana will look the same on all devices, even in landscape!’ (Amazing!)
There is nothing wrong with designing for the desktop ‘atmosphere’ and creating quick prototypes, or *gasp* wireframes, for other devices and *gasp, again* talking them through it. It’s going to be a hell of a lot faster (and cheaper) to iterate their input/changes during development than it is to make that web designer stroke Photoshop/Fireworks some more to show the client what it will look like on a Surface in landscape facing North.
It’s web, afterall, and once in development most small things can be changed in minutes. When did we start treating it like some print catalog?
Brad, you deserve a medal for writing this. Cheers!
Tom
Interesting points (& interesting comments too)
I agree with some points, in that we should be more agile with working prototypes (esp. interaction) but my biggest gripe with designing is:
Your site will look like it was designed in the browser.
It leads you to design with those constraints, rather than using PS as a blank canvas to design whatever you want.
It’s conveniently suitable to the current trend of flat Windows-like interfaces, but that’s just a small corner of design. Basically I’m saying it restricts creativity 🙂
Ruaridh Currie
Slightly agree, for freelancers like myself you can actually use what ever you want to create site concepts, I know from working in 10 years in digital agencies the design team are expected to provide layouts in a very specific format that the dev team interpret (not always very well). This is usually layered PSD’s as you know, also many agencies have designers who can’t do any CSS/HTML so wouldn’t know how to provide a basic browser based prototype!
I’ll stick to a combination of Axure, Illustrator, Photoshop & layered interaction/style guides just now until a better solution appears!
Andy
Death of the waterfall. This is more about collaboration than tools. Designers and developers working together taking designs into the browser and then working together to build a great user experience.
Namanyay Goel
Great post. I have a similar thinking, and I just find working in PS cumbersome and slow. Without a plugin like that grid one, working in PS makes no sense for web design, where everything should be aligned to a baseline grid, which in my case is 24px. In Photoshop, you can move one OR 10 pixels at one.
/rant.
Anyway, I built a simple template to help people to prototype in the browser, can be found at webstiles.namanyayg.com
Why not try
Fireworks or Sketch
Joe
Hey Brad,
Thank you very much for contributing your article to the web community. The link to codepen was appreciated, it’s the first time I’ve been made aware of the site.
I’ve been coding using HTML since the late 90’s, the days of Red Hat 4, when most IT Managers couldn’t even figure out how to install Linux on a test machine. Most websites being built on Windows 95 were done in notepad, and email was a distant dream for most.
I recently did a really low budget website for a client, using a combination of free online and offline tools, a text editor, Dreamweaver, the open source tool Kompozer and Photoshop.
I agree with you regarding project waste, but, there are two things I feel you have skimmed/overlooked, the skillsets of designers and the communication & collaboration of project team members and client/customer relationship.
Skillsets, and coding – today, with the advances in HTML & CSS works, as well as avascript/jquery, and server side code of choice, e.g. php/asp, the more the graphics guy/gal knows about CSS/HTML, and server side, in my opinion, the more likely the workflow will be efficient. Add the dynamics of back and forth communication, knowledge leaders, most influence, assertiveness, bullying, deadlines, pleasing people, budgets and so on, those with the best project management know how, aren’t necessarily always getting the steering wheel to drive a project.
What does this mean? Many of the important variables to consider before even picking up a pencil, digital or real, are overlooked before knocking up that first sketch with some kind of scale/dimensioning included.
Just my 2 cents worth 😉
Alvin Chao
Great post, I believe this is akin to changing the way a bill becomes a law a la the old Schoolhouse Rock videos. It’s going to take time, but especially in a mobile first/responsive design Photoshop leaves a lot of gaps in comps. Also, those doing the design will often not take a mobile first approach. This can lead to a lot of back end refactoring or reworking of design to fit mobile / responsive design.
Remi Grumeau
The introduction is probably true when you work in big agencies for big customers. It may also be true for content portal, news websites, … but for most of us here, you just CANNOT tell a customer “it will have black in the blackground, some shapes in green and text will be white”.
Nope, you can’t.
Customer will or should always ask: “show me a mockup of main screens, with some random relevant content in it” (yes, do use Photoshop but stop using lorem ipsum for god sake!!).
The customer will validate (or not) something like this:
http://www.ethanmuller.com/img/portfolio/omega-music/mockups.jpg and not something like this http://www.newfangled.com/stuff/contentmgr/files/1/74b9b3883d3fdfb1c7aa52e04ead5081/misc/moodboard_1.jpg.
And that’s for a good reason: he/she wants to know how the website will look like on Chrome, Firefox, iPhone, iPad & Galaxy S3: those are 80% of his/her targeted market. He pays you because you know your shits and how to make it happens.
He can totally understand things may not look like exactly the same on the thousands devices out there (do not assume he is an idiot) and btw doesn’t want to pay you for loosing your time supporting devices/platforms soon-to-be abandoned.
That means a lot more work for creatives, a lot more work for developers and the more important: a lot more talks & interactions between creatives and developers.
And yes, we need to design a lot more cases: mobile first dumb phones, regular smartphone portrait & landscape with touchscreen or not, big smartblet (like Notes 2) portrait & landscape with touchscreen or not, tablet/small desktop portrait & landscape with touchscreen or not, big desktop with touchscreen or not.
A full documentation aside mockups (in the wireframes?) might tell the devs which elements scales, expand, change when touchscreen or not, may have to slide off the canvas (i know you love carousels as much as i do), how menu show show/expand/slide, how gradients & drop-shadows might degrade on non-css3 browsers, what is ok not to be retina-ready, …
Then creatives & devs can work efficiently, knowing before they start typing the first line of code how pieces might morph.
Sadly, yes, all those steps need a graphic & a wireframe editor, a lot more talking. All projects i’ve seen in the last ten years which avoid the Photoshop step were graphic & UX disasters. This is why i think you are wrong here (we can’t always be true).
And since we have to deal with a lot more user cases, it sounds pretty damn obvious to me it represents more work.
But do not EVER think, assume or let technical reasons should drives you because in the end, it’s always disappointing. Design bottom-up, code top-down http://en.wikipedia.org/wiki/Top-down_and_bottom-up_design
Zach Ford
It ultimately depends on the project. If it is a minimal website, then prototyping in the browser would be the way to go. However, if you a giving a client a rebrand, it has been my experience that they want to see fully flushed out design comps to see how the site will represent them with the other collateral. And by the way, who uses PhotoShop for comps anyway? ILLUSTRATOR BITCHES!
Ian
Please come to my office and burn this into the skulls of our designers.
Rob
Whats needed is a mixture of Gather Content and something like – http://html.adobe.com/edge/reflow/
I think designing full sites in photoshop will become a thing of the past and something like Reflow will take over.
Ray Hwang
Working in interactive marketing most of my career, I would say the disjoint is not in Photoshop to HTML, but more so creative to tech. I see all too often, creative working independently from tech, and keeping the account and client to themselves. They come up with the ideas, followed by the wires and designs, make the clients happy and finally surprise the tech department with a 500mb PSD “final design”.
If creative and tech work together from the get go, creative would know what is feasible and within budget, tech will know what they need to prepare for, and clients will have an even clearer picture of the deliverable. Then tech can start their prototyping, creative can create their designs and guides, and finally combine the results.
Anyway, just my 2 cents.
Jason Demeuse
Completely agree. It’s not only the waste of time mocking the comps up either, I hear plenty of people other than myself having problems with a client seeing a “finished” looking comp and assuming that the project is close to completion, when in reality you haven’t even started development yet (no matter how many times you tell them otherwise).
One of the reasons I like working with a wireframe or other early concept with clients instead of a fully fleshed out PSD is that it is plainly obvious that we are in an early stage of the project.
Matt Haff
Really good post. I’m seeing more and more posts like this come out that are great for ideal situations when the client isn’t a pain in the a**. What we really need to be focusing on is how to properly handle majority of clients that want to see comps of sites.
I’m always one for pushing the design process forward, but some clients are going to require seeing comps before they commit to anything. Those same clients are usually the ones that end up changing the design, so you don’t want to use up too much time with architecture and coding only to come back and redo it all.
Side note: Why don’t you have at least a “tweet” button on here? Not very good UX if you’re making me copy/paste the url and make a description and include a via @brad_frost etc.
Tegan Snyder
Brad I echo your comments. I have seen this cycle over and over again. As soon as you throw Fireworks into the mix the process improves ten-fold. I couldn’t imagine the process of producing mockup upon mockup in Photoshop, but Fireworks makes the process more efficient.
Qa'id Jacobs
Meeting somewhere in the middle (but more on the side of designing-in-the-browser): see the codepen project Style Tiles with CSS3 and Sass by Jerad Gallinger – http://codepen.io/jeradg/pen/rFqat
Sumeet Chawla
Brilliant article! This is one thing I have been thinking about a lot.. Photoshop can’t explain or create a mock up of the experience a developer can build using that design. I have always believed that designs/PSDs are lifeless objects and developers give life to it.. 🙂
awesomerobot
Glad I’m not the only one. Designers and developers should be working much closer together than they are currently.
Hell, most web designers should be at least intermediate web designers at this point.
Fully designed PSD comps are such a massive waste of time, and I’ve seen hours upon hours wasted on updating COPY in PSDs. It just doesn’t get more asinine.
Bobby Burdette
I will say that last year (’12) I started prototyping in a web based app called PROTO.IO This was the first time that I honestly believed I could design a complete site or mobile app and not rely on photoshop 100%.
This doesn’t make photoshop something I wouldn’t use. I would use it to create background textures, icons, and any images needed, but the actual layout I can do in something like Proto.io.
The advantage to using an app like Proto.io is that it will let me not only design the experience, but prototype the experience. It forces the designer to think about HOW something is used and not just what it will look like. It also lets you preview your work via the device you’re designing it for.
So yes, I believe that we are in a Post-PSD era.
Matt Kenefick
Using PSDs in the development process is hardly a waste of time. It’s useful for designers, teams, devs, and clients… if you do it right. The only thing that’s really a time waster is designers that fumble around with non-important tasks.
Copy changes don’t need to be reflected in every PSD; it should be changed in the copy deck.
PSDs should be linked so you don’t have to apply one changed to 10 PSDs.
Groups and sections should be clearly labeled and broken out.
Etc..
Design time shrinks, development time shrinks, and everyone remains on the same page for what needs to be done. There’s a defined ending and everyone knows what it is.
James Wyse
Great post. I tend to use Fireworks in the beginning to get a general idea of what I’m designing, its easier to drag around boxes and get my layout organised before jumping in to HTML and CSS. After that I do everything in the browser. I have a development setup using a node.is server which pushes code changes directly to the browser without reloads, with two monitors this process becomes super easy!
Murat
What about advancements such as CSShat which turn PSD layers into CSS? It won’t be too long before it’s entire layouts
Jim
I weened myself off of Photoshop years ago and I’ve been a Fireworks guy every since. It is an actual web designers tool. It can write clean CSS and multi-state. Pages let you quickly build a full functional prototype.
Ryan
Photoshop is good for….believe it or not….editing *photos*. If you’re doing graphics in Photoshop you’re just a clueless cargo cultist, or worse still, use Photoshop simply because you think you’re “supposed to”.
tl;dr: use Inkscape.
phillip jacowski
agree 100%
i do as much as i can in the browser, my grandpa does some of his mocks in photoshop though
Ignacio Giri
Basically what you are saying here is to use Photoshop only to design a UI kit for the website. I agree with your thoughts, but the article somehow is incomplete. You are omitting the different profiles of people who design websites. Not my case, but I’ve seen people who design websites and can’t write a single line of HTML. Your article suggests that the new era of web design, the web designer must have a certain set of skills. With that said, probably reviewing the title as The Web Designer Evolution could be a better fit. There are many other factors that have changed the way we design websites today, good idea for another article.
Gravitational
Why the sensational “Post PSD-Era” headline when you yourself say PS is useful for most of the creative process?? Creating the style, tone, graphics, mockups, sketching etc.
It’s more to designing than placing graphics in specific places in different browsers. It’s not WHAT or HOW but WHY. Of course usability in different devices is incredibly important but that’s just another thing you have to be aware of. If you as a designer can’t communicate and understand responsive design no tool in the world can help you.
Octavian Cioaca
Somehow I agree with your article, but Photoshop, InDesign & Fireworks are awesome tools that can’t be replaced so easy. Design in browser? This can be a good start – http://pixlr.com/editor/
Adam
I think the argument here is interactive designers putting together Photoshop comps with no hands-on understanding of the medium. It also feels like there are many disgruntled developers foul-mouthing Photoshop, when in actual fact the underlying issue is lack of collaboration with ui/ux designers.
Every craftsman has his/her preferred tools and arguing which is better is a waste of time! It is about the end-user and whether great experiences are being had between them and your product.
Marco Barbosa
Brilliant! Great post as always.
I believe PSD still has some good cases but best scenario for it would be having a PSD file as a “Style guide” instead of an exact layout which will just lead clients to confusion “hey – how does it look on my mobile?”.
I think the many comments above me covered it all. Great discussion.
Sagiruddin Mondal
If the grid system was not invented I would be fully agree with you. but now a days after getting lots of designing frameworks,it makes the design more live and direct, though I ll agree with the ps matter if it is the case of most accurate design to demonstrate otherwise live design and coding is fast and easy. what should you follow is depends on the term of your project , I guess.
I am @beingsagir in twitter.
Lee Kancher
I still use photoshop to layout when I am working with my programmer to build from the ground up. I use an amazing plugin for PS5 called web zap http://webzap.uiparade.com/. I highly recommend it for designing responsive layouts.
I also use style tiles http://styletil.es/ to present a look and a feel for my client without having to layout the entire site and I tell them in order for responsiveness to be perfect the need to be flexible with end result.
Markus
so designers need to code then? let’s see what they have to say 😉
Maybe its photoshop (or preferably fireworks) that needs to evolve so that they can layout in a more flexible way.
Andrew Searles
I think you’re probably right. This is where we’re headed. But I think the conversation is larger than that. It’s not about the tools we use. It’s more about the process we go through. To be honest, a pencil and paper is probably the best tool you can use. If designers start moving away from Photoshop and start designing straight in the browser, the sale of #2 pencils better skyrocket. You have to think through the layout before you get to the computer.
The real revolution is not going to be what tools we use but the process we take to get a solution. Our tools should compliment the process. The ultimate goal of whatever tool we use is to communicate our ideas/solution.
I wanted to write more so I put it in a blog post. http://andysearles.com/using-photoshop-in-web-design/
Adam Huxtable
As a developer I can’t think of anything worse than getting a non signed off of design from the client. Something that takes 5 minutes to change in Photoshop can take a hell of a lot longer to code and vary rarely will it be quicker to change something in code over a PSD.
In some of my freelance work where they have given me free reign on the design it is fine because there isn’t much of a timescale, but even then I prefer to have a design they are happy with rather than going back and forth with amends to the code.
Just my two cents.
Ta.
Patch Hofweber
Don’t go chasin’ waterfalls.
exodo3
I find interesting some of the comments of people that disagree, there seem to be a disconnect within the process of designing and its delivery. I have been a designer for 15 years, a web designer for 10 and a front end developer for about 3, I believe that to be the progression of a web designer now days. In that time I have come believe that educating your clients about the process is a fundamental part of designing a website.
If I have the content, however complex it may be, using modern tools such as boilerplate, sass, emmet etc. creating an html wire frame is a matter of a couple of hours at worst, much less with oocss frameworks, much less time that it would take me to work on Photoshop because I don’t only design in Photoshop, having to keep a close eye on how it would be implemented. Now specially with responsive design, where we need to design more than one mock up in PSD, without truly being able to foresee the flow of the different resolutions. Once you have a framework you can deal with the layout and typography; once that is in place then fancy buttons and fluff. If we consider the growth of Flat web design, then Photoshop becomes even further irrelevant other than as an image manipulation software.
I find that clients are more and more understanding that having a short time to show mock ups and a long development time is shifting to a longer time to mock ups and shorter time to development.
Stephen
Agreed, there are some great new tools out there and there are new ways of thinking and working. Photoshop vs. no-Photosho, for me, depends on the type of client. Big gigs for big companies, the jobs I need to sustain my life, generally come with corporate input and/or a company style and brand and possibly an agency who already developed a brand and print style. Many times I am presented with a Photoshop layout or if I create the layout, the tightness of a Photoshop layout is an expectation. I have found that bigger companies accept fewer intangibles; like wire frames. The exception is when you are banging-out simple sites with trendy layouts that utilize a theme and existing styling…but more often than not, bigger companies don’t want to look like everyone else or they have specific layout needs.
Also, with a properly assembled PSD, it’s a breeze exporting layers in various formats and resolutions.
Craig
Why the use of Photoshop (or Fireworks, etc) will never, and should never, leave the design process: people—our clients—will always need to see what the product (that they are paying you to build) will look like.
Wireframes and moodboards are vital steps in the journey—there will always exist a vast army of clients that will stare at a wireframe, sitemap, or moodboard like a dog that has been shown a card trick.
Human beings will always remain human beings.
Gravitational
Making me think of the way people declared Painting irrelevant as an art form when Postmodernism came along. Everyone wanted to work with Photography since this was the ONLY modern way to express yourself in a contemporary way. And guess what? Painting was never dead and is more relevant than ever. It’s not just that simple as some people here think, things evolve, become more complex. There are more choices to be made, more knowledge to aquire. Sure PS needs to be a lot more flexible (maybe Reflow will do this) but think twice before you go ahead and proclaim this sort of things.
To make another point. For me personally the small screens of smart phones is much to small to begin with. That kind of size isn’t useful for more than just very basic interactions or tasks that benefit greatly from beeing ultra portable. Since the arrival of tablets I almost only use my phone for talking. Also why make the assumption that EVERY site has to be responsive. I was going to buy a Blu-ray from my phone the other day and was forced to this mobile version of the store. However you design such a store seems to fail. In this case I want to be able to have a richer experience and interact in a completely different way than this small screen allows me.
People expect to be able to everything everywhere all the time. What if this is wrong? Maybe you can’t sit on the train and buy an IKEA kitchen from your tiny phone.
peeela
Too much cool-aid being drunk around these parts. There are certain tasks that prototypes and style tiles work really well on – large websites with tens of page templates for example. There are also certain occasions where budget and legal departements behind those budgets mandate full comps in at least 3 device sizes.
I agree that Photoshop is losing it’s edge and role in web design, but also I think that ‘web design’ has always had development or aesthetic leads – and depending on your needs, you’ll still be leading with Photoshop or a prototype, and reiterating between the two.
Anthony Green
Lean UX http://lmgtfy.com/?q=lean+ux
TABETHA
Clients should see mood boards with realistic modules (style tiles…) that contain generic but relevant looking content so that a theme begins to emerge and the whole thing becomes a work in progress and not a ‘here’s what it will be’.
http://Www.coroflot.com/TABETHA and check the mood boards section… Unconventional but fun and flexible. Combines interactive trends, graphics, content layout, themes, etc.
James Herrera
In my experience the major hurdle in moving towards a more fluid and dynamic design/development process is that it requires conceptual thinking. Being able to comfortably see how A gets to Z without seeing the steps in between is what creative people are really good at but not as many clients, who are good at other things. I’ve had a few clients over the years who are able to think conceptually and not require pixel-perfect layouts but not as many as I’d like. I also think the reason what static comps (in Photoshop, Illustrator, InDesign or whatever) are still so prevalent is because for the majority of a project timeline the “user” is actually the client and they needs to see something concrete. They also need to be able to sell the website, app, interface, etc throughout their organization (most importantly up in the org) and so many are most comfortable emailing or printing a PDF. This, of course, isn’t the best for flow between design and development and it creates artificial milestones but until more conceptual clients are in powerful positions it might be business as usual for a little while longer.
Chee
I’m getting really bored of people bashing designers that work in photoshop, photoshop is just a process in which a website gets designed.
Designing in browsers only work if you are working on large corporate sites that are locked in to a grid style system.
You all moan that designers don’t know about functionality, I beg to differ unless you work with designers that are still stuck in the 80’s.
Just because we can’t program it leads you to believe we don’t know how the internet works or how technology work, this mentality is absolutely absurd.
Design is an important part of the process and will never be replaced with browser based design unless we are using gridsets, and if, or when we do, the web will be an awfully bland and dull place.
Phil
My general approach is to design the mockups in Illustrator and once they are approved code from there.
I often start the build at the same time so I can test things out so I am designing something that is practical.
I have on certain occasions for smaller quick turn around jobs designed in the browser. Drew up wire-frames with pencil and paper, used Photoshop to prep the assets the assemble in the browser. This would really work for large scale sites though.
Paul Trani
Good post! Interesting to see how everyone works. I’d just like to say to not underestimate the Photoshop we use today. It’s not your parents Photoshop. It has evolved and will continue to evolve to meet need of designers everywhere.
For instance, the most recent update to Photoshop allows users to import colors form HTML, CSS, SVG and even output CSS. Now I know it’s computer generated CSS, but this is a great start, giving me something to work with and edit to my liking, but still work with visually. Video: http://paultrani.com/2012/12/photoshops-new-css-capabilities/
No full disclosure. I work for Adobe. So yes, I am bias. But I just wanted everyone to know that today’s and tomorrow’s Photoshop will evolve to meet the needs of designers everywhere. And we even have new tools we’re working on. Something called Reflow. Check it out: http://www.youtube.com/watch?v=hSDuP1j4JVk
John Bolyard
I do a combination of Photoshop and php. I start with a very basic layout in Photoshop and show the client just where the parts are going to go – much like a wireframe.
Then I start executing the design in html (php). This let’s me see how my design is going to work across all the browsers and devices before I get to deeply into the specifics.
When I have the basic php done and I know it’s a good structure, I take a screen shot and work on that in Photoshop to refine how the navigation is going to work etc.
I might do this several times refining the site along the way (with client approval :^).
When I’m done I’m also done with the primary coding. Then all I have to do is to execute the site.
However! This only works with a client who understands how the process works – otherwise it would be a massive headache!
I’ve evolved this process to really let me get what the client wants without going off in 10 different directions.
Works for me!
Neo Ighodaro
After all is said and done, I still think it boils down to preference and eventually the clients needs.
Most clients especially those in big firms cannot and will not present wireframes to their bosses for approval. In this case maybe giving them an idea on photoshop wouldn’t be too bad.
You can also choose to insist on wireframes and watch your business go to some design agency that really doesn’t care much about comps and that.
Professionalism also requires flexibility. Best practices is not always the only acceptable practice.
sheena
Interesting article, and a great discussion!
I might just add that not all DESIGNERS understand the various facets of development, and not all DEVELOPERS understand the various aspects of great design.
Until this changes there will always be some separation of roles and each will prefer their own personal method of working. Obviously both professions need to start working more closely together and collaborating from the outset (where possible), but I don’t believe there is one right or wrong way to go about creating a website. There are advantages and disadvantages to both.
Choose what works best for you personally, your team and for your individual clients. Each to their own as the saying goes!
Frank Juval
I’m on board!
In freelance, I design in the browser and spend less time in Photoshop.
Although I contract for clients that are still working with static comps. Type in Photoshop is NOT type on the web.
Showing a client a comp is fine. I get that they want to see what their site will look like. Use a comp/Style Tile just to give clients an idea of the aesthetics but start building with a prototype.
The focus should be the UI, IA, UX, and functionality before aesthetics come into play.
I constantly hear clients asking “how will it work” when looking at a printed comp. And designers having to stand there, point at the elements on the comp and explain even the simplest of things like “If you click on this, that happens” instead of just having a prototype clients can surf themselves (Might as well use a hand made flip book to show hover states or swiping!).
The other downside to comps is that clients focus on the styles as opposed to focusing on the experience (and all that entails). And rightfully so. You can’t interact with a static comp so how will the client understand the experience?
By showing the client a prototype, especially in a few devices, they can start to see (and learn) how the product behaves according to its environment.
And that’s my 2 cents.
Thank you! I’ll be here all week.
Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.