Building a modern website is a complex and exciting task that relies heavily on the contributions of people all around the world. Many of them donate their talent to open source projects and free developments that make creating a site like this possible and even fun. This site runs on a combination of open-source and paid features. Open source coders: I hope you all have projects that bring in overflowing bags of loot, because you deserve it!
The innards:
Platform
WordPress
E-Commerce functionality:
Ecwid, short for E-Commerce Widgets. These guys have built a fantastic, flexible e-commerce solution that plugs in neatly to just about any website.
Plugins:
Fontbird
EZPZ One Click Backup
Ultimate Facebook by WPMU
Design:
Theme
Invictus Photographer. This is a premium theme that is well worth the money. Tons of flexibility and ongoing upgrades along with a striking design made this one beat out many other pretty but less powerful photo-centric themes. Invictus proved to be capable of meeting the demands of a complex and multifaceted website.
Typography
I wanted to use a Fibonacci sequence to determine the size ratios of the various type settings, but my choice of a 14px body font wouldn’t allow it. Next, I went with the eerily similar Golden Ratio, which yielded 14, 23, 37, 60, 97. This looked ghastly, in all probability due to my font choices. I arrived at the current ratio by modifying the Fibonacci sequence to add one number to each entry: 14, 22, 35, 56, 90. Dear Math: I never liked you anyway, even if you did give us Numb3rs.
- H1 – VIP at 90px.
- H2 – Trajan Pro Regular at 37px.
- H3 – Museo Sans 500 at 23px.
- H4 – Lucida Grande bold at 18px.
- Links – Museo Sans 500
- Body – Lucida Grande regular at 14px with a line height of 21px.
- Horizontal navigation bar – Museo Sans 700
- Vertical navigation bar – Lucida Grande
- Footer – Trajan Pro Regular
Thanks to Smashing Magazine’s ebook Getting the Hang of Web Typography for the crash course!
[rant] At the end of a painfully long typographic marathon, I’d selected a lovely array of Gotham typefaces, and I went to sleep a contented little geek. When I awoke, I pulled the tab on a Diet Coke and meandered off to buy font licences….only to encounter the admonition, “However, the use of the CSS @font-face tag is not currently allowed under any H&FJ license. Such use constitutes the illegal distribution of our font software, and is therefore not permitted under any circumstances.” Oh, noes, what about Teh Piratez?
I gave a glare that could melt servers (hopefully, theirs), and cursed the authors of all those nifty articles proclaiming the virtues of Gotham as a web font without mentioning that it could not, in fact, be used as a webfont. Then I did the whole gorram thing all over again. [/rant]
Navigation
CSS Mega Menu for WordPress. Style customization by Avelino Tiu.
Inspirations
I owe my start in jewelry design and sales to a very special television show and its fans. In an effort to pay tribute to that origin, I’ve included design and typography elements inspired by Los Angeles and New York as well as TV and movies. LA and NYC are both home to my largest customer bases and the centers of the US film and entertainment industry.
My main page header font, VIP, draws its design cues from LA luxury shops. New York City-rooted Gotham was to play a huge role in the typography of this site, but due to the above-mentioned licensing issues it was scrapped. Stepping into the void is movie-poster favorite Trajan, so commonly used for movie titles on posters and DVD cases that it’s become a running joke among designers.
My goal has been to put together a very modern fine jewelry website devoid of the stifling trappings of “old luxury” while remembering jewelry’s deep historical roots. The contrast of the ultra-modern VIP font with ancient lettering taken from the inscription at the base of the Trajan Column in Rome serves that purpose nicely.
Geoff Mandell
Adam Levermore
Audi New Luxury ad campaign
