New site design: Cherry

Posted on: October 1, 2008 | Filed in: Web Design
25 comments
on this entry

I have been a busy little bee and managed to complete the new site design a bit earlier than expected. Here I present to you “Cherry”. Creative name, eh? This design is to celebrate the upcoming first birthday of Cherry Pip (October 17th). It is a dramatic change from the previous design. I always like to surprise people. This design took around 2 weeks to make. I did not use pink because it is Pink for October/Breast Cancer Awareness Month, I totally forgot about it. It’s just a coincidence.

I have made the following revisions regarding my coding:

  • Converted padding and margins from pixels (px) to em
  • Converted fonts from a mix of percentages and em to all percentages
  • Used more CSS shorthand
  • Included an extra stylesheet to fix minor Internet Explorer bugs

Some bugs I am working on getting fixed:

  • Content margin issue in Internet Explorer 6 (surprise, surprise)
  • Search box padding issue in Opera
  • Transparent PNGs not transparent in Internet Explorer 6

I am very pleased with how this has turned out. It reminds me of some old layouts of mine but with reliable, cleaner coding and better images. Any feedback and bug reports are welcome. Let me know what you think. :)

Comments


Caitlin

October 1st, 2008 at 2:20 pm

Wow I absolutely love it! It came out great! It is very different than your previous one.


Angela

October 1st, 2008 at 2:32 pm

It looks great hun! The cherry is really cute :D!


Yante

October 1st, 2008 at 2:40 pm

Oh wow, I absolutely adore this layout :]
Happy 1 year anniversary!


Amanda

October 1st, 2008 at 2:50 pm

Oh look, cherries! (No pips though? :P) :D

Pink for October, or lucky coincidence?


Jem

October 1st, 2008 at 2:52 pm

Looks cute - very apt design ;)

If you’re interested in more CSS improvements, I’ve got a few suggestions :)

font: 90% “Verdana”, “Arial”, sans-serif;
line-height: 1.7em;

could be:
font: 90%/1.7em “Verdana”, “Arial”, sans-serif;

Or, you could go one better and use:
font: 90%/1.7 “Verdana”, “Arial”, sans-serif;

See Eric Meyer’s article on unitless line heights:
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/


Sarah

October 1st, 2008 at 3:00 pm

@Amanda: I actually forgot about “Pink for October” until this morning when I saw a blogger had changed her design to pink in dedication to it.

@Jem: Thanks for the tip. :)


Hanna

October 1st, 2008 at 3:09 pm

SEXY!

Pink and green goes well together and cherries are lovely :D


Chien Yee

October 1st, 2008 at 3:15 pm

Lovely design! Absolutely FAB! ;)


Andie

October 1st, 2008 at 4:03 pm

It’s cute! I love it! :)


Stephanie

October 1st, 2008 at 4:29 pm

Pink for October? Hm. I could do that.


Melissa

October 1st, 2008 at 4:48 pm

OMG SO AWESOME!!!!!!!! :D I love it, Sarah, great job!!


Britney

October 1st, 2008 at 6:19 pm

I LOVE the new layout!


Teesee

October 1st, 2008 at 8:41 pm

Very cute.

The only thing I would mention is that everything (apart from the comment fields) has rounded corners and the buttons in the header are square. They look a little out of place.

But apart from that, nice. I like it. Especially the touches of green.


Sarah

October 1st, 2008 at 10:05 pm

@Teesee: I like the menu how it is, it is meant to be rectangular. The links wouldn’t look as good rounded.


Aisling

October 1st, 2008 at 11:50 pm

It’s very cute! I like it. :)


Regina

October 2nd, 2008 at 12:06 am

This is SO cute! The cherries are amazing.


Roro

October 2nd, 2008 at 2:19 am

Anyone notices how cherries always brighten any designs? :-)


Regine

October 2nd, 2008 at 8:08 am

Oh…I like it a lot. I have to agree with another commenter on the navigation square buttons. I don’t really know what I would have done it myself, but they kind of look out of place that way.

What did you make the external CSS for IE work? I can’t make it work with Expression Engine :(

All in all, this is very cute, I love it :)


Sarah

October 2nd, 2008 at 9:30 am

@Regine: To get the stylesheet working in Internet Explorer I used an if statement, check my coding to see how. :)


ImpelGD

October 2nd, 2008 at 10:23 am

Congrats!


Tracy

October 2nd, 2008 at 12:13 pm

Oh I like it. The colors are great. The only things I would change (if it were my layout):

- I’d center the navigation (I’d put the cherry right where the sidebar begins)
- I’d change the color of the RSS icon. Orange doesn’t fit imo.
- I wouldn’t put gradients in the nav buttons

But all in all it’s very nice :)


Vera

October 3rd, 2008 at 7:40 am

Very cherry-ish, and it’s nice. But I’m not a particularly big fan of the soft pink :P

Now then, tell me your secret: where do you find the time/inspiration to change it. I’ve been trying to scrounge up some enthusiasm but no such luck.


Aaron

October 3rd, 2008 at 3:46 pm

This is a very cute design. It’s too much pink for me, but it works nicely and the little touches of the light green harmonize wonderfully with your various shades of pink.

I especially love the simplicity of your sidebar. Rounded corners work wonders on turning what could be something mundane into something quite beautiful.


Kim

October 3rd, 2008 at 7:10 pm

Amazing! I love it! Especially the cherry graphic.


Rose

October 9th, 2008 at 2:02 am

This is rad. I love it. :-)

Leave a Comment

Before leaving comments please read the disclaimer.
When posting long website addresses, please use Tiny URL.
Gravatars are enabled.