Description, Goal & Audience
For this project, I’ll be creating a website about a topic that is personally very important to me — the story of my girlfriend and me! Before you throw up, let me explain! This website will have a functional purpose too. I’m planning on proposing to my girlfriend soon, and assuming all goes well, the website will be a way to announce our wedding to family and friends, as well as to serve as a history of our time together for anyone who wants to read about it. The goal, then, is for the website to be a record of our relationship and an announcement for (fingers-crossed!) our wedding. The intended audience will be ourselves (my girlfriend and me) and our friends and family — especially those who might not know as much about our relationship together.
Inspiration
A website like this has been on my mind ever since I came across this website called Jess and Russ, which is an amazing parallax site that tells the story of another couple and ends with a link to RSVP for the wedding. I really love the aesthetic, the flow, and the original artwork — it makes the story very engaging for anyone using the website, even for someone like me who isn’t personally connected with the couple in real life.
I’ve also found some other great wedding announcement websites, like this one. Although they don’t have as much of a focus on their story (which will be the primary focus of mine), my favorite parts of this website are their simple but effective graphics and cohesive color scheme.
Visual Design
Overall, I want the design of the website to feature a combination of real photos of us and vector images, with a timeline format (scrolling farther down the page takes you farther along our journey). While I’m going to have consistency in the presentation of content to a reasonable extent (ie. consistent fonts, patterns, sizes), I want to use color and effects in different ways throughout the scrolling experience, depending on the current section of the page. I’m excited to dive into different JavaScript libraries so that I can explore new ways to make this website interactive. I don’t want the user to feel as though they are just scrolling down the page; I want them to feel as though they are dynamically discovering the next events and interacting with the animations.
Libraries or APIs
While I’m not entirely sure which APIs or libraries I’ll use yet, I’ve found a few that I think could add to my site, making it more engaging and interactive. I’m leaning toward primarily using libraries over APIs, since I won’t be importing large amounts of data or anything into my site. Plus, there are a lot of JavaScript libraries with cool effects that I want to play around with.
Vivus
This library allows you to quickly animate SVGs to make them appear as though they are being drawn on the page. As I understand it, the library features multiple built-in animations, or you can customize your own for complete control. This library seems useful to me because I really enjoy working with SVGs and plan on using some for the graphics on my site.
Scroll Reveal
This one animates content as the user scrolls up and down the page. I think it could be especially useful because it breaks up content into bite-sized pieces for the user and makes it less overwhelming. If the storytelling component of my site is one long scroll-view, a library like this could definitely come in handy.
Scroll Magic
Another scrolling-related library, Scroll Magic provides lots of scrolling interactions that allows for animating elements, pinning elements, toggling CSS classes, and adding parallax effects, all based on scroll position. There seems to be a ton of functionality to this one and I want to explore it more.
Content or Sources
Luckily, all of the content for this website is going to come from my memory and my computer (in the form of my journal and photos), as opposed to external sources. Similar to the Jess and Russ website referenced above, I plan on storytelling using various milestones in our lives that have impacted our journey together. For these, I plan on going back through my past journal entries to remember important moments that we’ve been through together. I also have a repository of photos from our adventures together that I want to integrate into the website, to give viewers a better idea of our lives. I also really like how the Jess and Russ site includes different perspectives from each person. To achieve this in my own site, I’ll need to use my girlfriend as a source of content too!
nate bennett 