1

This is more a question for the web designer guys.

I'm just wondering how you guys deal with sending designs to your frontend developers? Or do you just do it yourself?

What is your process for sending your designs to your devs? ie Do you send PSDs, or PNGs or other? How do you send them? Email, dropbox or something else?

And what do you do when you need to make changes to the files? Do you send a new comp? Or just a list of email instructions?

1
  • Ask your front end developers how they'd prefer to work with you.
    – DA01
    Commented Mar 10, 2013 at 8:29

3 Answers 3

2

I find that Google Drive is my friend. It's easy to set up folders for each project, and then share specific files and/or whole folders with individuals using only their email address.

Drive also offers a lightweight app to integrate with your OS, much like Dropbox. The advantage that Drive affords users over Dropbox is that Google Docs integrates so seamlessly, so sharing body copy, imagery and designs with colleagues and clients alike is intuitive.

If the coder has access to Adobe CS software, then I will send through the native docs, otherwise JPEGs scaled to different sizes, typically annotated to highlight specific requirements.

For making changes to files, you really want to use some form of version control. The most popular is GitHub. I've only recently integrated this in to my own workflow, and it's one of the best things I've done! Again, this can be configured to share content with individuals and groups.

Granted, this isn't as accessible as something like Google Drive, but if you commit a few hours to getting up to speed, you'll wonder how you ever coped without it! I can't recommend 308tube's videos enough. Make notes whilst watching the first two videos and you'll be well on your way.

The best thing that I find with this workflow is that I can access all my work from any computer with an internet connection, it's all backed up on the cloud, and I can easily share content with whoever needs to evaluate or contribute to the workload.

5
  • I feel encouraged to use github...it is recently that i think i finally understand it a bit. Uptil now it looked horrible coding nightmare to me. :D
    – user8795
    Commented Mar 9, 2013 at 16:30
  • 1
    Sure, it look intimidating, especially to non-coders, but there are GUIs available now, if you're put off by the command line. But really, with a little understanding and about ten different commands, you'll reap massive rewards. Commented Mar 9, 2013 at 16:54
  • What GUIs...and what would those ten commands be.
    – user8795
    Commented Mar 9, 2013 at 17:17
  • 3
    Hm, if you send a developer JPGs and they actually need to build something functional from it, they'll have to recreate it from scratch in something that will give them usable pieces. Pngs are much more friendly for most types of projects. Commented Mar 9, 2013 at 17:30
  • 1
    Sure, I should have amplified that assets would be sent individually, of course. I wouldn't expect a coder to have to splice my designs! Commented Mar 9, 2013 at 17:36
2

Answers will depend on how complex/formal you want to make this process but here are my recommendations from a web developer's point of view.

File Format: The usual practice is to send PSDs. For a web developer it will be useful to measure the different layers on top of each other if there is more than one page design like for a website. PSDs also make it easier to check font colours, typefaces and sizes. Being able to copy text from the PSD also means you wont need to send a separate document with it. The benefit to the web developer is that they have a single place where they check layout, colours and copy rather than having a separate design and a separate text doc. Most web developers are familiar with Photoshop but it's nice to ask what they prefer. In case they don't want a PSD, give them uncompressed JPEG at 100% quality for the layout and cut up content images for backgrounds and graphics that are optimised for the web (compressed, smallest size file at satisfactory quality).

Making Changes: The more complex way would be to make a GitHub account and keep version control of the project there. You can make comments regarding your changes when you submit a new version of your design to GitHub. Or ... The easier and less formal way would be to suffix all your designs with dates or version numbers. When you make a change, update the version number or date and send your design again with notes what you have changed so that the developer knows what changes to look for. Notes are important. Layout changes may be clear but if you changed a shade of text or some other minor detail, the developer may not see it. For clarity it always works best for both sides to describe changes so that there is no confusion and no problems like "I expected you to see it."

File Transfer: The easier and more informal way would be to use Dropbox or Google Drive as you can share folders indeed, or use We Transfer if it's one or two files only. I don't think this matters too much as the developer will likely save the file on their local machine to work from anyway. If you decide to learn and use GitHub then your files will be accessible from a cloud so you will not have to worry about transfer as files will be accessible via a simple link anyway.

2
  • Hi Katrina, welcome to GD.SE. This is an excellent answer, thanks for adding it! You might also find these workflow questions interesting, and if you are curious, you can take a look at our unanswered ones too :)
    – Yisela
    Commented Mar 11, 2013 at 2:19
  • Thanks, I will be popping by ever so often when I have time and will try my best to share some useful knowledge and experiences ... hopefully :)
    – Katrina
    Commented Mar 11, 2013 at 19:56
1

I am my front end developer.

If working with another developer I send them what they request. Whether it's .psd, .png, .html, .css... what they request is what I'll send. It's then on their desk to integrate changes based upon what was previously sent and what they may have already constructed.

I customarily have a full front end mockup of any home page, then a secondary page, sometimes a third page. This is in order to allow client approval of layout/design before hooked to a back end. I can then easily document changes which were made (as I make them) so if needed, I can pass along a change log to any backend developer.

As for actual transfer. I have my own websites and associated servers. I simply drop whatever I want to send on my server along side a php script to create links to the content in the directory and then send a link. I've constructed a few various php scripts to list directory contents and create HTML as needed - show images with links, list files as links, show images for approval - that sort of thing.

1
  • +1Too many designers have no idea how much work can be added or avoided on the developer's end based on how the designer provides the graphics. Commented Mar 9, 2013 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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