Vertically integrating website design and development

There are tons of tools to help with website design and development these days. A huge number of them are external tools that help you solve specific design problems and later fold them back into your website. Sites like Gridset, Typecast, Color Scheme Designer, gradient generators and many more have become popular among web designers. These tools are great as they help us find visual solutions in a purely visual format. Because they are so specialized, the code is clean and doesn't hurt the quality of our website code like putting together a whole site in the visual view of Dreamweaver might.

Regardless of how awesome these tools are, it's just really hard for me to use them in my workflow. With LiveReload writing code doesn't slow me down when designing and in using Sass with Compass all of these design processes can interact with each other. This enables my color decisions to cascade down and update my typography style guide. If my base type size changes the grid system changes with it. Instead of a one-way street coming into my site, everything is working together as design decisions cascade down to everything they need to effect.

I basically have a vertically integrated design and development work flow going on. Vertical integration is a method of creating products used by many of histories big monopolies. It is where the corporation has total control of everything from the mining of natural resources to the final sale to the consumer. As a result, if demand outweighs the supply production can easily be increased without dealing with the bottleneck of negotiating with suppliers. To bring this back to web design, if I have an issue down the line with a design, the source is already in my toolset. The design decisions that are the foundation of my website are all variables that can be changed much faster than building up from any external tool.

A real-world example of this is the Sass Conf design (w.i.p. styleguide) that I re-started just over a week ago. It's still young, but coming together quickly. The colors for this site are all dynamically generated with [color-schemer] and variable-driven typography using modular-scale. Because these design tools are integrated into my development, I don't know what the real values are for things. The hex values for the colors are all just generated through color-schemer, all I have to do is tweak them so they look good. The type is scaled on the golden ratio and there is no way I am going to remember all those decimal places, again, I just need to make sure it looks good. In attempts to use Typecast I was having difficulty translating these dynamic design choices into their environment and then moving those choices back into my document would have severed the existing design connections with the type. Code already provides so much design control, and with a proper tool set and collection of plugins code can also provide the flexibility to design incredible things.