27 de agosto de 2013 |
Squarespace recently launched the redesign of its public-facing marketing site. They’ve received a lot of attention for this new, incredibly pleasing design. As a long-time fan of Squarespace, I was quite impressed with the new makeover. In particular, Squarespace took bold steps and essentially ignored what’s considered trendy right now. I’ll dig into the moves they made and consider which design elements are especially effective–making this redesign tick.
BRANDING
Let’s face it, the market is saturated with content management systems. In fact, there are so many great free options it can be hard to imagine paying for one. I’m sure this isn’t something the folks at Squarespace have overlooked–which comes through in the messaging and branding of the site.
Notice that Squarespace doesn’t sell you on features. The site doesn’t clearly communicate what the actual service is. Instead, you’re sold on the ideas behind the features and the service as a whole. Squarespace helps you create a brand, create a store, create a story and so on. The language and images visually connect with the dreamer and entrepreneur. Squarespace sets themselves up as an aid and support to help you achieve your business dreams. That’s pretty powerful. Probably more effective than a checklist of features, right?
FULL-SCREEN BEAUTY
The site scales very well with large background images that naturally transition from a large, 25-inch monitor to a small mobile device. For each screen size, the logo and content intuitively slide into place. It’s really exciting to see how the aesthetic of the site is 100% consistent between mobile and desktop. (Often times, the mobile version of a site is a radical step away from desktop version and it creates a disconnect between the two.)
BRILLIANT NAVIGATION PATTERN
A simple yet effective navigation pattern works here. Instead of a navigation system that radically changes with the screen size, this site starts with mobile-friendly navigation. Note how the navicon in the top right pops out a sidebar menu. This pattern moves seamlessly to the mobile web (where this pattern first emerged). The end result is a much more consistent design. I also suspect that this makes the site’s code easier to maintain.
ATYPICAL ON-BOARDING
Any system like this is going to have a registration process of some type. The most streamlined registration systems typically start off asking for a username and password. Then you land inside the system and start doing stuff. On the other hand, the first task on Squarespace is to pick a template. This seems like a radical reversal of things, but it’s smart.
For starters, Squarespace templates are better than most company’s websites. And by leading with them I imagine many people are hooked on the idea of using one of them. Personally, I’d be more than happy to have their designs power my sites. And a business owner who’s paid for a custom-built site, even a small one, will recognize the incredible value that these templates represent.
Once you pick a skin for your site, you’re presented with a more typical registration system. But at this point you’ve made at least one choice, so you’re invested. (I really wish I could see how this impacts their conversion rate).
The more I study the site, the more I’m amazed at its simplicity, and yet it’s also “oh so complex.” Fundamentally speaking, the site relies on super clean typography and compelling images. But underneath the simple façade lies some very effective code that makes it all look so easy to do. I browse the site and I feel like “yeah, that’s the way the web is supposed to be.” Look how far we have come: from rigid layouts with static content. Ten years ago this site would’ve seemed outlandish for breaking all of the rules.
Dig into this site some more and you’ll find nuggets of inspiration for your own work.
Want more Patrick McNeil? Check out his newest HOW University course where he talks Web Typography!
