Choosing Images for your Website

Choosing Images for your Website

I’ve been creating websites since 2003 and thankfully a lot has moved on since then. So it astonishes me that businesses are still creating websites (or having them built for them) with images and graphics that seem to be an afterthought rather than a focus. Or simply relying on stock photography to do all the work and make them stand out from the competition.

So here are my 5 top tips to help you choose and display your website images:

1 Use your own photographs

I get it. We all have budgets to stick to and the images you use on your website may seem like something you don’t have to worry about. But PLEASE invest some time and money in getting some professional photographs done for your website. For example, a photographer I met at a recent networking meeting mentioned that as well as taking headshots of her clients she also spent time taking shots of their hands typing and writing, etc, to use on the website. So even though there are the standard ‘hand’ shots that appear on other sites, they are HER hands and HER stationery. Now that’s got to be better, doesn’t it?

2 Use photos that match your Brand

One of my friends had some headshots taken once and although the photos were good, they didn’t represent my friend at all and didn’t match her business either. To be honest she looked like a real estate agent instead of a super coach who’s speciality is ‘Walk and Talk’ sessions in the great British countryside. Spend some time researching photographers, look at their work and decide which one suits YOUR style. You’ll be glad you did. Oh, and her photos now look AWESOME because she teamed up with another photographer who really captured her personality.

3 Keep images ‘flat’

The current design trend is for ‘flat’ websites and images are a huge part of that look. The term refers to how images sit on the page, minimising the use of features such as drop shadows. This doesn’t mean you can’t use photographs of real objects, just keep the way they sit on the page flat rather than using fancy edging or effects. I recently saw a website with images looking like they had been taped to the page. Very retro and not at all in keeping with a modern business.

4 Resize your images properly

Yes, your website does need to load quickly, but reducing the file size of an image too much and then stretching it and making it blurry just won’t do. Take the time to learn how to add images to your site without distorting them in any way and make sure they look great on any device. Your web designer should be able to do this for you and if they can’t, I would be asking some pretty serious questions!

5 Pay someone who does it for a living

Now I love a bit of amateur photography but I am no Annie Leibovitz. So I too will be using a photographer for my new headshots. Although I have warned her that if she takes photos of me under a tree I will shoot her! Spending a little money now is an investment that will help my business in the long run and stand me apart from those who don’t think it’s important.

So, there are just a few considerations when it comes to sourcing pics for your website. If you could give just one tip about creating images what would it be? Let me know in the comments below, I’d love to hear from you.

Web Goddess

 

3 Simple Online Graphics Tools

3 Simple Online Graphics Tools

We’ve all seen them – website after website sharing the same stock images over and over again.

Why do they do it? Because it’s easy. Because they don’t care. Because they don’t think it matters. Because someone built the site for them and that’s what they use… There are tonnes of different reasons.

But, here’s the thing – it doesn’t tell your clients who YOU are. It just sells them the same clichéd image of your business that they see everywhere else. If I mention an IT company or a complementary therapist I bet you can already picture the types of stock images that might appear for these?! It’s not that I’m asking you to use images that don’t fit with your profession, but simply to use images that show how YOU work in your profession.

In my opinion, all great website design uses original images and design – from using your own photos and having a professional logo, to having your own colour scheme and fonts. It’s called branding and it’s an important part of running a business. You can employ people to do this for you and I would really recommend it, but when you are starting out it can feel like just another cost you can’t justify.

GraphicsWebsiteSo, what’s the alternative? Do it yourself… I know, I know. I can hear graphic designers yelling at me from here – please read the previous paragraph where I recommend people using designers – I love you guys!

But here’s the thing. There are some pretty cool things you can do with your own photos and your own graphics FOR FREE. If you are in any way creative then you can save yourself a load of moolah by doing it yourself – at least to begin with.

So, here are three simple-but-amazing free online tools that you can use to optimize, modify and create graphics for your website…

#1.  Image Optimizer

The clue is in the name… what else can I say. It’s the simplest of tools to use and allows you to reduce the size, and therefore the file size, of any image you have before you upload it to your website. You can find it here: www.imageoptimizer.net and follow the instructions online or download a copy to your PC to use whenever you want.

#2.  PicMonkey

I love this website. You can sign up if you want to use all of the features, but for simply cropping and resizing images it’s free to use. Simply click the ‘Edit’ link at the top of the screen when you go to www.picmonkey.com and you’re away. You can also add some text and effects to your image using the free version and I use it to crop parts of larger images or to save images for social media.

#3.  Canva

This is my favourite free tool and I must admit that I am ever so slightly obsessed with it. It’s not an optimizer so you’ll need to have your photos ready first, but you can create all sorts of graphics for websites and social media here – including website headers (like this one I made for a client). You just select one of the pre-made sizes or enter your own dimensions and you’re away. It’s so simple to create graphics using your own photos (you can upload these for free), text and icons – most of which are free. You get your own account and can save all of your designs there as well as sharing them with the Canva community if you wish. Just head over to www.canva.com to check it out.

– – –

So, there you have it. Three free tools to help you make the most of your own photos and really make your website your own. Oh, and if you need some help, you know where I am – and I know some pretty cool graphic designers and photographers who can help you take the next step if you’re ready for that too.

What Do Your Website Colours Say About You?

What Do Your Website Colours Say About You?

If you have ever studied colour in detail or know about colour psychology, then you will know that individual colours can evoke specific feelings and each colour has a different meaning. As a crystal therapist (yes, I’m a bit woo-woo) I use the colours in crystals to link to the chakras and colours are just as important within websites.

There are many great sources for colour therapy and colour meanings online, but below you will find a list of colours and some of their meanings:

Red – grabs your attention, is a call to action and is energetic but can also be provocative and represent danger

Orange – is associated with abundance, fun and vitality and using peach tones can be a softer way of introducing this colour into your site

Yellow – is joyful and optimistic and can give a lively sunny feel to your website

Green – can be associated with nature as well as balance, serenity and wealth depending on the shade you use

Blue – suggests honesty, trustworthiness and dependability

Purple – is a creative colour also suggesting spirituality and mystery

Pink – is associated with youth and fun, it can also depict compassion and love

Brown – is a very earthy colour suggesting stability and durability

Black – gives a website a classy and sophisticated feel and can be used well with an accent of another colour

White – denotes simplicity and a pure nature and is a great background colour for most websites to make the other colours really pop

Keeping the colour meanings in mind, remember that it is just as important to choose colours that mean something to YOU as it is to pick a colour scheme to suit your mood or meaning – your website will not reflect who you are if you choose a colour that doesn’t match your personality. After all, it’s YOUR website so make sure the colours you choose are a reflection of your personality, not what you think they ‘should’ be for a specific industry.

JPEG or PNG?

JPEG or PNG?

I originally shared this image on my Facebook page a few months ago but wanted to share it again as it really is such a great explanation of why you should sometimes use a PNG (Portable Network Graphics) image instead of a JPEG/JPG (Joint Photographic Experts Group) image.

I often get asked to look at websites where the graphics are fuzzy (and you will see them quite often on social media too). Unsurprisingly these are usually JPEGs and this is the cause.

With a JPEG image, the original image is compressed and reduces the file size to about 5% of their normal size. This is great when you need to save space, but it also means that some detail can be lost. Hence this is known as ‘lossy compression’.

Portable Network Graphics (PNG) on the other hand is a raster graphics file format that supports ‘lossless’ compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet.

So, choose wisely young Padawan – whichever format you decide to use, it is always best to keep your originals and simply save copies of your files for conversion. That way, if it doesn’t work out you can always start again!

favicon

 

jpg_vs_png