UI that looked sexy in Photoshop almost always looks overdesigned when we try it for real in the browser. Here’s a hypothesis. Simple and useful designs just don’t seem good enough when they are dead pixels. They need to be brought to life before they can be appreciated. Until that happens we overcompensate with garnish.
RS
on 28 Oct 09Or to put it another way, there’s a different metric of success when you’re designing in Photoshop versus when you’re clicking through a prototype. In Photoshop the metric is visual. But in the heat of the moment, as you click through the screens, the metric is clarity. And sometimes the things that made the mock look so sexy are the exact things that detract from the clarity as you use the interface for real.
HankK
on 28 Oct 09This must be in reference to Haystack, since it definitely looks waaaaaaay over designed.
My personal perfenece is to keep it simple.
The following design mock-up looks the best.
https://s3.amazonaws.com/37assets/svn/331-haystack-home-v02-small.png
Ward
on 29 Oct 09@hankK -I dont know how much less designed haystack could be. Pretty clean interface…yes it has a little bit of sexiness, but to use 7 “a’s” in your “way” is overkill IMHO.
Jérémy P.
on 29 Oct 09I never understood why people do webdesign layout in Photoshop. In Fireworks, I could understand. But Photoshop?
George
on 29 Oct 09What’s the point of having a footer on a page that you can’t get to the bottom of? :D
Dan
on 29 Oct 09This is especially true when faithfully implementing a photoshop design across multiple browsers requires significant number of images and extra markup or javascript that kills the page’s performance.
In photoshop, you don’t have the experience of watching a page slowly load and flickr and morph as new elements get rendered on the page.
sensei
on 29 Oct 09Platitude city.
justin h
on 29 Oct 09I dunno, I think you’re veering too close to equating working in photoshop, period, to being dangerous/wrong. A skilled and experienced designer can always see interaction intention in a design and hopefully not over-design with extra effects and flourishes.
I personally can’t stand to start designing in anything but photoshop (or fireworks). Yes, HTML is nice, but I find it much more tedious to revamp a page in HTML than I can when I have a well organized .psd and can just move a few layers around and change some colors. I’ll save the coding for when I’m pretty sure what I want. But when I’m not sure, I like to be able to click and drag rather than editing text and refreshing. It is more visually intuitive.
@Dan: Do things seriously flickr onto the page anymore? Must be some pretty heavy pages.
fred
on 29 Oct 09what i can’t understand is “designers” that use adobe illustrator or indesign to design their websites.
also, people who type all lowercase. sheesh.
Peter
on 29 Oct 09Why not design with css and html? That is where de action happends. You know exactly how much markup you have and what the possibilities are. When de design is finished… it’s finished :-)
Jamie, Baymard Institute
on 29 Oct 09Do the design in HTML and CSS, and if I want to try out a major structural change, then you can take a screenshot of the HTML-design and play around with that in Photoshop for 5 minutes.
Like the change? Implement that in HTML+CSS.
Wolf
on 29 Oct 09I don’t really agree. I tend to make the best design I can make in a graphics application and then bring it to life with HTML/CSS/JS. I jump back and forth between both.
Parts of the design (e.g. custom checkboxes) do not get implemented for technical reasons (pain vs. gain).
This is essentially the same discussion as “Why we don’t use Photoshop” (but you do use it now eh ;))
Sacha
on 29 Oct 09This is a good insight, but let’s not forget that there are UIs where the “over-designing” itself adds a lot of the value (for example: http://tapbots.com/weightbot).
Let’s not forget that some UIs are just not possible to design with html/css.
Thibaut
on 29 Oct 09As I understand it, you’re not opposing code prototyping to PS prototyping. It’s more about knowing what aspect of your work these tools will allow you to evaluate, and include this in your design process. Thanks for this point of view.
And George made a very good point :-)
Greg
on 29 Oct 09+1 for “why have a footer if you can’t reach the bottom the page” in reference to Haystack
Haystack already seems to be turning into a cluster b/c there is simply so many listings.
My eyes just glaze over all of the listings and I leave before even looking for a designer.
How the web designer listings are presenting presents the information in a way that just overwhelms the person looking to hire a designer
Ryan
on 29 Oct 09There’s a corollary: UI that looks sexy in Photoshop almost always is virtually impossible to make functional in IE.
Alexander
on 29 Oct 09Kind of odd to state that UI shouldn’t be designed in Photoshop when you’ve presented UI screens from Photoshop for Haystack…
Also, in my experience most clients want to know what the website will look like before you have time to code, or are being paid to code.
Daniel
on 29 Oct 09@Ryan: Bwaahhh ahahahah …. IE. Whatever.
RS
on 29 Oct 09@Alexander: I didn’t say UI shouldn’t be designed in Photoshop above. All of us at one time or another find it useful for mocking an idea. The point is to be very skeptical about those Photoshop mocks and know their limits because they only give you visual feedback, not usage feedback. It’s just a pattern we’ve noticed internally. Too many Photoshop mocks early on are almost always a sign of trouble with the design.
Justin
on 29 Oct 09give me a break, just because you personally can’t think about ixd in photoshop or strategically design doesn’t make it a hypothesis for others. good luck pitching this to any agency or int’l brand creative team.
Josh
on 29 Oct 09I think it’s a blanket statement to say that Photoshop is overkill or unnecessary. All websites don’t have the same objective, some projects benefit from time in photoshop and the flexibility it allows.
Photoshop has a learning curve, maybe some people just haven’t learned it? I’d rather stab myself in the eye than use Fireworks over Photoshop.
I think the process for designing a site where the look is of higher importance will be different than designing a site that looks like this blog.
I love function over form as much as anyone, but sometimes the look of a project is of high importance.
RS
on 29 Oct 09Sure it does. No matter how smart you are, Photoshop mocks are still imaginary and prototypes are still real. You will get different feedback from your imagination than you will from actual running code. And it doesn’t matter who you are. Now whether you actually care about that different feedback is something else.
John
on 29 Oct 09This is absolutely spot on. When you design in Photoshop the focus is on the design - it’s micro focus rather than macro - you’re looking too much at the individual elements, how nice they look and how they fit into the page. While this may give you a nice looking page what you really need is macro focus—you should be looking at how the page works as a whole and how it flows. This is very difficult to do in Photoshop because you can’t really use the page, and usage is what’s important, not design appraisal.
Josh: I think it goes without saying that different sites have different objectives. If you want to show off your illustration skills for your portfolio site then Photoshop is your best bet. For a lot of sites, and pretty much all web apps, the primary focus is function though not looks, and that’s exactly what Ryan’s design method helps to achieve.
Adam Wood
on 30 Oct 09I’ve had a very similar experience with writing music:
On a real piano, the resonance fills out the notes so nicely that simple chords sound like music. Even more so with additional instruments in a real ensemble.
But simple sounds lame on a synth- even a good one. I have found myself overcompensating with too much stuff: extra movements, extra notes, extra instruments.
I realized I had to either compose at a piano, or really train myself to hear with my mind what it would sound like.
Josh
on 30 Oct 09John – No, saying that Photoshop is only okay for a portfolio of my illustration work is limiting. In general what I am against here is the dogmatic rules that imply that Photoshop is always wrong for this, code is always better for this…
It’s fair to say that one could get distracted by photoshop. One could push pixels around forever, losing sight of the usability, but I don’t think that holds true for everyone. Developers can just as easily lose sight of functionality, working just to get a job done, blindly churning something out. One can focus on usability working from either method.
From Photoshop one can anticipate and have a vision of what the user experience will be like without jumping straight into the code.
max ivory
on 30 Oct 09Its not an either/or debate. Photoshop is great for visualising look and feel. HTML is great for the user experience.
ps. Another useful technique once a site is build is to make design changes in Firebug as its so much quicker – then screengrab them into Photoshop to finish off. The best of both worlds!
chrisBZ
on 30 Oct 09I definitely understand where Ryan coming from. I try to get into code as quickly as I can. I always start in fireworks, but try to quickly get a ui pattern going that I can slice and build. From there, I kind of go back and forth between fw and the html to get just the right level of refinement.
Of course, the difficult aspect of this workflow is client communications—but it also lends itself to underpromising (by showing the original mockup) and overdelivering (by launching refined version that has gone back and forth between fw and html a few times). This is actually a big improvement over the traditional workflow, in which the original comp generally looks more refined than the final product.
Paco
on 02 Nov 09When I’m designing I always imagine a future user of the website using my design. I not try to create just a good design. The website design have to help users to achieve their objetives.
Ryan, May be It’s because You design websites focusing only on the design, I mean, without considering that your design is going to transform into another thing and the context it’s going to be. It’s like try to design an advertisement for a highway and designing it prepared to look nice on the screen.
This discussion is closed.