Photoshop mock-ups for web design? Or web design for photoshop mock-ups?
It has become more and more clear to me switching from job to job, working as interim designer or working with other designers on Web layouts, that it is preferred by many to make “Photoshop mock-ups” of their Web layout. This is a really interesting subject because I personally don’t do this. I remember the first job I went to where they would ask for a mock up via PSD file, I remember thinking to myself…. why?
The mock-up mans thought: Creating a Photoshop mock-up gives the small business web designer the ability to show the client various web layouts for the client to choose from (correct!). Designing the Web site after the photoshop mock up is easy (incorrect, for some).
Can users tell if a Web site has been made from a photoshop mock up? Most of the time, they cannot. An experienced Web designer could tell just by looking at the code. Currently there are a lot of tools available to create browser compliant Web sites from PSD files or even from the export as CSS tool in ImageReady. But is this sort of cheating?
To some, it may, to others it may not be. I personally don’t like creating mock-ups in Photoshop, because I am not an experienced graphic designer. I personally could design a layout quicker than I could create shapes and layers in Photoshop. Plus, if the small business client chose that layout, the code would have already been made. But to an employer, it is a waste of time. Here is the difference between the guys who must make Photoshop mock-ups before creating their Web layout. First of all, they cannot envision in their mind the way the Web site will look, function, and activate (work with the current, or replace the current Web site). While some may argue that a Photoshop mock-up benefits the creative process, I personally feel that the creative process is completed in my mind before I even begin to work. I know what I want to do, I know how to do it, so then I just…. do it! The idea of taking a Photoshop image and cutting it up into slices, naming those slices similar to hand-made DIV titles and inserting PHP functions is sort of insame in my mind. But again, that is just my own style. I am a style guy, not a PHP guy, so I understand layouts and CSS probably better than the Photoshop mock-up men. Could this be two different types of designers working in the same environment? I think so. Because those Web Designers where most likely Graphic Designers before they became Web enthusiasts. This topic runs deep into my belief that a Graphic Designer shows his style as a Graphic Designer in any Web project he or she may do. Then visa versa for a Web Designer creating Graphic Designs.
Can you tell the difference between Photoshop mock-up Web sites and hand-grown creations of the mind?
We are not picking on Splashpress Media of any sort, we just know for sure that this design was made using a Photoshop mock-up. This may give some of our readers a better picture on what we are trying to explain. Have an opinion on this? Speak your mind! Know of Web sites that where most definitely designed in Photoshop, post them in the comments!
Feb 27th 2008
OK, firstly I’d like to say that I’m a website designer. I use Fireworks to mock the designs, then build them by hand using CSS/XHTML. I’d assume there are a good number of people who do the same.
I’d never consider using any built-in coding from Photoshop, or any sort of 3rd party people to build my layout, as I design with the build in mind.
I use mocks for a number of reasons…
- When you are tasked with building a website, more often than not, you have to design more than just the homepage. Often there’s other content requiring special attention. There’s forms, tabular data, and media pages. There’s galleries, news lists and all manner of things that I can’t possibly design in my head without putting them to paper/fireworks.
- The client generally will have a few bits of input for the mocks. They’ll want to tweak areas, colours, type and lots of other things, and without a mock, you can’t show them how the site will look when complete.
- The time it takes to do a mock in Photoshop or Fireworks and the time it takes to build the mock are possibly not comparable, but what happens when the client comes back and wants things moved around slightly. You can’t always argue the ‘designer knows best’ corner, and it’s infinitely easier to throw around a few shapes in Fireworks than it is to re-code divs, especially if you’re floating, aligning and have margin/padding etc etc.
I can see your point, but I don’t agree. I think mocks are an essential part of the design process, and personally I can go through up to 50 iterations of a design before I send it to the client, tweaking here and there. Then there’s often another ten or so before it’s pixel perfect. Then it gets built - not with any templates, but hand-coded so I have complete control over the code, and can make it look exactly as the mocks do.
You say those who need to make mocks can’t envisage the site before they build it - true. but not entirely. Designers envisage the design before they put it to mocks. They then use the mocks to go through iterations of the design, and can use it to aid the design of the other pages in the site. You can’t possibly envisage more than a 5-page design in your mind, entirely, right down to things like bullets, icons and other things.
Also - I’ve not been a graphic designer, so your argument about those using mocks, coming from a print background is somewhat flawed too. A broad assumption I think.
I’d say your article is a mis-informed piece, where you voice your opinions on the way you work, yet don’t seem to consider any of the other side of the argument. I felt compelled to comment, in the hope you might see the opposing views.
Al.
Feb 27th 2008
ugh. I hates the next step in taking files from PS and recreating it in a layers format to use proper css methods and avoid just slicing.
Feb 27th 2008
Al thanks for commenting, I think you got this wrong though.
I am not unbiased to people who put together mock-ups… I am unbiased to people who put together mock-ups, then use a plugin or the slice tool to CREATE the actual Web site.
You said you make mock-ups for your client, if you read it, I said that is a good idea…. I have been in those situations, I have done that…
But again, your missing the point, look at the picture, it is an example of a Web site built completely on photoshop slices…..
Maybe that’ll help you with the conversation.
P.S. There are many points to this conversation, but I tried to skim it down due to the fact that I could probably make a small book about this subject.
Feb 27th 2008
Hell I still want a visual css tweak tool. I do not use the likes of dreamweaver. But Css has it’s method. So in my grand idea of a Css tweak tool, their would be control handles for things like margin and padding. And all layout would be precise is Css terms.
Any hoo, this is something I have wished someone would steal but no takers yet
Feb 27th 2008
Trip, yeah there is a lot of PSD to CSS / XHTML plugins available.
But I personally enjoy just typing out the CSS, I can probably make a CSS working layout in around an hour or so. It would take me longer to make the layer and what not.
Only downside to that is my Web sites are flat, I don’t like too many gradients or drop shadows, things like that. But thats just considered to be a web design style (grid layout, monochromatic)
Good idea though Trip! I am not a software developer at all though (way too confusing for me)! haha
Feb 27th 2008
Ah I tried all of the PS plugins. I really don’t want to use PS for coding. Still using dedicated tools like cssedit and Taco are gear for me. My little app would be a separate program written in Cocoa or Abodes new Air… Buut I am still fighting with learning Merb and rails to be of any hope in getting this made yet.
And thats where other things break down. Dynamic apps like Drupal are so jimmied across PS when your hacking in a new design.
And then there’s Javascript animations and Expanding background image boxes in css that have no possible way to create in photoshop for dynamic review.
Feb 27th 2008
Patrick - thanks for clarifying. I stand slightly corrected.
Al.
Feb 27th 2008
Alex -
hahhaa I think we are on the same page here, I think it just got a little jumbled with information. I think the thing that you confused you was the whole “graphic designers who make web pages, leak their graphic style into the web layout” thing…
But as a designer, I am sure you have come across Web sites that look like your viewing a PSD document..
It’s just the nature of this Web site that people stand to correct me. Hopefully my call for guest bloggers and writers will strike some new targets for my visitors… haha
Feb 27th 2008
Well first Patrick Ya gotta get more people submitting replies on each post
Instead of “no comments”
Feb 27th 2008
Haha Trip,
I cover a lot of topics, a lot of topics most people don’t know about too.. Large PR and marketing corporate changes, and shifts, and analytical behaviors… Things like that most people don’t really know about… We have fans, just not any fans that choose to discuss…
Its okay with me though, I write on this page because I enjoy it, not because I need to do it.
Feb 27th 2008
Thats really cool Patrick. It is always reassuring to know that the blogger is posting cause they like the subject and not just using it as a marketing gimmick.
Feb 28th 2008
After working with web designers since 1995, I can tell when someone has designed their web page in Photoshop without first concepting the big idea or thumbnailing a real layout on paper first. That is more annoying to an interactive creative director than bad Photoshop slices that a web developer can clean up. But, I always suggest to my web designers that they work hand in hand with the web developer once the comp is in Photoshop. After doing this for so many years, all of our designers are trained to slice “by hand” with the marquee tool in Photoshop. NEVER the slicing tool. The slicing tool is just not accurate enough. The marquee and info box is the most accurate way to get the job done when you sit with the person who actually builds the site.
Feb 28th 2008
Kim,
You hit it right on the nail. But there is a second side to this story.
I don’t create “cookie-cutter” Web sites, nor do I believe Web sites should look like this. The internet was made for information, not to decorate information. A newspaper is a good example, did you ever think why they continue to make them black and white, with minimal decoration? Why can’t they have flowers and illustrations all over them? Because its about information architecture.
I am sorry, not to pick on you but http://www.imwithsully.com/web.html those are pretty good examples of
“cookie-cutter” Web sites that I see companies making. It is bad to give small business’ as well as large corporations the idea that these are “good.” I will take information architecture, and organized functions over anything (much like the lack-there-of, but still similar large billion dollar web companies, feedburner, facebook, myspace, mybloglog, etc etc etc)
Feb 28th 2008
Sweet… nothing like a good old back and forth critique! I appreciate it. Yes, some do look like cookie cutter, but my designers did do their due diligence by presenting thumbs and comps and the main idea is still there along with usability standards and web copywriting. Thanks for commenting back.
Apr 10th 2008
Al (Alex) , you took the words out of my mouth. In particular…”I think mocks are an essential part of the design process,”
Also, I definitely think graphic designers (such as myself) design websites that take on a print-quality. I think web designers with a print background usually have better designs.
Apr 12th 2008
I build every single website in Photoshop first, then open a blank HTML document and code it by eye. No PS tools are touched after the design is finalised. I don’t think many professional HTML/CSS designers would ever use PS slices.
Also, if you use a technique some people call “wireframing”, the PS design can still go quickly. Here’s one of 31three’s projects - http://www.31three.com/projects/tcc
Not the greatest design in the world, but fine nonetheless.
“So I understand layouts and CSS probably better than the Photoshop mock-up men” - Can you be more arrogant?
Apr 12th 2008
@Kurt That last quote is probably true though. Just like a doctor knows more about heart surgery than I do. It’s all about what you have studied, what you know, and how you execute it. You might have taken the arrogant nature of that sentence out of what it truly is, just a very direct way of being upset about “photoshop mock-up slicers” flooding the job market from true artists.
Apr 14th 2008
As a designer of a large and highly popular enterprise-level website (which will remain nameless for obvious reasons), I felt compelled to comment on this.
Our design process here focuses almost entirely within the mockup stage (and often for several iterations in the wireframe stage). Long ago, I too, used to take sites straight from my head (or a piece of notebook paper) to code. Over time I’ve come to realize this is a very reckless way of designing.
There are so many elements that go into a good design, and to simply visualize it in your head is somewhat similar to planning out a road trip on google maps vs. actually driving that route. You’re definitely going to have the big picture down, no doubt, but as any good designer will agree, the devil is in the details…and these things you cannot always account for “in your head.”
I will be the first to admit that some of our (very) basic pages (such as the occasional intercept page or alert box), are actually more efficient to simply take directly to html, but in almost all cases those are designs based off of an already pre-existing one with only minor tweaks.
Quite often, seeing a design vs. imagining it, turn out to be significantly different and sometimes surprising. I can’t tell you how many times myself and our other designers have made the comment, “You know, I loved this idea, but now that I see it, I think ________ is better.”
You make a few claims against mockups such as, “I personally could design a layout quicker than I could create shapes and layers in Photoshop.” That’s all fine and well - that’s what wireframes are for, and quite often we utilize these to nail down the layout before we move into mockup stage - where we tend to the finer details.
The time it takes to create shapes and layers in Photoshop is really not all that great once you become more proficient in the process (I myself have found numerous time-saving techniques to allow me to mockup styles quickly and modify them even quicker). In the end, the time saved from mockups far outweighs the time it took to create them in the first place (if you’re doing things right).
You go on to state, “Plus, if the small business client chose that layout, the code would have already been made.”
This is true, but, much like Alex wrote above, we often go through numerous iterations (while rare, we have gone through as many as 60+ iterations per page on our larger projects). Our average # of mockups often ranges between 5 and 25. In most cases these designs vary enough that creating html for one would not transfer well to another design - thus negating any time saving benefits. In addition, it takes significantly more time to code up one page (properly) than it does to mock it up.
On average, we spend 2-5 days mocking up about 5-20 variations on a page and one day building it in html. To try and create those same variations directly in html would be a huge waste of resources and time -my job would quickly be forfeit.
I think what really prompted me to take time to write this response was what you said here, “Here is the difference between the guys who must make Photoshop mock-ups before creating their Web layout. First of all, they cannot envision in their mind the way the Web site will look, function, and activate (work with the current, or replace the current Web site). While some may argue that a Photoshop mock-up benefits the creative process, I personally feel that the creative process is completed in my mind before I even begin to work. I know what I want to do, I know how to do it, so then I just…. do it!”
I find that to be a poor generalization based on little more than your own opinion and founded in no fact whatsoever. Before I even open photoshop, I’ve already laid out the business goals, researched similar sites, jotted down layouts and ideas on paper, and generally have a very solid idea of where I plan to go with the design, what I want to accomplish, how the finished product will look, and how everything will function.
To make a claim that people like me ‘cannot envision in their mind the way the Web site will look, function, and activate ‘ is simply not true and frankly a little insulting..
In addition, you assume too much in your comment, “The idea of taking a Photoshop image and cutting it up into slices, naming those slices similar to hand-made DIV titles and inserting PHP functions is sort of insame in my mind.”
Creating a mockup and coding are two completely different things. You assume that anyone who creates a mockup is planning on chopping it up into slices without any regard for proper coding practices. You fail to recognize the purpose of creating a mockup is not to generate html, but to do exactly what you seem to argue against, “While some may argue that a Photoshop mock-up benefits the creative process, I personally feel that the creative process is completed in my mind before I even begin to work.”
The primary purpose of a mockup should be to aid in the creative process. What one does with those mockups once the coding stage begins is completely determined by how good of a coder they are, and should have absolutely nothing to do with their reason for choosing to create a mockup first.
My team has always hand-coded everything. We certainly make use of imagery from our mockups, but the structure and style of the page is determined before-hand, using web standards and proper coding techniques. Around here, the thought of slicing up a mockup and dropping it into a page is pretty much unthinkable.
Essentially what it comes down to is this. I too can make a good design in my head without creating a single mockup, but I can make that same good design a great one with a little extra work and fine tuning in photoshop as a mockup first.
Apr 14th 2008
Dave, thanks for commenting. First, if you are not the type of person I am examining in the article, then you shouldn’t be insulted. With that said, your last paragraph was probably the best. The point is, if you are a photoshop and slice designer, are you really a designer? Do you understand Fibonacci’s golden proportion? Do you know what Grid Layout is? Do you know correct color scheming? Do you know correct typography? Did you start off as a graphic designer and now turned to web because it earns you money? I think you know the answers to those questions, as do I.
Apr 14th 2008
For future commenters, don’t comment if it’s going to be dumb like 80% of the others here. Bottom line, do you think Google used photoshop and slice to make any of their Web sites? A mock up is fine, like I explained, but not producing that mock-up into a Web site using the photoshop slice and psd2html plugin. Stop feeling bad for yourself that you are a graphic designer and don’t know web. Go pick up a book about Web design, or read some great material: http://subtraction.com
Apr 16th 2008
Fine is.. fine, but is it a worthy goal? I always strive for perfect or great. And for that, I need analogue sketches, meetings, and Photoshop.
Apr 21st 2008
I guess so..
May 11th 2008
This topic was very useful to me as well as all the comments that turned the discussion very interesting. There are many designers, that did not study web design as a career but learned it on-the-go. Those designers do understand all the process that comes to produce a piece (say, a logo) that is the research, thumbs, sketches, and so but are not coders and are not interested in css, or html. Working hand-in-hand with a web-developer helped me to be more informed in the way one must use Photoshop to layout a design and not to use it to produce an entire website.