I am primarily a web designer, and a very rookie web developer.

Say I have a comprehensive web app I want developed through a freelancer on Odesk.com

What is the best way to effectively communicate the entire project, goals and requirements? Wireframes, spec sheets?

Any examples/templates on this would be greatly appreciated.


Ideally, you'd have a good relationship with your developer(s) (because then you understand each other better), but when that's not possible, as much communication as you can feasibly do is going to benefit you.

I'm a developer, so here's what I like from designers, other devs might have different preferences:

  • Page layouts/designs (if you already have them). Assuming here, that I'm doing the front-end development (HTML/CSS), though this can also help with building out logic if the front-end isn't built yet, as I can see what's supposed to be in the end product. I want to see what you envision. If you send me one image, I'll assume that it's the template for the whole site, so send me anything where the layout deviates. Forms, also, as it helps to know how you want the forms laid out. If you don't have the full design done, yet, wireframes are usually good enough to let us know what we're getting into.
    • To that end, I also like having both a .jpeg/.png file and a .psd file (preferably without extraneous layers; if you have six layers that make up an iPhone graphic, flatten them, I don't need to see "copy of layer 5" twelve times). That way I can see it without potential conversion issues between Photoshop versions (or Photoshop and Gimp) and have the layers to pull images from.
    • Knowing things like fonts, font sizes, and the hex versions of base colors for gradients is also extremely helpful, that way I'm not left guessing, since you're more likely to see the difference between something being a pixel off than I am (an overlay layer with measurements would be awesome)
    • Even if you don't need us to do front-end, having a .jpeg/.png of what it's supposed to look like (if the HTML/CSS isn't done) will help tremendously, because then you don't have to tell, you can just show.
  • Outlines of some sort of the flow of information. This can be done pretty much however you want, as long as it's logical. We're talking logic code, here, so it doesn't have to be fancy. Some people like use-case formats, while others prefer flow charts.
    • I think the best way to do this is by looking at each page with logic and walking through it like you were a user. This is where use-case templates come in handy, because it forces you to do that. You should be able to run a Google search for "use-case templates" and find what you need.
  • What technologies you want/need to use. You're our client, so you should know what you need or want. Even if it's just the base technologies (PHP 5.2, .Net, etc) and we can decide frameworks, CMSes or whatever from there, that's fine.
    • For front end, what browsers we have to support, as it can decide what techniques we use (and for some of us, whether to charge more, because you want to support IE6).

A lot of this can be put into a general "spec sheet." Make it scannable, though, so we don't have to dig to get the information we need (maybe it's just me, but I use that documentation throughout the whole development process as a checklist).

Your question's a little broad, so if I didn't adequately answer you, feel free to comment and I can edit, respond, or otherwise clarify.

  • Thanks alot for taking the time to answer. The question is a bit broad. The thing I am most interested in is how to explain the flow of information. The front end design implementation I can do myself. Are there any templates for communicating an entire project? – levi Jun 16 '11 at 18:02
  • @levi - I edited my answer to add a point under the outline part for more info. Basically, you don't want to look at it in terms of an entire project, but rather a little more like a project manager or developer would look at it - in its parts. For a web app, that's actually pretty easy, because the pages break it down well enough to at least get you started. Think of what you'd do as a user on each page and build your documentation from there. – Shauna Jun 16 '11 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.