Different Uses of Contrast in Web Design

This article primarily looks at the use of contrast when designing websites. However, the tips can be used in any design process for good effect.

When you want something to stand out on a website, contrast is great for setting apart one element from another. When hearing the word contrast, most people only consider colour. However, you can also use contrasting sizes, shapes and positions to make elements of your website stand out from themselves. This article looks at the different ways you can use contrast in web design.

All of the images in this post were created using Photoshop. We offer a wide variety of creative courses including Photoshop Training for learning how to create and edit images (including shape and colour) and Photoshop for Web Graphics training if you want a course specifically tailored for web graphic design. Other print design courses include Illustrator training and InDesign training .


There are two main methods of contrasting colours: bright and dark and opposing colours on a colour wheel:



Here are three example of using contrasting colours: Read the rest of “Different Uses of Contrast in Web Design”

Photoshop Tutorial – Save for the Web

Images are the main cause of websites taking an age to load. Slow websites not only annoy users but can affect a website’s Google ranking.

Speed is often overlooked by graphics and web designers because as digital pioneers they are usually hooked up to the fastest connection available. A graphic designer’s goal is to produce high quality images that look great so they want their images to be as sharp as possible. As a factor in Google’s algorithm, speed should be taken seriously – images are often the largest files on a site so are key to bringing down the load time of a page.

This isn’t just something that concerns SEOs but anyone who produces images for the web. We offer a Photoshop for Web Graphics course for a more in-depth look into how to optimise images for the internet.

For advice on SEO for Images read our guide on getting your images ranked on Google Image Search.

Handily, Adobe Photoshop has a feature that allows you to optimise your photos for websites without affecting how an image looks. The tutorial uses a photo as an example but can be used for other images too. I will show you how I turned a 13mb photo direct from a camera into an 86kb photo suitable for the web.

save for web final product

0.6% file size of the original image without compromising on quality

Photoshop’s Save for Web & Devices Feature

‘Save for Web & Devices’ is a commonly overlooked but very useful tool. Most people just use File>Save which does contain resize bar and will tell you the resulting file size. That’s okay but Photoshop has a much better feature that is usually ignored – ‘Save for web & devices’. Read the rest of “Photoshop Tutorial – Save for the Web”

Image SEO – Gain Traffic Through Google Image Search

Images can provide a great source of traffic to your website from Google Image Search. However, the process is unlike regular search engine ranking and so needs to be treated differently.

Brighton Pride 2011

Brighton Pride 2011 example – If you want your images to rank in Google don’t forget your SEO

Most photographers will have built up a presence on-line – both a personal website, probably a blog, many will use social media.

See examples:

Heather Buckley on Facebook Page,

Heather Buckley on Google+

Heather Buckley on Flickr

Social media accounts are great ways to build a strong on-line brand for a photographer. Here you should make sure you use all the tags made available to you. Geo Tagging, image tagging, titles, filenames etc. Use the keywords that you want people to find you for. Read the rest of “Image SEO – Gain Traffic Through Google Image Search”