Squarespace design tips & tricks.

If you are like me when I first started designing Squarespace websites you might be a bit lost when it comes to how or what to design for your site. Like every skill, it takes time to master and will get easier. I've been designing Squarespace websites for over 3 years designing daily and a will admit I'm a bit of a Squarespace design addict. Like a painter who will keep their art piece covered until completion I will not let any of my websites go live my until I am at least 98.9% happy with it. I can never say I will ever be 100% as I am a perfectionist and will always find some minor detail that needs changing over time, sometimes that minor detail could be the colour of a divider line to the style of a 'submit form' button, it never ends but that is why I strive for beauty.

I have included some simple tips and links below you may find useful when designing your Squarespace website. Some of these tips shown have been implemented on some of my clients websites with great success.

Let's start ..

Choosing the correct colour, not a 'Similar' colour. 

Let me explain .. When designing a website not everyone has access to design software such as Adobe Photoshop. If you have a colour you want to use more than once say for a example your logo is red and you want to use the same red for links on the site and divider lines or text buttons, how are you going to detect the exact colour of your logo? "I will guess!.." I hear you say or you will try and get as close as possible? Sure go for it but I don't recommend it. I can't stress how important it is that you use the exact colours otherwise in some browsers and on certain monitors it will look very different almost like a red to pink difference or purple to blue. I have seen it first hand and sheesh .. it is not pretty! 

So how do you do this? If you don't have designing software not to worry. Below is a link to a site where you can detect the colour you want to use. You don't have to sign up which is great, simply upload the image you want to use or type the link to an image and use your arrow to select the colour you want on that image. Once you select the colour you want a code below will appear below with a hashtag, I recommend you have Squarespace open in another window at the same time you are doing this. 


Now that you have the exact colour code you want it's time to implement it on your website. Hopefully you will have Squarespace already open. Go to 'Design' and then to 'Style Editor' in the left menu selection. Click on the website which part you would like to change the colour of, below I have selected the banners title colour. Once you have selected your option there will be colour options on the left hand menu with circular colour icons. Select the icon you need and the below colour window will appear. Where the arrow is pointed paste your colour code there and voila! When changing any colours on Squarespace they will give you the option to enter a colour code. The example I am using is of a recent website I built for a client who runs a childcare agency, they wanted the pink dot colour in the i to be integrated in the website to represent part of their logo and branding. I put my my design hat on and got to work and it turned out great.  They were extremely happy with the finished product. Feel free to check out the full website here: www.happyminders.co.uk 


It's as simple as that and will make a big difference! 

Using PNG images v JPG Images.

This is more of a selection process tip that is highly important for the visuals of your website. When I first started designing websites many moons ago I didn't really know the difference between JPG images and PNG and to be quite frank I didn't really care as long as they were of high quality and helped achieve the design I wanted. I will never forget the time I designed my first website, I bragged about it to a 'at the time' work colleague about this stunning website I created over the weekend, it was a website dedicated to gym music .. yes I know .. cringe. When she opened the website horror and embarrassment met me .. the images I had used which were JPG had bright white backgrounds and borders. What was I seeing? It never looked like this when I was designing the website, where had my crisp and beautiful website gone? This goes back to my first tip .. every monitor and every browser will show your website in a slightly different light literally. Not many people think about this but it's so crucial to your design. JPG Images are 'full color' i.e. they do not have transparent backgrounds like PNG images have. What I thought was a transparent background with the JPG images were actually filled in with white to give the appearance it was transparent. See an example below for easier understanding. 

What I was seeing, looks great!:


What some monitors and browsers see .. ouch:


So you see, some browsers especially out of date ones and older monitors will have a different shades of white. The solution? PNG's! If you are using images that fit the entire screen i.e. rectangular or square then by all means use JPG's especially for HD photography. All the rest i.e. logo's or icons, PNG is a much better option. If you scroll back up where I talk about adding colour codes, you will see the 'HappyMinders' logo. See how it is hollow and just sits on top of the image beautifully? That is a PNG. If it was a JPG it would have a white rectangular background and we all know which would look better. You may be wondering how you can turn a JPG image into a PNG? For this conversion and editing I would really recommend design software like Adobe Photoshop, there are other alternatives online so try googling 'jpg to png transparent background' there are a variety of options. I'm not an expert on those editors so can't comment but they do exist. If you need help however feel free to pop me an email. 


Use HD photography. Standard quality photo's screams Amateur.  

Have you ever visited a website with bad quality photo's or imagery? does it not make you feel almost uncomfortable or gives you an impression they are somewhat unprofessional? Maybe not, maybe it's just me but I do every time. Photo's are not something you can risk having as a standard definition or low quality when it comes to your website, especially if it's a website that prospecting clients may visit at any time. It's like turning up to a networking event wearing tracksuits, don't put you or your business in a bad light, to look good online, you need to be wearing that classy suit or dress because that is how serious and professional of a business you are right? Presentation is no different online. I am lucky to be able to afford membership to some of the highest quality photography sites going so can design my clients with beautiful HD photography. Again not to worry as there are some free options. I have linked some websites that are royalty free and have some great photography you can use. Remember, once they like what they see visually and what you offer, half the battle is won.