Wedding Website

Overview

The main objective was to create a wedding website that was both informational and delightful by showing off some of the couple’s personality.

Approach

Design Guide

The main color choices requested for this website were gold and navy, with silver as an accent color.

As a starting point, I looked up the U.S. Navy’s official brand guide and came up with a color palette and chose typography that would be suited for web. These decisions harkened back to the couple’s story of meeting in the Navy, and informed the site’s look and feel to encapsulate their disciplined-yet-vivaciously-adventurous approach to life.

Of all the elements, the final serif typeface, Vidaloka, embodied this juxtaposition the best. The serif allows for a traditional feel, while the rounder edges of each curved letter added a sense of agreeability and approachability to the site as a whole. In terms of color, gold and blue served as the main focus, while different shades of gray helped round out the palette as secondary colors.

Mood Board

I created a mood board to brainstorm and consolidate ideas for visual aesthetics. Most notably, I gathered inspiration from hero images in website layouts, typography, and general mood aesthetic conveyed by different visual styles.

Sketches

The website needed to tell a story — not just the couple’s story of how they met, but also how they are together. These brainstorming sketches helped outline the direction and overall flow of the website, to reflect that storytelling element in the layout design.

Storyboard block sketch

View fullsizeFull webpage sketch

Solution

Final implementation (HTML, CSS, JS)

Check out the final wedding website! The final implementation was written primarily in HTML and CSS, with some JavaScript to implement password-protection for guests. Password protection has been disabled and some content has been modified for public view.

View fullsizeFinal wedding website on desktop, tablet, and mobile

Lessons Learned

Think outside the box

It was fun and challenging to come up with an overall design aesthetic for this website, since there are many elements that contribute to the look and feel of a site. With this project, a breakthrough came when I was inspired to look up the U.S. Navy’s official brand guide, which served as a launching point for the visual design of the website.

Add some personality

I have the privilege of knowing the couple personally, which added a level of depth and insight into the elements of design that would resonate with them the most. Keeping the standout elements of their story in mind for each stage of the creation process was essential to adding human flair that simply cannot be replicated any other way.