Innovation and Partnerships Website
Client Brief
Virginia Tech’s Innovation and Partnerships is responsible for the university’s corporate engagement and major gifts. We needed a new website that went beyond the standard university template to better resonate with industry leaders, partners, and potential donors. The request was a clean, dynamic website that offers an intutive user experience and stays recognizably within the Virginia Tech brand.
Approach
The website was designed in Figma by one of our team’s graphic designers. Because the university uses the Adobe Experience Manager content management system, we started with the standard template and components, which were styled and targeted with prefixed classes. This allows anyone with website access to make content updates, even though the look of the pages is entirely custom.
The site includes several standout features that required creative problem-solving to achieve within the constraints of a templated system. Among them is the About page, which was previously built from a folder of individual profile pages displayed via a list component. By moving the content we wanted to surface into the pages’ meta fields, we were able to dynamically pull that information into a custom modal interface on the new page. We set role and aria attributes via JavaScript to ensure accessibility and improve support for screen reader and keyboard users. The original profile pages were then hidden from navigation, allowing the new experience to function as a centralized, interactive layer built on top of the existing structure.
The two “scrollytelling” sections of the homepage were developed without a framework. If I had to do it all over again I would use one. My thinking was that building it ourselves would give us more control and flexibility, but it hijacking a user’s scroll is much more complicated than I originally would have guessed. 😅
VT MADE Website
Client Brief
The request was to design a landing page for a new advanced manufacturing lab, VT MADE, which showcased the unique positioning of Virginia Tech in the advanced manufacturing space. Primarily, we wanted to convey our interdisciplinary capabilities and the on-site resources we can offer across the manufacturing lifecycle.
Approach
The visual elements of the original documents included three-dimensional lettering to evoke the layered process of 3D printing. I built on that to create a 3D printing effect in the hero section. Once the effect is finished, a “slinky effect” is initialized that pulls the layers apart and moves them in the direction of the mouse as the user hovers on heading.
Because we wanted to illustrate the full extent of our expertise, our stakeholders had a dense amount of information they wanted to convey on a single page. My solution was to place the full lists of faculty members, laboratories, and equipment into modals, with a scrolling preview of the list images on each modal trigger. The modals are populated by reference to components that live on another page. By creating this setup, we were able to allow anyone with access to the page to update the information as needed.
The VT MADE website was part of a larger campaign around the new lab which won a Gold ADDY Award.
Carbon CoLab Website
Client Brief
The request was to design a landing page for a new carbon sequestration lab that tells the story of its director, Ryan Pollea, and his research, with the goal of helping secure additional funding for the lab.
Approach
We began with a series of documents which featured specific Carbon CoLab branding. I wanted to stay as close as possible to the original visual language while introducing a sense of airiness to the page, evoking the feeling of floating, or having the bird’s-eye view suggested by its graphics. To do this, I used two different types of parallax effects: one driven by scroll, and one driven by mouse movement.
I also wanted to give impact to the initial viewport and do something movement-based with the logo, which we had designed in-house. I added animations that bring in the “raindrop” elements of the SVG by fading them in and moving them downward, followed by a closing motion on the “leaf” elements. As the user scrolls after the initial animation is complete, the “leaf” elements and words fade out, and the “raindrops” grow and move to the bottom of the viewport, giving a visual “arrow down” indication to the user that they should continue scrolling down to see the additional content.
Through the lightness and movement of the composition we were able to achieve a sense of atmosphere for the page. By using space, motion, and transparency, we created an experience which mimicks the idea of something nebulous being condensed down into legibility and form.
AI Summit Website
Client Brief
Virginia Tech Innovation and Partnerships required an event website for their upcoming AI Summit. A third party designed the wireframes and I implemented them with additional effects to bring the page to life.
Approach
The wireframe used a tertiary university brand palette and map textures. Because the images were PNGs, I was limited in how we could animate them, but settled on a slow vertical movement of the map in the header and parallax scrolling. To evoke the typing effect of popular LLMs like ChatGPT, I also added a “typing in” effect to the header text, with a blinking cursor to indicate to the user additional text was coming.
To make navigation easier, the sidebar menu remains fixed after the user scrolls past the header and until they reach the footer. The link in the menu corresponding to the section the user is inside of is highlighted as the user scrolls.
The page was created inside of Adobe Experience Manager. We used the standard template and components as a foundation, and styled and targeted them with prefixed classes. This allowed anyone with website access to make content updates, even though the look of the pages is entirely custom. For frequently changing information such as the speaker information and schedule, we went a step further and populated the information from a Google Spreadsheet that anyone on the conference organizing team could update.
Visit website
Phase, Inc. Website
Client Brief
The client was looking for a simple landing page for their startup company. And I quote, “please don’t spend too much time on this.”
Approach
Phase was lacking a comprehensive brand guide at the time, so graphics were a challenge. Stock images were also difficult to find for their industry (microfluidics manufacturing). I decided to go with bright colors and abstract visual elements to convey the energy and excitment behind the technology and company, beginning with a spherical, fluid video background.
I added a subtle gradient to soften the effect of the motion and highlight the text, which I also repeated as the fill of the logo at the bottom of the page and elsewhere. I also incorporated some subtle, abstract microchip patterns to add visual interest. I incorporated SurrealCMS as a lightweight way of allowing the client to make content changes while minimizing the possibility of mistakes.
Institute for the Study of Eastern Christianity
Client Brief
As a newly-formed research insitute at The Catholic University of America, ISEC needed a website that could explain its mission, showcase its expertise, and offer resources to attract potential faculty and students. We wanted to evoke the visual language of Eastern Christian tradition while maintaining a modern feel and user experience.
Approach
We landing on gold as a centralizing color and texture. A key instruction was to avoid visual elements which spoke too specifically to one faith tradition. Gold is used widely in Eastern Christian art, iconography, and architecture, and so lent itself well to variegated incorporation. We also strove to stay adjacent to the brand guidelines for Catholic University, incorporating their fonts and color palette via secondary colors
Important events are listed in the initial viewport, along with a CTA for newsletter signup, as these were the most important pieces of information the client wanted to present to viewers. The central headline, “The East is the Cradle of Chrisianity,” features a changing language element to illustrate the breadth of the tradition. Also on the homepage is an interactive globe showing the home bases of various Eastern Christian faiths, assisting users in a possibly Western-centric context visualize the origins of Christianity generally. Also included are a upcoming events, recent news, filterable carousel of associated faculty and a carousel of new publications.
