AF3
Workflow: Designing and Coding Process
I am trying to push for a more efficient workflow in our office. We are designing emails in Photoshop and get the client approval on an image.
Wouldn't it be more efficient to create html wire frames and show the client how they email will render on different devices first and than add imagery and content styles?
Designing a responsive email in Photoshop simply doesn't make sense to me. Any thoughts?
Hi Annett,
It all depends what your team are used to and how fast they can turn it around. Personally, I like to Wireframe -> Photoshop -> Coding.
As Alex and Shina said, it's a matter of your team but that is the best place to improve workflow. Clients will vary, but your team will likely be more consistent. It sounds like you've already done a good amount of work, so you could likely create a pattern set of your own that you could use to show HTML wireframes and to reduce the amount of work that the designer feels compelled to do in PS.
Our team (in regular web building) has been trying to get to the point where layout is designed in the browser collaboratively between a designer and a front-end dev. Only illustrations or specific elements are created in an app (PS, AI, Sketch).
Hi there,
Just as Alex pointed out, it all depends on the team and how fast they can produce the result. I personally get the PSDs from the designer and do the coding - I guess this approach might not apply to your case as you create the html for your clients while we send out ours directly to our customers.
Do two images: Desktop and mobile, and get approval on both. But be sure you talk to your coders and make sure the stacking will work on responsive.
Thanks guys! Turns out our designer will be on vacation this week and I get the chance to get my email code done first :)
I will be really good at tracking the time next week :) #codefirst
Hi Annett... I don't go near Photoshop for email designing anymore. I just use wireframes and slot in the content later on. I then recode based on feedback from the clients. I often find the client doesn't know what they want until they see the email in their inbox.
I am 100% with you :)
I like your thinking. Also prefer to jump to code asap. Using a framework like Ink enables you to jump on this pretty quickly. Or sounds like you're doing a lot of emails so building and "componentizing" your own framework, similar to what Brian suggests here might be useful. Personally I prefer using Grunt with SCSS to streamline my workflow.