Every morning, I setup a schedule of tweets to go out throughout the work day on the hour, every hour. This way I can share cool stuff to my followers and it allows me to the freedom to jump in spontaneously and interact with different people. A good friend and colleague of mine Danelle Bailey tweeted this morning about how you share design specifications with developers. I thought this would make a great post.

I am a front end developer along with being a designer. I have built custom sites using barebones HTML, CSS and some Javascript as well as more complex sites built with ZURB Foundation, Twitter Bootstrap and Skeleton. I have also built WordPress themes that require a lot more attention and the use of PHP. I have also worked on legacy systems using SharePoint, Drupal and even old DotNetNuke. So for myself, it’s extremely easy for me to work in an integrated fashion. I know the design specifications therefore coding them becomes easy.

When I work with others though, this is where it can get tricky. Depending on the project, I can usually design and complete the page templates in full HTML and CSS and pass along the mockups and templates to my developer who will build in more of the server side functionality.

One example of a project where I worked like this was with my good friend and colleague Mike Drawbaugh of MAD Technology Solutions. Mike is a Microsoft guy, .NET is his thing. A year ago, I worked with him on a series of projects for the specialty medical societies of Pennsylvania. There were fourteen sites in all that needed redesigned and built. Luckily for us, seven of those sites were going to be basic SharePoint member sites with only a front end login page, but the remaining seven wanted a more public face. I was the designer and front end developer on the project, Mike was the server side developer. Mike and I would use InVision App to share with the clients the proposed designs. Before we met with the client, Mike and I would discuss the project and go over the designs in InVision ourselves first on Join.Me. We would work out any design issues and I would show a pseudo style guide I was using for myself to dictate how I would create reusable patterns. After we would come to agreement on the direction and design, we would present them to the client and get their feedback. Once we had an approved design (with or without changes…mostly to photos) I would wrap up the files and send them to Mike for building in the member management system in the updated .NET environment.

That process worked really well for a couple of reasons. We had excellent communication with each other during the process. Mike wholly admitted that he is not a designer and would only come at things as a user when I would talk about the design. This made the experience much more worthwhile because as a user and developer, he could suggest UI directions and back it up with how it can actually work. Another reason we worked so well together was the tools. I used InVision App to share with him the designs instead of throwing up my mockups online in a dev subdomain. The tools we used helped facilitate our discussion for the clients. Finally the last reason goes back to the first in a respect; trust. We trusted each other in our ability to work to our strengths and come up a solid solution.

One project that didn’t go so well for me in this regards was the Pennsylvania Family Support Alliance. At the agency I worked at the time contracted a dev shop who didn’t communicate well with us or the client, used out of date tools (DotNetNuke) and didn’t have our trust. The hand off of work didn’t go as well as working with Mike and the resulting site is a mish mosh of my work and the web designer at the shops work.

So to recap my process you need communication, the right tools and trust. Some good tools to use when you hand off to developers would be the following.

InVision App – A solid tool to show prototypes and mockups. The commenting feature alone makes it well worth it.

Macaw – Rapid prototyping tools, similar to Edge Reflow. Pretty handy when used in conjunction with InVision designs.

PineGrow – Like Macaw, but can kick out more production level code.

So what’s your process? How do you work with handing off design notes to developers? Hit us up on Twitter!

November 11, 2015

Tell me your thoughts.

%d bloggers like this: