Image by yeven_popov on Freepik
Image by designwarrior on Freepik
Web Design
New Jersey Devils
This is a redesign of the New Jersey Devils’ website. The Devils are a National Hockey League (NHL) team and their website houses all of their team’s information, including player/team stats, news, promotion, and more. While I believe the current website for the Devils works well, I felt that there were some opportunities to connect their website to their other wonderful designs found in their social media presence, alternate jersey designs, and game day assets.
Research - Alternate Jerseys & Graphics
Example of Devils alternate jersey 1
Example of Devils alternate jersey 1
Social media graphic that inspired background of website
I wanted to incorporate more of the Devils’ alternate jerseys that they have for some of their games, as well as design elements from their in-game/social media graphics because they are very engaging and a core part of the brand. I took the motif of the red “shadow” on the lettering of this jersey (top and bottom left) and applied it to my redesign as a hover effect on images. I also took inspiration from this specific graphic (right) and used a similar background with the wavy lines for the background of the site.
Wireframes
Wireframe of design concept 1
Wireframe of design concept 2
Low-fidelity sketched wireframes
I got feedback on my initial sketches and started wireframing concept 1 that I had sketched out. It felt the most organized and different compared to the original website. I especially was drawn to the hero image treatment on
this layout.
this layout.
Mid-fidelity digital wireframes
Homepage wireframe
Article page wireframe
Video page wireframe
Final Design
For the final design, I incorporated the hover effect using the red background element seen in the alternate jerseys and applied the background visuals to the site as seen in the social media graphic. I stuck with the original colors the current site has because that’s the team’s official colors, and I felt the dark theme worked well with the rest of the team’s branding. The addition of subtle motion when hovering, scrolling, etc. creates a more dynamic experience without taking away from the content.
Homepage final design
Article page final design
Video page final design
Design Documentation
