Recently, I’ve been trying out a method of designing websites that I mentioned in my previous entry, which Andy Clarke wrote about in a post entitled Walls Come Tumbling Down. I thought I’d discuss some of the pros and cons to designing with this method that I’ve found.
In basis, the idea is to design the initial pages in Photoshop, and then build it making changes in the browser itself rather than on visuals. Essentially, this means that instead of sending over lots of different visuals, you send links to updated versions of the site which the user can see working, can fiddle with and can ultimately break.
I’ve been trying this on our company website and have got a few thoughts to share with you guys.
Pros
- Extra testing – the client will play with the site on their computer, with their browser and in their own screen resolution. They can fiddle with different features and let you know what is broken on their end. This means fewer headaches at the end of the project.
- It’s easier to explain browser inconsistencies
- It’s easier to justify why you have done things a certain way
- Less time is spent faffing about in Photoshop
- It’s much quicker and easier to experiment with different fonts and colours
- It looks a lot better when presenting
- You effectively design parallel with the client at every stage
Cons
- The initial design process takes longer
- There is a danger when coding the mock-up to write quick and dirty code, which could easily make it to a live site if you’re in a rush. Be careful.
We can both see here that, judging by the size of those lists, the pros outweigh the cons.
Although the design process itself takes longer, it’s actually saved us time. Rather than doing a Photoshop visual for every major page, we only do it for one or two. We then sketch out the others and build that directly in the browser. It’s worked very well.
My favourite aspect of this method is the ability to design side by side with the client. It’s a lot easier to fiddle with things like fonts, colours and spacing by tweaking a bit of CSS than it is in Photoshop – and you can do it with the client very quickly. Again, when presenting your site to your client, you can modify the site to their wishes right in front of them in a few minutes. Not only does this save time, but it also makes you and your company look very efficient.
Twitted by Wuup on 7 August, 2009
[...] This post was Twitted by Wuup [...]
Alan Hamlyn on 7 August, 2009
only trouble with designing with the client is the headaches “i want that red, i want that yellow so it stands out” then you end up with what we have fondly come to call ‘McDonalds Syndrome’
Spyda on 8 August, 2009
lol I like to do a mixture of the two, definitely get all the simple stuff nailed down like the wireframes and all that jazz, use a simple construction to show of progress and for tweeking with the client. As long as you explain to the customers ability why it won’t look identical in different browsers they seem fairly accepting of it.
Dan on 10 August, 2009
@Alan – That’s actually one of the strong points of this method because you can do it right there in front of them and it’s quite helpful in nudging them in the direction you think they should be going. Easiest way to convince them something will look ‘orrible is to show them!
Bill Nunney on 11 August, 2009
@Dan, I agree, though some people really have no idea whats good and whats not, even if you show them.
Maquettes interactives : le design dans le navigateur | Soluo, mise en place de plateformes de blogs WordPress MU et intranets métier on 23 March, 2010
[...] Photoshop il sera sans doute plus rapide d’arriver à un design satisfaisant. D’après Dan (Wuup), qui a testé le design dans le navigateur pour ses clients, la phase du design initial est plus [...]