Where to get design inspiration for your Squarespace website
Honestly, design inspiration comes from the most unexpected places. Fortunately, many of us have our cameras on our phones these days and it’s easy to take a snap of something that inspires you. I love the shapes and lines of cars and I’ll take photos of color combinations and features that I see while walking near my home.
I look at clothing catalogs that arrive in my mailbox. I’ll clip out certain layouts of the color choices to use in some future Squarespace website design. It’s so easy now to adjust your site’s color palette using the design settings.
You can lift the exact HEX codes for your colors just by Googling “color picker from image” and there are a few free tools you can use to extract the exact color codes you need for your site.
Get to know your own style. Are you more monochromatic? I tend to be. I used to love lots of bright colors, but these days I like just a pop of color set against a darker background. Expressing your true self through your website is key.
Brands you like, brands you don’t like
Jot down some brands you like and identify with. For me, it’s Nike, Todd Snyder and Patagonia. One is the leading sports/shoe brand, the other is a men’s clothing retailer and the third is an outdoors gear seller with a bent towards preserving the environment. Each of these brands makes me feel a certain way. With Nike it was pressed into my mind at an early age that the best basketball players chose to wear Nike shoes. I wanted to be like those players. Todd Snyder is a relatively new clothing brand, but his design takes classic preppy styles and adds a subtle twist. With Patagonia, I like the quality of their goods, not necessarily the aesthetic, but I feel like I am showing my love of the outdoors whenever I wear an item made by the company.
While these brands I like may not directly influence my own personal brand, some of the elements of their brand help inform mine. Making a list of brands you like is a starting point for helping you develop your own brand identity. It’s easy. Just use your gut and look at how you choose to spend your money.
Font pairings, spacing and orientation
At the time of writing this, Squarespace has introduced its Fluid Engine content editor. I have been privy to its rollout as a Squarespace Circle Member and what it allows users to do is have more control over where Blocks are located within the space containers of a website. You can move elements closer to the edge, overlap images and text, and break the previous boundaries of the platform.
Why do I bring this up in the context of design inspiration? Because where you place objects or design elements within a space is a key part of design. I go back to classic design principles. Take a look at a well-designed magazine or catalog: More often than not you will see these print designers take liberties with how text and images sit within the boundaries of the pages. Having an unbalanced layout causes the reader to look at certain aspects of the content in a different way. Then, having different layouts within the entirety of the magazine creates a more visually interesting whole. Each chapter or section can take on its own look while maintaining an overall cohesiveness of the brand aesthetic.
How does font choice affect the overall design? It’s one of the most important decisions and sometimes it just works out best by trying different pairings and looking at them on your Squarespace site and deciding with your gut what looks and feels the best.
So, be sure to take photos of your design inspiration. I am fortunate to live in an urban environment filled with murals, shops, signs, posters, cars and more visual inspiration. Really look at how colors, shapes, and visuals interact with each other. Take note of what you like and also what you don’t like. Borrow elements from your website. Go to Barnes & Noble and buy 10 magazines that might inspire you. Cut out pages and create a scrapbook of design inspiration. This may sound like a lot to do, but all I’m asking you to do is allow design inspiration to come into your life and capture it. You can choose whichever way works best for you.
White (or negative) space
Be sure to let content breathe on your website. Good design uses white space around text and images to give the visitor the chance to really see what’s important. You can also use less space around a section to cram in more information that is detail oriented.
Remember the big headlines of newspaper front pages? 9/11, Dewey Defeats Truman, Japan Attacks Pearl Harbor—big bold lettering is reserved for big bold news. Reserve your large scale fonts for the content you want to call the most attention to. Create a true hierarchy of which content needs to be prioritized versus which content is secondary.
White space is key to allow the eye to see what needs to be seen and is imminently more readable. The viewer does not feel the cramming and cluttering of a section. Play with the section spacing editors or in the case of the new Fluid Engine editor, try to adjust the scale of the objects within your Squarespace section.
A roomful of Harvard MBAs
Don’t spend too much time reinventing the wheel when it comes to your website design. Take a look at established brands and experience what works for you as a user and what doesn’t. Take cues from these sites that have been scrutinized by top business minds whose job depends on sales conversions.
Two sites that I like to emulate are Nike’s and Apple’s because they speak to my aesthetic. Clean white backgrounds with simple layouts designed to make it easy for visitors to find what they want. For example, I was in the market for a new laptop and right on Apple’s homepage they were touting the newest generation MacBook Air. I was immediately drawn to the new product and checked out its features.
Both sites have a consistency. Interior pages have similar layouts. Repeat users are trained on where to go. Don’t copy a site design entirely, but take inspiration from brands you identify with.
Mood board
One of the easiest ways to develop a consistent feel across your site is by creating a mood board, a series of images that inform how your site should look. Some designers offer a mood board service which is a nice, more formal way of culling together information in a unified document. But as a DIYer, I offer a less formal approach where you simply collect design inspiration either digitally (saved in a folder) or physically (a scrapbook or actual folder).
My method is to take photos of design inspiration with my iPhone and save them to a specific folder. I can see my design inspiration in disparate elements and piece them together in a way that’s effective for me to apply to a website design. For others, it may be better to create an actual mood board, and the design software Canva offers these tips here.
I forgo many of the formalities of website design that have been part of this new industry because platforms such as Squarespace allow for many steps to be consolidated in my experience. It’s so easy to design within Squarespace that one could conceivably build a wireframe, moodboard and other planning tools within pages of a Squarespace site if need be. One of my favorite aspects of using Squarespace is the ability to “sketch” on a page to test out designs and simply duplicate, delete or deactivate a page if you do not want a page to be public-facing.
Many website designers may disagree with my idea to simply get going with the design without plotting out a course of action. But my purpose here at Little Ox Workshop is to inspire non-designers to get started and get comfortable using Squarespace. I don’t want steps to stop people from simply jumping in and start building their site. Extra steps will quite often lead to procrastination, which prevents progress. Getting comfortable with any skill requires time spent doing the heart of the task, which is adding and manipulating content within Squarespace.
Right now my son is learning how to swim freestyle. I am far from being an expert swimmer, but I am tempted to “teach” him how to extend his stroke to do this and do that, but I am refraining from causing him to overthink. Instead I give him a simple daily task, swim 50 laps. And sure enough over time he is enjoying the process and getting more efficient every day from gaining a better understanding of the feel of swimming. I want you to do the same with creating your Squarespace website. Get in there and practice and don’t worry about what is right or wrong at first.
Objects you are drawn to
Make a list of your go-to material objects in your life. Is it a watch, handbag, shoes? What is it that you like about your favorite things?
Do you like the texture, the colors, the shape?
Visiting a friend the other day I noticed that one of the new Ford Broncos was parked in front of his house. Turns out another one of his house guests was a car enthusiast and that was his Bronco. The modern Ford Bronco is one of my favorite reissues and I immediately connected with the owner.
“I like that it retained its boxy shape,” he said. I wholeheartedly agreed and lamented that many new versions of older vehicles now have more rounded corners. Having sharper lines was key to the look and feel of his car and the same effects can really dictate the overall feel of your Squarespace website.
Learn to look at everyday objects and dissect why you are drawn to them. Gun metal gray, for example, is a color that I have been repeatedly drawn to in items. I can start Google Image searching for that color and then add the word “palette” to my search to begin creating the next color scheme for my website design. We live in an incredible age of resources for design inspiration.
One of my favorite designers is Nike shoe innovator Tinker Hatfield, known for introducing the air bubble to Nike sneakers and his revamping of the Air Jordan line, said he took inspiration for his design of the Air Jordan 5 from fighter planes. He also used elephant skin prints and other disparate elements to create timeless designs that are still very much sought after even though they were born decades ago.
Feel free to experiment
The universal design settings in Squarespace are so easy to manipulate that it’s easy to try entirely new color schemes and font pairings with much risk. Just record your HEX codes for colors and the names of your fonts used in case you want to go back to what you had before.
Just make sure you use enough white space, contrast and adhere to solid alignment so that your user experience remains strong. You can separate the look and feel of your Squarespace site from the actual experience of using the site. But if you have a solid framework, this allows you to have more leeway when it comes to colors and fonts. Also, make sure your images selections are harmonious with your overall design.
