It’s the end of 2008 and I’m busier than ever! Lots of new clients coming in, projects in queue, tax time approaching, holidays happening – it’s a crazy time and on top of all of this, I had hoped to roll out my web site redesign by the first of the year. (but will it happen?)
I started this process back in October during a week of ebb, but since then haven’t been able to do more than think about it. Well I have decided to make time for it, and will chronicle the progress here on the CMD+Shift Design Blog. Perhaps I can get some feedback, ideas, cheers and jeers? I always find it interesting to peek into others creative process – so maybe you do as well? (if not, turn away now.)
Step 1: Brainstorming
Before putting pixel to screen, what do I want? What are some of the things I want to accomplish with this redesign, and what are some of my initial ideas?
Icons + White & clean: during the design work I did back in October, the one thing I want to keep are some icons I designed for my various feeds and networks. Because the icons are textured and colorful I want the bulk of the site to be very minimal. White (or near white) background, plenty of breathing room.
Portfolio & Homepage: Of course a big part of my site is my portfolio of work. While I like the way my web designs are displayed right now, the only print work I have displayed is on my Case Studies page, which is a bit hidden — and I would really much rather now seperate stuff so much and just have one easy to navigate image gallery. I’m leaning toward using Jquery Gallerific. It is a very easy to use and highly customizable gallery. I used it for The LakeHouse at Chelan website this fallfor the first time and was impressed by the options for styling it. While the folks at Lakehouse really wanted the gallery almost straight out of the box, just last week I worked with my former 9-to-5 design firm, Brand Envy, on incorporating it into their portfolio site and styled it quiet differently.
I’m also thinking of using SpaceGallery just for the homepage to feature “Latest Projects.”
The Blog: The only major addition I am looking to make to the blog is to make room for adspace in the sidebar. For the past 4 months I’ve been averaging about 300 unique views a day, anyone who may be interested in a 125×125 spot, contact me. I signed up to BuySellAds.com and am just waiting for them to be accepting new members. Does anyone know of another service similar to them?
Next time on Website Makeover Edition
So… since I’m opening up my process to all of you, I’d be great to get any feedback you have!
Subscribe to this blog to be notified when I post Website Makeover Edition Part Two, where I will be sketching, old school style with real pen and paper!
I know you probably want something either
A) more reputible or
B) not set up so commercially like google ad-sense
but I’ve been using bidvertiser.com, it was easy to setup and manage and although I haven’t made too much money (.54 from 2 clicks), I don’t have even slightly as much traffic as you.
liz, let me know what email address you registered with and I’ll approve your account ;)
I recently came accross your blog and have been reading along. I thought I would leave my first
comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this
blog very often.
Alena
http://www.freegrantguru.com
Hi Liz!
I really like the way SpaceGallery looks, but I’ve been trying to implement it on my site and am having some problems. I think it’s because of a CSS/JavaScript issue, but I’m having trouble defining where exactly the problem lies. Do you have any insights about this from when you added it to a site?
Many thanks,
Margaret <3
Ok, I was playing around and I think I made a few discoveries about SpaceGallery; thought I would post them and see if you had the same experience – also, if anyone else uses it they might find this helpful.
So first, rather than just the three .js files mentioned in the instructions, I found I needed all of the ones included in the package, so that means all of these:
And then from all of the included CSS files, I was able to erase all except for the following styles, which I encorporated into my own CSS styles file:
.navigationTabs {
}
.navigationTabs li {
list-style: none;
}
.spacegallery {
width: 350px;
height: 265px;
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
margin-top: 15px;
left: 20%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 350px;
height: 100%;
background: url(images/blank.gif);
}
#myGallery {
width: 350px;
height: 265px;
}
#myGallery img {
border: 1px solid #999999;
}
a.loading {
width: 650px;
background: #fff url(../images/ajax_small.gif) no-repeat center;
}
Note that I changed heights and widths to suit my site.
And finally I unfortunately don’t know enough about JavaScript to fix this part, but there’s some JS that’s interacting with the CSS so that you have to keep this code in or around the same DIV as your gallery images:
So your total DIV for your gallery might look something like this:
Notice how in the CSS styles I made the “navigationTabs” class have a list-style of “none”. This is my workaround because I couldn’t figure out how to go in and fix the JS code that was interacting with that part. In any case, it’s all working now!