WooCamp 2014 Invite – Parallax Website

Design, Illustration, Invitations, New Piece, Web Design

WooCamp2014 Header w Background

I did it! I’ve made a parallax site. For anyone who hasn’t noticed, parallax has exploded in the last year (or less?). It is such a wonderful way to create layers, animation, and add a sense of depth to a web experience. I have just barely touched the tip of the iceberg with what I’ve created here – the potential to add even more transitions and animations to a parallax site are boundless.

I was excited to experiment with this new technology with my long-standing client, that being the annual WooCamp invite. I’ve created 4 of them so far, alternating between print and web based invites. The event lends itself to themes of adventure, exploration, wilderness, and camaraderie, and this year, inspired also by my client’s recent trips to Antarctica, Patagonia, Everest, K2 (the list goes on), I settled on “Victorian Adventurer” for the invite’s theme. (Previous incarnations have been National Parks, Wild West, and something akin to Summer Camp).

I started with some fancy Victorian lettering, pulling inspiration from a Pinterest board I created that is full of Victorian/Explorer images. I also not-so-secretly admire Jessica Hische and all her beautiful lettering projects, and wanted to take a stab at one myself, and this seemed like the perfect opportunity. I also created a “ticket” that could be used for email, directing invitees to the website, which was another Victorian travel inspired piece.

Web

In addition to some fun side graphics I created that illustrated the events of the weekend, I had to include in there somewhere an homage to the phrase, “Livingstone, I presume.” I mean, I had to.

Portrait Template

My first iteration of the Livingstone portrait – I took my client’s face and photoshopped it into a portrait of Henry Morgan. I thought initially I might be able to make little Livingstone-esque portraits for all the attendees as part of their invitation, but realized I simply didn’t have enough time to do that.

Drawing inspiration once again from my Victorian source material, I wanted to include images or maps of the area. The beautiful botanical drawings that came from that era have such a wonderful tone and saturation about them that I wanted to emulate. Tempted initially to bust out water colors and paint up some background images, I instead came across a wealth of photos I had taken while I was at WooCamp one year. Taken when the sun was setting, the colors were ripe and with a few tweaks and filters I feel like I captured the essence of the place, while also playing along with the theme I had established, and created images that had a painted quality about them.

So the background parallax effect I borrowed the general look from this site tutorial. But I really wanted the background images to move slightly, so had to add that code in. Additionally, I wanted to include some more graphics that could tie into the “what to do/what to bring” section, so created another animation speed for those objects so they would appear to “fly up” the screen at a faster rate than the regular scroll. Kind of like how things scroll up the sides of a Pixar animations credits.

WooCamp2014-Screen-Cap

Here’s a little animated gif of the animation speeds. Probably better to just look at the site though, so you can scroll at your own pace (here’s the site).

The potatoes are my favorite.

New Year’s Party Invite Website

Design, Invitations, New Piece, Uncategorized, Web Design

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.

Cookie Party Invite

Cards, Design, Invitations, New Piece, Web Design

CookieParty1

I hosted a cookie party last weekend and made this little interactive website invitation for it. Using Hype again, I made it in 5 “scenes” – an intro (be sure you let the whisk spin!), the invite text, “how it works”, “when and where” with links to add the event to your calendar and directions via google maps, suggestions about what kind of cookie to make (just ideas because I wanted to draw cookies and that seemed like a good excuse), and then the RSVP which if you click the oven mitt, it will email me saying that you’re coming, plus links to the shared google form (don’t want any duplicates), and another source for recipe inspiration.

CookieParty2

I kept the animations to a minimum, but wanted to include a couple hover states like quick twists and little speech bubbles, and also did a roll over using a shape that was transparent. Just playing with some of the fun little features of HMTL5 that add a little extra character to something that might not otherwise have that splash.

ifAnyone Landing Page

New Piece

ifAnyone_Landing

I recently worked on a project for an entrepreneur who has a few apps out there, but the most recent one is called ifAnyone. It’s a Facebook app that you can program to search through your news feed for keywords you find relevant, so that in case your stream is too much to keep up with, you won’t miss anything that you might actually be interested in. It’s a clever way to sort through the onslaught of Facebook data out there.

My charge was to help him set up a landing page that would quickly describe the program and link directly to the in-Facebook app. He asked for “friendly and professional” and after a few ideas back and forth, the final result ended up having bright cartoon elements, both with little Facebook cartoon avatars and the star blast background, while still holding up a straight-forward, easy to read layout. I had fun creating the little characters (always nice to get in a little illustration where you can). I also had fun with the mock names, which I was glad my client was on board to play around with.

I also made business cards utilizing most of the graphic elements of the landing page for a cohesive branding.

Agency + Landing Page

New Piece

I recently completed a project that was an animated landing page that I made using Hype. If I haven’t mentioned this program (cough, ahem, I mean App) before, now is as good a time as any. A good friend of mine designed this software to make creating HTML 5 content designer friendly. Sure, not many designers can go into the world nowadays without knowing a little code, but Hype helps not only level the playing field, but also lets designers do what they do best: Design (not code).

So HTML 5 is another medium for animating web pages in the vein of Flash, but utilizing different technologies and using inherent browser capabilities, not plug-ins to function. Yeah, I’m definitely on the band wagon for this new era of rich web content using HTML 5. It’s an exciting time to be experimenting with new technologies and tools.

So saying, I worked as a contractor for another agency (in Belgium, btw; love how small the world is these days) to create this landing page. They were hoping to use a lot of effects, probably to help show off the capabilities of HTML 5, while still maintaining as much cross browser compatibility as possible. Initial designs also utilized google web fonts, which I thought was cool we could do using Hype, but in the end, switched back to a standard web safe font, as it opened up a few more animation options. The techniques I used are opacity changes, movement along paths, rotations, and letter spacing and size changes.

Arch Bay Area Construction Website

New Piece
ArchBayAreaHome

Home Page, ArchBayArea.com

I have been working on a website design for a client who runs a construction business out of Los Gatos. They just needed a real simple to navigate, easily accessible site to showcase some of their work and access their contact info. Basically, in this world and this time, you just need a website if you run a business, because somebody’s going to ask to see it.

OldVersionHome

ArchBayArea.com, home page mock up, 1st draft

Originally the site design was very monotone, using the image of a blueprint that I scanned as the background and footer. The client requested I bump up the color a bit more, and gave me a few samples of sites he liked, so I played around with the idea of it being a work bench for a background and put in a variety of construction elements to frame the page. I do actually like it much more, so am glad he suggested the change.

In an ideal world, the photography they provided me would have been a slightly higher calibre, but I did try to do the best with what I got. It was interesting seeing their take on what qualified as a “good” picture. Initially they gave me a handful of  printed photos to then scan in and “enhance,” which again, I did my best. But after some review of the photos, their critiques fell more on the subject matter of the images (did it show the detail of their millwork, or the custom tile of the marble bath?) and nothing at all to do with the quality of the photo itself. For some reason this sounds like it should be a big duh, as the subject matter should be the point of the photo, but I’ve been pretty well trained to accept stylized (artistic?) images as truth, and therefore find photos that are lacking in photographic aesthetic (ie, poorly composed or lit) to distract me from their documentary purpose. These guys didn’t have that filter, and were interested solely in capturing the art of their work, not the art of documenting it. <tirade> I guess I have to say that I appreciate it when photography plays a valuable role in marketing, and is not just lowered to a basic tool of communication.</tirade>

OldVersionPortfolio

ArchBayArea.com, portfolio page mock up, 1st draft

With these photos, I created my first portfolio page layout, but it was kind of sloppy trying to fit all the photos from each project into a series. I realized after getting to project C that this layout was going to cause problems with the trigger and target slideshow option, as you would have to scroll down to click the next image, and scroll back up to view it. It helped also that they decided to cut a number of the images from each project, making it only about 1-2 images from each, and to split their work into two camps: residential and commercial. This gave me the opportunity to create two pages of images, and instead of a trigger and target arrangement, I just created a slideshow with minimal captions and prev-next buttons. The slideshow also moves along without prompt, so you can casual view the images in an automated sequence. This made the site more compact, eliminating the need to scroll.

ArchBayAreaPortfolio

ArchBayArea.com, portfolio page

Other than that, I played with a few font options and layouts, but didn’t stray too far from my initial 3 page website plan. It does feel good to knock a project off your to-do list though.