![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/a09ef23ef9b3690353f94bf5_rw_1920.png?h=b1b74dbc6da0dc7d3057f49c25db7165)
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/b0a1ec08b882c5188913a248_rw_1920.png?h=3729753d6d7b6709508447a66a9713d2)
As we were converting all the old artwork created for the web over to mobile, this was my opportunity to create a brand UI guidelines for my new UI interface. Here is a do's and don't page. With my background in illustration and concept art many character designers use silhouettes to build a strong design. I was able to use this process in creating strong UI and icon designs.
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/ebbe06d8c88971ae6fdc970e_rw_1920.png?h=63851b84b59bf545dbfec7c6c256379c)
With many different devices and scaling involved with mobile I needed to make sure the icon line width scaled correctly. Here is a scalability page.
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/c8d7216723762bd656193aaf_rw_1920.png?h=3be4755f5397b7863fb93538e99d9ee4)
Here is a page if you look over to your far left, those are the original icons from the web version. I went through many different variations and ideations of each category as I begin to redesign and give CP a fresher look.
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/861f4f3b28b45fc832ccc7e7_rw_1920.png?h=8998e5f16b83891ae9053c322989fe1c)
More detailed notes. Using lighting to unify the UI give consistency in the design.
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/c8794e372aceece73c5ff3ab_rw_1920.png?h=f747f2094c17c6b94fdf43a87666eced)
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/af12a8f3851c16bd01bcafcb_rw_1920.png?h=cd15d21cd4372588bff2b9bf04b05466)
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/2bbe27dc26c57b6cdd37b33f_rw_1920.png?h=c745fc1ba62167e42807cfeb718fa0b3)
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/c2dcf4ed1f402756df8cb2ed_rw_1920.png?h=daa279b46837df9f4e5c81d2699d3770)
Here are all the main icons I designed. There were more but these were the main ones on the HUD and Map screens.
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/63e3bc235a5c5a488e6a9387_rw_1920.png?h=54cda3a4b63253a0176ef30ceea16ce8)
Logos designed for Club Penguin 1.2
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/02e10f876537ea94b019554b_rw_1920.png?h=ac69cbdc54d2c900b83977f4e0658bb3)
Concept Sketch of background for Smoothie Smash Survival game inside of Club Penguin
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/520385a9c15c476773d4cfc0_rw_1920.png?h=9cd3e8209161c74bf50a15c1579c8680)
Finished in game screenshot of background for Smoothie Smash Survival game inside of Club Penguin
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/381aef17f08558236fc1699e_rw_1920.jpg?h=e241a33156597dd5b2a7499c0e8cc78b)
Screenshot of Club Penguin 1.2. Bottom HUD with my icons.
![](https://cdn.myportfolio.com/6ffbde3e966fce2cf128b2de844479c1/2f4b0be92804d9719aec4036_rw_1920.png?h=4ed5fee1ee6bacc02c50a8802db51bd0)