Marcey's Blog

Apr 16

Notebook theme

The theme was redone to reflect a new art direction. Instead of post-its, spiral notebook scraps were used as module backgrounds. I created custom module headers by making the module titles as transparent and then making the custom headers as background images.

0
comments

Posted in Gallery

Apr 11

theme design using css

CSS:

html { background:url(bg.png) repeat;}

.header { background: url(board_top.jpg) top center no-repeat; border-bottom: 1px solid transparent; height: 70px}/*header bar color*/

.header .dropDown ul {background:url(module.png) repeat;} /*drop down menu color*/

.header .nav .dropDown ul a {border-top: 1px dotted #9201cf;} /*dotted separator for the drop down menu options */

.header .nav .avatar {background-color: #ac03f3; }/*drop shadow color for avatar image in header*/

/*vertical separation between header links */

.header .nav { position: relative; float: right; border-right: 1px solid transparent; }

.header .loggedIn { padding-left: 10px; border-left: 1px solid transparent; }

.header .nav a { display: block; height: 55px; line-height: 55px; padding: 0 10px; color: #9201cf; border-left: 1px solid transparent; }

.header .nav a:hover { color: #ff3edd; }

/*vertical separation between header links */

/* module */

.module h3 { color: transparent; }

.module { margin-bottom: 20px; background: url(module.png) repeat; border: 2px solid transparent; -moz-border-radius: 2px; -webkit-border-radius: 2px;}

.tabContentWrapper,

.moduleWrapper {margin: 0px ; padding: 10px 13px 13px/*spacing around the content inside the module*/; background-color: transparent; border: transparent; -moz-border-radius: 0px; -webkit-border-radius: 0px;}

h3 { margin: 0px 0px 0px; padding: 5px 10px 0px 5px/*spacing around the content inside the module header*/;

font: 20px/1.2em “Kristen ITC”, Kristen ITC; color: #777; background: transparent; border-bottom: 0px solid #ddd; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; }

.tabContent .moduleWrapper h3 { margin: 0; padding: 0; background-color: transparent; border: 0; color: transparent; }

/* module */

/* module header */

.aboutModule h3 { background: url(about.png) center no-repeat; }

.favsModule h3{ background-color: #6ebe46; }

.statsModule h3 { color: #777; }

.photosModule h3 { background: url(photos.png) center no-repeat; }

.giftsModule h3 { background: url(gifts.png) center no-repeat; }

.commentsModule h3 { background: url(comments.png) center no-repeat;}

.moodModule h3 { background-color: #a94399; }

.promotionModule h3 { background-color: #39c8bb; }

.friendsModule h3 { background: url(friends.png) center no-repeat; }

.chipzModule h3 { background: url(chipz.png) center no-repeat; }

.photoBrowseModule h3 { background-color: #2688bd; }

.albumsModule h3 { background-color: #de4481; }

.addPhotoModule h3 { background-color: #2688bd; }

/* module header*/

/*fonts*/

.statsModule h4 { font-family: “Kristen ITC”, Kristen ITC; color: #9201cf;font-size: 30px; font-weight: normal; line-height: 1.3em; text-align: center; }

.statsModule li {color: #9201cf;}

body {background:url(board_top.jpg) top center no-repeat;},

textarea { font: 14px/1.45em Kristen ITC; } /*Changes the font for the whole page*/

.module h1 {font: 20px/1.2em “Kristen ITC”, Kristen ITC;}

.viewChipModule h1 { font: 20px/1.2em “Kristen ITC”, Kristen ITC;}

.userLinks a {font: 18px/1.2em “Kristen ITC”, Kristen ITC;}

.userBadgeModule h1 {font: 20px/1.2em “Kristen ITC”, Kristen ITC;}

.tab a {padding: 7px 20px; font: 18px/1.2em “Kristen ITC”, Kristen ITC;}

a { color: #9201cf; text-decoration: none; } /*text color for footer*/

/*fonts*/

.wrap { background:url(board_bottom.jpg) bottom center no-repeat, url(board_middle.jpg) center repeat-y; }

.receivedStats { margin-right: 10px; background: transparent; }

.givenStats { background-color: transparent; }

.unconfirmedStats { margin-right: 10px; background-color: transparent; }

.pointsStats { background-color: transparent; }

0
comments

Posted in Gallery

Feb 28

Skater Zone game UI

Skater Zone: It was a touch-based screen game. The example is the homepage.

Demographics: 6 years +, mostly boys.

I had to make the buttons large so that their fingers can press them. The dexterity of children are not as developed as adults so I had to consider that need as well. Also one of the biggest challenges I had with this project was that children are just getting exposed to the internet, and they may not understand the typical icons that we’re used to such as the bubble chat icon we normally see. They’re more use to face to face chatting. So I designed the icons such as the chat and duel button to relate to their experiences.

Programs used: Illustrator, Flash

0
comments

Posted in Gallery

Feb 28

Pet penguin game UI

Programs used: Illustrator, Flash

0
comments

Posted in Gallery

Feb 28

Makeup Chloe–UI

0
comments

Posted in Gallery

Feb 28

flowers theme for facechipz.com

0
comments

Posted in Gallery

Feb 28

diamonds are a girls best friend website theme for facechipz.com

Programs used: Illustrator

Yes, the diamonds are also vector.

The blue module colors are controlled by CSS. Each theme will have its own unique color scheme.

0
comments

Posted in Gallery

Feb 11

Profile pics for Facechipz.com

These are some profile pics when users initially sign up for the site. I wanted to do something a little different than the boring grey color model. I used Illustrator & Photoshop.

0
comments

Posted in Gallery

Jan 31