Miles Partnership, a travel marketing company, picked up work from one of their clients, Branson, Missouri to build and maintain their new website. Branson already had a set of composite files from an agency that communicated the design they had more or less settled on. The files needed to be marked up and some general rules needed to be extrapolated and written down to make the developers’ jobs easier.
My task was to mark up the Photoshop files we received with comments denoting pixel dimensions, font information (face, size, color), outlines, and shadows; really any information Miles web developers would need, called out clearly so they could quickly glean it. I worked on both desktop and mobile versions of the website itself and its email templates, with occasional help from a coworker, who followed my lead, to get the volume of work done to make deadlines.
The style guide developed naturally out of my process, as a way to keep myself and my coworker organized. I consulted supervisors when inconsistencies in the original design would appear, asking for permission to simplify them. In addition, I saved many symbols (like the search magnifying glass) in .svg format, and generated other assets as needed, such as a large number of .png red dot headers.
Sonoma County, California is another client at Miles Partnership and sought a site re-skin (no change to functionality, just updating of assets and colors and CSS). The coworker who helped me on the Branson site designed the new look & feel and started creation of composite pages, then asked me for help generating the composites for both desktop and mobile, as well as comments. The site's header and footer designs were finalized after my contract ended, so my work usually only shows the body sections.
We collaborated a bit on certain decisions she had not made before asking me to help generate composite pages, such as with header tag styles and button color combinations. Since we were working together on files sometimes, I took extra care to keep the design layers organized in all the files I worked on. I also kept comment layers completely separate from the design itself, so updated clean flat files could be easily exported as needed. My time on that contract ended while this project was still in process, so I did not complete a full style guide but I gave my coworker a good start on one, summarizing a number of the basic rules we created.
All works and site design © Marah 2011-2017. Do not reproduce without the express written consent of Marah.