Potential layout for brief history page

Potential layout for brief history page

Main directory of lawn stories; hovering reveals names that are clickable links to detailed story. 

Main directory of lawn stories; hovering reveals names that are clickable links to detailed story. 

Layout sketch of detail page—sidebars will be fixed and middle content will be scrollable. 

Layout sketch of detail page—sidebars will be fixed and middle content will be scrollable. 


Comments from small group critique: 

Make neighborhood illustration messier and less perfect as this will put more realism into the project and better reflect the stories being told. It is missing the 'boundary lines' between neighbors lawns. 

Ditch the initial screens with brief history—neighborhood directory is a more compelling landing-page; instructions will be intuitive. Instead, embed the history into the houses along with the stories. 

To differentiate the content linked to this house, develop an icon or symbol system to inform the user of the destination. 

Include an 'about' page to inform users about the project's goals + disclaimer that the neighborhood depicted isn't real and is just an overall fictitious collage that contains real stories. 

Look toward video game map design styles (how different worlds are depicted close together)—how might you incorporate different time periods in the same neighborhood? Look at fading the illustration into different styles, colors, etc. to represent the shift. (It is more compelling all on one page.) 

Remember humor as an overall theme for the project -- it is what makes lawns so interesting! 




Below I've included some images of my process on the visuals of the project. I started with wireframes from my sketches, looking at both side panel and floating panel options. At first, I imagined having a timeline that users are able to scroll through, but I have since included the option of a main 'menu' where users select which neighborhood they want to explore. More navigation buttons would be available inside the neighborhood view. 

Wireframe - Open Panel with Audio Copy 2.png
Wireframe - Open Panel with Audio Copy.png
Wireframe - Open Panel with Audio.png
Wireframe - Open Panel with Images.png
Timeline .png
S1 - Home.png
Screenshot 2017-10-31 13.39.56.png
Screenshot 2017-11-07 15.10.38.png

I originally tried an isometric style illustration, but my professor commented that this view points more emphasis on the style of the houses than the lawns, so I went back to an aerial view for the next couple of iterations. 

Screenshot 2017-11-14 16.37.01.png
Screenshot 2017-11-15 10.56.51.png
Screenshot 2017-11-22 17.36.25.png
Timeline  Copy 3.png
Timeline  Copy 5.png
Timeline  Copy 6.png
Timeline  Copy 4.png
Timeline  Copy 7.png


Today I looked at the visual language used by landscape architects and urban planners — these could be good references for the illustrations in my site:



Thumbnail time! I'm planning to utilize some non-traditional techniques -- working on these thumbnails and pushing myself to make a lot has really opened up some new ideas. I've also been looking at other experimental sites to see what's even possible and what techniques I might adapt to work with my site topic. 


Proposal Final Draft


Lawn Stories will be an interactive, experimental website that presents an object-study of a seemingly banal landscape: the American front lawn. The project will connect an overview of the lawn’s history to personal accounts of midwestern lawn-owners; ultimately, Lawn Stories will address the negative effects of lawns on our social and natural environments.  


Aerial view of my neighborhood.

Aerial view of my neighborhood.

Growing up in suburban Michigan, lawns were a significant feature of my habitat: I spent my childhood sprinting through sprinklers and squishing my toes in the thick carpet of waterlogged grass. But as my midwestern summers grow longer and hotter, as droughts plague the west, and as hurricanes rattle the southern coast, I must look critically at this landscape that has become the default. Lawn Stories will combine interactive medias to form a comprehensive argument against the continued proliferation of lawns. Michael Pollan’s 1989 essay, “Why Mow? The Case Against Lawns,” takes a similarly critical stance against this landscape, yet nearly thirty years later, trees near my house are still being cut in large swaths to build new subdivisions—each fronted with large, lush, green lawns. The data is more staggering today: in his book, American Green: The Obsessive Quest for the Perfect Lawn, Ted Steinberg claims that in the U.S., lawn maintenance kills seven million birds each year, spills seventeen million gallons of gasoline each summer, and everyday, tracks chemicals into the home which enable chronic exposure to toxins. Lawn Stories will bring research on the effects of lawns to the web, where it will be more accessible to read and more interesting to interact with.

Lawn Stories will not be a method to shame or blame lawn-owners, but rather, it will be an invitation to do better—to open a dialogue on the next steps of landscape design in the age of climate change and resource conservation. The primary audience of Lawn Stories is midwestern suburbanites, particularly young, new home-buyers; this project will bring the critiques of lawns to those who live in areas where impacts of rising sea levels and water shortages have not quite reached. Lawn Stories is of personal importance to me because, in addition to gaining practical experience designing content for digital platforms, the larger goal is to safeguard my home for future generations.

Lawn Stories will be an experimental web page that uses non-traditional techniques of navigation and scrolling to display information. The site will contain a 1,000-2,000 word essay accompanied by various visual and auditory medias: charts, graphs, maps, photographs, illustrations, animations, sound clips, and videos. The essay itself will outline the history of lawns in the United States, ending with our current time. It will then move to challenge the necessity of lawns in a future where responsible resource use will be necessary. Intermixed throughout this larger context, individual accounts will aid the storytelling—personal interviews with midwestern suburbanites will aim to capture the culture of lawn-ownership first-hand. For the exhibition, Lawn Stories will be displayed on a large desktop monitor set on a floating shelf against the wall. Behind the screen, artificial turf will cover the wall in a rectangle as wide as the shelf. Lighting will be bright and even, preventing reflections on the screen and preventing a glowing screen effect. Users can use a mouse or trackpad to scroll through the site, which will be displayed in fullscreen with the browser toolbar hidden. Headphones or directional speakers allow viewers to engage with the videos and audio clips.


From Andrew: 

There's a patch of grass across the street from my house, and I'm not really sure who owns it... But last year when people were moving out, someone left a rug there because they were too pabst to throw it away. Over the course of move in this year, people have just piled tons of furniture there, i assume only because they don't want to deal with it. It's pretty disgusting.


Exhibition design sketch 

Exhibition design sketch 



It is a sunday morning in the summer. It is kind of sticky with humidity and I know I’ve slept in too late because my room is bright and my blinds are making lines on the carpet and I’m already hot. And you can tell it’s sunday because of the buzz — the hum and crackle and spitz of the lawn mower. Dad is mowing the lawn. It’s not that he does it every Sunday but if he’s doing it—it’s definitely Sunday. He’s in the backyard now, which means he’s already gone over the front and if I peer out the front window I could spy the tell-tale stripes that kind of curve around our flowerbed. Our backyard is big enough that I get a sort of slow doppler effect from his pacing. And so I lay in bed and listen until finally, some time later, the motor cuts and it is silent again but for the birds in the tree outside my window.



A peak inside my sketchbook...


Inspiration + Research


I came across this drawing by architect by Josef Frank. It is a concept for a Town for 2000 Families, c. 1950. I've been really digging aerial perspectives lately, and I really like how this one is slightly forward to give the buildings some definition (as opposed to straight down). 

100 Years of Architecture Drawings 

100 Years of Architecture Drawings 

Some other illustrations I've found to be interesting thinking about this project:



I also have been looking more at websites. Here are a few that especially caught my eye as being helpful. I've even been peeking at code a bit to see how they organized them.

Screenshot 2017-10-02 09.38.35.png
Screenshot 2017-10-02 09.39.18.png

Remember Spook

This is way more intensive than I could ever dream of building, but it is so beautiful. I really loved the inclusion of sound as well -- it made it an experience. The interactions are stunning too. 

Screenshot 2017-10-02 09.32.56.png
Screenshot 2017-10-02 09.33.20.png

Junko's Story: Surviving Hiroshima

One thing I really like about this site is how it includes illustration and photography well. The infographics are also illustrated in way that pulls all the information together into a cohesive visual language -- which really aids the storytelling. 

Screenshot 2017-10-02 09.33.58.png
Screenshot 2017-10-02 09.34.17.png


And of course, news always does longform the best. Really simple structure that seems logical and intuitive. This page had a nice interjection of graphics, video, and titles that flowed naturally. The sidebar on the left has a progress indicator that is subtle but really nice. 

Google Earth

I also started exploring Google Earth a little to see what I could spy from up there. I snagged this photo from the golf course.  




(From Franc and Lian!) 



Week 4 (maybe? Already lost count.)


I have been busy gathering more info on lawns, messily sketching, fiddling with javascript, and hopefully gaining inches toward my goal with this project. 

I have been splitting my weeks in half (researching lawns during the first half, web design during the second half), but already this has proved futile: new discoveries on the web design front sent me into a javascript bender that *stole* hours! All is well, though, because I learned a lot.

I've set up a sort of 'test' page to practice the type of code I want to use for the site. I've been starting off with the things I know I will need to include, such as a 'scroll to the top' button, a credit page, and some sort of 'landing page' that introduces the project. 


Giving myself some elements to mess with in the code!

Giving myself some elements to mess with in the code!

I really just wanted some elements to start playing around with the code. I'm definitely not locking in any design choices at this early in the game! (However, I really like the way the illustration peels off the page.)

Screenshot 2017-10-01 19.43.08.png

I also worked on some type studies! Even though I don't have all the content written yet, I know the kind of feeling I want this project to have and tried to think a little out of the box and look at some fresh typefaces that I've never used before. (I wasn't all that successful as you can clearly see Caslon is still on there.)

Screenshot 2017-09-26 15.52.44.png

I went from not knowing what javascript was exactly to being able to implement a variety of javascript plugins with my own content in like a week sooooOOo (I was impressed with myself). I got a little lawn mower to scroll horizontally as I scroll vertically, I got a cloud to hover, and I successfully added a 'scroll to the top' button. 

You can't really see it here but the cloud is slightly floating. 

You can't really see it here but the cloud is slightly floating. 

Sketching some animations...


I felt the urge to get going on the making -- I know somewhere, somehow, there will be a lawn mower graphic on my site. I thought it would make a good transition, could reveal text, etc.? I went in and mocked one up and bonus, I got it to move across the screen when you scroll! A small victory! 





moving in + library trip


These books I got from the library all look fantastic -- so excited to get into them! Also moved some of my art supplies up here.


Looking slightly more occupied. Just barely though. 


We got our studios!

11B will be my home away from home for the next two semesters -- wohoo!


Initial Proposal

My project will be a long-form, experimental website that explores the American front lawn from its origins to the present day to the future.

Read More