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:
