Web designers have created beautiful websites since the beginning of the web (not really, but that reads well, right)? Web designers have, for some time, become more and more aware of the aesthetic of the sites they are working on. Not to mention that the more we separate web designers from web developers, the more and more opportunity for disconnects between the two in regards to the possibility and functionality of that promised by a beautiful design.

Now, OF COUUUUURRRSSSSSSEEEE, there can be a magnificently designed website translated to development with pixel-perfect precision, but oftentimes that is not the case, unless you have a super dev that can read your designer's mind.

Or

Maybe

Just maybe, there can be a process put in place to align the two at the most macro level possible to allow both freedom and execution liberty, yet retaining a certain amount of freedom to preserve the integrity of your workflow and client expectations.

Introducing the GRID. That's right, if you’re a designer and have received any sort of actual training, you’ve been introduced to grids and how they can transform your designs from an unorganized heap of bologna to a golf course club!

Web design is no different, using tools like Sketch, Invision, and Zeplin, we at Red Shark Digital have developed a workflow that keeps not only our designers on the same page, but our developers as well.

We refer to it as the 8 pt grid.

Not just us though, Google does too. You heard it, GOOGLE.

Other parts of the 8pt grid include a 1440px wide max content container that all components are designed within, along with 12 columns, and proportionate gutters and offsets to allow for a clean grid keeping all items in order.

Google’s material design really champions in this process and was what we studied when implementing this piece of our workflow.

Our designers use this grid as an overlay in Sketch as they lay out pages, and before they are sent to development via InVision.

Our developers are able to check against the designs using InVision’s Inspect tool to determine the values associated with certain components created.

Our developers are then able to implement those values into the site we are building, as our bare bones theme is built to include the 12 column, 8pt, 1440 grid.

So, we are in Greenville, NC, and we know that this has helped our team tremendously, especially during QA, and hopefully it will help other web designers in our local area.

‍