Hacker News Reader

Comment by zacclark | Hacker News Reader

I agree with most of your points, except that you can't skip photoshop.

Depending on your skill levels in various tools, it might be way better to simply start into html + css. I know a couple designer/developers who can go from an idea to visuals dramatically faster in code than they could using photoshop (myself included). Additionally, you get the advantage of being able to style simply effects in right away (ie, hover states, focus states, etc) instead of having to create extra layers or version of a PS file.

View on HN

Sure, if you don't know Photoshop very well then you could code it faster. Except you will end up with sloppier code and a weaker design.

It is the equivalent of building a house without blueprints. You can do it, but if you take the time to plan things out before you break ground you will end up with a stronger product.

Now, if you already have a design style locked down and code you can just puzzle together then sure, go ahead and skip Photoshop. I do that as well. But, as soon as I need to design a new UI element I am back in Photoshop making dozens of variations.

I understand your general gist... but I find sketching the design by pencil and paper much faster than photoshop - obviously I don't get pixel perfect results, but the intricacies of CSS mean that it's difficult to match a photoshop design pixel-by-pixel anyway. I agree that it's much better to have a visual plan in place first, but photoshop would definitely slow me down, and I've designed dozens of web sites.

Pen and paper should be used as a tool to help in the thinking process, but it is not a replacement for real computer mockups.

Sketching doesn't give you a realistic sense of space and feel for web design. Very often you can sketch something that looks good on paper, but once you put it on the screen it just doesn't translate well to a pixel medium.

Sketching is great if you are working with a physical medium like brochures or posters though. Then it doesn't suffer from the same translation cost.

It depends a lot on where you're iterating. If you're iterating concepts and structure, sketches work perfectly. If you're iterating the size of a shadow, the exact color pallet, the exact shape of a logo then you'd better be in Photoshop.

For all 37s likes to talk about not using Photoshop they don't have pixel-perfect design at all and yet still had somebody slaving over Adobe products while putting those logos together.

Maybe the goal of working in Photoshop isn't to mimic the design pixel-by-pixel, but instead to "sketch."

Mocking things up in Photoshop can be really productive because everything you sketch (all of your background images, buttons, and art) can be used as an asset on your site with minimal effort.

I think what unavoidable is saying is that photoshop, specifically, isn't a necessary step. Personally, I hate mockups in it. I try to use paper and pencil, if it needs to be formal, I use balsamiq.

I do agree that you need SOME sort of mockup, but I actually think low res mockups are more effective because people aren't distracted by the fact that an underlined link in PS doesn't quite look right.

thats not a mockup thats a wireframe

web designers absolutely should use photoshop, because they are essentially providing the "theme" around the wireframe, that may be designed by the UI designer.

It depends on the specific design. If it's wordy and document-like (eg: http://www.w3.org/TR/html5/) then it may be better to bypass Photoshop and start writing the HTML/CSS, since Photoshop is ill-suited for mocking up those kinds of designs.

On the other hand, if it's more graphical (eg: http://www.ubuntu.com/desktop) then I'd agree that Photoshop is absolutely necessary.

Don't you mean GIMP? ;)

And no, I still disagree slightly. It's not about the kind of design the final product is, it's about what function your role is fulfilling. Are you designing the way the people interact with the application, the way the application looks and feels, or both?

It's a lot easier to refactor a website midway through designing it than it is to move the walls of a house midway through building it.

I would tend to think of HTML semantics as the blueprints, with Photoshop as an artist's sketch, but perhaps that's just me.

As to the general feasibility of jumping straight to code, you might find this post by Andy Clarke interesting: http://forabeautifulweb.com/blog/about/designing_the_cannybi...

The design was all done in HTML & CSS. And I, at least, find it more compelling than most Photoshopped web designs.

Reply on news.ycombinator.com