For this project, I was tasked with creating a professional website primarily for showcasing the custom made furniture of a local furniture builder. After working with the client to determine the best way to break up the content for the site, the next step was to create a unique feel for the navigation. Making a site totally unique helps it stand out, but it also almost inevitably comes with challenges.
To really personalize it, we decided that the different menu items should be on 3d interlocking pieces of wood, connected by wooden bowties, a woodworking technique my client had employed to repair split wood. He suggested having the menu item rise up from the interlocking bowties when selected. I told him this would probably be possible, but I had no idea how I’d implement it at the time. The problem with this idea is that when one wooden menu item rises up, it should block the front of its connected bowties, but the same bowties should block a different part of the menu item when the tab is not selected. Would it be possible to break the blocks into two parts, one that is behind the bowtie and one in front? Not only would that be difficult to implement, but the woodgrain texture of the elements made it even trickier.
Eventually I thought of a relatively simple solution. I realized if I swapped out the bowtie image with one that was missing the very bottom of the bowtie, it looked like it was being covered up by whatever was underneath it. Then, I added a strip of dark brown to the top of the bowtie that looked like it was the side of the wooden menu-item poking out from behind. Each bowtie was given a class that determined if its adjacent pieces of wood were unselected, or if the left or right menu item or both were selected. That’s four classes total, each with its own associated image. This way the menu item elements appear to be interlocked with the bowties, when in reality, the bowties are placed above the menu items using absolute positioning.
Figuring out how to get the pieces to interlock was, by far, the biggest hurtle. After that, I also had to be sure that to preload all the different images, so there’s no lag when the tabs rise up for the first time. (I used this preloading technique) Secondly, when you have buttons that move on mouse-over, you have to careful. If you mouse over the edge of a button causing it to move off your mouse, it will loop between the selected and unselected states in a glitchy manner. To make sure the mouse area doesn’t change on selection, I increased the size of the element when it’s raised using the before pseudo-selector as follows:
There were many other unique challenges caused by my approach of designing first and figuring out implementation second, but the interlocking element illusion was one of the most fun solutions. And even though there always seems to be more hurtles than you first imagine, I find that it’s always satisfying to not limit yourself to designs you know how to implement.
