ICM 502: Final project Web site pages

Here is the final makeups to my website. I wanted to get them posted for feedback and the theories behind them will follow.


This is the JPG version

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.

This is the animation version to show the slide show





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.

Posted in Uncategorized | Leave a comment

ICM 502: Are Web designs Worlds apart?

Having been married to a Latin woman for many years I completely understand that there are some basic cultural differences throughout the world. So it is not surprising that there are cultural differences in website designs.

The biggest in my opinion is probably language. Translation from one language to another is not standard. There are many words in the English language that don’t even exist in Spanish and I am sure in others such as Polish or German. In my business the basic mistranslation of a word can make the difference in a story. We actually produce a Spanish publication (Vista Semanal) in our building using most of the same content in the Naples Daily News and just translating it. I never thought about the process until this module.

This got me thinking about other news sites and the cultural differences. In checking with the Stockholm News, it matched what Prof. Callahan said that the Swedish designs are normally very clean and use a white background. Even though it is the English version it follows much of the same design probably seen in the rest of the country.

Lastly I will leave you with the thought of government control on websites and especially news organizations. I talk about China. As we have been enlightened with recent struggles with between the Chinese government and Google we are reminded of the greatest cultural difference. While this looks like a typical news site (Yangtse Evening Post), do you wonder what is being or should I say not being reported?

Posted in Uncategorized | Leave a comment

ICM 502: Getting better on animation

OK My wife and I are probably the only people on the planet who have not seen Avatar so you might get a hint that I am not a fan of animation.

So I finally got the first one done after going through both the study from Lynda and the tutorial that Prof. Callahan provided for us. After I finally figures out how to get the frame by frame work done it went pretty smoothly with the tweening the images. I know this looks simple but it is done. I would consider using this on final site with better pictures. The toughest part was saving because I had never saved for Web device and had to relisten to the Lynda exercise.

Posted in Uncategorized | Leave a comment

ICM 502: A slice of life

OK my first attempts at slicing were atrocious but thanks to the help of Prof. Callahan I figured it out.

I learned quite a bit about photo shop thanks to her hands on help with figuring out the slicing problems.

In the end my banner (from one of my original designs) now fades in as I wanted it to. I learned I will not be able to do this with next version of the site since I have warped the banner and made curve.

THANKS AGAIN PROF. Callahan for taking the time.

Posted in Uncategorized | Leave a comment

ICM 502: Bloggetry in Motion Web site critique

First of all Bloggetery has some tremendous photo shop skills. I would like him to design my site. He has some great touches in both of these examples.

I personally like the second one. The color on the outside makes the site much less noisy. You are still able to highlight all of your great projects. You might want to consider some subtle graphic in the background color and then use that on all of the pages because you don’t want to use the collage on every page that is just my opinion. I like the banner idea resembling a sticker you might receive at a convention or a business get-together. I think the navigation bar at the top of the site uses too many colors and I think I was at fault with that in my design.

And as you said I think you would want less writing on the page. Just a headline and maybe a eight word teaser. Think about the principals of powerpoint where you don’t want to have too many words on the page, it only distracts the reader.

Overall well done designs and again can you give some help on my site.

Posted in Uncategorized | Leave a comment