A converted industrial space has a picnic table inside of it. At the table two people are working at computers while a third walks behind. A gray overlay sits over the image with white text which reads Grain and Mortar.

Grain & Mortar

Front-end developer for Omaha's premier design agency.
Company Overview
Grain & Mortar was a demanding, fast-paced environment with an incredible eye for detail and extremely high expectations of polish. During my tenure at Grain & Mortar, we worked on internationally acclaimed clients such as Twitch, Google Cardboard, Checkr, and YCombinator Product launches (Beep, Kuna, others) while also servicing notable local clientele such as Hudl, BigOmaha Conference, Barcamp, and various local restaurants.
My Contributions
As a front-end developer, my primary role was to translate high-fidelity designs into hand-coded websites, while staying on the cutting edge of technology to deliver a stable, performant final website that worked on a variety of devices for customers all over the world.
Grain & Mortar's largest technical challenges came from within, each member of the team had exceedingly high standards for their work which our clients came to expect from every aspect of our business. We'd often have designers creating layouts that did not seem feasibly possible to build in HTML, but we would approve them anyways and then figure out how to make it possible later, resulting in creative designs unbound by traditional layout constrictions, while also providing interesting challenges for our development team.

Atop the highly detail-oriented work, the development side was also working with new web technology which meant often needing to master tools that did not have full documentation or support systems in place and debug issues ourselves.

The agency serviced multiple high-value clients concurrently while providing legacy support and maintenance for about fifty previous projects. This meant that as a developer I needed to split attention between one to four projects all while finding balance to handle inbound additional requests atop our contractual legacy duties as well.
Technical Challenges
Constantly pushing boundaries of current technology atop expectations of reliability and consistency made work difficult, but rewarding.
A mockup showing three iphones displays what the Grain and Mortar website looks like on small devices. The layouts are uncommon, but legible and clean in appearance.

Detailed Motion Design

One of our most desired offerings was our ability to provide motion/animation to clients, which we reflected heavily within the Grainandmortar.com site extensively. Nearly every single page contained some sort of dynamic motion to bring deeper visual interest to the page, whether through animating page separators or through large pre-animated imagery as hero images. From a technical standpoint, ensuring that these animations remained low-impact, smooth, and performant was my top priority.

The following two images were created as ".APNG"s originally, which required javascript to function, but have been translated to GIF format for presentation.

A block of text reads About and We Are Honest Folks. Between the two phrases is a vertical dividing element, which is animated to alternate between wiggling like a snake and becoming a rigid lightning bolt.Various objects such as chess pieces, graphs, a human brain full of cogs, and a pointing hand are animated to spin, churn, and grow.

Living, breathing websites

Motion and animation were not limited to one-off illustrations, they were embedded into the very essence of every piece we worked on. On every page transition, on every hover state, animation and motion were an extension of who we were as an agency and the value of the designs that we delivered. As a front-end developer, this meant sitting down with our lead animator and learning how to translate After Effects timings, tweens, easing models and positioning settings into CSS. Complex designs were converted into .gif (or .apng), while we attempted to do as much as possible with native CSS libraries to maintain accessibility and control.

A small resolution video shows what the Grain and Mortar website looks like when navigating between pages. Elements slide into view and fade in and out of view politely.A small video demonstrating what button animations look like. The mouse alternates between a light and dark colored button. When hovering over a button, a border on the bottom of the button expands and wraps upwards, then atop the button, fully enclosing it– then does the same in reverse when hovering stops.

Typographic Mastery

The worth of any design can be measured in its typography, and we strove to be the best in our work, whether it be websites, branding, print-work, or anything in-between. Typography on the web offered unique challenges for both accessibility and legibility across all devices, so we attempted to avoid type-inside-of-images as much as possible, opting to instead leverage display-focused type foundries and advanced CSS layouts to accomplish complex typography.

An iphone, an ipad, and a macbook are shown with various pages of the grain and mortar website, they demonstrate a good use of color, form, typography, and balance.
Our work sought to inspire other creatives and set industry standards for future sites to come, as such we often participated in competitions both internationally and locally and were able to successfully get recognized as leaders in our fields from many esteemed sources, such as:
  • Awwwards Nominee
  • CSS Design Awards Winner
  • CSS Awards Winner
  • Communication Arts Webpick
  • OnePageLove Featured Site of the Day
  • AIGA NE Show - Gold recipient
Notable Accolades
Good design should be invisible but celebrated within the design community.
A brick conference room has a table with employees meeting around it, one member spins back and forth in his chair while the others look on at the meeting's leader who is making hand gestures as they talk.
LinkedinCodePenInstagram