Creative Individual Design Blog

Create a jQuery Tooltip!

Laura Montgomery — Sun, 25 Nov 2012 13:40:55 +0000

In this article I am going to show you how to create a simple Tooltip effect using jQuery. What’s great about this method is that it degrades gracefully, so if someone doesn’t have Javascript enabled they don’t see anything out of place.

This tutorial assumes that you have some understanding of jQuery but I’ll be explaining everything as we go so should be good for beginners as well. You will also need to understand HTML and CSS.

I’ve included the finished files and a demo so you can see what we are going to achieve.

The Technique

The tooltip that we will be creating will appear when we hover over a link. We will use the HTML5 custom data attribute (data-*) to hold our information, then use jQuery to dynamically create a container (div) to hold the information within the custom data attribute.

Tutorial Demo

Still not sure what we are trying to achieve? Just click the image below to view the demo:

View the Tutorial Demo

The HTML

OK, first create a new HTML file and insert the usual DOCTYPE, html, head, etc. information. Notice I am using the HTML5 DOCTYPE.



  
    
    Tooltip Demo

Add links to your CSS and Tooltip JS files, and create these files. I’ve used layout.css and tooltip.js respectively. You will also need to link to a hosted jQuery library or host your own. I personally prefer to link to Google but use whichever option is best for you and your project.

...
  
    
    Tooltip Demo
    
    
    
  
...

Now, add a link (

...

  My Link

...

Finally, add our custom data attribute. For readability I am using data-tooltip but feel free to use something which better describes your content.

...

  My Link

...

And that’s it for the HTML. Pretty simple right? The CSS is even easier…

The CSS

Our tooltip will have an ID of tooltip. This isn’t obvious from the HTML because this div will be created dynamically by our jQuery script, so just take my word for it for now – all will become clear in a minute. For our CSS we actually only need to add two styles to div#tooltip for the basic tooltip effect, position and z-index. Add the following to layout.css:

div#tooltip {
  position: absolute;
  z-index: 10;
}

In the demo (and downloadable files) I’ve also added some basic styling such as background, color, padding and even box shadow to improve the effect, but I’ll leave this up to you to style the tooltip to suit your site design.

The jQuery

Open up tooltip.js and write out the document ready function – feel free to use the shorter version but for readability I will use the full function.

$(document).ready(function() {
});

Next we want to target any element with an attribute of data-tooltip, so this will be our selector. The action will be .hover.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
    }
  );
});

We first want to create the div which will hold our tooltip information. Remember from above that this will be a div with an ID of tooltip. We will use .before to position this div before our link in the DOM. This is why position and z-index are so important in our CSS – these position the tooltip div visually above our link (and other content) and stops any nasty content jumping from occurring. Note the single quotes used.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      $(this).before('')
    }
  );
});

Next we want to get the information from our data attribute and store it in a variable. I have put this variable above the previous line which is good practice, especially in cases where I would be using more than one variable, i.e. keeping them together.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
    }
  );
});

Finally, we want to add the information stored in our variable to our new div. We can use .text to achieve this.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
      $("div#tooltip").text(tooltip);
    }
  );
});

If you have any basic knowledge of jQuery you will know that .hover also includes hover off within the action. Let’s make use of that now to delete the tooltip div when we move our mouse cursor off the link. We simply need to use .remove to achieve this.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
      $("div#tooltip").text(tooltip);
    },
    function() {
      $("div#tooltip").remove();
    }
  );
});

We are almost done. The last part is to get the tooltip div to follow our mouse cursor as it moves around the link. I have used a similar effect in a previous post. First we want to create two variables which will tell the div how far away from our cursor to move so that we can easily see all of the text.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    ...
  );
});

The action of the tooltip div moving occurs when we move our mouse cursor around on the link with the data attribute, so this is what we will be targeting with the .mousemove action.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    ...
  );
  $("data-tooltip").mousemove(function() {
  });
});

We then just need to use .css on our tooltip div to move it from the top and from the left – remember that we used position: absolute in our CSS, this is coming into play again.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    ...
  );
  $("data-tooltip").mousemove(function() {
    $("div#tooltip").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });
});

We have one small update to do to our code to finish. Notice the e used - i.e. e.pageY and e.pageX. We simply need to add e between the parenthesis of each of our functions. See the full complete code below:

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    function(e) {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
      $("div#tooltip").text(tooltip);
    },
    function(e) {
      $("div#tooltip").remove();
    }
  );
  $("[data-tooltip]").mousemove(function(e) {
    $("div#tooltip").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });
});

Load up your HTML page and check out the script in action.

That’s it!

View the Tutorial Demo

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

jQuery 101 – Learning the Basics

Laura Montgomery — Sun, 17 Jun 2012 17:26:52 +0000

By now most web designers and developers have a very good understanding of jQuery and its capabilities; for most it is their go to JavaScript library when adding some additional functionality or interactivity to their web pages.

However there are still plenty of people out there who are new to web development and who would like to get started with this great language but don’t know how to.

Well, this one’s for you!

What is jQuery?

In essence, jQuery is a powerful JavaScript library which makes life a lot easier for those of us with little (or no) JavaScript knowledge. It allows us to add JavaScript functionality to a web page using much simpler code. jQuery is particularly apt at adding event-handling, transversing, animations or Ajax interactions to a web page.

I don’t know about you, but that all sounds rather confusing and boring… But believe me it’s not! And once you get a basic understanding of jQuery, you’ll be WOW-ing yourself in no time. And the best way to get this basic understanding is just to get started.

Are you ready?

Installing the jQuery Library

To make use of jQuery you first need to make the script available to your webpage. There are a few options available when adding the jQuery library to your webpage but they basically breakdown into two options:

Downloading the latest source file and hosting it on your own website/server.
Linking to hosted files such as those on jQuery’s own site, on Google’s Libraries API or a few other hosted options.

Personally I almost always opt for linking to files hosted on an external source unless for some reason I am developing without an internet connection, and that pretty much doesn’t happen to me anymore! So I am going to show you how to implement the hosted option. So break open your favourite text editor and let’s get started.

Let’s create the basic HTML page structure first:



    
        jQuery 101 - Learning the Basics

We are going to link to Google’s latest (at time of writing) stable copy of jQuery. A quick search of “google jquery” should find the page you are looking for but for reference purposes it is:

https://developers.google.com/speed/libraries/devguide

Click on the jQuery (not jQuery UI) link in the table of contents. You are looking for the source path which references jquery.min.js. This is the compressed version of the file and will save you quite a bit of loading time – this is allows a good thing.

Now that we’ve got our reference, let’s add it to our page:

...

    jQuery 101 - Learning the Basics
    

...

That’s it! How easy was that?

Your First jQuery Function

Now that the library is loaded onto our page, let’s prepare the page for our first jQuery function. Almost all jQuery code that you write will start with this function. It is the Document Ready function and basically it stops jQuery from running until the webpage has finished loading.

...

    jQuery 101 - Learning the Basics
    
    

...

Now that we have the boring bit done, let’s see what jQuery can do.

Your Second jQuery Function

Let’s create a paragraph with a link that hides the paragraph when clicked. Really very simple stuff with jQuery.

First let’s add the paragraph and link between the body tags:

...

This paragraph will disappear when you click this link.

...

Now let’s add our jQuery:

...
$(document).ready(function(){
    $("a.make-disappear").click(function(){
        $("p.disappear").hide();
    });
});
...

Save your code as a HTML document (such as index.html) and load the page in your favourite web browser (such as Google Chrome or Internet Explorer). Now click the link to see your script run by hiding the paragraph.

Amazing!

View the Tutorial Demo

Understanding the Syntax

Now that you have some code to look at, let’s try and understand what it’s doing by understanding the basic jQuery syntax. Every function in jQuery follows this basic structure, or syntax:

Basic Syntax: $(selector).action();

Let’s break it down:

The $ (dollar sign) defines jQuery. Other JavaScript libraries also make use of this sign so if you are mixing libraries you can use jQuery instead.
(selector) finds or queries elements in the HTML. So in our example the selector is (“a.make-disappear”) which tells jQuery to look for a hyperlink (a tag) with a class of make-disappear. The selector uses CSS syntax to query the DOM, such as .classname for classes and #idname for ids.
.action() is the jQuery action to be performed on the HTML elements. So in our example the action is .click(), in other words when the user performs a click on the link. We then run another function within the .click() action.

Our Syntax: $(selector).action(function(){$(selector).action();});

Within our .click() action we run another function by using function(){} and within this function we use $(selector).action(); again.
Our second selector is (“p.disappear”) which tells us that when a link with the class of make-disappear is clicked, look for any paragraphs (p tag) with a class of disappear.
Our second action is .hide(). What this tells jQuery to do is that when a hyperlink with a class of make-disappear is clicked, look of any paragraphs with a class of disappear and hide them.

Some Basic Events

Now that we have an understanding of our second jQuery function – making a paragraph disappear when we click a link – let’s look at some more basic events.

.toggle()

The .toggle() action combines the .hide() and .show() actions. Let’s create another link which toggles a span:

... ...

Show/Hide This text will appear and disappear.

...

Now let’s add our jQuery:

...
$(document).ready(function(){
    ...
    $("p.toggle a").click(function(){
        $("p.toggle span").toggle();
    });
});
...

Save your file again and refresh your browser. By clicking the link you can show and hide the text wrapped in the span tag. Magic!

View the Tutorial Demo

In the jQuery code above, instead of giving each element a class or id, I’ve only given the paragraph tag a class of toggle and then referenced other elements within the paragraph, just like you would with CSS. So by clicking the link within the paragraph with a class of toggle, we can show and hide the span within the paragraph.

All this is very nice, but we can do better than this! Introducing the .slideToggle() effect.

.slideToggle() and .find()

Now that you’ve gotten your head around some basics, lets speed things up a bit. In our next example we are going to look at .slideToggle() and .find(). As you probably have guessed .slideToggle() is very similar to .toggle() only with a slide animation effect. We are also introducing the .find() which helps us with the selector part of our query and could make our query up to twice as fast.

Let’s duplicate our previous code and instead of the paragraph having a class of toggle we’ll give it a class of slideToggle:

... ...

Show/Hide This text will appear and disappear.

...

Now let’s add our jQuery:

...
$(document).ready(function(){
    ...
    $("p.slideToggle").find("a").click(function(){
        $("p.slideToggle").find("span").slideToggle();
    });
});
...

Save your file again and refresh your browser to see the .slideToggle() effect. Pretty sweet! But we can still do better than that!

View the Tutorial Demo

Animation Speed

A lot of actions, including .slideToggle, allow us to dictate the speed of the animation. There are a few options available:

slow (600 milliseconds)
normal (400 milliseconds)
fast (200 milliseconds)
a custom speed in milliseconds

Let’s update our jQuery by adding the fast speed:

...
$(document).ready(function(){
    ...
    $("p.slideToggle").find("a").click(function(){
        $("p.slideToggle").find("span").slideToggle("fast");
    });
});
...

Once again, save your file and refresh your browser.

Notice that we put the word fast in quotes in our code above. The same goes for normal and slow. However if we want to dictate our speed in milliseconds we just enter the number, like so:

...
$(document).ready(function(){
    ...
    $("p.slideToggle").find("a").click(function(){
        $("p.slideToggle").find("span").slideToggle(1000);
    });
});
...

Our .slideToggle() effect will now take 1 second (1000 milliseconds) to complete.

.css(), this Selector and Basic Selector Filters

Let’s push the boat out again with our jQuery. In our next example we are going to look at one new action, the this selector and some basic selector filters. The action is .css() and as you can imagine, this allows us to add or edit CSS properties to our DOM elements. The this selector allows us to target the element which has been actioned, such as through .click(). The basic selector filters we will be looking at are :even, :odd and :last, and these allow us to target even numbered elements, odd numbers elements and the last element in our given query.

In our next example we are going to create a checklist. That is, an unordered list with zebra strips and a function which allows us to click on a list item and change its colour plus put a line-through the text, showing that this item has been completed.

On a side note, this example is for the purposes of showing how something could be done and not how it should be done – we’ll get to that later.

OK, first let’s create our simple list:

...

    ...
    
        List item 1
        List item 2
        List item 3
        List item 4
        List item 5
        List item 6
    

...

Now let’s style our list items using .css(). First let’s give each item some padding:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");
});
...

Notice we are just running our usual selector with the .find() action and finally we are adding one CSS property to all the unordered lists-items – padding of 5 pixels on all sides.

Next let’s target all our even list items. Remember that arrays start with 0 so technically our first list item is even, not odd as you would expect. We’ll use the :even filter to do this:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });
});
...

Notice that this time our .css() action is a little different because we are specifying more than one CSS property. Make sure to remember this so that you don’t get tripped up in the future.

Now let’s style the other items in our list using the :odd selector filter:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });

    $("ul.list1").find("li:odd").css({ 
        "border-top":"1px solid #d3e9ff", 
        "background":"#e8f3ff" 
    }); });
...

And finally let’s add another border at the bottom of the last list item using :last:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });

    $("ul.list1").find("li:odd").css({
        "border-top":"1px solid #d3e9ff",
        "background":"#e8f3ff"
    });

    $("ul.list1").find("li:last").css("border-bottom","1px solid #d3e9ff"); 
});
...

If you save your document and refresh your browser you will see that we have created a very simple zebra strip effect.

Now let’s create our checklist functionality by using the this selector:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });

    $("ul.list1").find("li:odd").css({
        "border-top":"1px solid #d3e9ff",
        "background":"#e8f3ff"
    });

    $("ul.list1").find("li:last").css("border-bottom","1px solid #d3e9ff");

    $("ul.list1").find("li").click(function(){
        $(this).css({
            "border-top":"1px solid #fcf47e",
            "background":"#ffffea",
            "text-decoration":"line-through"
        });
    });

});
...

In this last query what we are asking jQuery to do is get any unordered lists with a class of list1 (ul.list1), find all the list items (li) within the unordered list, then, if any of the list items are clicked, apply the css following css styles only to the item that was clicked (this). Got it? Great, go check it out in your browser.

View the Tutorial Demo

.hasClass(), .addClass(), .removeClass() and if Statements

Remember how I said that the last example showed how a checklist function could be done but it wasn’t how it should be done? Well let’s learn how it should be done and while we are at it we’ll learn about .hasClass(), .addClass(), .removeClass() and JavaScript if statements, plus also add the functionality to unselect items too. Exciting, eh?

OK, first duplicate the unordered list items from the previous example and give it a class of list2.

...

    ...
    
        List item 1
        List item 2
        List item 3
        List item 4
        List item 5
        List item 6
    

...

Easy so far. Next we are going to style our list using CSS rather than jQuery. So we need to create a stylesheet and link to it in our HTML head:

...

    jQuery 101 - Learning the Basics
    
    ...

...

OK, next add the following styles to your stylesheet. These will look very familiar to you as they are the same styles that we used in the last example. The only difference to note is that I’ve swapped around the styles for odd list items and even list items. Notice that we are using CSS3 Pseudo-classes.

ul.list2 li { padding: 5px; cursor: pointer; }
ul.list2 li:nth-of-type(odd) { border-top: 1px solid #eee; background: #fcfcfc; }
ul.list2 li:nth-of-type(even) { border-top: 1px solid #d3e9ff; background: #e8f3ff; }
ul.list2 li:last-of-type { border-bottom:1px solid #d3e9ff; }
ul.list2 li.completed { border-top: 1px solid #fcf47e; background: #ffffea; text-decoration: line-through; }

We are almost done. Now just for our jQuery. We are going to run the same query as before. jQuery will find all the unordered lists with a class of list2, then will find all the list items within the unordered list. This time when the user clicks on a list item the jQuery will run an if statement. It will check if the list item has a class of completed by using .hasClass(), and if so will remove the class using .removeClass(). If it doesn’t has a class of completed it will add the class using .addClass().

...
$(document).ready(function(){
    ...
    $("ul.list2").find("li").click(function(){
        if($(this).hasClass("completed")) {
            $(this).removeClass("completed");
        } else {
            $(this).addClass("completed");
        }
    });

});
...

And that’s it. Go check it out in your browser.

View the Tutorial Demo

Conclusion

Hopefully by the time you’ve completed this tutorial you’ll have some good basics about jQuery and how to use it. This tutorial only scratches the surface and you’ve only just begun to delve into the exciting world of jQuery.

So “Where do I go from here?” I hear you ask. I’d recommend continuing your journey on the W3Schools jQuery tutorial where you’ll cover what we’ve already learnt here, plus expand your knowledge even more by getting to grips with actions like .animate(), learning about callbacks, using Ajax and much more.

Not enough for you? Here’s some more useful resources:

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

8 Take Away Thoughts from New Adventures 2012

Laura Montgomery — Mon, 23 Jan 2012 21:02:41 +0000

A few days ago I attended the New Adventures in Web Design conference 2012 in Nottingham. This was my first conference so I didn’t really know what to expect or what I would get out of the experience. Therefore I’m not going to compare this experience to a previous conference or comment on what they could have done or should not have done as I am not aware of the usual conference status quo. Plus I think the team behind the conference did such a wonderful job and I really cannot fault them on any area.

Instead I’ve decided to write about what I took away from the conference in terms of inspiration and professional knowledge. There were 8 speakers at the conference so I thought that I should write about the main point that I took away from each talk. These are of course my own take away thoughts and not necessarily the focus of each talk – although generally speaking, that is the case.

1. Design-ish: Behind, beneath, and between the comps

Speaker: Dan Mall

To constantly evolve and re-think my design process and my interactions with clients and colleagues. How can I change my process to come to a better solution? How can I create an end product that not only meets the brief but meets the needs the client didn’t even know they (or their audience) had. And this isn’t necessarily to do with the artwork, or the code, or the CMS used; but could be in the Invisible Deliverables – things like grids, design briefs, flow concepts, animation concepts. To tinker with the process and to look beyond the obvious.

2. Going Beyond

Speaker: Naomi Atkinson

Generally as designers we suck at self-promotion and self-branding. We don’t understand the role of the client, and yet get frustrated with clients when they don’t fulfil their role correctly. We forget that good self-branding allows us to mold how the world sees us. By evolving and developing our logo, our tone of voice, our style, our writing, we can change how the world perceives us. This also gives us the power to change the world and do something good and worth while.

3. We Used to Build Forts

Speaker: Travis Schmeisser

Sometimes its good to relax, chill out and remember why we got into design in the first place, to go back to our creative roots. With the endless responsibilities and deadlines of client work and even life, we forget how we used to create for the love of it and because on some level, we needed to. As designers we need to loosen up and let the natural creative process occur. Use personal projects as a chance to experiment and make mistakes, and use this growth in our client work. Re-find our creative identity and create for the sake of creating.

4. The Mindful Designer

Speaker: Robbie Manson

To re-claim your most powerful tool – your brain. To allow a concept or thought to develop away from tools, such as the computer. To become a mature and mindful designer by using mindful thinking – that is, to allow for experimentations and happy accidents, and to let mistakes teach you how to make successes. It is only by experience that we can make informed decisions.

5. Break Everything

Speaker: Trent Walton

To be innovative, we need to break things. This is how we can truly understand how they work and therefore how we can push them to their limits, and of course, how we can make them better. We need to put aside the fear of experimentation and failure because there are lessons to be learnt in failing. And in each failing we come a step closer to success, to true innovation.

6. The Potential Impact of Design

Speaker: Cameron Koczon

Each of us has the ability to have an affect on the world around us, and even the world at large, to have an impact, to change things. That change doesn’t have to be big but we should do it while doing something that we love. Make this year count!

7. Your Brain on Creativity

Speaker: Denise Jacobs

The core of this message was that ‘All work and no play makes Jack a dull boy’. Basically that in order to reach our potential, to be creative, we need to have down-time. Time away from work, from technology, from stress. We need to play, to laugh, to take time to breathe so that we can reset our batteries and get the two sides of our brain to re-sync again. Because it is only when they are working together that we can be creative and can do ourselves justice. It is time to stop over-thinking and time to banish our inner critic and allow ourselves to reach our creative potential.

8. It Moves

Speaker: Frank Chimero

A designer is anyone who wants to make things better, who can find the exceptional and is not distracted by the everyday. Good design is game-changing, even life-changing. When a design is exceptional, when it is so good, we don’t even notice it. Good design takes on a life of its own, it grows and spreads – it moves. Everything in our world moves and changes. And perhaps nowhere more so than in the web design industry where things are constantly changing, where every two years the whole industry has essentially re-invented itself. To be a good designer and to stay a good one, we need to accept, to embrace the ever-changing industry we work in and to move with it.

Want to know more?

Did the conference sound like something you really would have enjoyed and you’re gutted that you missed it? While here’s some useful links to this year’s website where you can read up on the event and even download this year’s newspaper – its only £1 and definitely worth it. Go on, be a sport!

Website: http://2012.newadventuresconf.com/
Newspaper: http://2012.newadventuresconf.com/paper/
Twitter: @naconf and #naconf

And I’d like to take this opportunity to thank everyone involved for making the event such a success. Such a great first conference experience – I’ll definitely be back!

Mid-week Inspiration #9

Laura Montgomery — Tue, 17 Jan 2012 08:00:46 +0000

It’s that time of the week again, time for some mid-week inspiration from Creative Individual. This week I’ve put together a bit of a mixed bunch – there’s lots of different styles on show in this week’s collection. From fun and simple, to highly polished with an impressive amount of illustrative detail, and others somewhere in-between – there’s something to suit everyone’s tastes and styles.

Check out the sites featured this week below, and as always, feel free to leave your thoughts and feedback below in the comments.

Enjoy!

http://www.giftrocket.com/

http://www.studio7designs.com/

http://liftux.com/

http://tradeomics.com/

https://popularise.com/home

http://www.offroadstudios.com/

http://www.renderwave.it/en/

http://www.discoverireland.ie/

What did you think of this week’s collection of Mid-week Inspiration? Which sites are your favourites? And can you recommend any beautifully designed sites for other visitors to check out? Please leave your thoughts and feedback in the comments.

Photography Showcase: The Four Elements Part 1: Earth

Laura Montgomery — Sat, 14 Jan 2012 17:07:05 +0000

This is the first photography showcase on Creative Individual and I’ve decided to make it the first in a four-part series. The series is The Four Elements - namely earth, wind, fire and water. And in part one, I’ve put together some interesting and inspirational images around the subject matter of Earth. More specifically I’ve selected images of rocks, cliffs and rock formations.

Enjoy!

White mineral formations above the lake | by mikkashar

Left foot in Yoshua Tree | by zilverbat.

Stone Formations 2 | by pilosopongfroilan

Antelope Canyon | by makipon

Cango Cave Formation | by orkomedix

Rock Formations – Muscat, Sultanate of Oman | by Alexander R. Yee

Swards Valley – Cappadocia, Turkey | by whl.travel

Natural stone formations | by mgrig7005

It’s raining stone | by mgrig7005

Venus | by GS+

2 of 3 Rock Formations off Point Buchon Trail just south of Montana | by mikebaird

Logan Rock & Pednvounder beach | by Mexicanwave

Grand Canyon – Thunder River Trail – rock formation on Esplanade | by Al_HikesAZ

Stones | by mac_filko

Natural stone formation | by andigirl

Stone formation | by gullevek

stone formation | by paul_xttp *busy*

Did you enjoy this collection of Earth element photographs? And do you think the series idea of The Four Elements is a good one? Let me know what you think in the comments below. And don’t forget to share links to your own images.

Also, the next collection in the series will be looking at the Wind element, so if you have any images that you think should appear in the collection then please share in the comments and I’ll be sure to add you to the next collection.

Just For Fun: The Kerning Game

Laura Montgomery — Sun, 08 Jan 2012 12:28:51 +0000

I recently came across the Kerning Game and felt I just had to share it. It is a great game for graphic designers and those interested in typography.

The object of the game is simple: move the middle letters in each word to make the text both visually pleasant and, more importantly, easily readable. Or in other words, kern the text. You then receive points according to how well you did.

Why not try it yourself: http://type.method.ac/

In case you’re wondering, I scored 94/100 so there is plenty of room for a seasoned typographer to bet me. Why not share your score below when you’ve finished.

Mid-week Inspiration #8 – 10 Fresh Sites

Laura Montgomery — Thu, 05 Jan 2012 19:29:13 +0000

Happy New Year and welcome to the first edition of Mid-week Inspiration in 2012. To get you inspired after the long christmas/new year break I’ve put together 10 sites which are fresh, clean, and a little bit different – helping you get those creative juices flowing!

Check out the sites featured this week below, and as always, feel free to leave your thoughts and feedback below in the comments.

Enjoy!

http://hatbox.co/

http://www.vignettebrandcommunications.com/

http://thrivesolo.com/

http://onedesigncompany.com/

http://www.griplimited.com/

http://captaindash.com/

http://www.nest.com/

http://lifeinmyshoes.org/

http://www.operaliege.be/fr

http://www.jibevisuals.com/

Mid-week Inspiration #7 – Diagonal Lines & Animation

Laura Montgomery — Tue, 15 Nov 2011 08:30:35 +0000

This week’s mid-week inspiration is a small collection of only 3 sites but ones which I think are good enough to stand up as prime examples of an emerging trend.

Recently I came across the Citroën DS5 website which blew my mind. Using bold diagonals and lots of CSS3 transitions and Javascript to create some mind boggling animations, this site shows what can be done when technical capability and extraordinary imagination meets the guts to give it a go.

Check out this week’s short, but very sweet, collection of inspirational sites which use diagonal lines and animation to drive home their message:

Citroën DS5

Starting with the site that brought my attention to this trend, the Citroën DS5 website uses smooth, sliding animations, fades, and zooming effects to create a truly interactive experience. The key messages fade in on page load, while images and body text slide in when you scroll down the page. Plus there’s some layering and parallax style effects with page elements floating above and beneath one another. They have even taken the diagonal element into the site navigation.

http://www.ds5.citroen.co.uk/uk/

Redirect Digital Marketing

This example from Redirect Digital Marketing combines stylised illustration from Jonathan Calugi with similar effects that we previously seen in the Citroën DS5 site. The animations and illustrations really bring out the company’s personality, and shows that they are at the forefront of online design and development. What better showcase could an agency ask for?

http://www.redirectdigital.com.br/

Hyundai Veloster

Not only have the designers of the Hyundai website used great animation effects but they have also used a simple and effect design too. I personally love how they have played with the (mostly) diagonal line to create different dimensions and floors for the car graphics to site on. Plus some beautiful typography really finishes the design off. Good work!

http://www.hyundai-veloster.eu/

Conclusion

I will be the first to admit that this trend won’t work for every site, in fact I think very few sites could pull it off! However for those projects which can accommodation such a daring design, what better way to showcase your product or company than with a site that is so exciting and engaging? This is one trend that I love.

What did you think of this week’s collection of Mid-week Inspiration? Which site is your favourite? Do you know of any other sites using this style to communicate? Please share them in the comments below along with your thoughts on the trend.

5 Sources of Online Inspiration You Can’t Live Without

Laura Montgomery — Mon, 31 Oct 2011 08:30:56 +0000

Welcome to the second edition of 5 You Can’t Live Without. In this edition I am going to share 5 sources of online inspiration that I recommend every website designer is familiar with. The focus of the websites I’ve included is particular to following design trends and developing your own style.

This one was an interesting list to put together with so many great online sources out there and that is why I have decided to focus on the artwork angle in particular. So, let’s find out what sites have made my Top 5 list, and which one I consider to be number 1.

5. Forrst

Website: http://forrst.com/

The first of our critic websites, Forrst is useful as a source of inspiration even if you are not a member. You can see what leading designers (and developers) are up to, get a measure of the level of the craft at the top of the design game, and if you are a member, you can also receive thoughtful critiques of your work and give helpful comments on the work of others.

4. Dribbble

Website: http://dribbble.com/

The second of our critic websites, and the more widely known one too. Dribble describes itself as a ‘show and tell for creatives’ and its here that you can sample the crème de la crème of the design world. Just like Forrst, it is still useful even if you haven’t received that elusive invite as you can still view the work of others in your field and browse and search the site for relevant content.

3. Noupe

Website: http://www.noupe.com/

Noupe is part of the Smashing Network (the people who bring you Smashing Magazine amongst many other great quality sites and books) and describes itself as ‘The Curious Side of Smashing Magazine’. The site is very design focused and as well as posts showcasing great examples of artwork, typography, photography, patterns, illustration and themes, it also promotes useful online resources and publishes articles on design theory and design tutorials.

2. CSS Awards

Website: http://www.awwwards.com/

With the prestigious award of ‘Site of the Day’ available, you can be sure that this website is continually updated with great design from around the world. It is bursting with examples of great design work and should be more than enough to spark some creative ideas of your own.

1. Designer & Blogger Chris Spooner

For the number 1 position on my list, I have decided to select a designer rather than a site. The reason for this is because Chris Spooner is a very productive designer, with at least 4 blogs that he manages (including one for his four-legged friend Jake). And the two of his sites that I have selected as great online resources for designers are:

Website: http://line25.com/

Website: http://www.blog.spoongraphics.co.uk/

Proof in itself that Chris is an inspirational character is the fact that Blog.Spoongraphics is the first blog that I ever followed, and still follow to this day. And also the fact that being continually inspired by Chris’s multiple weekly posts is what made me want to start my own design blog.

I don’t think anyone else online has inspired me half as much as what Chris does and that is why without a doubt he is my number one online source for inspiration.

What did you think of the post? Are there any other online sources that you would add to the list? What sites makes your Top 5 List of Online Sources of Inspiration? Share your thoughts in the comments below.

Designing for Humans

Laura Montgomery — Sun, 30 Oct 2011 11:40:36 +0000

By it’s nature the web can be a pretty cold place. Reading on screen can be hard and websites can look boring at times; and at worst, confusing and uninviting.

When we come across a site that’s different for all the right reasons, it often sticks in our head because it was an enjoyable experience. Can you remember a site that was warm and welcoming? Where the text was clear and easy to read? The navigation was easy to follow? That site was well-designed. Its designer had the end-user in mind at all times during the design process.

There are not always set ingredients which make the perfect website cake, but there’s certainly plenty of ways to improve your website, and in turn, a user’s experience; to make your site a nicer place to be.

The Design Devil is in the Detail

Without the extra attention to detail, websites can be pretty flat and boring, even ‘samey’. A lot of times they can look nothing like the world around us, making them hard to relate to and the online experience poor. This is a problem.

This is where we as designers need to take the extra step and design websites that people can relate to. When we design for humans, for the people who are actually going to be using our websites, we create better solutions to the design and communication problem we have been set. And often, designs appear simpler, cleaner and more elegant.

Already a lot of designers have taken this step and are designing websites that just make sense. Without the continuous changes in the web industry – the developments that have been made to figure out what works and what doesn’t – the internet would still be in its infancy in design terms. It was not so very long ago that we threw every trick we had into every website we designed and built; just because we could, and not because we should.

Dare I say it – we could still have an online world were animated gifs of glitter unicorns and bright green text on a black background are still the norm! Thankfully we have move on from this. But there is still much we can do to improve.

Design you can Relate to

This is where designing for humans comes into play. There are lots of articles which talk about User Experience (UX) and the User Interface (UI). And that’s not quite what I am about to explain. If you want to read about this, here are a few resources to get you started:

inspireUX – User Experience quotes and articles
SitePoint – How to Quantify the User Experience
Jakob Nielsen’s Alertbox – Top 10 Mistakes in Web Design
Webdesigner Depot – Strengthening Behavioural Cues in UX Web Design with Gestalt Principles

What I want to talk about is designing websites which look familiar to us, which look like the real world, which even have depth and dimension and actually ‘feel’ tactile. It’s these elements of design which make a visitor feel at home when they arrive at your website door.

So how can we achieve this?

1. Create a Light Source

In our lives away from the computer screen, our world has many light sources – the sun, moon, stars, street lights, lamps, candles, TV, etc. These create highlights and shadows on the multitude of objects in the world. They create different tones and shades of colour. And this gives our world depth and dimension – something not easily replicated on a flat surface such as a sheet of paper… or a computer screen.

We can however replicate the effect of light using gradients and drop-shadows, to create the highlights and multitude of tones we see in the real world. Drop-shadows give us a sense of depth and allow us to place objects above and below others, creating a stacking effect and even a sense of third dimension.

Plus as designers we can use this effect to give objects priority over others; to draw the visitor’s attention towards a particular goal, such as a call-to-action.

Even with all this depth something can still seem missing.

2. Add Texture

Everything in our world has a texture. Whether rough or smooth, furry, soft, hard, cold, sharp or a whole host of other possibilities, everything is tactile and has its own unique feel.

Unfortunately we can’t re-create the actual tactile-ness of our world on screen (but how great would that be?) so instead we need to use visual clues of texture to convey the concept and to trigger the memory of texture in the mind of the site visitor.

Well use textures are often subtle, so we need to be careful not to over-do-it. But when used well, texture can really set a website apart. Whether its the promise of sand between your toes from a holiday accommodation website or the prospect of great views and dirty shoes from an outdoor adventure centre site, texture can be a great asset in reinforcing the message in your site’s text, and the propose of the website itself.

3. Make it Look Real

People relate best to what they know. If a visitor comes to your website and has to learn a new visual language, chances are you’ve lost them.

By making your design elements look familiar, by basing them on their real-world counter-parts, you are placing your visitor into a world that they are familiar with and where they feel at home, rather than on an alien planet.

There are many ways to achieve this. It could be image slides that look like a stack of Polaroids, an events calendar that looks like a wall calendar, or the use of icons to represent information, such as telephone, email and postal address.

Some designers have even went a step further and created a website environment which looks and behaves like the real world. This solution isn’t easy to achieve, and nor will it be suitable for every design problem, but when it works, it really works!

4. Don’t Forget the White Space

So easy to get wrong, both by not spacing your content or by in fact over-doing-it. White space is just like a room – most of us can’t work in a messy room, so don’t make your site visitors read cluttered content. Because quite simply, they won’t.

On a pole to that, I believe that too much white space can also be a bad thing. Ever been in an empty white room? Talk about boring! Also by spacing out your content too much you can break the flow and make your page fragmented. Worse still, visitors might not even realise that there is any more content!

Note: White space is not empty space – it is a key element to great design and therefore should be carefully thought-out. It also does not have to be white.

5. Create a Hierarchy

This is where careful consideration of your content comes into play. Whatever you’ve got – images, text, video, diagrams, even music – it all has to work together in a way that flows and makes sense. In its simplest terms, you’ll want to take a visitor from an initial simple concept, to overview content, to detailed content.

Take the example of a website promoting a product. Often you’ll have a simple line or two of text along with the ‘hero image’ which explains the product (or its purpose) on a very simple level. If the visitor likes this, they often get 3-4 key features of the product, maybe a demo video, maybe a testimonial, and in certain cases a bit about the company. If any of these is of interest to the visitor, they can usually read more on a new page which goes into detail.

The visitor gets the information that they want, in the level of detail that they want, and the content flows easily from one level to another. This is effective use of hierarchy in your website content.

6. Make it Legible

Building on the previous two points, make sure the visitor can read the content. No matter how great your site’s design is, chances are that the visitor is there for the content. By making effective use of layout, white space and hierarchy, you can make content more accessible to the visitor.

Other simpler considerations we as designers need to be aware of are font size, use of titles to break up text and create sections, and contrast between the text and the background (and remember that too much contrast can also be a bad thing).

7. Push Your Unique Selling Point

As much as we like things that are familiar to us, we also like it when we come across something that is different or even unique. If your website has a unique selling point, or is selling a product or service that is doing something different, use this to your advantage and push its unique selling point to its limits.

However if you are creating a website where the subject matter is fairly run-of-the-mill, then you may want to find a different design solution to communicate to the site visitor, to help you stand out from the crowd.

After all, variety is the spice of life!

In the End, It’s All About the Site Visitor

Design considerations which keep the end-user in mind can go from fairly skin deep decisions, such as text and background colour, to more thought-out and carefully considered decisions that can affect the whole site’s layout.

What I have discussed above is by no means an extensive list but points which I hope highlight the importance of good design choices in order to make a successful website that people will want to spend time on.

I am sure that there are many more points which come into play in your design process, some of which I may not have even considered. And I hope that you’ll share these in the comments below.