A type focused approach_

We started by reworking the typography to be the driving force behind the brand’s updated look and feel. Together with other graphical elements, we defined everything you see by simple rules of ratios and relationships.

The underlying logic in much of the site are the simplest 1:1 and 5:8 ratios which we echo throughout the site: In the relationship of elements to text, elements to each other, or hierarchy within the typographic system. We altogether avoided a mainstay of modern marketing—stock photos—and focussed on typography, artfully created lines, and beautiful art to tell the story.

Self-drawing SVG animations_

One of the existing brand elements were several hand-drawn sketches of various points of interest at and around the property, and general downtown Dallas location. We wanted to incorporate each sketch by having it come to life as a self-drawing animation. Without the time and budget to create those animations individually, I turned to my previous experience using SVG animation to create a pipeline that made creating these satisfying animations easy, time-effective and efficient!

Animating more than just outlines_

Drawing SVG outlines is fairly easy using the stroke-dashoffset property. (More on how that works here). My challenge here however was that I didn’t need to animate mere SVG-outlines, but rather every fill, group and polygon of the illustration.

Clip path_

The method to animate the entire SVG then was to create a single wide line along which the SVG should be drawn.This custom drawn line roughly follows the illustration. The actual Illustration—all its shapes, polygons and fills, are then used to mask the animated line by setting them as its clip-path. This show only the portions of the animated line which are directly under those shapes, and hides everything else.

Since the line can easily be animated/drawn using the stroke-dashoffset method, and the clip-path mask shows only that parts of the line that happens to fall under the illustration, the result is an entire graphic that appears to draw itself!

Creating a pipeline_

Check out the basic pipeline
on GitHub Gists

Since almost every page had its own unique animated drawing, I needed a way to adapt this method quickly for each individual illustration without custom coding each one. I created a few custom scripts, which allowed SVGs to be uploaded straight from Illustrator into the CMS, and as long as they followed a couple of guidelines, would animate automatically and seamlessly!

The script first attempts to see if it’s possible to inline the special SVG (or display it as static image tag if it fails the checks). Once validated, the function adds any additional required and unique classes and styles to the SVG, moves a couple of things around, determines its lenght, etc. All of which—along with a little custom CSS—facilitate each animation automatically!

Smart navigation_

For a website as upscale and modern as the Drakestone, we wanted to create a nav menu that was smarter and more useful than most responsive menus. The website features a lot of unique pages, some of which more important than others to conversion goals.

Our solution is smart navigation that continuously collapses into a hamburger menu depending on how much of it fits on the screen. The menu is generated using custom nav-walkers completely through WordPress CMS, making it easy for even non-developers to add, remove, change or reorder menu items.

Furthermore, Editors can select which menu items should be given priority over others regardless of position within the menu. Those items stay in the navigation and do not collapse into the menu until even if they no longer fit. The result is a truly smart navigation menu.