<![CDATA[Angela Chen Design - Web Entries]]>Mon, 09 Apr 2012 10:46:22 -0800Weebly<![CDATA[Pathbrite Infographics]]>Thu, 22 Mar 2012 14:26:58 -0800http://www.angelachendesign.com/1/post/2012/03/pathbrite-infographics.html

Pathbrite Full Website

Pathbrite Institutions Infographic

Pathbrite Individuals Infographic

Pathbrite Infographics

Web

Details

  • The Boss

    Pathbrite

  • The Project

    Design two infographics to quickly communicate to visitors how they can use the product. Text was provided for both images. Make sure the illustrations would match the styling of the site by keeping it clean, simple and using the colors in the style guide.

  • The Solution

    Since the product was still in production, I didn't have screenshots to use so I had to create generic illustrations to represent the features of the product. Using various sources as inspiration, I created these original artwork in Illustrator in vector format. I used only three colors to match the minimalism of the site.

  • The Tools

    Illustrator

  • The Site

    Check out the site here.

]]><![CDATA[Brainswap]]>Thu, 23 Feb 2012 21:11:02 -0800http://www.angelachendesign.com/1/post/2012/02/brainswap.html

Brainswap Desktop Full Website

Brainswap Website for Mobile Devices

Brainswap

Web

Details

  • The Boss

    Brainswap

  • The Project

    Design a one-page website based off of the styling of the logo and business cards. Create mobile versions for responsive web design.

  • The Solution

    I adapted the colors and typography from their business cards and added some additional design elements. I started with the mobile site first, and started adding in more details to the full desktop version.

  • The Tools

    Photoshop

  • The Site

    Check out the site here.

]]><![CDATA[Bored.com]]>Thu, 23 Feb 2012 21:07:36 -0800http://www.angelachendesign.com/1/post/2012/02/bored.html

Bored Index Page

Bored.com

Web

Details

  • The Boss

    Game Pub

  • The Project

    Update the styling for Bored.com to be more current but still keep the same feel of the site. Include interactive features to engage the youger audience.

  • The Solution

    I first updated the general layout of the site by consolidating sections and removing old material to clean up what was unnnecessary. I've replaced content that was added manually with widgets to automatically update from a feed. For the styling, I kept the colors within the same blue pallete to make the site sleek and simple.

  • The Tools

    Photoshop, HTML/CSS, Google Feedburner, Internal CMS

  • The Site

    Check out the site here.

]]><![CDATA[yabblr]]>Mon, 14 Nov 2011 21:08:40 -0800http://www.angelachendesign.com/1/post/2011/11/yabblr.html

Yabblr Index Page

Yabblr Product Detail Page

Yabblr.com

Web

Details

  • The Boss

    Yabblr

  • The Project

    Yabblr is a startup company in the business of deal sites. Instead of offering deals to the viewers, viewers announce what products they want. If enough friends yabble the product, they'll have more power to strike a deal with the company. Logo is provided.

  • The Solution

    I had a style guide to work with from the logo, and a bare bones template to understand how the process worked. I rearranged some of the information to make this new kind of approach to purchase deals as clear as possible.

  • The Tools

    Photoshop

  • The Site

    Check out the site here.

]]><![CDATA[penguin slice]]>Mon, 14 Nov 2011 20:59:43 -0800http://www.angelachendesign.com/1/post/2011/11/penguin-slice.html

Penguin Slice Index Page

Penguin Slice

Web

Details

  • The Boss

    Game Pub

  • The Project

    Design a site to promote the new flash game, Penguin Slice. Include screenshots of the game and a section to play the game for free. Flash game developed by Roman Rudyy and illustrated by Mihai Typoshenko.

  • The Solution

    The design and flash game was already provided. Taking these assets, I created a one page site to invite users to play the game. They can quickly see how the game looks, how to play it, and finally, play it for themselves.

  • The Tools

    Photoshop, HTML, CSS, jQuery

  • The Site

    Check out the site here.

]]><![CDATA[gurlz]]>Mon, 14 Nov 2011 20:52:30 -0800http://www.angelachendesign.com/1/post/2011/11/gurlz.html

Gurlz Index Page

Gurlz Play Page

Gurlz.com

Web

Details

  • The Boss

    Game Pub

  • The Project

    Design a brand new game site just for girls. The audience will consist primarily of young girls interested in dress up, cooking and celebrity games.

  • The Solution

    I designed the logo consisting of different types of girls. I created a style that was feminine and playful. I added subtle animation on the hovers and sliders to make the site more engaging. I designed and built the site and learned how to use the internal CMS.

  • The Tools

    Photoshop, HTML, CSS, jQuery

  • The Site

    Check out the site here.

]]><![CDATA[Game Pub]]>Mon, 14 Nov 2011 20:42:31 -0800http://www.angelachendesign.com/1/post/2011/11/game-pub.html

Game Pub Index Page

Game Pub Bored Landing Page

Game Pub Demographics Page

Game Pub

Web

Details

  • The Boss

    Game Pub

  • The Project

    Design a brand new B2B site for all the game sites owned including Bored.com and Funny-Games.biz. This site will provide information for advertisers, publishers, and game developers. They can find information about the demographics of users and how to purchase an ad spot on the site.

  • The Solution

    This site was completely built from scratch. I researched several other game publisher sites to start building out the structure. I kept the design clean, elegant and strong to give a serious approach to the side of gaming. I used charts and maps from Google API to visually display the information. There are over 20 unique pages that were designed and built to launch this site.

  • The Tools

    Photoshop, HTML, CSS, Google API

  • The Site

    Check out the site here.

]]><![CDATA[BET Awards]]>Wed, 25 May 2011 15:09:18 -0800http://www.angelachendesign.com/1/post/2011/05/betawards.html

BET Awards Contest Facebook Fan Page

BET Awards Contest

Add a Video

BET Awards Contest

Web

Details

  • The Boss

    KickApps

  • The Project

    Design a contest site using the images provided by BET. Fans will be able to login and upload videos or photos for a chance to win VIP tickets to the BET Awards show.

  • The Solution

    BET provided the logo and images, and I used the same styling from their official site. I was able to organize the page that makes it easy for fans to upload and clearly see what is the current phase of the contest. I designed and worked on the front-end development of the site.

  • The Tools

    Photoshop, HTML, CSS

  • The Site

    Check out the site here.

]]><![CDATA[Food & Wine]]>Wed, 25 May 2011 15:08:25 -0800http://www.angelachendesign.com/1/post/2011/05/foodnwine.html

Contest Home Page

Recent Entries Page

Submission Page

Food & Wine
Photo Contest

Web

Details

  • The Boss

    KickApps

  • The Project

    Design a contest subsite within the exisiting Food & Wine community. Keep the same look and feel of the site.

  • The Solution

    I designed the contest portion of the site that stayed within the Food & Wine branding. I simplified the upload process to only three steps. I built the site using CSS and JS to automate the contest.

  • The Tools

    Photoshop

  • The Site

    Check out the site here.

]]><![CDATA[Sweat Equity Network]]>Wed, 25 May 2011 15:07:27 -0800http://www.angelachendesign.com/1/post/2011/05/sen.html

Sweat Equity Network Home Page

My Home Page

Photos Page

Sweat Equity Network

Web

Details

  • The Boss

    KickApps

  • The Project

    Design a website for a health program that motivates employees to participate in a community and be healthy. Users are encouraged to stay in shape and eat healthy with goals and challenges.

  • The Solution

    Sweat Equity Network already has a website but this new site is completely separate. Only the logo stayed the same. There's a lot of content within the site, and I was able to organize them by separating them into blocks.

  • The Tools

    Photoshop

]]>