Viking Inventory

Last Updated: July 2020
BRIEF

This Viking Inventory is my way to improve my skills in high-fidelity UI art. I've never made a skeuomorphic design before so I wanted to push my skills outside of my comfort zone. After all growth happens when you step into the unknown. By doing this project, I also learned some new tools along the way including Substance Designer and Fusion360. With Substance Designer, I am able to make materials for the UI in combination with traditional PNGs to make something truly unique. With Fusion360, I am able to integrate 3D Modeling into my iconography design. These icons are then polished up in Photoshop to make sure consistency is met between them.

Showcase video

gallery

preproduction

THEME

The overall theme is, of course, Viking. I wanted to make something from a culture I was interested in and last year I read the book Norse Mythology by Neil Gaiman so I felt particularly interested in learning more about Norse Mythology and the Vikings. I watched a few documentaries about Vikings and did some personal Google Searches too. Come to find out, I actually have no idea how to make Viking Art. Most people know the runes of the Vikings and the gear (axes, shields, horned helmets, and such) but what about their art? I stumbled across a great resource by Jonas Lau Markussen and it truly changed my perspective on Viking Art. It was fascinating for me to learn about how Viking Art changed through time and the materials used to make this art drastically changed when they adopted Christianity. After some more reading I decided I liked the Mammen style the best so I found a bunch of inspiration from that.
COLORS

During this project I went through my Pinterest Board on colors and it turns out I really like the color Red, Orange, and Blue. I picked a few of the images I saved there and made some color palettes. This step of the process was more towards my original idea of Cyberpunk Inventory but I still tried to stick to the palettes to make something not many people have seen before. Going into this I knew I wanted to make something more on the dark side. Not dark as in blacks and greys but more adult and grim. Like Loki broke free from his chains and brought forth Ragnarok.
This color palette is pretty much what I went with in the end. I didn't use nearly as many purples and pinks as the palette suggests. I also added a second dark red to the palette to give it a darker feel.
I thought this palette was nice but I thought it might be a little too cheery for what I wanted. Might be a nice palette for a game set on a tropical island at sunset or something like that.
This palette was my runner up. Lots of nice colors here and it probably could've fit well with what the vikings originally painted their art with. I could've used a lot of the dark purples and yellows. I didn't end up picking it because the amount of colors might have been hard to work with. I like the simplicity of 2 or 3 colors.
I love how sterile the hallway feels. Like some weird dream that's unsetting but bright. Thought it might be good to translate that into the UI but decided against it. I didn't think sterile was the way to go for this project and the values of these colors might have been too bright for my dark and grim setting.
GREYBOX WIREFRAME

For the Greybox I just figured out the placement of the components on the screen. I knew I wanted a tooltip somewhere and I knew I wanted the Inventory to slide out Diablo-style so you can see what's going on in the world. Maybe the character screen can slide out on the other side or something too.
SHAPE STUDY

Here I wanted to figure out what shapes I wanted in the UI. I knew I wanted to push towards a UI that was extremely graphic and had lots of intricate details. I liked the idea of treating the inventory like a storehouse where the player keeps their stuff so I added the beams and banners on the top. And the arrow heads are a nod to the dark and grim theme I wanted. There's fighting going on in the world and even the UI knows it.
TEXTURE COMPOSITE

After I got the general shapes down I wanted to figure out what everything was made out of. Since I wanted to push the design more towards the skeuomorphic side it was a good exercise to think of how everything was connected and what sort of materials they were made from. Currently there's a lot of wood, stone, and metal but I also liked the idea of some sort of bubbly liquid for the stat bars.
UI COMPONENTS

Here are a few explorations for the different UI components. This step in the pre-production process was after my greybox wireframe and during my shape study wireframe. It took the most time to get the border between the world and Inventory to look natural. I spent a lot of time there because that border should be a perfect blend between the in-game world and the UI world.
ENVIRONMENT TESTS

These are a few environment tests to see how my style and shapes would hold up in different places. I tried to use backgrounds that I thought were dark and grim. Somewhere I could see the Viking player going to. I knew that they might not go to a tropical beach or a rain forest so I didn't get a background in those styles.

motion design

​My process was much more freeform when it came to the motion of my Viking Inventory. I had a few ideas originally on how I wanted the elements to move (like the Banner in my original mockups or the open/close animation). But a lot of it started with the words "I think it would be cool if...". I'll go through some of the motions in my inventory and give a brief overview on how they were implemented and some notes about them.
FEATURE
Tooltip Spawn

IMPLEMENTATION
Mechanim

NOTES
​I felt like the tooltips popping in and out was too static and needed some life so I tried my hand at a super simple animation for them. At this time I already had the animation for the Pickup Info so I based the little twist off that. I really wanted to get the speed right since players could be hovering over a bunch of different items over a few seconds. It needed to be quick to get the info but not so quick that it flashes if you're waving your mouse around. I think I struck a decent balance.
FEATURE
Pickup Info Spawn

IMPLEMENTATION
​Mechanim

NOTES
I've been playing some Dishonored 2 lately and I love the motion of the menus. This animation was based off that. It starts with a big twist and settles into place. The trickiest part here was the 'bobbing' it does as an idle animation. At first the bobbing was too subtle so it looked like a jittery bug. But I didn't want it to be too fast so you can't read the text. Like the tooltips, I think I struck a decent balance.
FEATURE
Item Mouseover / Hover

IMPLEMENTATION
​Mechanim and Script

NOTES
I had lots of ideas and tried many different things with the item hover animation. I originally wanted them to kind of turn based on your mouse position (inspired by the Steam Trading Card hover). But I couldn't get the turn right while I was using a Canvas in Camera Space. So I reverted back to a simple hover. Then I noticed the tiles wouldn't move forward above the ones below so some clipping would happen. I ended up having to disable the grid I set up and change the tile's parent when you hover over it so it would draw on top of all the other tiles.
FEATURE
Inventory Slot Highlight

IMPLEMENTATION
Script and Coroutines

NOTES
The Slot Highlight was fun because I got to use a cookied light source for the highlight. Each of the slots are given a rune on start and I had to make sure the light cookies matched the rune. From there I would burst a particle effect when you hover and start a coroutine to dim the light slowly. Ended up with a pretty neat effect.
FEATURE
Cloth Banner Wind and Physics

IMPLEMENTATION
​Unity Cloth System
​
NOTES
​One of the benefits of using a Camera Space Canvas is I can use fancy physics and 3D Models in it. I have never used any sort of cloth system before so this was an opportunity to learn. I knew I wanted the banner to have a little wind movement based on my mockups so I had a decent idea on how I wanted it. I learned all sorts of things like how to constrain one side so it doesn't move and how to give it a little turbulence. In the end I would've liked it to be a little more slow and flowy but I think the jitter comes from the object being so small.
FEATURE
Inventory Open and Close

IMPLEMENTATION
Mechanim and Triggers
​
NOTES
When I mocked up the Inventory I knew I wanted it to slide in and out from the right side of the screen. Something similar in style to Diablo. After playing around with the animation a bit I noticed it didn't have enough oompf. My solution to this was to add particle effects for dust clouds and little bits of debris. The close animation is just the open animation reversed and sped up without the particle effects.

custom title typeface

REFERENCE
The Jelling Stone

The first reference I took inspiration from was of course the Jelling Stone and general Viking runestones. These stones gave me direct reference to how the Vikings would've written stuff down. The text here is very narrow and uses a lot of vertical lines to create the forms.
Medieval Text

The second reference I used is old medieval books. These books used a lot of vertical lines to create the letters but the text is thicker in a lot of places. I knew I wanted a bold text so I took some inspiration from here too.
SKETCHES

The first thing I did was get out the old pencil and paper to sketch out just a bunch of letters. I wasn't focused on the thickness of letters because I figured I would figure out the thickness and ends when I took it to Illustrator. These sketches were just to get a bunch of ideas on what the shape of the letter was going to be.  ​
FLESHING OUT FORMS

Next it was time to hop into Illustrator and start creating. Although the program I was planning on using has a vector editor, I'm most comfortable in Illustrator and wanted to leverage its power. During my iteration process, I frequently took the letters and hand placed them to make different words. This gave me a sense of what was working and what wasn't. When I felt happy with the forms, it was time to take it into BirdFont to make something I can put into Unity.

Learning BirdFont was a bit tricky since the documentation is a bit sparse. After a few days working with it, I think I've got a decent understanding of it. At least enough understanding to make this simple font.
FINAL IMPLEMENTATION
ADDITIONAL CREDITS
Maksim Burgrimov --------- Viking Ulf model and animations [LINK]
​​Ted Forbes ------------------ Highway Gothic Narrow and Regular [LINK]
Various Artists -------------- Adobe SFX [LINK]
​Aturax Audio ---------------- Cinematic Impacts [LINK]
Substance Source ---------- Iceland Windswept Snow
                               ---------- Thin Ice
                               ---------- Heavy Corroded Brass
                               ---------- Iron Rugged