RESPONSIVE GRID STRUCTURE DESIGN
Combining my 5 years of experience working on the Hagerty websites with my killer math skills, I calculated some grid options that took into consideration all of the existing page layouts, design assets and breakpoints in order to minimize layout shift and eliminate the need to recreate full browser width header graphics when implemented.
My Role: UI Design
Tools Used: Axure
Who I Worked With: Web Art Director, Front end developers, UX Design team members
DISCOVERY & PROCESS
The discovery phase involved first working with the front-end developers to define all existing and desired future breakpoints. Combining these breakpoint widths with our existing responsive page layouts and margins/gutters, I was able to calculate a non-conventional 21 column grid that we could implement without any changes or page layout shifts.
After presenting the grid option to the team, the Web Art Director decided he wanted to increase the gutter width by 10-20 pixels. With this new requirement, I revised the desktop grid to a more standard 12 column one with both 30 pixel and 40 pixel gutters to visually communicate how this would affect existing page layouts.
RESULT
Once the decision was made to move forward with 40 pixel gutters, I was able to finalize the new grid structure. The result was a 12 column, 40 pixel gutter grid in desktop view with a 10 pixel graduated gutter decrease at each device breakpoint.
As an added visual aid and to define responsive content priority, I also laid out responsive templates for each of the existing page layouts.