Web Wednesday: SageGlass
This weeks Web Wednesday site review is SageGlass. SageGlass is a company that manufactures and installs electrochromic glass, a subsidiary owned by Saint-Gobain, a Paris-based world leader in building materials. Philadelphia based ad agency Brownstein Group recently redesigned the SageGlass updated which led them
Read more ›
This weeks Web Wednesday site review is SageGlass.
SageGlass is a company that manufactures and installs electrochromic glass, a subsidiary owned by Saint-Gobain, a Paris-based world leader in building materials.
Philadelphia based ad agency Brownstein Group recently redesigned the SageGlass updated which led them to win a 2016 W3 Award or “Best in Show” for the Website Features – Home Page category. The W3 Awards are annually held to honour and recognise the teams behind remarkable creative excellence on the web.
The reason I chose to take a closer look at the SageGlass site is that I think it applies to a lot of the clients I work with here in Perth. The websites I have built over the past 3 years have predominantly been for tradespeople or associated businesses and the creativity of the SageGlass website demonstrates that a balance between functionality, design and interactivity is possible to create a more comprehensive experience for potential customers.
The Desktop Experience
Nearly every website will use the real estate above the fold (the content you first see when it loads) for a banner of some variety. Website banners are most effective when you treat them as a billboard, advertising your major benefit or value you can bring to your customers. SageGlass takes their banner to the next level, using an interactive palette selector to demonstrate the difference in their window tint within the glass. An excellent example of using a simple solution with existing tools which provides valuable information and saves time for customers.
As I scrolled down the home page (on a laptop) I noticed there was a subtle appear up animation on every heading. These added to the softness of the website whilst almost acting as a guide for the users eye as to what to read first, making it seem purposeful. The animations weren’t clashing with simultaneous animations on other elements which allow it to have more impact. There is also an appealing snake style (yes I’m referring to the Nokia game) border hover animation used for any portfolio or news item posts, which adds to what would be an otherwise standard zoom effect.
Over all the functionality and speed of the site is smooth and fast loading and the layout hierarchy and colour usage of each page template makes sense. However, on some pages I felt overwhelmed with how many elements were on the screen in the secondary content areas but overall the primary flow felt logical and obvious. If I was allowed to tweak the site, I’d probably make the navigation hide or at least minimise in some way, just to allow maximum view of the main content.
The Mobile Experience
Where the SageGlass website succeeds the most, in particular the home page, is the mobile version. The fade transitions between tint palettes and full screen images, paired with well designed overlay text, are so pleasing you can forget at times you’re even looking at a website, feeling more like a poster design. Its a good demonstration that not all mobile web design has to be the same to be effective.
The internal pages of the site also work really well in a mobile environment, with great use of the banners to show projects or display primary call to actions. The snake border hover animation is converted so it is activated as content posts hit the center of the screen when users are scrolling. This helps to keep the users engaged and prompt action.
Overall the website provides a good balance of creativity, functionality and innovation. It’s a modern presentation of a traditional business with a focus on making a digital experience for users as smooth and as simple as possible. What’s admirable is that it is achieved without compromising information.
Check it out here: