A Portfolio Platform in Integrated Media

Though Portfolio Platform 1.0 was not technically a responsive site, the single page application did have fluid design across devices and form factors, ensuring a consistent experience for the user.

More than anything, it was a transitional point from even earlier versions of our portfolio sites — a prelude to our learning how to design and develop the sorts of modern responsive sites we love to make and use now.

The platform was developed using an agile approach where rapid prototypes inform each successive iteration. An asynchronous (AJAX) style was applied to manage content loading/navigation across pages and projects. We managed hosting through the Amazon Web Services (AWS) platform. Site optimization was performed using the Google PageSpeed system.

A Moment of Self-Deprecation: What is the deal with all that tiny text?!? And how am I supposed to click those itty-bitty buttons with my chubby little fingers? You’re right. How would you? Whelp, you have to start somewhere, and we were just dipping our toes into the world of responsive design. We’ve come a long way since then!

In its digital form, the Portfolio Platform included interactive overlays introducing additional content or features.

On Left: Dynamic Map; Presentation Boards or Final Product; Video Content.
On Right: Designer Profile; Social Sharing; Graphic Legend.

Since a coordinated media profile blends across digital and physical media, a consistent graphic language is required to maintain user orientation and brand identity. In fact, the development of the suite of marketing materials was a two-way street: print and digital media are not only integrated with one another, but each, in turn, is influenced the development of its partner. For example, the dark footer with general project information is consistent between the print and digital portfolios, and incorporated as the header on the résumés, though it first originated as part of the website design. Inversely, the graphic layout of each portfolio page was originally done for the print portfolio (before we even had a website), then converted to digital form.

The evolution of a design is always an interesting process. A few years back, when we still in architecture school, we decided we wanted to start tagging our work with personal logos. The “RS” logo came first, but its early form was hardline with sharp edges, and, in retrospect, it felt too corporate. Tracing over it in a slightly warbled, architectural style loosened it up, and it finally felt like it exuded the creative professionalism we had been seeking.

Blake’s “B” logo came shortly thereafter. At that point in time, we were maintaining separate, but coordinated, portfolios, so complementary personal logos made sense. When we began doing projects together, the “RS” and the “B” converged into the “RB” logo.

The project icons originated as a navigation tool in the early print portfolios we made. (The table of contents would list a project with its icon, then the icon would mark the associated pages within the book.) Designed to coordinate with our personal logos, together they form a common visual language used across the suite of media we produced: a recognizable identity that flagged everything that came from our little studio, identifying it even if it was out of context.

Though it certainly was not our first portfolio website, A Portfolio Platform In Integrated Media is the first one that we’ve bothered to document here. Since this point, there has been an incredible amount of progress.

If you’d like to see where we went next, check out the second major iteration, We Make Place: Emerald Seven Website on the E7 Series 2 Platform.

The E7 Series 3 platform was released with the launch of the award-winning Kalon Surf Website.