Web Design

Materion Website Refresh


Engagency -> Materion

Date Completed

January 2020

Created With

Adobe XD, HTML, CSS, Javascript

Project Synopsis

Materion was looking for a badly needed redesign of their homepage. Working with their creative director, I first helped create a design that was colorful and visually engaging that is meant to drive users to the internal pages. After the design process was complete, I put it into functional front-end code before handing it off to the back-end developers. The code had to be adaptable and flexible based on the amount of content that was in place. (You’ll notice some differences in the live site – late in the design stage, the higher-ups made us tone down the header and hero section).


The Menu

The Materion website has dozens of links that need to be easily accessible from any page. In order to accomplish this on desktop I went a megamenu with an optional featured link. This initially posed a little issue when going down to mobile size, but I was able to come up with what I think is an effective solution. Using multiple navigation levels and little Javascript I was able to create a menu that can accommodate all their links in an intuitive manner.

More Photos

error: Look but don\'t touch.