Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
58 lines (47 sloc) 2.42 KB
title layout theme category option tags updated drafted period unique_id description project image_index image
Field Notes
edgeless
light
projects
minor
design
photography
typography
web
2017-04-27 19:25
2017-02-14 16:53
2016-11 to present
2016-12-14:jeanandoliver
A travel and photography archiving collaboration.
2017-02-14-jeanandoliver-index-crop.jpg
src alt
2017-02-14-jeanandoliver-index-crop.jpg
A sample photographic grid from the Field Notes site
src alt caption
2017-04-27-fieldnotes-type.jpg
Typographic and layout sample from Jean and Oliver
Body text underneath a photo grid from [an inner page](https://jeanandoliver.space/2016/cabin/).
src alt caption
2017-04-27-fieldnotes-mthunger-grid.jpg
An asymmetric grid of photos.
A fluid grid layout from [one of the photo collections](https://jeanandoliver.space/2016/mount-hunger-peak/).
src alt caption
2017-04-27-fieldnotes-home.jpg
The home page for Field Notes
The home page of the Field Notes site features a logotype set in the typeface [Acumin](https://acumin.typekit.com).

“Field Notes by Jean and Oliver” is an experiment in photography and storytelling by me and Jean Flanagan. The first iteration of it collected photos from our fall 2016 trip and wedding in Vermont. The early 2017 iteration now features an index page with collections of photographs, and a reworked color scheme.

This project was implemented using [fluid typography]({% post_url 2017-02-01-fluid-typography %}) and [fluid grids]({% post_url 2017-01-30-fluid-grid %}), two techniques of responsive web design.

{% assign image = page.image[1] %} {% include block/image.html class="image--wide screenshot" %}

The site’s design is based on a slightly asymmetric layout. Images are laid out in a [masonry-like grid]({% post_url 2017-01-30-fluid-grid %}), with images fitting together precisely with thin gutters.

{% assign image = page.image[2] %} {% include block/image.html class="image--wide screenshot" %}

{% assign image = page.image[3] %} {% include block/image.html class="image--wide screenshot" %}


Further reading

{% include block/project--satellite.html id="2017-02-01:fluid-typography" %}

{% include block/project--satellite.html id="2017-01-30:fluid-grid" %}