For something a little more pleasing on the eye and stylish for your design, why not try Font Squirrel or Google Web Fonts. In just a few simple steps, you can transform the typographic design of your website and open the doors to a more creative world for your designs.

Take a look at the wide range of fonts available to use for free on commercial and non commercial websites.

Recently, websites are changing; “over-the-top” is in and boring is out, even for company websites.

The introduction of HTML5 and tools such as jquery are changing the way we view the web, but not only that, they are changing the way we design the web.

Lets have a look at some websites that have inspired us recently, and make us want to take a more adventurous view on our own designs.

We’ll start spectacularly…

Nike Better World

This is a website which captures you from the moment you first start scrolling down it. It is one of the most smartly designed and coded websites that I have ever seen, and it is very deserving of all the praise it has received since its launch. The designer really went to town with it and created something stunning.

1minus1

This is fantastic, great colours and it delivers a brilliant user experience. It also has a beautiful header, take a look and see for yourself, as the screenshot doesn’t do it justice!

Red Pop

This design shows how important imagery can be on the web. It is so simple, but uses great imagery to show what the website is about. The only problem with this example is it’s lack of text, meaning SEO would suffer.

Hocus Focus

This example is quite minimalistic, however the quirkly slant of the header and main image is very nice and instantly gives a certain uniqueness to the design. The typography is also great, and adds even more style to this simple, yet beautiful website.

Touchtech

This design uses simple colours which complement each other perfectly, but the excellent images on the right of the design really make the design pop. The layout is really good, and the website overall has a very fresh feel to it.

Forside

Great, great imagery here. Such a simple design, but perfectly laid out. A true example of important imagery on the web.

Girl Effect

This website delivers a great user experience. This is a site that is not only functional, but fun to use. The design is extremely simple, but it shows that the less-is-more attitude is sometimes very good.

So there we have it, just seven of millions of great looking websites out there. Go and have a look for yourself and see what you can find, you never know what you might find!

Unlike others Creare didn’t tell me what I wanted. Matthew listened carefully and we discussed my business at length before he passed the concept to the designer. Mandeep, the designer has been brilliant. The first draft of the site was good but she didn’t mind making changes until it almost completely changed as we worked up the visual aspect and the content. I was able to talk to her regularly to discuss my vision for the site which I wasn’t always sure of myself. I sometimes felt like I was asking a bit much bearing in mind the fee but Mandeep was always very professional, listened carefully and made the changes almost immediately.

Mandeep also worked closely with my artist on the look of the site and she has made minor adjustments for me ever since. I didn’t know anything about web design before I worked with Creare and I still don’t know much but we have managed to develop a great site which fully reflects the nature of my business. The feedback has been brilliant and the site has been visited a lot more than Matthew predicted. It has been a key element of the success of the business so far and I would recommend Creare to anyone. They also set up my blog and email. I have never blogged before but I had training from Creare. They are now doing my optimisation and I have full confidence that this will be carried out to the same high standards.”

There Cycling – Jim Kent

In this tutorial we will go through using Modernizr to detect if placeholder is supported, if not then fallback onto jQuery.

Original Javascript Method

As we all know, the best way (in most peoples opinions) to add placeholder text is too use Javascript. Code below is an example:

<input type="text" value="Name" onfocus="if (this.value == 'Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Name';}">

jQuery Placeholder Text

Now HTML5 has given us placeholder, it makes more sense to use this over Javascript… But… placeholder is not supported by all browsers, so make it cross-browser friendly we can use Modernizr and jQuery to fall back on to.

Modernizr is used to check first of all if placeholder is supported, if it is then it will leave HTML5 to it, but if it is not then jQuery will kick in. It finds all elements with placeholder attribute and stores in a variable. It then compares the input value with the placeholder attribute. If the input value is empty, it will display the placeholder text and add a “placeholder” class to the input field.

The code you will need to use is:

<script src="jquery.js"></script>
<script src="modernizr.js"></script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});
}
</script>

Remove Webkit Search Input Styles

Webkit browsers add extra styling to the search input field. To remove them, add the following CSS code:

input[type=search] {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

All the files you will need can be downloaded here: html5-placeholder

There are a lot of colours going on in this logo so I would keep the website quite light and use white or light greys for the background then pick out a few colours from the logo to become headings, really making them stand out and compliment the logo design. The logotype is quite modern so I would keep the look of the site, very clean and modern and any boxes would have rounded edges to match the curves of the logotype.

A very clean and modern logo yet it gives the feeling of traditional values and trust so you need to keep that idea for the website, using the subtle green tones which will give a friendly and approachable impression. The deep brown could be used for headings or buttons, so that they stand out against the subtle green. White would also go nicely against the green, keeping it fresh. Using serif typefaces alongside sans serif will allow the site to keep with the times but reflect the company values – of course, the typefaces would also need to compliment one another.

At first glance, you may think this logo is very similar to the one above using greens and leaves, however, the differences become apparent with the typefaces, the hues of green and the illustrative style which makes this logo a lot more modern. The colours are bolder, the typeface is very curvy and modern and the illustration has more depth with gradients and layers. This means that you could be a little more daring with this site and use similar illustrations from the logo throughout the site as little design features. You could keep the site quite light still to match the elegance of the company but perhaps implement small amounts of black. Greens could be used to headings, focal points and buttons, in the menu and the footer.

Here we have a very minimalist approach which you could say makes it more difficult to design the site as there is less to go by, but the same rules still apply. We have two colours to work with and you can always find an additional colour to compliment the green and black like purple or blue – just keep the hues the same. We can see that this company is very sleek and highly modern so keeping it simple is the way to go, a dark site will bring out the bold colours and you could compliment the black with some dark greys making elements very subtle but keeping it sleek. I would think, large headings, minimal fuss text and some focal images would really bring out the best of the site if you could find some that include the bold colours.

This design is more difficult on the colour front and would be defined by knowing more about the company values and their background. Beside the colours though, we can see bold and modern features from this logo, so thick blocks and panels would go down well, using uppercase headings but giving space for all the elements to breath will also compliment the logo. You can tell that this company means business and would probably have a more corporate design to their website. A nice clean and simple typeface would work best, one that doesn’t over power the logotype but keeps things modern and corporate.

Similar to the first logo we looked at, we have some very bold colours. You could pick out any of the colours from the gradient, personally I would go for the deep orange and lighter orange as they are not the extremes of the gradient, meaning they are a bit more subtle yet still work together and have enough contrast. For the base of the website, you could try using dark greys against very subtle greys, then highlight areas such as the navigation using the colours picked from the logo. The logo is very curvy suggesting you could use some interesting shapes in the background for areas such as the header and footer or the flash, giving the website a new edge.

Finally, we have another grey design but due to the nature of the logo, we already know the theme – street/graffiti – so we have a huge selection of colours we can use to compliment the logo. If the company has their own artwork, you could take colours from one of their pieces or find other samples of graffiti. This logo allows room for a lot of creativity, especially if the company is all about artwork, you need to reflect the artists style, meaning you could take small elements from their work to use as features on the site or even get the artist to make a piece that you can use for the design such as headers and footers. I would expect lots of different and unconventional shapes and quirky buttons, making it highly creative and fun.

So there we have it, seven designs for ideas and inspiration on how to use the logo to create your website designs. We hope you enjoyed the designs as well as the ideas, let us know what you think.

Hover over the circles then click to view each product. This revolutionised way of looking at products means you can quickly see colours and styles without having to go to different pages, making it much more fun to shop.

This interactive site allows you to walk, run and jump through the website finding notes and games along the way.

A really stylish website that keeps it simple, letting the work speak for itself using simple design features for navigating through the work.

A highly interactive portfolio website that gets you excited about the work before you’ve even seen it! Make sure you go to each page – seriously cool!

Nike as always likes to stay ahead of the game and this feature site for one of their latest products shows just that, turn the players to reveal their shirt.

Another really simple design, the diagonal lines and shapes are what make this site different and I love the huge images.

Justin Maller

Disastro Ecologico

Bram Van Haeren

Momentica-one

To begin with, open Photoshop and create a new canvas. Select File > New, then select your preset as Custom and put in the dimensions of the button you require. Set your Resolution to 72dpi and Colour Mode to RGB (standard settings for use on the web). Set your Background to Transparent and we’re ready to begin!

The first tool we are going to use is the Rounded Rectangle Tool. Select the area of the button with the tool.

Then select Layer > Layer Style > Gradient Overlay. Choose the colour you wish to use selecting dark to light hues. You want your gradient to be dark at the top and light at the bottom which you can control on the Gradient Panel shown below by selecting or de-selecting the Reverse option next to the gradient. Set the Blend Mode to Normal and Angle to 90%.

Now we want a New Layer. Using the Rounded rectangle Tool again, make a smaller shape over the top of your first layer that is about 2 pixels from the top of your first shape and half the height and less width like the shape shown below.

Select Layer > Layer Style > Gradient Overlay and create another gradient this time light at the top and transparent at the bottom.

Now you want to get rid of the automatic fill colour of the shape. Highlight the top layer and select the Fill drop down bar and set the fill to 0%. This will give a nice smooth gradient that blends with the layer below and acts as your ’shine’ on the button.

To add the finishing touches, select your first layer then go to Layer > Layer Style > Inner Shadow. Select the colour option and choose the darker colour you used on the gradient then move the colour bar to a slightly off colour of your initial colour. For example I used yellow and selected a yellow/orange for my inner shadow as shown below. Set the Blend Mode to Normal, Angle to 90% and adjust the Distance and Size accordingly.

There you have it, your very own shiny button which you can adjust the colours for to suit different websites. One last tip – If you want a thicker or thinner button, create a new button as Free Transform will adjust the curves on your button and won’t look very professional.

We all know that typography is an important aspect of all forms of design but finding something nice that doesn’t cost the earth is sometimes rather tricky. However, I came across this beautiful typeface and found out that it is absolutely FREE and can be used personally or commercially!

Code is a professionally crafted sans serif typeface available to download at Font Fabric. Code comes in bold and light, making is a great all rounder. It can be really hard to find a typeface in the right weight but Code seems to have it covered by providing a bold typeface that isn’t too bold that it looks out of place but still bold enough to stand out and a very subtle light version to add elegance as well as style to any design.

With Code, there are no hidden surprises, just a beautifully smooth and classy typeface giving a fresh and modern look.

After many hours of brainstorming and using our creative talents to the maximum we have come up with an idea. So without further ado myself and my team would like to introduce Captain Moonbeam.

We take a bow. Thank you.