UI/UX Gallery

Production Gallery of UI/UX Design projects undertaken for a variety of companies.

The Deckstorm Special Campaign List

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_IMG_0942.jpg" title="The Deckstorm Special Campaign List" alt="The Deckstorm Special Campaign List" width="480" height="320" style="max-width:100%; height: auto;"/>

Design and Layout of the Special Campaign list taking care to arrange information in the right locations so as to complement the underlying artwork while also highlighting the compelling (Loot and Awards) aspects.

The information given regarding card packs purchased

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_IMG_0951.jpg" title="The information given regarding card packs purchased" alt="The information given regarding card packs purchased" width="480" height="320" style="max-width:100%; height: auto;"/>

Designing a layout that can accommodate variable text lengths for Card/Spell Names and Description.

An update to the Direct PvP system to add more intuitive use-cases.

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_PVP_DirectUpdateA-1.png" title="An update to the Direct PvP system to add more intuitive use-cases." alt="An update to the Direct PvP system to add more intuitive use-cases." width="480" height="320" style="max-width:100%; height: auto;"/>

A proposed update of the PvP System to add functionality to assist the player in creating lists of Favorite users they wished to regularly battle.

Design and Layout of the settings screen

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_IMG_0957.png" title="Design and Layout of the settings screen" alt="Design and Layout of the settings screen" width="480" height="320" style="max-width:100%; height: auto;"/>

A simple yet logically ordered layout of the main game settings.

The Six key stats of each Card in Deckstorm

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_StatIcons.png" title="The Six key stats of each Card in Deckstorm" alt="The Six key stats of each Card in Deckstorm" width="360" height="320" style="max-width:100%; height: auto;"/>

Each icon was designed to both convey a memorable representation of each stat meaning while matching the silhouette/outline-focused aesthetic style of the game.

The Blood Brothers 2 Home Screen

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_HomeBannerRedesign6.png" title="The Blood Brothers 2 Home Screen" alt="The Blood Brothers 2 Home Screen" width="480" height="320" style="max-width:100%; height: auto;"/>

Stylized yet simple interface for users to quickly jump to key locations and identify key information needed (stats, money)

BB2 Stage Details Screen

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_UGC_StageDetails1b.jpg" title="BB2 Stage Details Screen" alt="BB2 Stage Details Screen" width="480" height="320" style="max-width:100%; height: auto;"/>

The Stage Details Screen of BB2

BB2 Squad Scene

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_UGC_SquadScene1a.jpg" title="BB2 Squad Scene" alt="BB2 Squad Scene" width="480" height="320" style="max-width:100%; height: auto;"/>

The Squad Scene of BB2 with added User Generated Components

The Blood Brothers 2 Special Event Screen

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_EventProgress_20141118.jpg" title="The Blood Brothers 2 Special Event Screen" alt="The Blood Brothers 2 Special Event Screen" width="480" height="320" style="max-width:100%; height: auto;"/>

Customized Banners featuring key Artwork to promote the weekly event and encourage users to participate.

Event Banners

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_BB2Banners.png" title="Event Banners" alt="Event Banners" width="480" height="320" style="max-width:100%; height: auto;"/>

Created several different Event Banner configurations that were utilized for both external Marketing and to promote in-app purchases in weekly special events.

Special Point Icon

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_stats_icons_XP_1006.png" title="Special Point Icon" alt="Special Point Icon" width="480" height="320" style="max-width:100%; height: auto;"/>

Another BB2 UI Icon

buygold

<img src="http://www.erictopf.com/wp-content/gallery/uxgallery/thumbs/thumbs_buygold.jpg" title="buygold" alt="buygold" width="480" height="320" style="max-width:100%; height: auto;"/>

UI/UX design for in-app purchases Modal

Prototypes and Videos captured from Mobile Device

Event System UX Prototype (Figma)

Event System UX Prototype (Figma)

Interaction UX Prototype (ProtoPie)

Interaction UX Prototype (ProtoPie)

Quest Interaction Design (Deckstorm)

Quest Interaction Design (Deckstorm)

Deck UX Interaction Design (Deckstorm)

Deck UX Interaction Design (Deckstorm)

Post a Comment