Drawar

Nice timing, just today I read an article on CSS Wizardry concerning the topic. Here's the link:

http://csswizardry.com/2010/10/designing-in-the-browser-leads-to-better-quality-builds/

Me? I prefer designing in the browser too. Especially now that the we went back to using fluid layouts and media queries.

@DanielWhyte

Is a full-fledged Photoshop mockup necessary for the client to "sign it off?" Why not sketch out the basics and revise the coded version as necessary?

It depends on your skill set. There are people who are highly skilled on the design end those who are pixel-perfect coders. That you design in the browser doesn't make your process more or less useful or efficient than someone's Photoshop-first design. It all ends up in the browser.

That said, I think web designers should be able to code their own designs since code is the language of the web. But I know there are quality designers who can't code as well as I can. Yet.

My process is to create a Photoshop comp, get the client's feedback, but perform the agreed edits in HTML/CSS/JS. Once that first round of edits comes back, the client signs off that we're headed in the right direction and we move on from there.

The biggest problem with showing a photoshop comp is the fact that it is static. I've always bristled against that. It's really difficult to show hover states and true type rendering (not to mention different browser renderings).

I haven't done it yet, but i'm seriously considering not showing photoshop comps any more. I just have to learn to allow myself more lead time to code out the site for the initial approval.

That being said, I doubt i will ever get away from photoshop for my initial mockup though. It allows me to produce the initial look and feel way faster than i can in code. I just don't know that i will keep showing it to the client.

Do you guys use Photoshop as a generic term? Because if not, I never understood why any web designer / developer would need PS in the first place. To me, that always seemed like total overkill. If you're a graphic artist, or a photographer, okay -- but for a couple PNGs you add noise to? Not worth the 6 or 700 bucks, IMHO.

*

In any case, this obviously means I never do full comps. Hand drawn examples of the general layout, then maybe some kind of wire or map for the site structure, and if need be a basic mock in Inkscape.

Depending on the type of site and client, I may add parts that get some further treatment, and images for that I do in GIMP.

After that the demo site goes up and we work from there. Sometimes we elaborate on stuff in the mockups, sometimes things move around in the demo.

I see it this way, if the client is web and / or tech savvy enough to have specific ideas of "how much padding needs to go on a CSS3 animated dropdown", they can discuss that with me upfront and they'll know what work is involved.

If they know nothing, I become the boss. They get to choose a style, a coloring scheme, whatever, but if I say a gradient looks good there, or the ruby red of the dotted lines under links needs to be brighter, I make that call. Doing detailed mockups for those people only confuses them, and will get you in a lot of trouble.

@nilsgeylen
I disagree. Even when working with tech savvy clients or even other devs, its hard to just "talk" about padding on a dropdown and other aesthetics. And if the client doesn't know much and you're the boss, what style are they picking? Are you guys both just talking about this stuff without seeing anything or is there some library of styles that you present them with to choose from? Most everything I do design-wise is custom from scratch, so I have to make it before I can chat with the client about it.

Personally, I'm usually given wireframes and then I go Paper → Pixels → Code. The paper sketches are just for me, not for client. Wireframes do not dictate layout. They are a visual checklist of elements that need to be on the page.

One thing to keep in mind is that most Designers don't code. They might know some code, but most aren't proficient enough to code anything ready for deployment.

A lot of the process probably has to do with getting your ideas out quickly. I think for most designers its easier to click and drag things around and tweak a couple layer styles to get things looking how they want.

I would also say that on the whole most people who start with code tend to have simpler designs. For me personally I would feel limited creatively by starting with code and skipping photoshop.

Lastly, while there are many revisions that I prefer to do in code (changing copy for instance), I definitely prefer to have the clients sign off on things visually before I dive too far into code.

I guess I'm speaking mostly from the agency side of things. For people working at agencies, I don't know a single person that doesn't start in photoshop (doesn't mean they don't exist). However I also don't know a single one of these people that calls themselves a "web designer" so perhaps its just different terminology. However its not just ex-print designers. Most of the designers I know may have done some print design in school, but have never done any professionally.

I would say that most people who start in code are more than likely developers who do some design as well, as opposed to designers who also do some code.

I think starting with code or a framework in mind can be a very bad thing (I know, not always). A prime example of this is the current post on Drawar about Bootstrap. When I saw that I threw my hands up in the air thinking "THANK GOD! Its not just me!" So many people that dive into a framework or even a CMS (wordpress, etc) box themselves in. Their ideas are immediately limited to many presets and limitations. When you start in Photoshop (or even better, sketching on paper) with a blank canvas you can do anything.

I think a lot of people are comfortable with the web being what it is currently. We put the nav up top with the main content below that and a sidebar on the right. I want it to keep changing and grow. I feel that thinking inside the boxes of frameworks and such can be counter productive to pushing the web forward. For development I think its fine. Standard languages and frameworks are a really great thing, but all of that is behind the scenes. The user couldn't care less that you built your site on X framework and Y CMS. The user cares about what they experience. I focus on that first and worry about development once I feel I have created something the user will enjoy/learn from/etc. whatever the goal may be. When I do think about development early on its in order to come up with ways to enhance the user experience and to make sure I'm not creating something that is impossible to build. :D

As for wonderthemes, I think the site turned out really nice, but it looks like that is a project that you started. Its easy to make changes as you go since you're running it. Its quite a bit harder with an actual client where you need sign-offs from multiple people and/or departments.

I'm a designer. The web is just a medium.

As everyone else probably, I've watched this debate for years. Not that I am necessarily more wise about the topic now than I was fifteen years ago, but there is one thing I have seen time and time again:

Tell the Story

Whatever tool helps you do this is the "right" one. Whether you are trying to land a new client, work with colleagues or revise a time-tested tool, whatever visuals, words and information convey the reason for your design are the right ones.

So, as a few folks here have said, the first step is to consider what medium will actually convey your design the best. You don't necessarily have to begin there, but that's where you want to end up, where you'll have the most impact.

Then, as work proceeds, the best thing to do is to step back, take a day or night off and reassess. Is it working out like you thought? If you were just taking your first look, would the work convey the message in your head? Would it do so if you showed it to a friend? Even better, show it to a friend!

If the output tells the right story, and tells it well, then you've succeeded, regardless of the medium.

That's a really great post, and, when it comes to web sites / apps / software, I agree with almost everything in there, especially the storyboard first part. At the studio, we used to call them "wireflows" as a sort of hybrid activity that bridged stickies-on-the-wall and sketching. Everything else happened naturally as a result.

By way of full disclosure, I've been hooked on Story lately while reading books like:

http://www.amazon.com/Whoever-Tells-Best-Story-ebook/dp/B0015KL2EM

@aaronkwhite:

You don't have to be a fantabulous backend developer or rails guru, however in order to be an truly effective designer (let the bashing begin) you need to understand all the intricacies/limitations involved in the web medium... I could come up with some crazy off the wall ideas, but if they are un feasible, for what ever reason... then I've just wasted everyones time

I think this is an excellent point. However, do you think that you need to know how these things can be coded or can't you just explore the web and see other working implementations and just assume that someone can make it happen for you?

I might see a sliding pane effect and have no idea how it's done, but it might spur me to the idea of a double pane sliding effect. I would have no idea if it is possible, but since I saw the sliding pane effect happen, I want to assume a double pane (whatever that is) can happen as well.

@nilsgeylen: Which type of designers are you asking still exist?

@nilsgeylen: Then I guess you mean designers who can't code. I think every web designer should have a basic understanding of HTML/CSS, but in no way does that mean they can code the crazy interfaces that we are starting to see on the web. Does it make sense for a designer to spend time thinking of the design , putting it together and then also having to code it all?

Seems logical to me to have a designer and developer sitting side-by-side knocking out a project together. In the more complex projects this should speed things up quite a bit.

This is more a personal choice for me... but handing off my designs to someone else feels like an incomplete existence. Now I'm not a great back-end developer and in a lot of cases that integration is beyond my skill level, but the Front-End is a familiar space and if I only did designs and relied on someone else to implement I'd feel like less of a person.

I'm not saying this is the case for others at all, I know a lot of designers who don't like to code and prefer to live in Adobe all day, everyday which is great. They usually make good money doing this, but for me I enjoy the full experience of designing then building (to the extent that I can).

Or another example, The Amazing Spider-Man game website feels like something that is done in Flash, but it isn't. This is obviously a design that most people wouldn't go from sketch->HTML. Instead it would be some storyboarding to get the flow, design tool of choice, and then to the code. Taking on all 3 of those tasks would take longer to me than having a team do it. At least that is my opinion.

Back to the original question, it is totally dependent on the project.