Creating Social Game UI requires a balance between traditional website design methods and console interface techniques. It's a great challenge to push the designs closer towards feeling like a console interface, all while leveraging the advantages of having precision inputs from a mouse.
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/7754ae3e-46bf-48c0-8705-ccbea0b54332_rw_1200.jpg?h=5bac9023fd241b20bf5eefc32dcd2cab)
This collection screen shows a long-term player goal of the "Ultra Mythic." A roll-over input reveals a hint and pay through option to earn a missing component in the collection.
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/b15522e0-379b-4a87-a219-22d7a9c29e80_rw_1200.jpg?h=1b26041df658e075c642918a4f248824)
A functional mock-up showing a storefront. This covers many features, including promotional items, search, sort, and 2 levels of category view.
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/566e88cc-6eb7-4601-85f0-694e159a26ec_rw_1920.jpg?h=7d9637e2695b0701a72fbbf4983478ba)
A UI store concept showing off a clean visual style, meant to help inspire the user to feel as they are at a real wildlife park. This is done through the use of strong informational graphics, calming color scheme, and an open layout free from clutter.
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/2640d212-741b-40e4-b192-02c9f7eb6ea2_rw_1920.jpg?h=cda303c52b67ea49d1482244660a8713)
Another UI style investigation focused on warm color tones and simple shapes
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/1904284c-afbc-47e9-b268-fb8cc41c882f_rw_1920.jpg?h=91595b3ffb55769303c31c8dbb4905ce)
A UI style investigation exploring a rendered menu style with a tropical slant.
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/18aadc80-f0d5-43dc-9228-ac0c32ab6020_rw_1200.jpg?h=48fb032d321c3bf7034b3999c5a833e0)
Example of a expanded task list usually coupled with a player directive. The "?" elements trigger a roll over action for each line item explaining where the user needs to go in order to complete the goal.
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/e583dc21-8431-4b78-862a-b4cb4738b64a/12b5ecea-385c-4bdb-96b7-c1fbfc3adf5a_rw_1920.jpg?h=72785d544e299224d7b9215d8ccc52b3)
A player training screen for use is a augmented fantasy football game. The nodes on the bottom represent player selected training that can be assigned to their various fantasy players.