Conor Behrens
Civilization Redesign
Civilization's diplomacy screens have changed a lot over time: from starting with two columns on opposite sides of the screen, to consolidating the menus on the left side, but still maintaining a skeuomorphic aesthetic.
I wanted to experiment with updating the graphics of this menu screen to give them a more modern, minimal design.
Initial layout (without dialogue box):
I started by studying the progression of Civilization diplomacy screens over time.
I noticed that the list of items the player could offer, and the items the NPC could trade in return, were on opposite sides of the screen in earlier Civ titles, but moved to the same side with Civilization 6.
This layout makes navigating and consuming the information a lot less strenuous for the player in my opinion, and I wanted to start by building off of this layout.
The active trade proposal window is given more width in this design to emphasize its importance in the trade process.
WIP 2:
Here I started designing and laying out the icons for five items the player could trade between themselves and the NPC.
My biggest inspiration for these icons was the collection of “Unit action icons” from Civilization 6, and a bit of research into how others have interpreted these concepts into icons prior.
The lines below the item names are designed to help separate each one visually. I went with designing lines instead of boxes that surround the items in order to reduce clutter.
WIP 3:
Here is where I started to design the scroll bars and the header for the inventory menu, as well as mocking up what the items would look like listed in this menu.
I started to notice that the lines underlining each item name were potentially distracting here though, and this is addressed in the next iteration >
WIP 4:
Instead of the "Decline/Accept Offer" Buttons the player is normally provided in Civ, I replaced this option with a more dynamic dialogue box in the style of Civilization Revolution.
This reduces a bit of the clutter on the left-side menu and allows for more autonomy from the player.
I chose to place this asset closer to Gandhi to emphasize how choosing a line of dialog will advance the player forward.
I also changed the underlines to a more subtle color and moved the header for the inventory menu further from the trade proposal window in order to remove some more clutter.
WIP 5:
I rearranged the scroll bars of the trade proposal window to make them consistent with those of the inventory menu.
The headers of the trade proposal and inventory menus were given darker banners to contrast further from the text and menu backgrounds.
A subtle gradient was added behind each item to further aid in separating them from each other visually.
This was the last iteration before moving the project to Photoshop and coloring the icons, so I removed the extra ones from the inventory menu in preparation.
Final Product:
Each icon was colored in order to further distinguish each from one another.
The scroll bars and menu outlines were embossed to take the design in the more skeuomorphic direction that Civilization has historically gone with.
The colors of the menu outlines were changed to brown to give the screen an aesthetic that’s grounded in a more historical setting.
The dialogue box was also expanded to provide more generous legibility.
Lastly, a subtle rock texture was added to the backgrounds of the item menus to further ground the screen in a historical setting.
Item icons over world map.
As much as I love and appreciate Civilization, it's not something that's overly personal to me.
I wanted to take this project one step further by adding an original character and replacing Civilization's text with original writing about personal experiences (in this case: anxiety).