Design Development | Earthrise

Design Development

The underlying principle of the EarthRise site is simplicity and aesthetics. In essence, the design aims to evoke in the viewer a strong connection with the Earth. Thus, we agreed the theme of the design would be growth in the natural world. With a strong awareness of our audience as mid-teenagers to young adults, we achieved this goal through creating a very simple design filled with warm, earthy colours that at once appeals to the naturalistic aspect of youth.

Stage 1

The site's design was catalysed through a PSDTuts.com text effect tutorial. Based on that tutorial, we created the header "EARTH" using grass cut-outs. By manipulating shadow and lighting, we created a very 3-D header that pops against the background. This creates a very realistic look that establishes a strong connection with the viewer.

Stage 2

However, the site merely draws inspiration from the tutorial, before going on to create a very unique design, thereby channelling our individuality through the design. Drawing on the principles of "Web 2.0" design, we sought to create an open design. In the structuring of our text boxes to place the site content, we created an illusion of transparency through using a very similar colour to the background and a slight white border. This creates the sense of flow throughout the design.

Stage 3

After creating the basic layout of the design, we realised we required a footer. For a while, we debated between simply using a brown textbox - which creates a sense of groundedness in the design because of its similarity to mud in the ground - or placing a line of flowers - which further the design's theme of growth - as the footer.

Eventually, we decided to combine both concepts, resulting in the design you now see. This was the best decision they both helped to further the theme and goal of the site.

HTML Design

The HTML was constructed entirely by hand (in vanilla text editors) with the following goals in mind:

• All pages shoult validate (XHTML Transitional)
• The CSS file should validate (and the necessarily non-valid code for IE6 should be hidden in "<!--[if IE 6]> ... <![endif]-->" tags.
• Minimal javascript should be used, and alternatives provided.

The final version works fully (and has been tested) on:

• Internet Explorer 6
• Firefox 3
• Lynx

Several problems were encountered during the coding, including:

• Column backgrounds on the footers not extending the full height (fixed using impossibly large paddings and negative margins)
• Drop-downs and other elements requiring hover-over effects failed to react on IE6 as :hover pseudo-element unsupported on elements other tha "a" (fixed using Suckerfish Dropdowns (javascript).)
• PNGs would not show alpha transparency on IE6 (fixed using proprietary code for IE6 in the css/ie6-fixes.css file.)