.

RE:Designing Mango Power Girl

Mango Power Girl is my wife Mohini’s web site for original recipes, food photography, and related bits. Early this autumn, with the change in season Mohini started itching to freshen up her site’s look and feel. I had worked before on her graphic art and user interface design, giving me some guidance on looks Mohini had liked and not.

If I had to sum up the immediately previous graphics in a word, considering the look she wanted and our result, the word would be “urban.” The result was not overwhelmingly street but the city of Seattle and urbanity in general were strong elements.

With an evocative name like “Mango Power Girl” it’s irresistible to play visually on each word. In an urban look, this led to an array of mango colored paint splashing and glow effects. Click the image or link below for more discussion of these graphics’ origins. Graphics included a square “About Me” image and a banner for the site:

“About Me” for Mango Power Girl

400 pixels square, May 2008

–> a flickr version with more details

Banner image for use on MangoPowerGirl.com, May 2008:

The typeface and primary orange or mango color had been retained from her previous generation of graphics for continuity. Mohini wanted a cleaner break this time around. We changed her site’s color palette, typeface, and the general direction of the graphics. If the old look was “urban,” the new look she wanted was “organic.”

Mango Power Girl is about food stories, recipes, and food photography, but there is complementary floral and other photography in the mix. In thinking “organic,” Mohini was partly accentuating both the food and the floral, and partly giving a nod to trends in graphic design. In their article “Logo Design Trends 2008,” LogoOrange Design Group referred to the like as “Leaves Logos.” Anyone watching has noticed not only leaves, but whole vines, branches, roots, plants, and so on, growing all over logos, advertising campaigns, and blog templates. Some of this graphic trend is tied to the sustainability or “green” movement, and some of it is just graphic fashion, spilling into areas unrelated to anything “organic.”

If the organic and floral were the “girl” in this art, the “mango” was still primarily represented in orange colors. The main orange became darker and redder as the entire palette swung toward autumn and winter. Another color motivation was greater contrast for usability in links, headlines, and other visual elements, the colors of which are matched to the graphic art. The “power” in the graphic was a warm, orange glow implying fire. The letters in “Mango Power Girl” were styled like embers. An orange glow, centered between the first “o” and graphic art behind the lettering, created depth and interaction between the title and background.

Banner image for use on MangoPowerGirl.com, October 2008:

In other user interfaces, differently sized banners were in order, so we were careful to settle on an image that scaled well. For Mango Power Girl’s Twitter profile, it became:

With “organic” as the foremost thought in Mango Power Girl’s mind, and with a nod to her college major of mathematics, her new favicon picked out the spiraling vine:

Mohini shared with me a few of the reviews from her readers, including “pretty banner” and “Gorgeous banner!” Excellent!

I’ll write more in another post about related work to improve and customize search on Mango Power Girl, the site’s underlying template, and its integration with other tools Mohini uses to produce content.

Besides all of this, give Mango Power Girl a read. If you’re not hungry yet, you will be!