I decided a little while ago that I would try and change my workflow. This has happened many times over the years. In 1998 when I was making Nintendo 64 websites, Notepad and a FTP client were major parts of my workflow. Since then, my tools and and process have changed a lot. I think one of the tenets of a good designer/developer is the ability to keep learning and recognizing when something in your process could be done better.
My new workflow is the result of a lot of reading and a lot of trial and error. I've come a long way from the days of Notepad and a FTP client.
Get in the browser!
This is something I would've been against in the past. I was still remembering the waterfall process where everything takes place in silos. The designer designs a layout, then passes it to a developer, who then pass it to the people who enter content. This method presents a lot of problems, mostly that the three phases happen in isolation. The graphic designer gets to make a lot of decisions without knowing if a) their design is even possible to implement and b) if the actual content would even fit into the design. If the developer and the content experts were involved in the design process, conversations could happen that would prevent issues like that.
Design, content, and development are all inherently intertwined. Design, content, and development need to happen somewhat simultaneously. As a developer, by getting right into the browser, I can work closely with designers to iterate on the design, get feedback, and enhance the interactive aspects of the site. I can also work with content experts who can provide me with some real world content to test in my prototypes.
Getting into the browser as soon as possible allows all three of these phases to happen simultaneously. Currently we're trying something new. Instead of fully committing to a design in Illustrator or Photoshop, our designer roughs up some wireframe-y type stuff in Illustrator, and then I get that prototyped into something like Pattern Lab as soon as possible. Then lots of conversations happen. Content, design and development are all being considered at the same time now.
Tools like Slack make it easy to share links, screen shots, inspiration, and feedback with everyone on the team. Our Pattern Lab is at a public URL and is commonly referenced and discussed. So far this is leading to a lot of progress in a short period of time. Workflows within Pattern Lab could be a whole other post, but however you want to do it, get your styles broken down into atoms, molecules, organisms, etc. It makes prototyping so much more efficient.
Dave Olsen discusses this topic in detail in the video below and does a much better job than I discussing the problem and potential solutions.