At [Built by Field](https://builtbyfield.com/), we created a subtle brand and fully editable website for [PARK™ Production House](https://parkproductionhouse.com/) that compliment the imagery of the client’s high quality production work.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2F38b19a0e-e056-47f9-9ee9-287c9b2b403d.mp4?alt=media&token=ddddfc3a-46d8-4d33-97c0-27ab143a09d0","id":"38b19a0e-e056-47f9-9ee9-287c9b2b403d","width":1762,"height":1174,"filename":"park-mockup-00001-small.mp4","type":"video/mp4","caption":"","border":false}]}
```

The brand uses two complementing fonts, one serif and one sans serif, to create a sense of balance and tension. The serif font brings a sense of tradition and elegance, while the sans serif font brings a sense of modernity and simplicity. By carefully pairing these two contrasting font styles, we aimed to create a cohesive and visually striking brand identity that ultimately complimented PARK™ Production House’s work more than anything else.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2F43074572-2ad3-4237-80c8-70b35546853e.jpg?alt=media&token=7e05d3cb-5d7b-4465-bb09-9641885c06bd","id":"43074572-2ad3-4237-80c8-70b35546853e","width":2160,"height":1440,"filename":"park-mockup-00006.jpg","type":"image/jpeg","caption":"","border":true}]}
```

We typeset the brand with [GT Walsheim](https://www.grillitype.com/typeface/gt-walsheim) and [GT Sectra Fine](https://www.grillitype.com/typeface/gt-sectra) by [Grilli Type](https://www.grillitype.com/) - one of our favourite independent type foundries.

### Finding similarities

While the typefaces have plenty different with them, we chose them for their similar x-heights and character widths.

### Exaggerating differences

The weight of the two typefaces is a major contrasting quality which is meant to draw further differentiation between the fonts.

---

## A website designed to compliment

We designed the website to compliment the work of PARK™ Production House by creating a simple and clean layout that puts the focus on the production house's portfolio. The website's minimalist design allows the stunning visuals and impressive work of PARK™ Production House to take centre stage, making it easy for visitors to appreciate and engage with the production house's offerings.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2F3eb370be-7651-410c-83cb-28da484a2901.mp4?alt=media&token=abad3d11-41ac-45e0-bf57-b8f04fa92555","id":"3eb370be-7651-410c-83cb-28da484a2901","width":2160,"height":1440,"filename":"park-mockup-00002.mp4","type":"video/mp4","caption":"","border":false}]}
```

### Transitions

Pages fluidly transition from one to another with minimal animation in keeping with the understated brand aesthetic.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2Ff8695b3c-ecb4-4b03-8598-feb7fe96cc21.mp4?alt=media&token=b87d9dbd-a586-42fb-ad33-7177f965827e","id":"f8695b3c-ecb4-4b03-8598-feb7fe96cc21","width":1762,"height":1174,"filename":"park-mockup-00003-small.mp4","type":"video/mp4","caption":"","border":false}]}
```

### Staggered masonry

The homepage functions as a gallery of projects organized in a “masonry” pattern. We offset each column on scroll for effect.

### Maximizing photography

We oriented project pages horizontally to maximize the impact of each image. This meant swapping the orientation of the scroll on project pages. To further this effect, we had projects load continuously, allowing visitors to effectively scroll between projects infinitely.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2F65290dbc-e8c1-4b06-a758-7c8379773aed.mp4?alt=media&token=2845ba9b-e689-456c-9ac4-76dfc083bf20","id":"65290dbc-e8c1-4b06-a758-7c8379773aed","width":1762,"height":1174,"filename":"park-mockup-00005-small.mp4","type":"video/mp4","caption":"","border":false}]}
```

We pushed ourselves to make every moment memorable while strikingly simple as wanted the website to increase the effect of the photography, not draw away from it.

### Headless CMS

We introduced [Prismic.io](https://prismic.io/) for content management, decoupling the content and its structure from the requirements of the front-end code.

### Responsive

Of course, the website is friendly on mobile devices and small screens. We flip projects into a vertical orientation, but retain the transitions and column scroll offsets.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2F6826efdb-ba4c-4f7c-a9ec-5a926bea5d9b.mp4?alt=media&token=93276aa6-3062-4618-acf4-7a4e94d1baf4","id":"6826efdb-ba4c-4f7c-a9ec-5a926bea5d9b","width":2160,"height":1440,"filename":"park-mockup-00004.mp4","type":"video/mp4","caption":"","border":false}]}
```

---

## Multi-platform consistency

Does it work on social? It has to. The grid effect, photo-forward visuals lend themselves to Instagram and other platforms.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUvGV77RjZ59Ld4oPVHRp%2F88f5c6da-e476-41c1-97bc-bea06085a813.jpg?alt=media&token=16dcc217-a46e-4a96-bfc6-f2a7f034e4d1","id":"88f5c6da-e476-41c1-97bc-bea06085a813","width":2160,"height":1440,"filename":"park-mockup-00007.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Creating a subtle yet recognizable brand

Our team at [Built by Field](https://builtbyfield.com/) were engaged by the University of Calgary to help communicate the opportunity to potential donors and Calgary’s business community.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2Ff775fc2f-1edc-45b2-9ab3-d6bd4e14bc20.mp4?alt=media&token=1e114382-473d-46ff-8dc2-8bc1cf2db68c","id":"f775fc2f-1edc-45b2-9ab3-d6bd4e14bc20","width":2160,"height":1440,"filename":"uceed-mockup-00001.mp4","type":"video/mp4","caption":"","border":false}]}
```

Supporting a culture of innovation, UCeed is a series of investment funds spun out of the University of Calgary’s long history as a hub for innovation and entrepreneurship. Backed by philanthropic organizations and individuals, UCeed’s funds give innovative startups and inventors access to capital, equipment, and advisement.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2Fa77340ed-1000-4e1f-958a-cc252acca165.mp4?alt=media&token=616712b9-c815-48ff-9661-b441fdb1fb49","id":"a77340ed-1000-4e1f-958a-cc252acca165","width":2160,"height":1440,"filename":"uceed-mockup-00002.mp4","type":"video/mp4","caption":"","border":false}]}
```

## Shaping the story

We outlined the journey that people take to learn about UCeed when working directly in conversation with an advocate. Through consultation we divided that into sections and chapters to fit into a narrative online. We then used this to guide content and design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2F187b750a-c14c-4058-a41a-b13242c7380a.png?alt=media&token=0dc314ff-74f6-4241-b699-1adfb33310b4","id":"187b750a-c14c-4058-a41a-b13242c7380a","width":1920,"height":1177,"filename":"Untitled.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2F2379e04f-cadd-4576-a157-857fd38c5df8.jpg?alt=media&token=4c055054-ff04-4748-8652-789283303901","id":"2379e04f-cadd-4576-a157-857fd38c5df8","width":1920,"height":1536,"filename":"05 Storyboards - 1 (Page 19).jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2Fc57a2098-38bb-4592-bfdc-5c1248d629b1.jpg?alt=media&token=c2594c7b-4e6e-48d9-9eeb-a23c8badec8b","id":"c57a2098-38bb-4592-bfdc-5c1248d629b1","width":1920,"height":1536,"filename":"05 Storyboards - 1 (Page 19)-1.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## A refined brand

The UCeed brand was new and only marginally defined with a colour palette, some illustrations, and a requirement for hexagons, like a honeycomb.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2Ff7088159-b8e5-4f52-b5ab-dda9fa249edd.mp4?alt=media&token=0ca7dcf0-cc3a-4234-a6c3-343202855cee","id":"f7088159-b8e5-4f52-b5ab-dda9fa249edd","width":2160,"height":1440,"filename":"uceed-mockup-00003.mp4","type":"video/mp4","caption":"","border":false}]}
```

We needed to establish consistency and knew that text should always use the University of Calgary’s two primary typefaces: Proxima Nova and Museo Slab. We wanted to use as few text styles as possible, so to we predefined those upfront based on a modular scale.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTZuTuAYSeZWJuO7uBtgJpvodSej2%2FUzY0y1bWfVDqcZntJtVk%2F44b334fa-4d85-4c5f-9957-78116d3fe85f.png?alt=media&token=86b20d03-4241-4830-a98d-0cefabd9a60b","id":"44b334fa-4d85-4c5f-9957-78116d3fe85f","width":4860,"height":3240,"filename":"uceed-type.png","type":"image/png","caption":"","border":false}]}
```

Designing for a culture of innovation

Looking for projects to fill our agency's books this year!

Designer & Developer

Received a Minor Degree in Art History, led student clubs, and was heavily involved in the Institute for Innovation and Entrepreneurship's specialized programs.

At Built by Field, we created a subtle brand and fully editable website that compliment the imagery of the client’s high quality production work.

Website

At Built by Field, we developed a messaging platform led through workshops and brought that to life with a refined brand aesthetic and website.

Jesse McLean

Work Experience

Projects

Education

Contact

Teams