Julianne Hough

Screenshot of the website

At PROD, we created a new website for singer and actress Julianne Hough. We wanted to create something that was true to Julianne's personality: sophisticated, but also fun.

The designer on the project created a gorgeous, minimalist design with a focus on content and photography. In such a design, details such as color, typography, and spacing stand out, so it was especially important for me to get the look and feel just right.

As the front end developer on this project, I matched the original designs closely while creating a flexible layout. The site scales to fit large desktop screens, small mobile screens, and anything in between.

I also coded subtle page animations for the site using jQuery and CSS transitions. When the user clicks a section name on the homepage, the photo above that section "slides open" to reveal the corresponding page. When the user moves to the next story or section, the page "slides" from left to right. I worked closely with the designer to make sure that the animations fit with his vision for the site and weren't distracting. All these interactions are added with progressive enhancement in mind: if JavaScript is disabled, all the pages load normally.

Two color schemes are used alternately throughout the site. The color scheme in a given section matches the color of the background photo. Using LESS, I created two color schemes and mapped them to the proper categories. This approach avoided writing repetitive CSS by hand and made it easy to swap the color schemes for a given category later on.

Read about other projects I've worked on.