Final Redesign Web Site of Thunder Island

Here is the final redesign web page for Thunder Island site with three columns and color scheme below

Creating Web Site Proposal

www.thunder-island.com

Website Redesign Idea - www.thunder-island.com

Overview - The Thunder Island is a park where the kids and families can be together for all activities, and create their own adventure.

Why - I like to redesign this website because its design looks none professional as describe below.

Design Overview

What is working – Links, photography.

What is not working:

1. Banner – Text does not fit in the header/ table cell, and cover most of “Attraction” links.

2. The color scheme – First page, and some other pages used triad color scheme. Also background of some pages was supper bright.

3. Navigation - Too simple, there is no user feedback on the links.

4. Overall layout – This is a two column with liquid layout, navigation floats on left of first column with no margin set up, and content floats on left of second column with inline photography. All the pages are not same design/ background, also site was set too width.

Proposed Changes – Redesign the site with fixed layout for all pages. Set the pages in center of browser. Implement the tetrad color scheme on design, and use the same background color for all pages. Redesign the banner more creative and fit into header, and three columns layout but with header and footer. Maybe I change a text type to “Times New Roman”. Create the background or a hover for navigation/ link to give the viewer the feedback. Organize the content with more exciting information and more activity photography.

Ads & Hidden Ads

Mercedes advertised their improvement & performance through the messages on TV Ad 2011 Commercial
http://www.youtube.com/watch?v=_0PwYzAz3qE

How is Bud Light advertised on "That's My Boy" movie
http://www.youtube.com/watch?v=rUU0tV0zv5E&feature=relmfu

Bud Light Behind The Scenes
http://www.youtube.com/watch?v=V2nlcUr2BkI&feature=plcp

3D Model House

3D Model

Here is the picture of my 3D model exported from Google Sketch-Up

3D in Design

My very first 3D design by Google Sketch Up

Color Scheme

I had created a color scheme from Color Scheme Designer web site. I choose this mono color scheme based on analogous color for cosmetic web page because some of the reasons below:

- Light brown (B17A7A) color is for background of content, it is some ways to refer the color of skin.
- Dark brown (7A4040) color is for navigation bar, just want separate the navigation bar and content.
- Red (E21717) color is for the text on navigation bar, and for promotion option as in contrast with light or      dark brown, it exhibits brilliance so it would be better to catch the viewer's eyes.
- Gray (403C3C) color is for the links.
- Black (2A2424) color is for text in content.
- Overall, I think with a combination of this color scheme on the web page it could make the viewer to perceive
through the sense of being in the spa.

Web Ads

Web Ads

I have created this web ads by photoshop. This for sale promotion for Spring season at Gemstone.com.
I used animation option, and save the file under GIF format with 37.5Kb. This will help the browser download
a bit faster, animation helps to get the viewer's attention on promotion items.

Also I will set animation just about 3 times, I think it will bother the viewer if I keep animation on forever.

Icon Design

Calculator Icon

My first Icon created by photoshop

64x64px

And here is a small icon with the size 64x64 px.

Metaphors Interface Design

Metaphor Interface Design

The above is just one sample of Metaphor Interface Designs. Sample is an Apple app "Real Tools".

All of icons give the user the idea of what it does or its options. For example, when user needs a flashlight he/she just needs to click on the icon with a flashlight...and so on.

Also in the main menu, the icons organized and the way it layout as a tool chest helps user ease to pick up the icon (tool).

Web Page Interface & Navigation Review

Good & Bad Web Design

Bad Web Design

Here is one of the samples of the bad web design Accept Jesus, Forever Forgiven that I haven't seen.

First looking into the home page of web site, it makes the viewers dizzy due to the high contrast and movement between the colors of background set up (for me this kind of the design was not really concerned about human-computer interactive).

If the viewers try to dig deeper into web page, he/ she will see the most of icons/buttons on navigation bar were set with low contrast, text-color was the same with one of the background color (blue), and really hard to identify even though he/ she moves the mouse over it since there is no background/ text-color (highlight effect) set to give viewers the feedback.

The navigation bar on the home page, and other pages were not designed consistently. It was located at the top of home page, and at bottom of other pages this cause the viewers get lost since the page is too long.

Because all texts were set in bold (strong text), and its margin was set at small scale so the viewer's eyes must scan from one side to another side of screen, and after a few paragraphs his/her eyes getting tied. This usually makes the viewers get away or close the web page.

The below web site is one of the simple, and good web design Saint Patrick Proto-Cathedral Parish

The web page was designed with multi languages so this benefits the viewers even though they are not speaking in the same language.

The layout of all pages were the same in regarding logo, background color, color of text, font size, navigation
bar...etc.

All the pieces of the design work, and belong together. Background, color of text designed with harmony color it makes the viewer feel calm. Also the paragraph set in the center of screen it benefits the viewer ease to scan entire of the page.

All the tabs in navigation bar or links set with a highlight background color (gray) effect when the viewers click the mouse on the tabs or move the mouse over the links.

The web site was designed in a simple way but provides enough information to the viewers such as news, events, and contact info. All the pages links together, and especially in the "Events" page it provides a schedule/ calendar with all activities, and when a viewer moves the mouse over the link it automatically pops up a little screen in which just summarized the event so he/she does not really need to see the other pages if he/ she knows that is not what they are looking for.

Good Web Design

Here is another web page that I think it is a good web design Capitol Toyota.com

Another Good Web Design

Typography

Human's Life

My very first Typographic drawing by photoshop

Second Image created by windows paint program

The little Mermaid

First Image created by windows paint program

Landscape

Introduction Video to Multimedia Design

What is a Multimedia word? For me it's infinite, and hard to understand or image what kind of job will require this expertise. The below videos that clear up all my questions, and also provides me the ideas of what I need for Multimedia Design.

Kathleen Milnes - Entertainment Expert
Ben Wood - Projection Artist
Learn Digital Media in College
Bill Colgrove - Owner/ Design
Stephen - Artist Game Design

Gestalt Theory

River of Ponds III - Frank Stella

The design for this print starts with a very simple shape - Four half circles, and squares are easy created by protractor, and ruler but the viewer can see the connection, emotion, and selected colors between those objects. 

Principles of design

M.C Escher's Symmetry Drawing

This is one of the sample of principles of design from M.C Escher's drawings. As above picture, Escher had used  principles of design such as emotion, composition, abstract, medium, balance, scale.. etc to create the
Symmetry Drawing. Everyone has their own vision, and it depends on which direction he/ she's viewing too.

It seems all the objects are moving around, connecting together, and unify a whole in a pattern. Also there is a few of objects had been laid out the edge of drawing, this makes the viewer's feeling likely the objects closed to him/ her or it's not like a focal point.