Pssst. We’re building a React & Apollo version of the
platform! Keep us in mind for your next digital project.
A Portfolio Platform in Integrated Media: Project Title Spread on MacBook Pro with Batmode Easter Egg
An Easter Egg

The project title spread for Reweaving the Fabric of the Abandoned Big Box in digital form. BONUS: Now that we’ve bid adieu to this version of the platform, we might as well let the cat out of the bag about the old site’s Easter Egg. See that tiny bat icon in the header? That meant you’d successfully activated “Batmode” (by entering the Konami Code, naturally), and your next click would treat you to a video of Abed’s Batman monologue. Because, of course it did.

An Easter Egg

The project title spread for Reweaving the Fabric of the Abandoned Big Box in digital form. BONUS: Now that we’ve bid adieu to this version of the platform, we might as well let the cat out of the bag about the old site’s Easter Egg. See that tiny bat icon in the header? That meant you’d successfully activated “Batmode” (by entering the Konami Code, naturally), and your next click would treat you to a video of Abed’s Batman monologue. Because, of course it did.

Digital and physical: a portfolio in integrated media.

A portfolio of work is a living beast: not only does the content it presents shift and flow, but the design of the portfolio itself evolves to suit both its content, and its context. And, in our complex world, curation of integrated media is crucial to present a consistent brand image.

As such, our Portfolio Platform will never be “finished,” but that doesn’t mean there aren’t some cool snapshots of it along the way. This meta time capsule explores Version 1.0, launched as we wrapped up our years in graduate school (phew!).

A Portfolio Platform in Integrated Media: Fluid Design Across Devices - iPad, iPhone 4S, iPhone 5
Fluid Design Across Devices

The Wedged Walnut Cabinet title page spread, as seen on the iPad, iPhone 5, and yes, that’s an iPhone 4S, which was definitely the phone one of us was sporting at the time.

Fluid Design Across Devices

The Wedged Walnut Cabinet title page spread, as seen on the iPad, iPhone 5, and yes, that’s an iPhone 4S, which was definitely the phone one of us was sporting at the time.

A Portfolio Platform in Integrated Media: Fluid Design Across Devices - MacBook Pro
Fluid Design Across Devices

The Wedged Walnut Cabinet title page spread, as seen on a MacBook Pro.

Fluid Design Across Devices

The Wedged Walnut Cabinet title page spread, as seen on a MacBook Pro.

Fluid design across devices.

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.

A Portfolio Platform in Integrated Media: Title Spread on iPhone 5 Perspective
Development Style

The title page spread forA Modern Library for a Rural Community, formerly known as the John Day Public Library, as seen on an iPhone 5.

Development style... and some self-deprecation.

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!

A Portfolio Platform in Integrated Media: Augmented Portfolio Features
The Augmented Portfolio

In its digital form, the Portfolio Platform included interactive overlays introducing additional content or features, in this case, for the ShoeBox Installation Benefiting Nike Reuse-A-Shoe. At Left: Dynamic Map; Presentation Boards or Final Product; Video Content.At Right: Designer Profile; Social Sharing; Graphic Legend.

More than just pretty pictures: the augmented portfolio.

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.

A Portfolio Platform in Integrated Media: Printed Résumés
Printed Résumés

Print versions of résumés coordinate graphically with not only other physical media in the suite, but with the website, as well.

Printed Résumés

Print versions of résumés coordinate graphically with not only other physical media in the suite, but with the website, as well.

A Portfolio Platform in Integrated Media: Stealth Whimsy in Print Porfolio
Stealth Whimsy in Print Porfolio

The project title spread for the Stealth Whimsy Side Table, in print.

Stealth Whimsy in Print Porfolio

The project title spread for the Stealth Whimsy Side Table, in print.

A Portfolio Platform in Integrated Media: Stealth Whimsy on MacBook Pro
Stealth Whimsy on MacBook Pro

The web portfolio includes all the content from the print portfolio, augmented with digital features, including social media integration.

Stealth Whimsy on MacBook Pro

The web portfolio includes all the content from the print portfolio, augmented with digital features, including social media integration.

We need things on paper, too! Enter: integrated media.

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.

A Portfolio Platform in Integrated Media: Logo Icon - Rachel Simrell
Logo Icon: Rachel Simrell

The “RS” logo was the original component from which the visual language of icons and logos sprouted.

Logo Icon: Rachel Simrell

The “RS” logo was the original component from which the visual language of icons and logos sprouted.

A Portfolio Platform in Integrated Media: Logo Icon - Simrell+Scott
Logo Icon: Simrell+Scott

When we began doing projects together, “RS” and “B” logos melded to become the “RB” logo: Rachel & Blake, for Simrell+Scott.

Logo Icon: Simrell+Scott

When we began doing projects together, “RS” and “B” logos melded to become the “RB” logo: Rachel & Blake, for Simrell+Scott.

A Portfolio Platform in Integrated Media: Logo Icon - Blake C Scott
Logo Icon: Blake C Scott

The “B” logo arose to pair with the “RS” and its white border, in turn, contributed to the style of the project icons.

Logo Icon: Blake C Scott

The “B” logo arose to pair with the “RS” and its white border, in turn, contributed to the style of the project icons.

A Portfolio Platform in Integrated Media: Project Icon - TimeTravel.FM
Version 1.0 Project Icon: TimeTravel.FM Smart Object Prototype

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the TimeTravel.fm Smart Object Prototype.

Version 1.0 Project Icon: TimeTravel.FM Smart Object Prototype

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the TimeTravel.fm Smart Object Prototype.

A Portfolio Platform in Integrated Media: Project Icon - 92nd Street Remodel and Addition
Version 1.0 Project Icon: 92nd Street Residential Remodel & Addition

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the 92nd Street Residential Remodel & Addition.

Version 1.0 Project Icon: 92nd Street Residential Remodel & Addition

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the 92nd Street Residential Remodel & Addition.

A Portfolio Platform in Integrated Media: Project Icon - John Day Public Library
Version 1.0 Project Icon: A Modern Library for a Rural Community

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, A Modern Library for a Rural Community.

Version 1.0 Project Icon: A Modern Library for a Rural Community

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, A Modern Library for a Rural Community.

A Portfolio Platform in Integrated Media: Project Icon - Portfolio Platform in Integrated Media
Version 1.0 Project Icon: A Portfolio Platform in Integrated Media

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, A Portfolio Platform in Integrated Media.

Version 1.0 Project Icon: A Portfolio Platform in Integrated Media

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, A Portfolio Platform in Integrated Media.

A Portfolio Platform in Integrated Media: Project Icon - ShoeBox Installation Benefiting Nike Reuse-A-Shoe
Version 1.0 Project Icon: ShoeBox Installation Benefiting Nike Reuse-A-Shoe

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the ShoeBox Installation, Benefiting Nike Reuse-A-Shoe.

Version 1.0 Project Icon: ShoeBox Installation Benefiting Nike Reuse-A-Shoe

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the ShoeBox Installation, Benefiting Nike Reuse-A-Shoe.

A Portfolio Platform in Integrated Media: Project Icon - The Urbanite Club
Version 1.0 Project Icon: The Urbanite Club

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, The Urbanite Club.

Version 1.0 Project Icon: The Urbanite Club

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, The Urbanite Club.

A Portfolio Platform in Integrated Media: Project Icon - Wellsprings Friends School Sketch Renderings
Version 1.0 Project Icon: Wellsprings Friends School Sketch Renderings

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Wellsprings Friends School Architectural Sketch Renderings.

Version 1.0 Project Icon: Wellsprings Friends School Sketch Renderings

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Wellsprings Friends School Architectural Sketch Renderings.

A Portfolio Platform in Integrated Media: Project Icon - Wedged Walnut Cabinet
Version 1.0 Project Icon: Wedged Walnut Cabinet

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Wedged Walnut Cabinet.

Version 1.0 Project Icon: Wedged Walnut Cabinet

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Wedged Walnut Cabinet.

A Portfolio Platform in Integrated Media: Project Icon - The Sinnott House Revived
Version 1.0 Project Icon: The Sinnott House Revived

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Sinnott House Revived.

Version 1.0 Project Icon: The Sinnott House Revived

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Sinnott House Revived.

A Portfolio Platform in Integrated Media: Project Icon - Lovejoy Arts Alliance Campus
Version 1.0 Project Icon: Lovejoy Arts Alliance on the North Park Blocks

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Lovejoy Arts Alliance on the North Park Blocks.

Version 1.0 Project Icon: Lovejoy Arts Alliance on the North Park Blocks

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Lovejoy Arts Alliance on the North Park Blocks.

A Portfolio Platform in Integrated Media: Project Icon - Reconnecting the Layers of Lents
Version 1.0 Project Icon: Reconnecting the Layers of Lents

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, Reconnecting the Layers of Lents.

Version 1.0 Project Icon: Reconnecting the Layers of Lents

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, Reconnecting the Layers of Lents.

A Portfolio Platform in Integrated Media: Project Icon - Intensive Residential Green Roof
Version 1.0 Project Icon: Intensive Residential Green Roof

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Intensive Residential Green Roof.

Version 1.0 Project Icon: Intensive Residential Green Roof

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Intensive Residential Green Roof.

A Portfolio Platform in Integrated Media: Project Icon - Oculus Luminaire Design
Version 1.0 Project Icon: Oculus Luminaire Design

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Oculus Luminaire Design.

Version 1.0 Project Icon: Oculus Luminaire Design

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Oculus Luminaire Design.

A Portfolio Platform in Integrated Media: Project Icon - Kindling Table: A DIY Coffee Table on a Dime
Version 1.0 Project Icon: Kindling Table: A DIY Coffee Table on a Dime

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Kindling Table: A DIY Coffee Table on a Dime.

Version 1.0 Project Icon: Kindling Table: A DIY Coffee Table on a Dime

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Kindling Table: A DIY Coffee Table on a Dime.

A Portfolio Platform in Integrated Media: Project Icon - Home at West 10th Alley
Version 1.0 Project Icon: Home at West 10th Alley

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Home at West 10th Alley.

Version 1.0 Project Icon: Home at West 10th Alley

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Home at West 10th Alley.

A Portfolio Platform in Integrated Media: Project Icon - Stealth Whimsy Side Table
Version 1.0 Project Icon: Stealth Whimsy Side Table

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Stealth Whimsy Side Table.

Version 1.0 Project Icon: Stealth Whimsy Side Table

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, the Stealth Whimsy Side Table.

A Portfolio Platform in Integrated Media: Project Icon - Reweaving the Fabric of the Abandoned Big Box
Version 1.0 Project Icon: Reweaving the Fabric of the Abandoned Big Box

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, Reweaving the Fabric of the Abandoned Big Box.

Version 1.0 Project Icon: Reweaving the Fabric of the Abandoned Big Box

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, Reweaving the Fabric of the Abandoned Big Box.

A Portfolio Platform in Integrated Media: Project Icon - A Study in Corporal Landscapes
Version 1.0 Project Icon: A Study in Corporal Landscapes

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, A Study in Corporal Landscapes.

Version 1.0 Project Icon: A Study in Corporal Landscapes

A project icon is sketched out for each project using a characteristic element of the project as an underlay, and selecting the icon color from the project itself. The intention is to create an icon that is recognizable as pertaining to a particular project, even when viewed at small scale, in this case, A Study in Corporal Landscapes.

The evolution of a visual language.

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.

Where did this project go next?

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.

Hey, we hope you liked our work!

Would you like to check out the services we offer?

Interdisciplinary Design

Our team is trained to solve problems holistically, designing for digital, physical, and hybrid applications using an integrative design process.

Full Stack Web Development

Our award-winning design & development team is unique in that we not only can geek out over the technical specs, but we can also hold our own with a room full of designers.

Custom Crafted Content

Whether it’s through the written word, through visual storytelling, or through the combined forces of both, we craft tailored content to help you get your message seen and heard through all the noise.

Can we help you with anything?

Or, would you like to join our (rarely used) mailing list?

Feel free to reach out with any questions you may have for us about our services, our work, or anything else that’s got you curious.

Get in touch.