Comments on: How I present designs to clients

By: Flavio

Flavio — Sat, 11 Dec 2010 07:50:06 +0000

It can be interesting to try out. Never thought about this way, since it is needed to do some slicing anyway, it comes more natural (or istinctive) to just start laying out in HTML+CSS… but then, for sure you could get stuck with stupid floating/aligning problems and loose the focus.

It is quite a while i don’t make layouts ground up in PS, that is because in the few latest design i’ve done, i well knew what i needed and created only the single graphics elements (like a tiling background img), so i was making everything from the editor.

I’ll consider your way next time i’ll have to PS something.
But this is just the “N” article on the subject, it proves once another time that if someone comes out with a killer prototyping tool, he’ll make a s*load of money. I have some ideas for a tool like that, i just hope i will sometime be able to implement it :D

By: Andy Marshall

Andy Marshall — Fri, 21 May 2010 14:05:40 +0000

Personally I would say start with HTML and CSS (and within that aim for HTML5 and CSS3)
It may be a little more alien to a designer than perhaps Flash or a WYSIWIG setup, but ultimately its the best grounding for learning webdesign… and in that don’t rely on something like Dreamweavers Design mode – learn how the CSS and HTML are supposed to work – don’t pick up shortcuts and bad habits.

By: Fernando

Fernando — Fri, 21 May 2010 12:20:32 +0000

Hey Robbie,
If you wanted to start learning web design today (let’s suppose you’re already familiar with graphic design) how would you get started?

Would you learn HTML?
XML?
XHTML?
HTML5?
Not even bother and start learning a WSYWIG program?
Flash?

There’s so much out there I have no idea where to begin.

Thanks for your blog.

By: Robbie

Robbie — Tue, 04 May 2010 09:00:44 +0000

@Kai It depends on whether or not you’re designing as well as building. If you’re doing both, any extra time you’ve spent writing HTML and CSS during design concept stage will be saved on development time, so there should be no need to factor in any additional costs for presenting in this way.

@Andy I was actually at DIBI and chuckled a bit when Dan was presenting his method, as I already had this post saved as a draft! The only real difference is that I use an inline image on which to overlay the inline elements (as opposed to a background-image), as that helps define the height of the page without having to set a height separately in CSS.

By: Andy Marshall

Andy Marshall — Mon, 03 May 2010 14:40:35 +0000

Hmm… very interesting.
Dan Rubin was saying at DIBI about the advantages of doing UX testing in high fidelity web pages over paper / wireframes as it allows the client to interact and the devs to change stuff on the fly.
Andy Clarke was also talking about how we shouldn’t be sending out PS comps as you’re entering a world of pain trying to explain why they look diff in diff browsers – this approach gets round this brilliantly as those with chrome will see the text shadows and rounded corners, and those with IE8 won’t… and quite likely neither will be aware of the differences!

By: Kai

Kai — Sun, 02 May 2010 11:08:11 +0000

Interesting read. I still have to come across a project that allows enough time to present the design in such a way. It’s definitely a more realistic approach, but the time constraint is usually the problem.

Love the design, btw. Good luck with your new job at FreeAgent btw.

Kai

By: Zander

Zander — Sat, 01 May 2010 15:25:32 +0000

I have started doing things in a very similar way to this recently, I find it so easy to create a much more realistic way to present to clients. Cheers for the writeup, its always interesting to see how others work.

By: Rodrigo Seoane

Rodrigo Seoane — Fri, 30 Apr 2010 19:48:33 +0000

Really interesting … I already think about it but never do it this way, because I always feel that I will be loosing time.

Next time I´ll try to see what happens …

tks,
Rodrigo

By: Ricardo Verhaeg

Ricardo Verhaeg — Fri, 30 Apr 2010 19:02:23 +0000

I’m pretty used to this kind of method, i love to put my hands on code and the some goes to the design. I just love this “work” it says: “I’m alive” to the client and the client usually like to put his hands on your work to test and say something.
But one thing I’ll try to do is to make a default project and start new projects from there. For now I just have one page full of elements that may appear on the projects. Need to change this right away!

BTW: real nice form effect!

By: Robbie

Robbie — Fri, 30 Apr 2010 17:18:58 +0000

@Matt & @James: It really depends on the each particular design. I’ll often get a feel for the type treatment in Fireworks and experiment there before jumping into markup, but sometimes I just jump right into the browser and experiment with broad font stacks and Typekit. It never gets to the point where I’m entering large amount of text in Fireworks, as that’s when it becomes a royal pain to maintain!

@Alex: As you’ve hinted at, a good brief goes a long way to ensuring a suitable design direction is agreed on before anything is developed too much. That said, there’s no failsafe solution. Bad things happen. You’ve really got to find a balance between your graphics app and text editor that suits your particular workflow.