All Done

Just completed work on redesigning the website for the Felege Hiywot Center.  Overall, it was a fun project to work on as I had a lot of freedom and flexibility in designing and implementing the website.  Best of all though, I didn’t have a burdening time constraint that I have had on other design projects.  This allowed me time to explore a bit and implement more detail into the design.

Inspiration and Thoughts

Initially I spent quite a bit of time looking over their original website which was well-organized initially and had a very clear focus.  This made my job easier.  I usually start with the question, “what is this website trying to say” or “what is the message”.  Then I identify who is the audience for the website (i.e. potential visitors).

The focus of the Felege Hiywot Center seemed to be their flagship youth gardening program and Ethiopian culture.  So I journeyed out to flickr.com and searched for images of Ethiopia.  I wasn’t interested in the pictures of impoverished Ethiopians as I know from experience this isn’t really what Ethiopia is all about.  So I found images, textures and colors that I thought best represented Ethiopian culture.

I also wanted the website to have a more “organic” feel as a result of its focus on gardening yet fun and not too corporate.  I knew going in that a wood texture would be perfect and in the banner section I was able to incorporate a number of flowers and gardening images centered around the main theme of the website.

Bells & Whistles

I was able to incorporate an animated sliding banner using jQuery that I’m particularly proud of.  Originally, the banner did not automatically slide by itself (i.e. it required that the user press the left or right button).  I figured out how to put this on a timer to automatically scroll on a schedule.

Thanks to Jacob Gube over at Six Revisions for the slideshow jQuery code.  Create a Slick and Accessible Slideshow Using jQuery.  I customized his code to work in the website for the slideshow.

To automate the scrolling, I used the setInterval JavaScript function working together with the setTimeout function and the .trigger event in jQuery.  Below is the relevant portion of the code.

// Create an interval that will execute autoSlide on a schedule
setInterval(autoSlide, intervalOut);

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}

// autoSlide: sets a timeout to automatically scroll through the slideshow
function autoSlide(){
// Trigger click on right arrow if on first slide
if(currentPosition==0){
setTimeout( function(){
$('#rightControl').trigger('click');
}, timerOut );
}
// Trigger click on left arrow if on last slide
if(currentPosition==numberOfSlides-1){
setTimeout( function(){
$('#leftControl').trigger('click');
}, timerOut );
}
}

The Finished Product

Here are a couple of screenshots of the website.  Feel free to check it out and let me know what you think!

Felege Hiywot Center Home Page

FHC Home Page

Felege Hiywot Center Internal Page

FHC Internal Page