In Web and Interactive class, a few of us have been working on an iPhone stylesheet for our student website, okwueagle.com. Erik Smith is doing most of the coding (he’s a genius with that stuff) and I’ve been working on the graphics. Here’s how I created the top banner and nav.
This was the banner image I started with. It’s almost what is on the live site, except for the color of the eagle.
Banner for okwueagle.com
We decided that we wanted the iPhone version of the site to tie in very well with the original. I kept the same eagle and text, and added a simplified version of the main navigation. We included the links used most often. We also wanted a search bar in the header.
Here’s the original.
Original okwueagle header
The challenge was to fit all of that into a small space! I shrunk the eagle down so it fit in line with the text, and placed the search bar to the right of that. The nav then fit below. Here is how it turned out.
okwueagle iphone header
When we we started looking at this, it was decided that the eagle was too small. Also, we wanted to emphasize the fact that this version was made for the iPhone, and to do that we wanted an icon similar to those on the iPhone. Now I had an even smaller space to convey the eagle and the OKWU text!
Here’s what I came up with.
okwueagle iphone icon
We’re still working on the final version of the site, I’ll keep this updated and publish when it goes live so you can check it out.
