Designing in Photoshop

[eeight]

How many of you make your site's design completely in Photoshop before even beginning to code?

Until recently, I thought the only reason anyone would make their design in Photoshop first and code it second is because their designs were based almost entirely on slices.

However, I've come across people that draw the site in Photoshop, even if it isn't heavily based on graphics. At first I thought, "hmm, what a weird habit and a waste of time." Recently, however, I noticed that a prominent design company that I'm working side-by-side with does the same thing.

This leads me to wonder if I'm the one going against the grain here, because I've always focused on coding from the start, and using Photoshop along the way to make graphics when needed. In my mind, this is more efficient (less time-consuming) and allows for greater creativity (at least for me).

So part B of my question (the one all the way above) is this: For those of you who do draw out the entire design in Photoshop, why do you do it? What are the benefits? Why do you choose to do that as opposed to coding it from the ground up? And how common is this practice in the industry?

[Johan Dahlström]

[...] For those of you who do draw out the entire design in Photoshop, why do you do it? What are the benefits? Why do you choose to do that as opposed to coding it from the ground up? And how common is this practice in the industry?

The biggest benefit I see with designing a layout in Photoshop first is the time you save. It is a lot easier and QUICKER to position images, text and applying effects to different items directly in Photoshop rather than first have to code the site, then apply the styles to every element and then export all images in order to achieve the same thing. Also, when in Photoshop you don't have to worry about browser issues and stuff like that.

However, there are a few things I hate about designing mock-up layouts and designs in Photoshop. One of these are if you want to apply a border to only one side of an element – that is a real pain in the behind to do in PS along with changing and applying effects to many different objects (for instance changing text color on many different paragraphs).

When it comes to if this is a common practise in the industry or not, I don't know. All I can say is that sometimes clients want the page delivered as a PSD template and then, doing a design in Photoshop is as you can imagine required. But if you do a regular site for a client, I couldn't see any reason why you couldn't do it the other way as long as you deliver what's expected. Then of course, supplying PSD documents for graphics used on the site will probably be a good idea, but how you work and reach then end result, I'll say is up to you.

[Kækæ]

Hi eeight!

I started web-designing entirely with Flash 3 - 4, without ever doing mock-ups - so designing and coding all straight in Flash. But then, half of the web things I was making was personal, so I called the shots , but the other half of them were proper jobs where clients had every right to want to make amends to the design as well as to the interactivity.

Whether or not we are working purely on flash-based websites or flash+html+.net etc. hybrid websites, the reality is that it's increadibly hard and time-consuming, if not impossible, to change a perfect circle already built into a triangle with spikes coming out of it!

The industry standard ( of the highest calibre, for example, a website for one of the biggest commercial brands on the earth ) is to provide to the client one or two 'creative concept' mock-ups, so that they can approve the way their website will be looking before any physical building phase of the website development happens.

This benefits everyone and the project itself in the following ways :

- Client knows what he's getting in terms of look & feel, and the website designer / developer has that 'promise' to keep / has to deliver the website as presented to the client ( this 'promise' is put into a contractual agreement )

- Once the client approves the design and building begins, client cannot expect you to change the circle into the triangle with spikes, when you have already built the circle, as he has 'approved' the design direction ( again, this is all put in writing )

- Project keeps to its course, runs smoothly and keeps to its budget, timeframe and meets the deadline

- If client really really wants the triangle with spikes instead of the circle ( ie. changed his mind after it's all been built ), then you quote him additional budget to re-work and amend the circle. The client, as he comprehends that he himself had approved the circle in the first place : if he really wants the change, he can pay for that additional amends work !!!

- . . . And much much more reasons.

+ + + + + + + + + + + + + + + + + +

Websites made with solidified creative concepts and designs in place to start with, will have better visual consistency as well as consistency in content materals + hierarchy. These things are immensely important for user / website visitor experience. Not only this 'experience' affects how we absorb and digest information on the website, it also affects the way we view the creator / the company / the brand itself.

+ + + + + + + + + + + + + + + + + +

Web is an amazing parallel universe to our own, really. Imagine building a car straight only 'technically & mechanically'. The skeleton is all built and gears are all working together. Then it's finally time to . . . . . 'skin' this vehicle!!! Somehow, I would say, the result is nowhere as beautiful, effective or accessible . . . …


*ZsorZsor*

[Scruff1983]

I start in photoshop, simply for the freedom of being able to move things around without having to mess with code.

[Net-Margin]

I create a XHTML and CSS structure and positioning that I want the layout to be for example say I want a 800 x 600 compatible fixed layout I would code it without any good style before even opening Fireworks to come up with a design mock.

Many people design first and then adjust the code to fit the layout while I hate design so I do it the opposite way around and it has always seemed to work for me.

[Dan Schulz]

I code first. But what I do is create a wire-frame. Without any graphics or "behavior" whatsoever. Just the plain visual end-result. It's the same thing you see when you disable images and scripting in your browser, while still letting the CSS do its job.

From there, I decide how I want something to look, and create the graphic elements for that particular section of the template.

People come to me with full .psd files of how they want their sites to look, and then are surprised (even floored) at how little of the image source I use to create the exact same layout (rather than slicing images, I just take what I need, and let CSS handle the rest, like borders and large areas of a single color for a page region like the header, menu, content, sidebar or footer).

[molona]

I try to get the content (or as much as possible of it) and organizing it first. That helps me structing the navigation and the links that I will need, and which data will go in each page. Then I use photoshop or Corel Draw or Freehand to create a mock-up. The program used is not important, although Photoshop is a favourite choice for most (including myself).

What I want to do is simply try different layouts and images, and get a visual feel. Using a graphic tool is faster than drawing (which I am not good at, anyway), and I can do several different layout. Once the visual look has been defined, then I code.

The thing is that it is easier for me to work if I know the effect I want to get.

But as you can see there are different ways of working, and each of them is valid. Whatever it suits you best, that's what you should do.

[Tyssen]

The industry standard is to provide to the client one or two 'creative concept' mock-ups, so that they can approve the way their website will be looking before any physical building phase of the website development happens.

That would be the main reason why I'd do a mockup first. It's the same in most design fields - the design is roughed out first before comitting it to the form in which it will finally be presented.

[gregjarvis]

I design in photoshop first. It helps a lot because i often change the layout, sometimes entirely, and It saves me time to change it in photoshop instead of having to re-code.

The one major thing that I'm learning to master is to make all of the text headings and fill in the content area with lipsum text. I used to leave the content area blank, then after I had coded the site, I would sit and come up with some lame headings and text. Also be sure that browser text isn't being rendering out in smooth but as regular type.

[SidraG]

If you're doing your own work, then code away. But when working with clients, I find it usually much quicker and cheaper to use Photoshop. Not only can you more affordably offer clients a couple of different mockups using Photoshop, but once they've picked a design, you can easily make the adjustments they want to the design without wasting time coding and recoding. That way, you're further into the design process with them before you start coding. I've never had a client who didn't make major changes to a template just when I thought we had finished a concept and were ready for production.

[bluedreamer]

One problem with image base mockups - if you have a fluid site the client can't see the effect of resizing in their browser.

I do sometimes make image based mockups but most of the time I code a wire frame like many others here, then create images to suit the design.

[gfxcan]

You are obviously going against the grain. Think for a moment why are you told to sketch a logo on paper, then scan it, clean it up and vectorize it? or before coding a software write pseudo-code and make flow charts? You simply can't trust ideas in your head until you have laid them out before your eyes, seen pros and cons of certain things, and corrected, improved and perfected them.

It is always a good idea to draw your website layout in Photoshop before even thinking of coding. It is important for you to have a design before you can implement it

[webfinity]

I start in Photoshop.

[altwebdesign]

as a graphics designer (no real codeing abckground besides html) i always create everything in photoshop first, sometimes i even sketch a basic layout on paper before even going to photoshop!


I like photoshop to get a exact idea of what i want, colours, layout and positioning.

I used to then just slice up the images as I have no coding background, but since learning XHTML and CSS (i still use tables) I have used a lot of different methods and made a graphical mock up 75%-90% HTML and CSS based.

I am learning CSS to rid the tables!

[Dan Schulz]

Hey, you're learning. That's accomplishment enough. You'll make mistakes, as we all have. Just stick to your guns and you'll be a pro in no time.

[Audigex]

I almost always fully design it in photoshop, before slicing and coding.

Even if i design without photoshop, i always create a PS template first, so i can get an exact idea of the colors and positioning I want, before starting the real work.

But more and more often now, clients are interested in validate xHTML and CSS websites without any tables...

I guess it all depends on personal choice, and what the client wants...