Here is the final makeups to my website. I wanted to get them posted for feedback and the theories behind them will follow.
DOG BEACH (with animation)
I wanted to give this example to show the aesthetic aspect of the slide show. If you click on the page you can see the animation.
FORT MYERS BEACH
Theories behind the Design
My Website: “Life’s a Beach: A Guide to beaches in Southwest Florida” has certainly evolved during the seven week process this visual aesthetics course.
There have been many lessons learned about building a website. The most important is listening to feedback and not being stuck with one idea or design. As you look back, I ditched my original website design after getting class feedback that it looked too old fashion. Then what started out as a collage, my second Web site design, turned into a something more classic and less cluttered after the advice from one of my colleagues. The lesson learned much like writing a story that many drafts and trial and error is probably the best scenario when trying to build an aesthetically appeasing site that that will be both visually and functionally satisfying.
Through the entire process I tried to remember Gestalt’s theories and build a mock site that would have good use of balance, harmony and unity, simplicity, consistency and clarity. I feel like I accomplished this by moving the pictures of the individual beaches (represented in pictures and make them actually what would be hot linked buttons). This put a visual aspect to something that would normally be represented by typography. I tried to make sure there was a good balance between aesthetics and type, which led me using less type and one large image or as the front page is concerned two pictures blended and warped together.
The warping tool became my favorite and I hope I didn’t over do it. I took the original Life’s A Beach banner, which for the record is two different shots because I wrote it too big, and then blended them together and warped it as if it was along the shoreline as the waves crept up in the background. I also made it bigger after suggestions that it was a good focal point of the website.
Color also became an important element in the composition. In the original collage makeup I had every color under the rainbow and then some others too. I realized that there was too much color and it was taking away from the pictures and not accentuating them. I simplified the colors and got rid of the red and pink (which one professor said were not her favorites). I went back to the color wheel and rationalized that the less subtle colors: the greenish blue and the hot aqua colors, complimented the backgrounds of grayish water and the sand. I actually also utilized the sand to make the background for the banner of different beaches so that it would a perfect match to the bottom layers and give more attention to the photos. Originally I had a white background and the differences in colors caused too much confusion.
I also took in consideration the importance of white space in the project. In any form of design, appropriate spacing and the use of white space or in my case space without pictures allows the eyes to concentrate on what is important and not wander throughout the piece.
I became a bit obsessed with borders and beleveling. I tried to tone it down and took the suggestion from a colleague that belevels should only be used to represent buttons. If you notice on the Dog Beach and Fort Myers Beach pages, I took it one step farther and caused the beach sign to enlarge when the user selected that particular page.
As mentioned before aesthetic and especially great photography would be key to the success of this website. I could see as I showed in the example of Dog Beach a slideshow dominating the main pages to each beach to give readers a visual taste of what they could expect. Once again, the key is making the web pages simple and not overcrowded with a plethora of photos.
Lastly, I tried to stick to the principal of consistency throughout the sites — using the same typography styles, backgrounds, fading and even banners. The use of grids assured similarities and the repetition will add to functionality for users. The beach is a simple enjoyment and a website representing the beaches should be as easy and fun while being aesthetically pleasing and informative.