September 07, 2004 | View Comments (38) | Category: Design
Summary: What purpose do design comps still serve in our world? I don't know.
This weekend I was left renderless without electricity so to say the least I had plenty of time to work on ideas for the sites. I got out my notebook and wrote down the ideas that I had and found that while writing down these ideas, different layouts would begin to play out in my head.
Once I had a couple of layouts set I got my sketchpad and drew some simple sketches to get a feel for what I was going for. Then I wondered if I should even bother with going into Photoshop or Fireworks and working on a design comp. I mean I had everything in front of me already and if I wanted to play with colors, CSS makes that job easy as pie.
I know some people think that CSS has limited our creativity somewhat because we tend to stick with the layouts we know will work in CSS and try to fit the content within them. However, I wonder what purpose does working with something in Photoshop still serve? I know there are a million answers out there so yes I am trying to stir the hornets' nest on purpose.
Maybe it's the speed at which I can code CSS that makes me see less and less use of graphical software when planning out a website, but I really can do a design faster in XHTML+CSS than I can in Photoshop. Granted I am not even an intermediate user of PS, but with that kind of speed and interchangeability why would I want to even become proficient in it.
Almost every designer I know does comps for their clients so that they can pick out what they want to go with, but I have no clients that require designs so that is another reason for me not to go that route. Also what if you just did the 3 sample designs in CSS and let them pick and if they wish to change something then you are already one step closer. With a design comp you have to go in and change it and then still do all of the coding.
Back in the table days you could rely on a graphical program to slice and dice your comp up so that the HTML wasn't that far off from what you would use, but no such software can accurately achieve that with CSS. Why do we continue to add another step and more time to our client bills? This is something I was just wondering when I had no power for two days. Feel free to slap me.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/327
We still use concepts just because we can work up concepts quicker for clients and because some clients are going to go through endless concept redesigns. So it isn't always a cut and dry issue to use conecpts or not.
I have gotten to where I will code out lots of the elements that I want in my concepts (navigation, text, etc.) and then do a screen grab of the page in the browser, and paste that into my concept. It helps bring the concept closer to the final product because of the differences in text in a browser and the way Photoshop renders text.
I do, however, usually start on paper with rough sketches. This helps drive my direction so that when i go into photoshop, I am basically working on what will be my final concept and not constantly revising my ideas while working.
Jeremy Flint (http://www.jeremyflint.com)
Another thing to think about Scrivs. A lot of your designs are really minimal in the graphical area, eschewing images and other raster graphics in favor of background colors and borders in CSS.
Nothing wrong with that. I actually like the minimal designs. But because of the style you design in, it really is easier just to code it out rather than spend time in Photoshop.
As for sites that are more image driven, Photoshop is kind of a given until the final design is locked down.
Jeremy Flint (http://www.jeremyflint.com)
You don't use graphics. That makes it easy.
On another note, I have noticed my tendency to start going in this direction. I create very rough sketches, focused mainly on the IA of the site. Then create very rough photoshop comps which only give me a general direction, and finally do the remaining design work finishing touches with CSS.
We've had a much deeper extension of this discussion around clickable wireframes and the need for comps. I think the extent to which somebody can design this way is heavily dependent on their use of graphics.
Garrett (http://www.yourtotalsite.com)
Great point guys about the minimalism of my designs. Definitely a huge oversight on my part. Obviously the more graphics you have the more a graphical program will come in use because you gotta have something to create those graphics!
Scrivs (http://businesslogs.com)
Well... you can't achieve much with CSS alone... except for squares and colors.(not saying that isn't enough in some instances). But for most designers (this is a guess), I would think that adding graphical effects to a piece is very important...
Graphics add another dimension to a website, with it you can convey a feeling that you can't with CSS.
Of course with the right color scheme, and some tricks for the layout you can acomplish a lot, but that will only take you so far.
It's like advertisement... CREATIVITY! imagine if all comercials were made of just plain text, and flashing colors.
What good would it do? eventually all types of layouts and colors would be drained.
Graphics allow you to be even more creative.
Graphics will give you the edge... combined with good content of course...
Just my opinion.
Alex Giron (http://www.cssbeauty.com)
Hmmm, I think the wrong point came across. I know we all need graphical software to create graphics, but I meant whole design comps.
Scrivs (http://businesslogs.com)
For me, it helps that I already very comfortable with Photoshop. I can put together a mockup quickly. Mainly, I still use Photoshop to add another level of detachment from my tools (CSS). On the occassions I've gone straight from paper to code, my designs end up boxy and plain, lacking the details and nuance that usually gets introduced when I create design comps. I like to design without thinking about how I'm going to build the design in code. Sure, Photoshop imparts its own influences on my work, but some of that gets tempered when I code it anyway. The important thing is to keep "design" separate from "development" for as long as possible.
John Zeratsky (http://johnzeratsky.com)
I understood wrong sorry...
Like mentioned above, it depends on how much graphics your piece will have... for instance when creating CSS Beauty, I never even opened photoshop, i went straight into coding CSS... that's because the site is very simplistic, and it only has some shadows here and there, and a few icons which were created later.
But for something like this www.bluecapsule.com (a blog I am developing at the moment), it was pure photoshop... all elements were created within photoshop.. .I exported some of the layout elements, I opened editplus and started coding...(well most of the code was there already from MT).
So you can see why comps are still used.
Sorry for the missunderstanding before...
Alex Giron (http://www.cssbeauty.com)
It just depends on whether you want to code the basic elements of your web site, or "draw" the basic elements of your web site in graphics software.
I usually draw out my designs on paper. Then I draw out the basic elements within photoshop (to save time later), after that I tend to code the basic elements using xhtml/css. I then start to make the photoshop comp "more graphical" once i'm happy with both the basic comp and the basic "coded comp".
It's easier/quicker for me to do it that way.
I don't think Scrivs meant "do design comps still work" in the way it sounded. I think he was referring to the basic elements or "wireframes" for sorting out the skeleton of the web site, though I could be wrong.
Robert Lofthouse (http://www.ghxdesign.com)
Actually, I'm not convince that the use of graphics is the big difference. I could see someone doing a mock-up in a program like dreamweaver and then cleaning up the code. You can drag stuff around int visual editors and then seperate out the code later. I have sometimes employed just having colored boxes where the images would go to get a layout/sizing perspective. Then when the image come, I plop them in there and finish it up. With some practice, I could see doing some projects without Photoshop. At least the ones that have the graphics ready to go, without "enchancements".
Abraham
I've had to rethink my comps after making the switch to pure CSS design in the last few months. I can no longer go hogwild in Photoshop because I may end up with a design I can't recreate with HTML/CSS.
It's a slow process compared to banging out table based designs like I've done since 1994.
I am getting better, and someday hope to be as quick with CSS as I am/was with tables.
Here's a recent mockup in PS that I wasn't sure I could accomplish with CSS.
http://www.divsoft.com/superior/
Here's how it's turning out so far...
http://www.wrecklessdriving.com/superior/
I'm happy, the client's happy, it's just taking a bit longer than I expected.
Ian Firth (http://www.divsoft.com)
I'll take a turn trying to state what I think Scrivs is talking about:
A design comp is an exact preview of the actual site. This includes layout, styling, typography, etc. These are typically useful in presenting designs to clients for approval (as they can see exactly what the site will look like upon completion). Clients have a notoriously hard time dealing with wireframes or other unstyled previews.
Scrivs question is about the use of Photoshop, Illustrator or another raster/vector graphics program to create full page designs before writing the code to recreate that design. Making icons, drop shadows or other distinct graphic elements must be done with one of the aforementioned programs and therefore do not play a role in this discussion.
John Zeratsky (http://johnzeratsky.com)
I'm not really qualified to answer this question since I'm not a designer. However, I have created several (basic) websites so I have a little experience to draw from.
I have never used Photoshop (or any other graphic or drawing program) to create a mockup of a website.
I tend to draw everything out on paper (it's so much quicker). This includes sketches of how I want the finished pages to look as well as flowcharts to diagram the IA and operational procedures.
I find drawing with a mouse to be extremely cumbersome. I suspect though that many of you designers use graphics tablets (lightpens anyone?) so maybe it's quicker that way.
Jonathan M. Hollin (http://blog.urbanmainframe.com/)
I do not know how to make comps. ^_^ I can storyboard on paper and prototype in code. That's all.
Zelnox
As Ian pointed out, presenting a photoshop mockup to a client may mean making a promise you can't (totally) live up to.
So I try to present my ideas as demo xhtml/css.
Also I would like to make another point: some say css limits creativity. But so can photoshop. A website is dynamic in many ways, but a design comp in photoshop is totaly static...
Wim (http://pixelpret.nl)
"As Ian pointed out, presenting a photoshop mockup to a client may mean making a promise you can't (totally) live up to.
So I try to present my ideas as demo xhtml/css."
Even when in Photoshop, it's important to have an idea of what you can actually deliver. More importantly, I'd say, is an understanding of what is appropriate and ideal for the web -- create that first, then worry about coding it.
p.s. Ian's Photoshop mockup could be easily replicated in CSS. It just takes time. I assume he wasn't going for a pixel-perfect re-creation.
"Also I would like to make another point: some say css limits creativity. But so can photoshop. A website is dynamic in many ways, but a design comp in photoshop is totaly static..."
That is a great point. Every tool influences your work, which is why I think it's important to not be too attached to any one tool. Spend all your time on paper, and your site will have no visual nuance; spend it all in Photoshop, and it will pretty but have lousy interaction design; etc...
John Zeratsky (http://johnzeratsky.com)
Hmm, I find myself agreeing with pretty much all of you, or, depending how you look at it, disagreeing with all of you. Let me explain myself:
A comp in an image editor will always be handy, even as a guide when building your site. It provides (to me) an easy interface to change around elements and switch certain options (layers) on and off.
As a demo, a working mock-up, code (xhtml,css,w/e) is prefered. It provides interaction and a real world view of the layout. It's not much good to present an image of a design and then finding out it's impossible to (properly) build.
AkaXakA (http://akaxaka.gameover.com)
John, you're right about the first one: you should have an idea what you can deliver when in photoshop. But that is what designing with standards is about: separation of presentation, structure and behaviour.
IMO you should give your client an idea that a website is so much more than a magazine ad with hyperlinks.
A photoshop mockup will never do this.
Wim (http://pixelpret.nl)
Yeah, you are totally right Wim. It is really hard to communicate interaction without a working site.
I always use a working HTML/CSS prototype as the official sign-off point before final development (which may include integration of a CMS or other back-end development). The Photoshop mockup usually comes earlier for me, before the coding, as an indication of design direction for the client and a way to keep all team members on the same page.
John Zeratsky (http://johnzeratsky.com)
For a recent job, I was asked to come up with three design concepts. I asked if they wanted Photoshop files or actual HTML. They said "Whatever".
I decided to go the XHTML/CSS route. I made one XHTML file and three CSS files (for the three design concepts).
Comparing it to doing the comps in Photoshop, I'd say that time-wise, it worked out about the same. But the big advantage was that when I got feedback like "can you just change this... and this... oh, and this", it was much, much easier for me to tweak the CSS.
Jeremy Keith (http://adactio.com/)
I was reviewing an XHTML/CSS prototype with clients the other day, and they asked about a change. So I made it on the spot. They liked that :)
John Zeratsky (http://johnzeratsky.com)
I tend to use FLiP... use basic unstyled wireframes to come up with what pages need to exist, and how they connect... that determines what the navigation needs to look like... and when you get down to it, you really have to build the site around the navigation. One design that works for a site with 6 primary pages won't work at all for one with 25. A site which needs 3 layer subnavigation and a site which only has the primary links are two different animals.
Once you have the structure of the site down, you can code a look-and-feel around it. As a general rule, if the site's going to be fairly graphical, I'll throw something together in photoshop, an example of each type of page (usually the homepage and a content page) to get an idea for look and feel... go over it with the client til they're vaguely happy with how it looks, and then convert it into a prototype website... just simulate any processing that needs to occur on the final product, use lipsum where there isn't any real content available.. in some cases I'll use "devnotes" which is basically a tiny message board that goes in the footer of each page and lets a client leave notes on the page. Works very well in CF... wish someone would write a PHP version.
Anyway, we use devnotes and the prototype til the client has signed off on each page, then we can write the processing code.
Of course, that's not the way it really works most of the time... no reason to delay the back end stuff when you already know exactly what's required... But you don't want to start off with back end stuff without having a good idea what data will be required on the front end.
Did I answer the question? I've lost track. heh.
JC (http://thelionsweb.com/weblog)
Interesting. I know a lot of designers like to sketch away on paper, and I've been told to do so 100's of times, but I just don't. I've worked up a considerable expertise in photoshop, and especially speed, so for me it's definetly easier to go straight to photoshop.
My general experience of clients is that most like to have the static design comp before letting me go ahead and code the xhtml/css.
XHTML/CSS prototyping sounds hot, but like others mentioned, I feel you quickly get caught doing the same boxy layouts - and not exploring different ways around the design..
Brian Andersen (http://www.brian-andersen.dk)
I always start with the noteboook and sketchpad, until I'm happy with one particular layout.
After that I'm straight into xhtml/css
I create the xhtml structure, thinking about the layout I'm trying to achieve, then style with css.
I often do a screen grab, and use photoshop to try out some complicated effects if I can't be bothered to do the css on a whim.
I give the client my nearly finished product, and go from there. If they hate it, I start again!!
steve (http://www.clearbar.com)
I tend to comp in photoshop first, but you have to keep in mind the restrictions of XHTML + CSS while you work. While you don't have the freedom of a "slice'n'dice" tables export, you can still come up with a grpahic look that is translatable through css.
Jordan (http://www.jordesign.com/jordchan)
Comping in Photoshop for me is not always the fastest solution –
just recently while working on this site I started by sitting down and drawing everything on paper (no particular reason to start on paper, prior to this I had started the majority of designs in photoshop) - after about an hour of sketching out ideas I hopped into Photoshop - amazingly, when working in Photoshop my brain was released from the initial pressure of coming up with the overall design and idea for the site and was able to simply focus on the mechanical details of getting the site laid out - I did three comps in under an hour and the client was very happy with the outcome.
In this particular instance the sketching before hand allowed me to really fly when it came to pushing pixels and not just be a deer in the headlights staring at yet another blank white canvas in Photoshop.
One last thought, I'm sure most have something like this - but when it comes to UI design - I keep a UItemplate.psd laying around that has text boxes, buttons, icons and all sorts of just random stuff that I find I use over and over again - having this file handy really speeds up UI design.
Marc
I see your point, Scrivs, and often I agree. I find myself skipping the photoshop mockup stage more and more. CSS is just faster is many cases.
However, there definitely are those cases when I'm doing something that is more graphics-heavy that I simply need photoshop.
So, it just depends. As with everything, use the tools that work best for the job.
Jeff Croft (http://jeffcroft.com)
Not yet, i can´t design without photoshop, for me its easier to draw severall templates on photoshop and just implement the choosen one from the client thant code severall templates right away.
It just a work economy, if the client wants one of the proposals why should we code all three or four ?
Jose Silva (http://josesilva.portaltm.com)
Beleive it or not, there are clients out there you have the expectation that design costs will be seperate from development. Hence, if you do a design mockup in XHTML / CSS development code, the seperation of what was done becomes a real challenge for some budgetary managers.
Mark (http://www.lightpierce.com/ltshdw)
I usually work out a plain versions on paper, and then implement the best few straight in XHTML+CSS. I particularly like how I can 'sketch' this way.
And I've had some pretty amazed clients when I was talking to them over the phone and while talking was making the modifications they were suggesting. "Hmm, yeah. Press refresh. Like that?"
Marten Veldthuis (http://www.standardbehaviour.com/log)
Just 2 cents...considering that my own background is less of a "static content web" designer, and much more a UI Application Interface designer...
I will always start with pencil and graph paper. There's no substitute for it; you can plan the precision with annotations right off the bat.
However, whether or not I go to Photoshop or HTML/CSS is totally dependant on the scope of the application and/or the client. The one thing that I *have* noticed in doing this sort of thing is that a draft working prototype--one where you are getting things down on the page to work out your ideas--will invariably be met with "this is great, can you have it working by Tuesday", at which point you're stuck with an application that has not been fully worked out.
When I recognize that the current client is like that, I will mock in Photoshop and *not* give a working version.
Dunno if that helps or not ;)
Tom T (http://fm.dept-z.com)
I like to use Fireworks, but not for complete layouts, just for working with different elements of a site, like widgets or backgrounds, or a logo obviously ... but I don't use it to layout a page ...
I like to just sketch it on a sheet of paper and break all the main sections up into blocks ... then I go into notepad and start "building the blocks" with CSS, adding colors, graphics, backgrounds, etc. along the way ...
interesting reading all the different approaches to this exercise though ....
chuck (http://telerana.f2o.org)
Good point, Mark (31). Jose (30), remember that the remaining 3 designs can be saved for their next version, or repurposed for another client's site, so it's not really wasted effort.
Though I can't think of a time when I went so far as to photoshop up more than one design at a time. Usually I jot very vague layouts down on paper and see which one hte client likes best/dislikes least and work from there.
JC (http://thelionsweb.com/weblog)
Mockups are important, yes. As someone who puts a lot of stock in the visual arena, Photoshop comps are always my starting point (if it wasn't sketching) -- and then trying to make it work through code.
And Mark, sometimes design costs ARE separate from development. They require use and skillset of two different types. Some of us are just lucky enough to be able to use them both.
Lea (http://xox.lealea.net/01/)
Yes, Lea - I know.
After several back and forth sessions with client legal / compliance departments on seperating out the design cost from the development cost, and then further clarified into what defines continuing maintenance costs, I soon learned my lesson.
Even though it might be technically easier for some to do the design in CSS only, it doesn't always equate to easier = better.
Mark (http://www.lightpierce.com/ltshdw)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
For me, I need photoshop. I have the ability to dice and slice graphics appropriate for an xhtml + css design. I am not one who builds the template and then just exports it all. NO WAY.
But using photoshop allows me to get a REAL good idea of what the site is going to look like with graphics and colors.
Scrivs, your sites have very minimal graphics, so jotting down your designs and such on paper probably works better for you, but if you have to start throwing in someones logo or a picture here and there along with custom bulleted items, etc..., then a graphics program whether its photoshop or fireworks will suit the job best.
Pen and paper can only get you so far IMHO. Its funny you mention this because I barely ever jott a design down on paper. Its always in photoshop first. Usually with me experimenting, but then tweaking it and tweaking it until I get it.
Bryan (http://www.juicedthoughts.com)