Jamie & Adam’s Wedding

Web Design, Print Design, & Font Design

Planning a wedding can be stressful in it’s own right, but designing a wedding while planning it is stress to a whole ‘nother level.

Visit jamie-and-adam.com

My process for designing our wedding began by developing a visual language for the look and feel of our wedding’s brand. Working with my fiance, we viewed many wedding websites for inspiration. We looked at the general design of these sites as well as wedding photos.

From there, we wrote out a number of descriptors to figure out how we wanted our wedding to feel. We thought our wedding should be:

  • Fun
  • Relaxing
  • Family Friendly
  • Crafty
  • Homemade

My main goal was to bring our personal character to the forefront. When developing a brand, I typically begin by gathering my inspiration materials and developing a mood board. This allows me to see all of my inspiration in one place and begin testing out which fonts, colors, and photography styles work with the mood I am designing to portray.

View the wedding programs.

Once I established my colors and fonts, I then went on to design the wedding logo. I started sketching the wedding lettering on paper and after getting the sketch cleaned up in Adobe Illustrator I then adapted the logo to a font face, something I have never done before. Using that font face I created our RSVP cards and print invitations.

With the print materials out of the way, I began work on the wedding website. For every new personal project I embark upon, I like to learn at least one new skill or technique. For this project that new skill was basic SVG animation. Not only do SVG’s take up less space than a traditional .jpg, .png, or .gif, these file types are much easier to manipulate. After some research, I decided to use vivus. Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, allowing me to create stroke drawing animation without much javascript.

These SVG animations work across browsers and on most mobile devices (I implemented a static .png backup for incompatible browsers). I was extremely happy with the way these animations turned out, I feel they really give a lot of life to the page.

With the help of my fiancee, we were able to able to pull everything together in time for our big day. Not only did our guests appreciate the unified look and feel of our wedding but I learned a number of new skills along the way.

Visit Jamie-and-Adam.com

Deliverables


  • Design Logo
  • Design website and brand
  • Design Print Materials
    • Save the Date Cards
    • RSVP Cards
    • Wedding Programs
    • Table settings
    • Lawn Games

Skills Used


  • Logo Design
  • Font Design
  • Illustration
  • Photo Editing
  • HTML5 & CSS3
  • Javascript
  • SVG Animation

Project Status


checkmark

Completed


1 thought on “Jamie & Adam’s Wedding

Leave a Reply

Your email address will not be published. Required fields are marked *