SerenoNewYearParty Screen Cap 1

I have another Hype* creation to share. This project was a party invitation where I had the simple task of getting the attendees information about when and where, as well as collect RSVPs from everyone. Click here to see full site.

Firstly, I chose a photo from the Sharon Heights website that I found to be rather appealing (I’m always attracted to the evening/dusk color palette). It also complemented the company’s branding with the warm ochre hues and dark green lawn. Even the blue of the sky was pretty close to the blue that’s in the branding guidelines, and since this was a January party, I thought that it’s cool tones would work best as the main body color.

I wanted the most important info to be prominent: Title, Date, and Time followed in importance by the Location/Directions, then the body text adding description to the event. I wanted it to be easy for visitors to understand where to go to rsvp, add the event to their calendar, and also the option to stay at a nearby hotel that had reserved a block of rooms, so those 3 call-to-actions I made look like buttons in the bottom right of the page.

CalPopUp

While clicking the “Calendar” button would float up 3 options for downloading the event to their calendar of choice (Outlook, Google, and iCal), and the “Stay” button would open in a new tab the custom website that the hotel put together for the attendees to reserve rooms, clicking the “RSVP” button would take the visitor to a second page that has an embedded google form (minimally styled), that they could submit their RSVP. Additionally, clicking on the map image would also take the visitor to the google maps page with proper instructions leading them to the site from their current location.

SerenoNewYearParty Screen Cap 2

The thing that people really loved though, was the snowflakes. This took a little trial and error to get right. Initially I had created the graphic for the static poster image that would go up in the offices, so when it came time to translate to a motion graphic, I had to deconstruct the pattern so that it flowed as an animation.

Snowflakes_Static

This is the base pattern I created on the static image

In order to convert this image into a flowing, seamless pattern, I set up 3 layers of animations: slow, medium, and fast. Pulling apart the original pattern, for the slow animation, the I made a relatively compact version of the design that was only slightly taller than the height of the canvas. Medium was a looser pattern, and approximately 1.5 the height of the canvas. Fast was much looser and about 2x the height.

Snowflakes_How

When pulling those images into Hype, I stacked them on top of each other, and placed their starting and ending points so their bottoms were more or less aligned. Giving them 10 seconds to float down, I left them to be more or less aligned by their top boundaries (after getting them generally aligned this way, I did have to tweak the positioning a bit so that the pattern for each was seamless on the repeat).  Because of the different heights of the original images (which, btw, are transparent pngs), setting them to the same time, the appearance of some snow falling faster than others is achieved.

snow transitions 2

Issues

So the only problem I had with the project was with the embedded google form. Most people were able to submit their RSVP directly on the site, but a few people who used the site on their mobile device were unable to scroll down to click submit. I inserted a work-around by making the rsvp button on the second page a direct link to the proper google form (non-embedded, which google has clearly made mobile friendly), but it was a hack and I would obviously not let that be an issue if I did this again. There is probably a javascript behavior I could implement that would make the form more accessible on mobile, but the easier and simpler option would be to have the form not fall into an iframe – just have the dimension of the original canvas be large enough to hold the form without needing to scroll. Another testament to how important testing on mobile is when designing anything for web nowadays. 

* Just a reminder to anyone who doesn’t know, Hype is basically the HTML5 equivalent to Flash, therefore, the site/animations are visible on iOS devices.