Photoshop has become somewhat of a standard for web design mockups.  Anyone who has had to create a design or develop from one knows that it's not the perfect tool and sometimes creates more problems than it solves.  It's still an invaluable tool in our workflow, but for mockups and concept designs I believe there are better approaches.

Pixel Perfection

The main issue with Photoshop is that it's never an accurate representation of your final product on the web.  Photoshop is a design tool and as such will always (graphically) look better than on the web.  Sometimes this is because a PSD doesn't take into account standard web practices or even worse, the designer doesn't have any experience in web development.

Now I know that ideally design and development should be separated, but in the real world there's no way to do one without some knowledge of the other.  Developers should understand some basic design fundamentals and designers should definitely understand basic HTML and CSS.  Knowing the limits and how a design will actually be coded leads to better designed websites.

Even if you have a solid design in Photoshop, you're still going to run into issues where the PSD design and actual web design differ.  Typography is notorious for looking much better in Photoshop and often falling short on a webpage because of anti-aliasing and how fonts are processed on a website.  But more importantly, there is no way to show the interaction of a website in a Photoshop design.  Does a button transition colors on hover?  Do you have background images with parallax effects?  Do certain menus slide out?

Responsive Design

Mobile website and responsive designResponsive design, or mobile versions of websites, are pretty much standard now.  The problem is that Photoshop has no way of showing how a design will act and behave on real website.  Aside from designing 3, 4, or even 5 different versions of the site in Photoshop, there's just not a good way to show a client how it will look on their mobile device or tablet.

Adobe has been working on a product called Reflow that is supposed to handle this.  Essentially you can set media queries and break points just like you would in CSS and it will show you how your design looks across different devices.  It sounds great in theory, but in practice you're putting in nearly the same amount of effort that you would in just developing the site to begin with.  Reflow does allow you to generate HTML and CSS directly from your design, but with very little control over the actual elements.  If you're going to have to completely rewrite your markup afterwards, why not jump straight into actual development and skip this step entirely?  Not to mention you're lacking many of the tools that you get in Photoshop to begin with, making this yet another middle man between concept and final product.

Time and Cost

Time is moneyWhat this all comes down to is final cost to the client.  Sure it would be awesome to start with a wireframe, create a branding and color guide, use these to create a Photoshop design, put this design in a program similar to Reflow, and finally develop the site.  But this just takes way too long to do and not every client wants to spend 5 figures on a simple site design.

So should we just start developing right away without any design concepts?  Well this would certainly be the fastest and most affordable route, however it usually doesn't work.  You might get lucky if the client loves what you've developed and case closed.  But any design changes after coding are a lot more intense and costly.  Small design tweaks like a color change or content swapping is not a big deal, but if they decide they don't like the layout or functionality then you're going to spend a lot more time in this phase re-coding the site.

Photoshop Mockup Alternatives

What we usually do for our clients is somewhere between the straight-to-coding practice and a full-fledged design.  We're mostly concerned about getting the design direction right the first time.  If you send a design to a customer, many times you're going to get responses back about how they don't like the copy on the first page or how the order of the menu items should be changed.  But this isn't really a concern for designers or developers.  Changing content is simple, but the layout and feel for the site is something else entirely.  So what are your options for presentation?

Wireframe

The old-school method of wire-framing is still around and for a good reason.  It's a very straightforward way to look at a site and understand the exact layout without worrying about moving the logo 5 pixels to the left or switching menu item #1 with #3.  They're quick and easy and clients are usually pretty quick to sign off on them.  The downside is that they sometimes don't paint a very clear picture of what the site will look like and for smaller projects some people consider them overkill.

Style Guides

This is what we've started using recently and it really conveys the feeling behind the site to a client without the mess.  A style guide is a collection of hex colors, typography, and other elements that quickly show the brand and give you a rough idea of what the site will look like.  If you want to get more detailed you can include images, various color palletes, button collections, and form styling.

Not only do you draw the clients focus away from the content itself and more to the design, but you also layout a clear cut set of rules for your own development.  Having these styles you can quickly set values for all the basic elements on your page in your CSS, SCSS, LESS, or whatever form of you styling you use.

Better Web Design Mockups

For us right now, the best method we've found is creating a quick layout or wireframe and a style guide that demonstrates the direction of the site.  This allows us to quickly create something that can be approved so we can move on to the coding of the site.  In Photoshop it's easy to get stuck at this phase worrying about little details that may later have to be rehashed in the live website anyway.  With a style guide and wireframe as a base we know that we're headed in the right direction and can continue to tweak when we have a live version to work with.

I'm sure that this process will continue to change and I hope that eventually there will be a more streamlined approach, but in the meantime what process has worked for you?  What problems do you usually run into when designing mockups versus programming a site?