New Website Design

April 30th, 2009 by Bri posted in Tutorials
New Design

I decided to add an accordion effect to the home page of my website. I didn’t like the fact that you couldn’t see my “Recent Work” section unless you scrolled down. I wanted to make it so that all information was there the minute the page loaded. But, I also had some other ideas of some effects I wanted to add which didn’t work too well on a white background. Although I love my design, thanks so much to Collis at PsdTuts, I decided to switch it around a little. Let’s go for some electric blues on a dark background!

As you can see, I’ve already come up with the new design. It’s basically split into 4 sections. (1) The header section using my same logo with an added reflection and a paintbrush to make it interesting. (2) The navigation section. What I want to do here is to have a hover effect with the glow behind the image. (3) My “Splash” section, which I want it to change as the links are hovered over on the navigation bar. And finally, (4) The main content area which will contain the accordion.

The next step is to slice my images. I’m going to try and use CSS wherever possible, and small images.

Finally, I’ll be using either the MooTools or Scripatculous javascript libraries for the accordion effect, and either a tooltip or slide for the hover/splash effect (haven’t decided yet).

Stay tuned!

~Bri

Post a Comment

(required)

(required)