Crowfall

Through many iterations of the visual language, I worked to design a visually flat and modern style, which is unique in the world of MMORPGs. I relied on white space as much as possible to create natural divisions between text and images instead of using borders and dividers. 

 

I used consistent typeface styles to create hierarchies of information, which is especially important in text-heavy interfaces. I also converted the type to support localization of other latin-based languages and Cyrillic. OpenSans was chosen as the game’s typeface for most in-game text based on its readability, large character set, and numerous weights.

Floating Windows

Crafting.png

Crafting window

Talents.png

Talents window

The most common player interactions in the UI for Crowfall are through various floating windows, which are used for the game’s more prominent self-contained features. Based off of mockups made in Illustrator, Photoshop, and Adobe XD, I constructed these in Unity, using its UI toolset. These also make full use of the layout tools, including layout groups and content size fitters to ensure the window’s content still looks good if it is resized.

Popups

Leaderboard.png

Leaderboard

ItemCosmetics.png

Character skin customization

These can take the form of small contextual popups or full-screen takeovers, depending on how prominent they need to be or how much information they need to contain.

Tooltips

SkillTooltip_mock1.png

Skill toolip

PowerTooltip.png

Power tooltip

ItemTooltip_2.png

Item tooltip

Some tooltips look similar to popups due to the amount of information that needs to be conveyed, but they are not interactable, and only appear while the cursor is hovered over an item, power, or a similar object that needs expanded information. Design needs would sometimes require a large amount of text in these tooltips which provided a unique challenge to provide the necessary information in an understandable way. This made it especially important to use different text styles, colors, spacing, and capitalization to create hierarchies of information.

Iconography

Power icons

Skill icons

Inventory icons

The power icons follow a consistent design language that gives the player insight into what a power will do if it is used. Each one is comprised of its unique, single-color foreground iconography, a shape, and a color fill in the background. The shape and color language define key properties of the powers.

 

I also created several inventory icons, such as runestones and building deeds. Runestones come in several styles, and each one contains an abstract image designed to have a hand-carved appearance. Building deed icons are designed to appear like blueprints as they are used in the construction of buildings and siege equipment.

 

Like power icons, skill icons consist of a single-color foreground element with a color fill defining their use. Here, the icons feature a shiny sphere to draw attention to their clickability.

Wireframing

LobbyFlow_2.png

Lobby screen flow

Wireframing is a process I use often, especially when working on a large feature that I know will contain many states and require a lot of different pieces of user feedback. Here I started designing the rough layouts of all the states in Adobe XD. Then, I made the wireframes interactive by connecting buttons that transition to other states when the user clicks them. This was valuable because I could arrange internal user tests to see what worked, what didn’t, and then iterate on the user flow before designing the final visuals.

Visualization

Animated skill tree

Experimentation_1.png
Experimentation_2.png

Crafting experimentation mini-game

Crafting_Updated.png

Animated time bank meter

Alternate crafting tree interface

Once the wireframe for a feature was approved, the next step was to make mockups. I did this using Illustrator, Photoshop, Adobe XD, and After Effects. Just like the wireframes, these would go through plenty of iteration. Before implementing an interface in Unity, I would end up with a detailed final mockup. I would use this to exactly replicate the visual layout in-engine. The examples I included are in the middle of the mockup process or are not yet implemented.

© Copyright 2019 by Lars Olson