Civ 7: Style Guide
Focus on building a suite of functional visual design elements for UI designers while continuing to expand the visual elements during development.
Working with the project UI Art Lead, I took the initial design and expanded the suite of widgets, panels, borders, deco, and whitespace rules to keep up with the increasingly complex screen designs.
I built a functional widget set in Adobe Illustrator that mimicked how the elements behaved in-engine. This way, we could grab these library assets and very rapidly create and iterate visual designs and maintain a consistent style.
Highlights include frames with 9-sliced ornamentation, fill elements for debug checking whitespace, and a suite of deco elements to fill out the visual design library. All library smart assets, easily used across multiple design files. As we encountered new design elements, I maintained and expanded this library.
We could take a wireframe and skin it to a mock and iterate with remarkable speed.
You can see these design elements in many of my other screen designs. For example the wireframe to mock of the advanced create game screen:
