Posts Tagged ‘Design’

Splashes Of Colour

// February 26th, 2008 // 8 Comments » // Creativity, Design

My day to day reading of blogs always throws up a few suprises and they sometimes lead me on a kind of ‘wild web chase’ finding sites I have not seen before. Lately I have come across some real gems in terms of design, colour, typography and the downright crazy!

  • www.campingilfrutteto.it

  • www.leemunroe.com

Camping Il Frutteto

In our first example (a downright crazy one) we see this huge in your face, sunny, landscape background with a bright red apple in the centre of it all. The apple contains the menu and by clicking on a menu item, the page whizzes right. Click the home link from a page, and it whizzes back left. At first you will think “oh that’s flash built”, but it is actually Javascript which makes the pages whizz around like that.
The big downside is that with Javascript turned off, clicking the menu items takes you no-where! I just wonder if the client asked for this bonkers functionality or if the design agency came up with idea. Whoever it was didn’t give a hoot about unobtrusive JS or progressive enhancement.
Still I love the colours used in this design, you can’t go far wrong with some lovely rich blues, greens and browns.

Lee Munroe

This is a stunning design from Lee Munroe a freelance web developer from Belfast, Northern Ireland. I love the way the theme changes to reflect the time of day, kind of like the themed google home page but a lot lot nicer. Lee has used some beautiful colours to create some stunning vectors for the backgrounds to give a ‘happy’ kind of feel as you navigate the site. Also, look out for the tiny insect running riot in the footer! – A nice touch!

  • www.jkg3.com

  • www.veerle.duoh.com

Jamie Knight

Now when Jamie Knight speaks you listen! A fantastic website chockablock with microformat goodness. Jamie has given a lot of thought to detail when he created jkg3.com and the design reflects Jamie’s personality. I can’t mention Jamie without mentioning Lionwho never leaves his side. You can see a cute reference to Jamie’s best pal in the background graphic which is seamless and gorgeous!

Veerle Pieters

This is one of my favourite sites to visit on a day to day basis. I normally shy away from dark background colours, but Veerle Pieters does this fantastically well. The background allows the content to become more in focus. She uses a four column grid type layout with the side content giving the impression of it just hiding or overlapping under the main content section to give a shadowy effect. The vector art she has used in her brand logo is simply stunning.

Create A Favicon

// February 14th, 2008 // 1 Comment » // Code, Design, tutorials

As you are reading this post, look up into your location bar at the top of the screen, notice the little icon to the left of the web url? This is a favicon and in this article, I am going to show you how to add this to your WordPress site.

What Is A Favicon?

Favicon is short for “Favourites-Icon” and is sometimes referred to as a “Web icon” or “Page icon”. Favicons are a great way of adding a little personality or identity for your website. They are very handy when looking for a favourite site amongst your bookmarks. By locating the little icon in your bookmarks list, you can locate quickly and easily your chosen web site just by recognizing the little favicon.

Choose an Image

First choose an image that you think that represents your site. Be it an icon, logo or even a letter, you choose! You can do this in any image software you have (Photoshop/Fireworks/Illustrator etc..).

Create…

Now to make things easier for you, visit either GenFavicon or Chami.com where you can upload an image from your mac/PC and resize the icon on any one of these sites. Once done you can download your newly created favicon.

Next step – place the favicon.ico file into the Root of your website folder (In WordPress, this is the initial folder not your themes folder) and upload to your server – usually to public.html. This is important that you do place the file in the root directory as browsers will recognize the .ico file without searching for a HTML document.

Add Some Simple Code….

Now open header.php and add the following lines of code inside the <head> of the header.php file:

<link href="/favicon.ico" rel="icon"/>
<link href="/favicon.ico" rel="shortcut icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Save – Upload – Enjoy!

Save the file and upload to your server. Now visit your site and refresh the page, you should now see your newly created favicon in the address location bar at the top of your screen.