from design to program - process?

  • Started
  • Last post
  • 12 Responses
  • grunttt

    Ok, so we have an inhouse guy that I kinda pushed into being our "web guy" a couple of years ago. He self-learned a lot of stuff but he has never felt confident about the role and feels like he is always behind as far as programming is concerned. I want him to be able to just DESIGN and then we'll farm out the programming side.

    My question is... How do we do this? What would he provide to the programmer - the layout in Illustrator or photoshop? Would he layout each and every page with content (photos/copy etc) or just the overall "shell" of the site design with content provided in an indesign (or similar) file. What is the process?

  • monospaced0

    He should know that answer having been your "web guy" for years now.

    • I've not asked him - I'm wanting to be able to discuss it with him and the higher-ups with some level of knowledge.grunttt
  • brains0

    Easy dude.

    Mockups in PSD format.
    Detailed spec document.

    • +1akrokdesign
    • But yeah, if it's dynamic, a shell with lorum ipsum, as you'll control the CMS, but if static, all the info you want in there.brains
    • Detailed spec document = sitemap?

    • Pretty much, sitemap with details as to how navigation should work etc etc.brains
    • At least how I see spec doc's.brains
    • That's like, your opinion man. Illustrator is better than PSD for web layouts anyways.monospaced
  • brains0

    Ok, ok for monospace.

    Mockups in PSD or AI format
    Detailed Spec Document (with sitemap)


  • vaxorcist0

    Depends on types of projects and your vibe with clients...

    Simpler projects & nervous clients = PSD + detailed specs
    Complex projects & trusting clients = an iterative process

    If you have complex projects, then the programmer has to be involved early, NOT after all the specs are done, as they will discover things that don't work conceptually when executed.

    Since your designer has some programming exposure, then you may be lucky, as the designer and programmer can work more collaboratively and not have the usual conflicts and surprises in complex projects where "you can't get there from here" vs "but that's what the spec says!"

  • zenmasterfoo0

    I've never been comfortable giving designs to a programmer to code in html. More often than not he/she doesn't use standards compliant coding, can't find a style sheet unless it's toilet paper with a colorful print, and wouldn't know how to properly cut up psd files without butchering the work.

    Designs transferred to html with css, THEN programming backend functionality.

    • sounds like you've been dealing with really bad developers =( those should be the 101 of front end dev taskszarkonite
    • we have one guy here who is great at translating to css and working WITH me. the others I have my issues with.zenmasterfoo
    • programmers who come from previous agency jobs usually do better css than those with corp intra-net experiencevaxorcist
  • gung_hoek0

    I don´t think that there is a single process for this. depending on the experience/skills of the designer and the programmer and what the actual project is (small site / big app with heavy architecture). if the designer knows how to code he can meet the developer way farther back in the process, same goes for the developer the other way around. i´ve seen projects where most of the designer´s work goes into prepping layouts/specs and testing the application, then there´s jobs where he just sends the .psd and done. smooth processes also depend on where the developer is at (available for 1on1 in the office vs. telecommunication only) and so on.

  • vaxorcist0

    Developers tend to be better at front-end or back-end. If your current guy is comfortable with CSS and some jQuery, you can look for a back end developer who is best at server-side stuff like PHP/ASPx/JSP/whatever SQL, and most importantly, the application architecture.

    If your current guy just want to be a designer, hates CSS, you can find a developer, but be prepared to pay more, or determine which is most important to you, for complex projects, you may have 2 developers.

    Or, you might farm out the PSD-HTML and the back end seperately...

    NOTE: If your developer works with microsoft tools like VisualStudio, and your app is very form-oriented, PSD form comps are hard to jam into the toolset the MS gives you...

  • Scotch_Roman0

    I've been doing site layouts in AI lately. I used to do them in ID since adding and deleting pages is much easier than working with multiple AI artboards, but ID doesn't have the option yet for pixel units. I know points are 99.99% the same as pixels, but for someone as exacting as myself I like to be able to use the same units of measurement as my programmer.

  • welded0

    As a full time front- and back-end developer with design experience I think I can speak to this.

    Firstly, I REALLY don't like building static HTML and CSS if the end product is going to be dynamic. Seems like a wasted step to me, especially if the HTML is going to be generated and spit out by a CMS like Drupal where there are existing conventions for class names and the like. If you need a partially working prototype, just export slices from the graphics program.

    Anyway, to the point at hand, I don't really care what format the designer is giving me so long as the PSD/AI layers are organized and logically named (layer comps are your friend). I don't need all sub-pages provided to me so long as there is some supporting documentation outlining any differences. Same goes for copy. My machine is getting old and I don't want the hassle of a giant mockup.

    Furthermore, hover states or other such events are good to see as well. Oh, and all vector objects need to be pixel perfect: X and Y points and height and width values should be exactly on pixels so there's no unnecessary aliasing. It's a silly little thing, but it's annoying.

    A sitemap is great to have. Many times I'll put the shell of a site together, toss in some lorem ipsum, then get to the business of skinning it.

  • Claymantis0

    Keep as much as the design in photoshop. Its fine if you need to use AI or ID for certain elements but in the end, all assets should live within photoshop. The developers need to control everything with pixels and photoshop is the ultimate pixel controlling software. Then just out source your PSD's to a developing agency.

  • version30

    I'm usally given psd files to build from so i can extract backgrounds etc

  • version30

    oh and after he designs it, farm me out to code it. valid xhtml/css baby