“I used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup. Does this process sound familiar? You’re not alone. In a very scientific and official survey I conducted, close to 90% of respondents said they design in Photoshop before the browser. Recently, thanks in large part to the influence of design hero Dan Cederholm, I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser.”
I watched a video about a month or two ago (I believe it was from 37 Signals) talking about their design process. Someone raised the question if they use mockup tools like Balsamiq. The speaker’s answer was something along the lines of: If you need to mockup how something looks, there’s pen and paper; and if you need to make it interactive, there’s HTML.
The latest revision of my website was done without a mockup. A graphics package was used just for spriting. I intend, going forward, to do as much as possible using the browser for the design.
On a different note.
I’ve not found the time yet, but I was thinking of creating a ‘framework’ for creating sprites in PHP.
Direcotry of image-files -> css/image-file.
I really don’t want to do those things by hand. I’m in IT, we do automation. 😉
There’s tons of tools out there for spriting. Several websites, and even more scripts. You can do spriting on the command line with imagemagic if you want maximum automation.
I hadn’t really looked at it yet, I don’t do a lot of frontend at the moment.
Also it’s just fun to to create little tools like that as well 🙂
To summarize, she suggests using evolving prototyping rather than simple design mockups in the first step. Nothing really new in software development models.
The author of the article seems to think that her method is always the best. I strongly disagree with that. You should always use the development model that suits the customer and and the product best.
I like the style of the article, though. It gives a good introduction into generating prototypes with CSS.
The web is not pixel perfect, and the viewer’s browser is God. It has always been a bad idea to create a static rendering as how it will exist.
IMO, the idea that you are sending content to be viewed by someone’s browser gets missed until the last hour. Instead, it starts as an image generator to be pushed to clients.
I also wonder: if you have to use Photoshop or similar for your own needs, how are you keeping the mental abstraction necessary for the final look, anyway? I notice this in the linked article’s comments: do web designers need quips from Dijkstra, too?
Edited 2009-12-25 06:05 UTC
Whilst this process may work for the more coding minded in the web design industry, it will not work for everyone. Here’s some reasons why:
– Graphic design is intrinsically a visual process. Ergo, the most comfortable tool to start the process for many is a visual design tool.
– CSS3 isn’t even close to as powerful as the filters and tools available in a good graphics editor. If we restrict our design to what’s available in CSS only, then our creativity is also restricted.
– Whilst some graphic designers are happy to play with html and css, many are not and there’s nothing wrong with that so long as they understand the constraints of the medium.
I agree.
Also having to deal with IE6 makes you a far better web developer, it improves your CSS skills ( I never use IE hacks or alternate style sheet ) no end.
Say what you like but IE6 ain’t dead yet and I have to get my websites to look exactly the same in all popular browsers.
Albeit an often homicidal/suicidal one…
It’s good to note that webdesign isn’t graphic design, it’s interface design.
Designing an interactive interface is massively different to designing static graphics for a page.
Being a ‘web designer’ and not being coding minded is a really bad thing and will result in something that looks pretty but is horrible to use.(oh so many websites!)
There is one thing a lot of designers seem to forget: the large number of different resolutions used to browse the web.
A good website should look good on my 1024/600 netbook, but also on the largest iMac with a maximized browser. It seems to me a lot of the designers tend to forget about that.
I find it interesting that people that design websites would use anything other than markup to create the initial proposal. I design websites, and have always used markup. I have heard of other “tools” to use, but I never saw the purpose of them. Why would you do something in Photoshop for example to show a client, and then have to recreate the item in markup? That is the long way to go about it.
Because putting something together in Photoshop or Illustrator is a skill that marketing people have, and they’re often the ones dealing with the clients. Doing good-looking HTML prototypes, not so much.
If you’re lucky, they’ll have made it clear to the client that this is an “artist’s impression”, not a finished product. Otherwise, well – one does so enjoy working 80-hour weeks…
is the client who will figure out as you show him the html mockup that 90% of the work is done.