Design Critique: LuxControl

Designers

I’m involved in several Linkedin Groups for Web Developer where our conversations mostly revolve around critiques of each other’s websites. LuxControl was recently posted by¬†Welerson Ferreira, a graphic designer at Bockz in Brazil and it’s beautiful. In fact, I kind of fell in love with the grey and sky-blue website.

Design Critique: Lux Control

Interactive Elements

What struck me as I was browsing this website was the cohesiveness of the interactive effects. The main navigation links on the top of the page have a bar underneath that moves quite quickly over to the link you hover on. Nothing unusual, in fact I use this on my website (a version of it). Also the words above are highlighted when hovered over.

Scroll down, and you’ll notice the ECONOMY / SECURITY / COMFORT links, when clicked, also move very quickly with a speed matching the main navigation hover effect. In fact, as you continue down the page, you’ll find several other animations, all with the same speed.

Why does this matter? A site that is cohesive doesn’t end with colors or layout; it includes the minor things: like curved corners, types of photos, icons/illustrations, and effects. On a well-designed site, they all work together to create an environment for the user.

Organization

Of course organizing a website is important, but communicating that organization to your users is just as important! If the user can’t understand the way the website is laid out, then what’s the point of taking all that time to organize it???

One of the strongest ways to communicate this order to the users is visually (other ways include your text choices and interactive elements).

If you look closely at the image below, you’ll notice that this top “SIMULACAO” section is surrounded by an “indented” area as well as set off by the blue bar on top. The next section has the blue bar, but no indent. The section above didn’t have an indent either. This small effect helps the users immediately classify the top area as one. They don’t think about it, it just happens. After all, if they have to figure it out, it’s not doing its job.

3D Look

To be honest, the bottom section of the image above was what made me want to write this post. It’s beautiful. While all the other sections have something that separates them from the sides of the website, this section sits right on top like it’s coming out of the background (click on the image to get the full effect).

The effect is heightened by the set-off above and below this section, one with an indent that I already noted, and the bottom one with an exdent (not entirely sure this is a word…but it should be). This technique is definitely something I will file away to use in a website later!

Slideshow & Bottom Bar

There’s the “exdent” I wrote about above:

Design Critique: Lux Control

Here’s the thing: this is the only portion of the site with the combination of corners like this. I love it. Not sure why they did it like this, but it sets off this area as something special, which it should be, since it’s the testimonials (in case you don’t read Portuguese).

The contact “bar” on the bottom is on every page, but it isn’t technically in the bottom bar. I think this is genius, especially with the blue smart phone on the left of it. It highlights the information, without it being conspicuous. The spacing is done perfectly. Never underestimate the power of good spacing!

And the bottom bar is pretty standard: you’ve got the navigation of the site (system/our company) and then the connect buttons. Notice how they integrated the social media icons with the design – this has become pretty standard.

Summary

I’m in love with this design; probably more then is healthy to be. But what can I say? The spacing, the 3D, the interactive elements; everything combines to create a gorgeous website. LuxControl – you definitely got your money’s worth here!

Comments