Today is going to be fun! You get to make some sweeping changes to the look and feel of your new website.
I’ll cover some basic design principles that will apply to everyone building a site, no matter the platform. I’ll also go over how to make specific changes to your site’s template through the Squarespace admin panel.
The last time I shared a screenshot of Karla Adolphe’s new website – the site I’m using as the test case for this series – it looked like this.
oday, it looks like this.
That’s the same template being used. I simply tweaked it to my liking with some simple tools, following some basic design principles. Oh yeah. You can do that.
Let’s dive in.
Generally when you think about building a website, you think about design first. I’ve intentionally left design for later in the process because I believe form should serve the function of the site. Once we know what we want our site to do, the design choices become easier to make. And we make them with purpose.
Today, we get to make those choices. Woot!
Design 101
You are an artist, so I’m guessing you have a keen eye. That’s good. And if you don’t, no worries. I have a firm belief about design, and it is this: You cannot teach everyone to be a great designer, but you can teach everyone to avoid terrible design.
I’ll be honest with you, when it comes to your art website, you simply want to avoid bad design. You don’t need the flashiest site out there. You are not looking to wow the world with your web design skills. You are looking to wow the world with your art, so the design of your site needs to do one thing. Get out of the way.
Whitespace is Your Friend
Don’t fear big blocks of white space. White space drives your visitors’ attention out of that space towards your content. It creates a sense of calm. It puts the focus clearly on your artwork. Clutter is often a symptom of bad design. If you have a lot of content you need to include, make your users scroll, rather than cramming things into the page. Yep, I said scroll.
Look Down … Waaaay Down
Scrolling used to be a no-no in web design but I don’t believe in that anymore. Neither do a lot of designers.
With the advent of mobile devices, scrolling became the new norm.
We scroll through feeds of content in Facebook. We scroll on Twitter and Instagram. We are used to flicking our finger to reveal more content.
We are over treating websites like newspapers, where important content has to be ‘above the fold’ or it will be invisible. As long as you are not making your visitors scroll sideways (please don’t inflict this nightmare on anyone), scrolling is just fine.
Put your whole website on one long page if you have to. It’s OK.
Mobile First
The days of ignoring how a website looks on a phone are over. Tablets and phones are now a huge percentage of devices used to view your website. You need to have a site that adapts to those sizes, and that can be tricky. Images that are really wide and not high at all don’t translate well to mobile devices (the closer to square you can get an image, the better). Text needs to be large and clear. Buttons need to be big. And less is more.
Bigger is Better
Bigger text has landed. It is easier to read on every device, but especially on a tiny phone. Don’t be afraid of 16pt font for your body copy.
2 Fonts. 3 Max.
Speaking of fonts, you want to pick 1 or 2 to use throughout your site. 3 would be a maximum, but I don’t recommend it. Find a way to make 2 fonts work for you.
A serif font works well for large blocks of text, like blog content. Serif fonts have ‘serifs’ which are the little curly ‘tags’ on the ends of the characters. Times New Roman is the best known ‘serif’ font. They look ‘booky’. Books use them because they increase readability. In large sizes they can also look elegant.
A sans-serif font (no serifs) works well for headings, pull quotes, navigation and buttons. Anywhere you need a big bold shot of type, reach for sans-serif. These are clean and crisp and tend to look more ‘modern’. Arial is a typical example of a sans-serif font.
Choose a couple of fonts that work together and stick with them. You can vary their size, weight and colour if needed. You can use italics for quotes. But don’t go crazy with multiple fonts if you want your site to look professional.
By the way, SquareSpace gives you access to dozens of fonts, including fonts from TypeKit you’d otherwise have to pay for. Prepared to be wowed by their typographical beauty!
Break it Up, People
We don’t like to read huge blocks of text online. It’s intimidating.
Use headings, new paragraphs (even if you wouldn’t use a new paragraph in print) images and white space to break the text up into small, digestible chunks. Then, it might actually be read.
Columns are a great way to break up big blocks of text, too.
Put 2 or 3 Colours to Work
Keep your colour palette simple by sticking with a few colours that work well with each other. Choose one colour for your background, a colour for your text and a colour for your headings, links and navigation menu. Then stick to those colours. Try choosing colours that have contrast well – a dark with a light, or a dim with a bright. You may want to choose complementary colours (opposite from each other on the colour wheel). If you have some key imagery for your site that will remain on your site (like a banner image), choose colours that work well with that imagery. The Clash might be a good band, but it’s not a good way to choose your colour palette.
So Much to Learn
There are many more things I could say about web design and design in general. Great tips like the “rule of thirds”, colour theory, content hierarchy, etc. But I won’t get into all that, because the good news is Squarespace makes it really easy to stick to solid design principles. And if you want to learn more, people have done a better job than I could teaching it.
Like the good folks over at Canva, who have created a completely free online Design School.
Let’s Make Some Art
You’ve decided on your Most Important Thing. You know your audience. You have seen some sites you like. You know the look and feel you’d like to achieve. You’ve chosen a template in Squarespce to get you close.
But the template isn’t perfect. You don’t like the font used for the headings. You want to change the background colour. Or all of the colours. You can do all of this and more without learning a line of HTML markup language. You can do this by clicking buttons. I’ll show you how.
Step One. Log in.
Step Two. Click DESIGN.
Step Three. Click Style Editor.
Now things get cool.
You’ll see the STYLE menu on the left. A whole bunch of options for the way your website looks. A whole lot of power in your hands.
You’ll notice that the menu is broken up into sections, telling you which part of your website you are dealing with. You can scroll through these to find what you are looking for (and it may take some guess work), or you can simply click on the item you want to adjust in the site preview window at the right, and the STYLE menu will adapt to zero in on just that section. These feature is well thought out and makes editing your site’s look much easier.
SITE HEADER
The header shows up on every page of the website. It’s the area holding the title and menu of my website. I’m going to start here.
I can change the background colour. For Karla Adolphe’s website, the site I’m working through during this series, I want a white background. It feels lighter than the black background that came with the template I chose. More positive. More … Karla. So I’m going to change the background from black to white.
Changing the Background Colour
To do that, I click the little circle of colour next to Background Color (Squarespace is American so excuse my spelling here). I get a colour wheel where I can pick a colour I want. I also get a field where I can past a 6 digit ‘hex code’ for an exact colour. This is helpful down the road, because I can copy this code and paste it to another area, where I want my colours to match exactly.
For now, I use the colour picker and get a white. It doesn’t show up much at first, and I realize that is because another options is clicked - ‘Transparent On Banner Images’. Squarespace is smart and knows I have a banner image here. It assumes I don’t want my header to entirely block out that image. But I don’t want my header to be transparent, so I uncheck this. There. Now my header is white, but I cannot see the fonts very well, because they are light coloured.
This process will become familiar to you. You make one change and realize it leads to more changes. That’s OK. We’ll get through this.
Changing Fonts
I change Site Title Color to black. Now I want to change the font to something softer.
I click the down arrow next to Site Title Font and get a slew of options.
I can click the name of the font to choose a new one, complete with previews of my choices. One of the great things about Squarespace is that it not only comes with standard web fonts and free Google Fonts, it also comes with handpicked fonts from TypeKit. These are really nice fonts that you’d have to pay for if you weren’t a Squarespace user. It’s almost worth the cost of your account for this one bonus feature. Pretty awesome.
I choose a font called “Playfair Display SC" for Karla Adolphe’s site. It looks great and fits her ‘brand’ well. So well, in fact, I might want to use it in more places.
SITE CONTENT
Next I want to change the rest of the site (not just the header) to have a white background.
I navigate in the left menu to MAIN CONTENT (you may need to click “SHOW ALL” first).
I change the Background Colour to white and watch my white text dissappear. I change the Text Color to black and there it is again.
But I don’t like that font. I want something classier. I choose “Lora”. That’s nice.
FOOTER
Next I change the Background Color of the footer to a muted teal tone that I think Karla will like.
PAGE BANNER
Now I want to change the font used for the big banners on my pages. I’m on a roll!
I choose “Lust Script” which looks awesome, except it is all in capitals, which looks awful for script fonts. Thankfully, I can change that setting, too. I adjust Text Transform from “uppercase” to “none”.
Looking good now, Karla Adolphe.
Trial and Error
You’ll want to play around at this stage. Let yourself play. Run wild. Have fun. Try things on. You can continue to click things you don’t like in your site preview, and the corresponding style settings will come up on the left automatically. Adjust to your heart’s content. Or, if you are a perfectionist control freak, maybe set a timer.
Do this until you are happy. But remember the basic design rules.
2 fonts. 3 max.
2 colours. 3 max. Black and white count.
Scrolling is fine.
Whitespace is your friend. Let your content breathe.
When You Hit a Wall
This is where things get fun, but can also get frustrating. You may make a change that you cannot pin down a way to reverse. You may feel you step beyond a point of no return - that you’ve ‘overworked the piece’.
I’ve got three bits of good news.
First, you can always go back. You can change to a new template, or go back to your templates defaults without losing all of your site content. It takes a bit of reshuffling, but it’s doable.
Second, I’m here for ya. If you get frustrated and have a question, just ask. That’s why I’ve got a comment form below. I get notified when you comment, and I will reply.
Third, Squarespace has some great online help. Just head over to help.squarespace.com with your questions. Their multiple Squarespace tutorials are much better than mine because, well, that’s their job.