Ouabache Land Conservancy – Original Design

Recently I was asked if would like to help develop a new web site for the Ouabache (pronounced wa-bash) Land Convervancy in Terre Haute, Indiana.  I agreed full-heartedly, knowing that this was going to be another web site that would take constant updates and revisions and I would not be paid for any of it.

I began work on it in March 2009 with a simple sketch on a piece of printer paper; an idea to base the rest of the site on.  I knew that I wanted the color scheme to be something resembling nature colors and make the viewer feel like they were in the woods (without actually using a graphic-heavy site to make it look like a forest).  Dark greens and browns mixed with light greens and tans gave me that feeling of a mossy tree sitting next to some wetlands.  Next came the actual layout of the page.  I designed the color scheme and the general image template using Adobe Photoshop CS4 Extended.  The design is simple, drawing the eyes towards the center of the page by using shadows around the edges of the white content area and a solid 1px stroke around both the content area and the link area at the top.  I then saved the graphic and switched over to Adobe Dreamweaver CS4 to begin the actual coding the site using standard XHTML, JavaScript, and CSS.

I thought at first that I definately wanted to have a navigation bar at the top of the page that would be static throughout the pages, yet dynamic so the owners of the site would only have to modify one file rather than 5 or 6 (making it harder to make a mistake or foget to update a link).  After creating the simple layout with JavaScript links, I decided that it was not going to be enough and I needed to add some subnavigation on the left side of the page (giving it a 3-column newspaper feel; which ultimately felt better).

Now that I have the basic design down, I am left with filling in the information and actually doing the internal layouts (i.e. picture placement, text alignment, and internal linking).  I wanted to have a dynamic RSS feed displayed on every page that had the latest news updates from either the national land convservation organization or the local information from Indiana’s ogranization, but have been having some difficulty finding a feed that will include the information I desire to display on the site or actually provide me with a RSS link.

Ultimately, the next step is to email the temp link to the board of directors for the OLC and get their feedback on what they think, what they want changed, and what they would like added.  I already have majority of the information to post on the site, it is just a matter of getting the design approved before I go any further.

A sample of this site can be viewed at http://www.kobystudios.com/OLC

Tutorials from Koby Studios

As I have been working on developming my own web site as well as the web site for the Ball State Fencing Club, I have been helping my sister learn more about Adobe Dreamweaver for the class she is teaching at a high school in Evansville, Indiana.  Through the several email communications we have traded back and forth, I’ve given her a lot of knowledge that I have gained over the years just from my own personal experience working with the program.

I finally got the idea that instead of sending my sister lengthy emails with confusing directions, I would create a tutorial web site which would contain helpful information for your average beginning web designer.  Now, as I get requests from my sister on how to do certain tasks in Dreamweaver or Photoshop, I write a tutorial and post it online where all of her students can access it.

You can access the tutorials page (which at this time does not have very many tutorials on it) by clicking here.

BSUFC Web Update 1/10/09

In an effort to make the Ball State Fencing Club web site more visually appealing, I have been working on a Flash-based front page that will scroll through some updates dealing with the club; such as images of the top competitive fencers, updates made to the photo or video gallery, or even news such as the availability of  club-related clothing.

The actual Flash video that will play in a repeated loop on the main site was developed completely in Adobe Flash CS4 Professional and utilizes ActionScript 2.0 for the actions; which include the preload screen, button actions, and some small animations.  I based the idea off of a design that was once hosted at Wal-Mart’s web site which would scroll through their latest products based on the week, only I tweaked it a little to fit what I needed and to make it my own design.

The first task I wanted to complete was to animiate the buttons and have them properly jump around the pages as well as pause if the user clicked the button again, then resume playing on any other button click.  I saw this as being the hardest part of the movie to work with.  Since the layout was basically a white rectangle that would be later inserted into an ASP template I did not need to work much with designing a layout.  Each button basically had two “pages”; one which played through as the button ran it’s timer animation, and another which was the paused page.  This gave me the ability to delete and add pages as I needed, so if later in time I wanted to add a fifth or even sixth page, I just create the new buttons, create some blank keyframes, and add the corresponding ActionScript to the button’s overlay image.  I am not certain that this was the way Wal-Mart’s web developers created their timeline for their main page, but it was how I was able to figure it out and make it work the way I wanted it to.  During the early testing and development I had originally made the buttons do a _root.NextFrame(); or _root.PrevFrame(); command to move back and forth.  This became too troublesome after adding a few more pages.  So I opted to give each page frame a name so I could then give the command _root.gotoAndPlay(“Page[#]“); for each page.  When going to a “stop page”, as I called them, the command would be _root.gotoAndStop(“Page[#]Stop”);.

After the basic structure for the timeline was completed, all I had left to do was create the individual pages.  This task was simple.  Import some images, adjust them, add some text, do some quick animations and fades and I was done.  One issue that I ran into during the early testing of this new site was that the animations on the pages would not play when I would click the pause button.  Instead of playing through the animation of the particular page I paused it, it would just sit there and not do anything as if I has stopped the whole movie.  With the new idea of naming the page frames I then decided to add the command _root.gotoAndPlay(“Page[#]Stop”); for the stop pages which contained animations I wanted to have play through even though the progression through the pages had been paused.  This fixed the problem of the entire movie stopping upon clicking the page number to pause it.

Finally there was implementation into the web site itself.  This again was very simple.  Inserting Flash animations and movies through Dreamweaver has become increasingly simple and now is even easier to do since Dreamweaver automatically writes the Javascript code you need in order for your Flash animation to pass through Internet Explorer’s content blocker, allowing the movie to play freely without the user having to manually allow the content to start.

 Ultimately, I’m hoping that this new main page will attrack more visitors to the site as opposed to the old static text with a simple repeating flash banner across the top.  True, the text allowed me quick access for editing, but I will soon be adding a notification bar at the top of the site that will notify visitors of updates to the news feed, which should eliminate the need for making a double post on the home page of the site.  Perhaps I will look into updating the Flash animation using XML, similar to a Flash photo gallery.  Then I would only have to update a single XML file with all the information I need, link the graphics, and be done within a few minutes compared to at least an hour of work.

Welcome

Welcome to the Koby Studios developmental blog.  Here you can find out the latest information about what I am developing in efforts to push forward my own business of professionally designed, yet affordable, graphic and web design.