Pala 2

Pala International

Branding & Graphic Design

Design challenges

The design team quickly identified the challenges and the opportunities. Here the presentation we gave to Pala International.

Click an image to magnify it.

Bottom line: We needed to create a web design that is Simple, Stylish, and Mobile.

Research color schemes

With the aid of a color stylist, we reviewed a variety of luxury websites to consider how their use of color, typography, and layout might inform our proposed designs. We narrowed our proposed color schemes down to four choices we named:

Titanium

Italian Grey

Moroccan Blue

Silk Pink

Here are the color schemes applied to an early version of the search interface:

Titanium

Italian Grey

Moroccan Blue

Silk Pink

Pala International chose the Titanium color scheme which evolved to a mix of neutral grays and off-whites which nicely draws attention to the gemstones rather than the interface.

Design a new logo

We considered a variety of fonts in addition to Pala International's longtime favorite, Vivaldi.

We narrowed our proposed fonts down to four choices:

Cinzel Decorative

Futura

Kepler semibold italic

Trajan Pro bold

Pala International chose Cinzel Decorative Regular.

The same font is used for the Palaminerals logo.

Many months after the new sites were launched, the webmaster modified the logo as a gradient merging from a gold color to black and chose to use the wording "Pala International" on the Palagems site.

Create a new tagline

Pala International used the tagline Fine Creations From Planet Earth for both Palagems and Palaminerals. To help distinguish between the two sites we proposed developing a new tagline for Palagems. Eventually we settled upon Brilliance Discovered which connotes Pala International's wealth of knowledge as well as the value of their gemstones.

The new tagline appears on the splash and home pages.

Design results

Through an iterative design process, the original dense user interface was remodeled into a simple, clean design.

Learning Squarespace's meta design principles for their templates was key to understanding how to effectively customize the Palagems site. The first step was to convert the Adirondack template's three CSS files into a readable format by adding line breaks and hand editing the results for readability. The primary CSS file for Squarespace's Adirondack template has over 35,000 lines.

Updating the existing code base required learning HTML, CSS, PHP, and MySQL. In addition, I had to reverse engineer Squarespace's innovative system of dynamically adaptive, nested web objects powers their responsive web designs. Particularly demanding was figuring out how their responsive navigation systems relied upon multiple CSS and JavaScript files.

We inserted over 1,500 lines of site-wide CSS to extensively customize Squarespace's Bedford template. The Home page, all newsletter pages, and some articles have their own page-specific custom CSS.