Web Design Inspiration – Squarespace

This Week has been quite a productive week, with new designs starting to take shape and new ideas on the horizon. i thought it would be good to discuss some things I have found quite inspiring recently. One thing I have been focusing on in my current design projects are user interactions. Things like tool tips, animated GIF’s & hints that disappear once the element has been interacted with. These types of smart transitions help improve the user journey from page to page, and element to element, allowing designers to create complex layouts that are still easy for the user to navigate and interact with. One site that I found recently that applied some of these methods to their platform was Potluck, a relatively new social media platform developed by Branch.

Less is Still More In Design.

My recent source of  inspiration that I was referring to however came from a site that I saw some time ago. That site is squarespace.com. Each element of the design has been carefully thought out and constructed, the design shows a huge level of care and attention.

The homepage loads with a series of large, bold videos that act as a backdrop for the homepage. These videos hint at the ways various industries & creative’s are using the Square space product for their own websites. Large scale videos are becoming ever present in modern web designs and work well when used subtly.

In this instances we can see that the backgrounds for each video are relatively neutral with areas of negative space that allows for the design to be populated with the companies logo to the left, a menu bar on the right, and a bold heading for each slider.

squarespace homepage

The simplistic but effective large video slider from the homepage portrays the creative workflow of the professionals who use the square space product.

The navigation is simple presenting just three options, a tour of the product, a login link and a main menu link which when clicked prompts a page slide that then reveals the full menu similar to the navigational menus being used in many responsive websites and mobile app. This approach keeps the design clean and clutter free while placing more focus on these three key links.

Refining every Element Within The Design is Key.

Delving deeper into the site, you can see that each element has been lavished with the same amount of care and consideration. The user experience remains pretty stable throughout. I would say that the design is similar to the style in which I like to design,  which is probably why it stood out for me, but there is more to it than that, it’s the way it all comes together, the interactions between design and functionality really helps to highlight each aspect of the company’s product, from the video’s documenting professionals using their templates, to the dynamic navigation that allows you to return to your previous page from the template page & the functionality of the templates page itself. It all lends to an engaging user experience.

squarespace template page

Each product is elegantly displayed against a simple backdrop of flat tones. Everything has been scaled back allowing the focus to be placed on the Theme templates.

squarespace template layout

The design language, and functionality used in this site are certainly not new or flamboyant, they are simple and understated, but they have been applied in a way that makes this website functional, engaging and impactful which is why I feel that it is quite a solid source of inspiration for how myself and other designers could approach future design projects, looking at the finer details within both the design and content of a website and refining each interaction until that are just right.

If you are interested in finding out more about Square space as a company they feature in video series called Small Empires on the Verge, which looks at how startup companies are using the internet to carve out their own space in the market. It’s definitely worth a watch. I found it quite inspiring to see how an individual was able to create a creative product and a business around it.

Leave a Reply

Your email address will not be published. Required fields are marked *