Exelon Clearsight is a subsidiary of Exelon Corporation with a focus on developing innovative technology for inspecting energy generation, transmission, and distribution infrastructure.
Identifying Pain Points
Their old website had a very rigid and corporate feel to it that wasn’t helped by its long page load times. In fact, it took longer to load the home page than it does to read this sentence. With that in mind, our primary goals for this design were to better integrate Exelon’s brand, improve site performance, and make the layout feel less restrictive.
Exelon Corporation’s primary brand colors are blue, orange, and green. During the design phase, it was important to keep these colors in mind and naturally work them into the site. They weren’t added later as an afterthought, but rather played an integral role in how elements of each page were laid out. This, combined with plenty of white space, leads to a very vibrant site that’s pleasing to look at and doesn’t feel either cluttered or too empty.
ADDING POINTS OF INTRIGUE
Another design choice that we made a bit farther along into the build was the inclusion of animated SVG imagery in the internal service pages. These SVGs make use of CSS animation, which allows for the targeting of different layers of the SVG image using CSS. Not only does this make editing the animations easier than with GIFs, but it also has a much smaller impact on page speed than GIFs do.
By using SVG animations, we were able to make the internal pages a bit more dynamic and engaging without sacrificing site performance. Small details like these are what really bring a design together.
INNOVATING WITH EACH DESIGN
At Media Proper, we’re never static in our approaches to both web design and development. With every new site, we build upon what we’ve learned in the past and are always trying out new ideas. For example, before this site, we had never worked with animated SVGs before, so it was a new element for us to learn about and implement.