Linked by Thom Holwerda on Thu 24th Dec 2009 11:57 UTC
Internet & Networking "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."
Order by: Score:
Comment by Kroc
by Kroc on Thu 24th Dec 2009 12:51 UTC
Kroc
Member since:
2005-11-10

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.

Reply Score: 1

RE: Comment by Kroc
by Lennie on Thu 24th Dec 2009 13:20 UTC in reply to "Comment by Kroc"
Lennie Member since:
2007-09-22

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. ;-)

Reply Score: 2

RE[2]: Comment by Kroc
by Kroc on Thu 24th Dec 2009 13:32 UTC in reply to "RE: Comment by Kroc"
Kroc Member since:
2005-11-10

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.

Reply Score: 1

RE[3]: Comment by Kroc
by Lennie on Thu 24th Dec 2009 16:17 UTC in reply to "RE[2]: Comment by Kroc"
Lennie Member since:
2007-09-22

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 :-)

Reply Score: 2

Comment by Heard
by Heard on Thu 24th Dec 2009 14:01 UTC
Heard
Member since:
2009-12-24

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.

Reply Score: 1

Comment by cerbie
by cerbie on Fri 25th Dec 2009 05:59 UTC
cerbie
Member since:
2006-01-02

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

Reply Score: 2

A little too black and white
by Nycran on Sat 26th Dec 2009 01:25 UTC
Nycran
Member since:
2006-02-06

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.

Reply Score: 1

RE: A little too black and white
by lucas_maximus on Mon 28th Dec 2009 11:02 UTC in reply to "A little too black and white"
lucas_maximus Member since:
2009-08-18

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.

Reply Score: 1

Delgarde Member since:
2008-08-19

Also having to deal with IE6 makes you a far better web developer.


Albeit an often homicidal/suicidal one... ;)

Reply Score: 2

RE: A little too black and white
by jessta on Mon 28th Dec 2009 14:36 UTC in reply to "A little too black and white"
jessta Member since:
2005-08-17

Whilst this process may work for the more coding minded in the web design industry, it will not work for everyone.


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!)

Reply Score: 2

screen size...
by spinnekopje on Sat 26th Dec 2009 08:48 UTC
spinnekopje
Member since:
2008-11-29

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.

Reply Score: 1

Interesting..
by DrillSgt on Sat 26th Dec 2009 17:41 UTC
DrillSgt
Member since:
2005-12-02

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.

Reply Score: 2

RE: Interesting..
by Delgarde on Tue 29th Dec 2009 09:56 UTC in reply to "Interesting.."
Delgarde Member since:
2008-08-19

Why would you do something in Photoshop for example to show a client, and then have to recreate the item in markup?


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... ;)

Reply Score: 2

One little flaw out of this ...
by dvhh on Mon 28th Dec 2009 20:09 UTC
dvhh
Member since:
2006-03-20

is the client who will figure out as you show him the html mockup that 90% of the work is done.

Reply Score: 1