Townhouse Landscaping Proposal Web App

Final project by Lara Lee for the course “Advanced
JavaScript” (CMST 488) at the University of Maryland.

Background

I presented this web app for the course “Advanced JavaScript” (CMST 488) at UMUC. 

My roommate and I rent a 1,120 sqft. townhouse in Waldorf, Maryland. The townhouse was built in 1983 and purchased by the landlord in 2005. As per a verbal arrangement with the landlord, the renters must maintain and perform minor DIY upgrades to the rental property in preparation for final sale after said renters complete the lease.

The renters wish to develop a web app discussing modest landscaping plans for the townhouse front yard and back yard. The web app must do more than simply portray landscape design illustrations; it should be a stand-alone item containing all the requirements of a request.

My Role

Web Designer
Front-End Web Developer
(HTML, CSS, jQuery)

Agency

College Final

Site map infographic.
A content map, one kind of web design deliverable, is useful for planning information hierarchy design and site maps (or sitemaps). A content map might look like this one I made for the Townhouse Landscape Proposal Web App.

Lay of the Land: JavaScript Challenges

An essential component of this web app project is interactivity. Interactive features allow the landlord to immerse herself in the experience and provide immediate feedback on financial costs.

The scope of this web app project includes a hand-coded web app using front-end web development languages HTML, CSS, and the JavaScript library, jQuery. jQuery will address issues such as:

  • Mouse Event Responses
  • DOM Manipulation
  • Mathematical Calculations
  • String Manipulation
  • Data Validation
  • Asynchronous Loading
Animation illustrating the interactive landscape builder app.
Style tile for the web design including primary palette and mocked-up UI buttons.
Organic symbols illustrated for the plant materials.
Texture and pattern swatches.
Inorganic symbols illustrated for the man-made parts like the house and nearby equipment.

Custom Illustration

Since the web app focuses on a particular townhouse property, the graphics must be uniquely tailored.

I drew custom vector illustrations to capture the unique landscapes. Symbols are detailed enough to identify an object, but generic enough for the audience to embellish with her own visions.

Measurements from before are retained with proper to-scale proportions but the distracting lines and numbers are gone.

These graphics will compose the layers of materials needed to illustrate cost calculations of various landscape materials.

Case Study: Townhouse Landscape Web App. Before and after screenshots of the web design layout for the yard planner and calculator web page.

Responsive Web Design

Some layouts changed during the development phase.

For example, testing the yard designer page revealed the buttons and calculator weren’t accessible when positioned beneath the map unless the map was small — yet a small map reduces landscape details.

In the end, the calculator buttons moved beside the image so both are accessible and discernible at the same time. 

Responsive web design is easier to accomplish in websites due to their modern-day technologies, but it’s not impossible to create responsive emails either. Check out my mobile-friendly emails for Smile Team!

Animation illustrating the parallax mouse-over effect on the Townhouse Landscape Web App.
Visit the Live App