Tuesday, December 14, 2010

Gazel Gaz Part II: The Website

This post is the second part of the project that I was working on for an LPG distributor in Haiti, Gazel Gaz. Recently, I blogged about the ideas and concepts behind their identity and now would like to share the experience on building their website. 

The Gazel Gaz website is small and comprised mostly of static pages but quite honestly, I was still a little bit perplexed how and where to begin although I created their identity myself ... but I am excited at the same time because it was an opportunity to be creative and think outside the box as they say. 

Most of the gas company websites, at least the ones I have seen, use blue as their main base color for their design, which is the obvious choice. For one because it signifies the blue flame. One of the reasons why I chose green for Gazel is to emphasize their most significant objective as a company, which is to give consumers an environmentally-friendly fuel to help preserve the environment by conserving energy. Second, the color green represents the environment and lastly, the most obvious reason, Gazel Gaz bears the tag line A greener future.  

The Artwork and Design Elements

Nothing more says mother nature or clean environment than trees, animals and breath-taking landscapes around us. Thus, the inspiration for the artwork on the main page and other significant design elements in every page of the site.  



The Technology

CSS, XHTML, Javascript and PHP were the biggest players for the success of this project. Although the site comprised mostly of static pages, it needs to be prepped for multiple translations. A good discussion on bytes.com on developing multi lingual websites in PHP helped me significantly. JQuery / JQuery UI were the Javascript framework chosen for it's versatility and ease of use.  

Conclusion

This is just the beginning for Gazel Gaz and it will surely evolve and improve in the next years of its existence. Here's a screenshot of the main page of the site. Check out their website on here.







Wednesday, December 1, 2010

99% Videos on Design

Here are some really interesting talks on design from 99% by Behance. Enjoy!

Stefan Sagmeister: Don't Take Creativity For Granted
A very imaginative video about typography by Stefan Sagmeister.




Scott Thomas: Designing the Obama Campaign
Scott Thomas talks about the experience on designing the Obama Campaign.




Ji Lee: The Transformative Power of Personal Projects
Ji Lee talks about how a simple personal idea gained him recognition and helped him advance in his profession.

Tuesday, November 30, 2010

Gazel Gaz Part I: The Identity

Gazel is a natural gas distributor in Haiti and needed an identity to be registered in the Ministry of Commerce in Haiti.
The most simplistic approach by making a "flame-like rotated horn" look out of the l.


This version gives emphasis on the abstracted horns on top of the name.


What in the font?

For versions 1 and 2, I used the font called Diavlo. I chose this font because it complements the swoosh-like, squiggly look of the abstracted horns. Diavlo comes with 5 styles (Book, Medium, Bold, Black and Light). I found Black the appropriate style for this identity because it has the strongest visual look among it's siblings.


This version includes an icon out of abstracted circular shape and gazelle to make a G.

The fonts used

3A uses the font TeX Gyre Adventor and comes with 4 styles (Regular, Italic, Bold and Bold Italic). I played around with the Z to fill up the spacing on top between A and Z to give it a continuous flow feel to the name. Overall, the logo has a dynamic, aggressive appeal to it. 

3B uses the font Adelle Basic which comes with 2 styles (Bold and Italic). The font gives a toned-down conservative version of 3A.

The version 3 icon and name can be used together or separately and still be recognizable, at least for 3A. 

... and the winner is ...

2C was the chosen one, at least for now. It might still evolve or be changed in the future, who knows. Here's Gazel identity in full color and glory.