Responses by Conrad Fuhrman, chief technical officer, Nolan Marketti, art director, and Kevin O’Reilly, principal, BOD
Background: The website’s purpose is to promote the office property located at 263 Shuman Blvd in Naperville, Illinois, renamed The Shuman. The target audiences include commercial real estate office brokers and their office-tenant clients. The property owners invested millions of dollars in the physical components of the building, and the website is one component of a larger campaign to rebrand the building and promote leasing opportunities. Other aspects of the campaign include e-mail promotions, video productions and social media. The website acts as the home base for the campaign and will continue to serve the property with additional videos and other content as the property completes its renovations.
Design core: Since we did a complete rebrand from the ground up, we envisioned everything from a blank slate. The design direction builds from the connecting strokes from the logo we designed and creates a strong contrast, while also acting as a grid for an alignment of elements. From the beginning, we knew we wanted to achieve a high-end look, so we went with black and varying shades of white to let the images speak through color.
Challenges: The commercial real estate market is often conservative in its approach to design and marketing. This is often more true for suburban markets; however, they are beginning to compete more with urban city centers. It was challenging for us at first to gain client buy-in and push the boundaries for a truly unique look. Time hindered our ability to add more custom animations to some of the visual elements, but we were able to find a nice library to substitute that ended up working out well.
Navigation design: Going with a single page layout with a Scrollspy plugin made the most sense, as it enables users to digest information quickly and efficiently. We intentionally designed the navigation to be shorter and not go edge to edge to make the site feel more freeform and break up the full-width grid.
Technology: Building the site on top of WordPress, we used Trellis, Bedrock and Sage by Roots to develop the site. While only a single page site, the platform enables the client to expand upon the site’s content in numerous ways—because of the platform’s robustness. Along with Advanced Content Fields and reusable blocks, every piece of content is editable not only textually but for responsiveness as well.
Anything else? A fun element of development that our head of front end enjoyed was matching the pseudoelements of CSS for the content and titles. The strong design lines that extend on the titles and wrap the content opening and closings are little things that bring elevated design into the programming realm. We really enjoy building those small details throughout a site. For the expanded logo on the left that always stays at 100-percent height, we originally started with an SVG that implemented a 9-slice scale. However, once we stepped back from the project and looked at the effect, we realized three images that were well placed could achieve the same thing. Sometimes old school methods are still the best practice and achieve the same results with less code.