But in all seriousness…while Photoshop may not be the best tool for the job, mocking things up on paper, whiteboard, Illustrator, Omnigraffle, Fireworks, or whatever your visual weapon-of-choice is, is invaluable. You learn a lot more about what works and what doesn't when you're not worrying about whether or not that "float" you just put in to your third <section> column will properly align the element with the first two.
There is a real reason UX/UI and designers exist; please don't crap all over these professions just because you know your code better than you know design fundamentals.
I'm not crapping on anyone.
I came up as a designer, with fundamentals. Actually I was a print designer. Even more fundamental.
I don't know code better than design. Nor do I know design better than code.
I wrote the post to relay the method I use to design, highlight it's efficiencies, express opinions on process, and hopefully inspire more to try it out.
I get kind of annoyed with these smug, pseudo-contrarian articles about, what boils down to personal preference.
The right answer is: Use the right tool for the right job.
* If it's a simple brochureware template, you might be able to knock it out in HTML from the start.
* If it's graphically complicated, with a lot of rich visuals, starting in Photoshop or Fireworks may be your best bet.
* If it is an application with numerous cases and a potentially complicated interface, starting with a clickable modeling tool, like Axure, might be the wisest approach.
* Roll your own approach for a particular interface problem. Axure sucks for modeling mobile application interfaces, but hey, some dude figured out how to make a usable wireframing model with Keynote.
I've used all three methods, and each has their advantages and tradeoffs. Personal preference often dictates how we work, but the project requirements may force us to re-evaluate these preferences in favor of a more efficient means of completing the project.
> I would like to hear how would you design this kind of site without PS?
Not speaking for anyone else, but my usual design process goes something like this:
1. Identify the structure, in pure information terms.
2. Get a basic idea of the layout, often using just a pencil and paper, or a quick mock-up tool like Balsamiq.
3. Implement the basic structure using HTML, typically as a set of divs nested in some reasonable way.
4. Implement the basic layout using CSS, just enough to position the divs in the right sort of places.
5. Add a bit of placeholder text/images and start styling the details as necessary.
The answer to your exact question, however, is "I wouldn't". I think the page you cited is horrible on just about every level, and if that's the kind of result you are looking for from using PS, you're welcome to it.
Neither of my first two steps involves any production tools at all, so I don't think it matters what platform(s) we're aiming for at that stage. I use the same process whether I'm building a web front end, a mobile app, or a native app on a PC. Usually, by the time I'm firing up Photoshop or similar tools, I already have a pretty good idea of exactly what graphics I need and how they are going to fit together.
If you've spent 14 years designing and never even tried to design a site in Photoshop I can't possibly fathom how you could have an opinion of the process.
Agree or not, try new things. Try old things. Make an informed decision.
To those of us that know Photoshop really well, the process is more advanced than what the author suggests. For me, Photoshop is equivalent to pencil and paper -- I can see where things ought to be, how they actually might look on screen, and whether or not it is visually appealing.
I don't fault the author for having his own process, as it seems to be working for him, but having never done it the other way, I can't imagine how he can condemn it. The argument seems, at a glance, akin to a lifelong vegetarian railing against steak.
I don't work too dissimilarly, in that I will start a layout in Photoshop, start coding, then drop back into Photoshop when I need a new visual element, but when I need to plop a logo or button onto the page, I generally have it at least roughed out in Photoshop. My process works for me, generally, and I've done it both ways, but without prototyping the page in some way, I have a harder time envisioning what to code.
Good thoughtful response. And, we actually use the same process. I do use Photoshop for elements, buttons, logos etc as you do. To be clear, what I stated in the post is I don't do ui or ux or layout in PS.
Do you draw out your UI/UX first? Do you use paper? Balsamiq? Anything like that?
All I'm saying is that if you're comfortable in Photoshop, it makes a pretty good mockup tool. I forego pen and paper, and jump straight into Photoshop, and that's what works for me. Squares on a paper just doesn't give me a good picture of what I'm doing.
I'm impressed that you can visualize a site layout in code, but it doesn't work as well for me. To each their own.
I agree, and I do the same. I'm not a professional designer (or a very good one at all), and CSS is great over Photoshop because I don't know--and don't have the time to learn--how to use Photoshop's vast library of features. It's easier to just use a CSS reset, open up Firebug, adjust elements until I get to something that looks alright, and take it from there. And if I want to adjust something later, it's a simple matter of changing a property in Firebug and the entire site changes instantly. No messing with layers or what have you.
For super serious designers with lots of non-CSS-able elements, Photoshop is great. But for someone like me who wants something presentable done in a way that I'm already familiar with, HTML and CSS iteration is the way to go.
Edit: Downvotes? I'm not being sarcastic, I truly find this method useful.
I'm not sure how refactoring, as I understand it as a programmer, applies to a UX/UI design. Are you making changes to your design that have zero effect on your design's semantics? That's what it would mean for code refactoring -- a change that has no visible effect!
CSS/HTML/Javascript can be refactored in this sense, but I'm not sure refactoring a design can mean anything quite like what it means to refactor a program.
Actually, it seems to me that this post means we're missing something. Photoshop isn't doing every thing it could be for web designers.
Any time I've used Photoshop or another image app, I've been frustrated by the need to save my layered image, and then manually also export the final image into place to see it in the design. There should be something in place for that.
Of course, I could write a script that uses imagemajick or something, I suppose... If I did much design work. Actually, I'm already thinking about it now, even though I rarely do design. Could be a fun project.
Sounds like you want Fireworks, which was designed for web design and prototyping.
As someone who is actually in the web design industry and uses Photoshop everyday, I know quite well that Photoshop was never intended to do web design, even though my colleagues and I try. Certainly better than web designing (i.e., creating exportable assets) in Illustrator...
Isn't that sort of thing more in the realm of Fireworks?
Photoshop has never really been designed to support web graphics. It just happens that many people are familiar enough with it to get decent results anyway.
Thanks. I'll have to look into Fireworks. I think I actually bought it in a bundle a while back, but haven't tried using it. (I'm not really a designer, so...)
Photoshop is so lame:)))
Draw your ux logic, than illustrate gui.
Coding is not the way to think about design.
Use prototyping tools. Cleat flow ideas. Than implement them in html/css. Use any graphic editor to illustrate.
For gui stuff i prefer Fireworks. For illustration-painting, accent use sketchbook pro/artrage/pixelmator.
But in all seriousness…while Photoshop may not be the best tool for the job, mocking things up on paper, whiteboard, Illustrator, Omnigraffle, Fireworks, or whatever your visual weapon-of-choice is, is invaluable. You learn a lot more about what works and what doesn't when you're not worrying about whether or not that "float" you just put in to your third <section> column will properly align the element with the first two.
There is a real reason UX/UI and designers exist; please don't crap all over these professions just because you know your code better than you know design fundamentals.