A bit of self promotion here, I hope you don’t mind. So for the past few weeks (probably months now) I’ve been working on my own marketplace to sell my work. I decided not sell through marketplaces such as themeforest because I wanted a bit of exclusivity and I also wanted to design my own website to house my work. So I ended up with what you see below:

I am extremely happy in how it turned out and have already added an additional web elements pack called ‘Irresistible’. I will continue to add to the marketplace every so often. I may even remove older items to add a bit more exclusivity.

To all the readers of CreativityDen I have decided to offer the whole marketplace worth $37 for just $15. To purchase two web element packs, the icon set and the template for $15 you can use the following link:

If you’ve been a long time reader of CreativityDen, enjoyed it’s content and decide to buy anything at the marketplace I will be very grateful. The time has come where I kinda need the money :/

In the meantime I’m not giving up on CD you will still see some posts being published every now and then.

Have a great week!

Liam

So I noticed a site I regularly visit called 9gag implemented a little nice glow to their sign up button. The button certainly got my attention, proving the glow did seem to work on me so I’d thought I’d show you how to add glows to your own buttons.

It’s very easy to implement. The only down side to the glow is browsers not supporting webkit won’t be able to see that gorgeous attractive pulse. That still doesn’t mean we can’t treat our users who like to update their browsers.

Assuming you have your button, the first thing to do is develop the animation using a number of ‘key frames’. If you imagine an animation, key frames are the state of the animation at a given time. So for example if you want the button to be green half way through the animation you stick a key frame in.

The CSS for a glowing animation would be something along the lines of this:

@-webkit-keyframes greenGlow {
          from { background-color: #88c23f; -webkit-box-shadow: 0 0 8px #333; }
          50% { background-color: #91bd09; -webkit-box-shadow: 0 0 16px #91bd09; }
          to { background-color: #88c23f; -webkit-box-shadow: 0 0 8px #333; }
        }

source

This is our animation CSS, and to add it to an element, the following code is used:

-webkit-animation-name: greenGlow;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;

source

The animation used on 9gag uses three key frames. All these keyframes added together last for 3 seconds and loop. This gives the button a constant pulsating type glow.

It’s important to note that when adding a glow, the addition of key frames will add to the fluidity of the animation. For example a button going from having now box-shadow (how the glow effect is produced) to a having a large box-shadow will not look as smooth as adding a key frame or two. These added key frames will include a smaller box-shadow and perhaps a slight colour change to make that button ‘pop’ just the right amount.

Thanks goes to the designers over at 9gag for producing such an elegant glowing call to action button

If you take a look at the recently launched WPBundle, contained within the elegant and unobtrusive web design you will see the buy now button. There a few things I like about this button. The first is the division of two sections. The price is clearly labelled, and the button is clearly defined as a ‘buy now’ button. Although the term ‘buy now’ can seem a bit vague, I feel it works well as the whole website is dedicated to selling the WPBundle, so there should be no confusion as to what the button will buy.

The design of the button remains consistent with the design of the website with some subtle states of interaction. It would be interesting to test whether a stronger, more vibrant colour would attract more users to purchase the bundle. Perhaps a more contrasting colour.

As WPbundle is sold through Woothemes, I also decided to take a look at their buy now button.

Woothemes takes a  slightly more common approach with a big bold green button to entice it’s visitors to buy their themes. The ‘WordPress’ part is emphasised suggesting they sell themes for other CMS’s however there is no price indicated until you click the button. A very risky move by Woothemes as this was previously not the case. If a visitor wants to purchase the theme and no price is given, he/she is likely to feel slightly uneasy clicking a button without knowing the consequences of that action.

Nonetheless, when the button is clicked it reveals a popup ‘bubble’ displaying the two options for purchasing this theme. Contrasting colours are used to display the price, however I don’t understand why the same colour isn’t used for the ‘buy standard’ and ‘buy developer’ buttons. Having said that the visitor should understand what exactly he/she is purchasing with details of the product clearly listed.

Above you will see the buy now button for the marketplace, Themeforest. What I like about this button is that it’s more a section than just a single button. The price and description of the product is clearly displayed with the button gaining most of the attraction due to its more intricate design. Having the price separated from the button and instead displayed next to the button is an interesting approach and one I feel gives more emphasis towards the price rather than the button.

The final buy now button I would like to look at comes from 365psd.com.

Although 365psd is solely about giving away a free psd for every day of the year, due to it success it now offers a number of premium products which visitors can purchase. The buy now button here is very basic but that does not mean the details are missed. This example seems to be the only example that makes use of a good contrasting colour for its button. The typeface used for the ‘buy’ text however is not instantly readable and with the button only being visible on hover, these two factors may have a negative effect of possible purchases. The price for this website is displayed in the thumbnail of the product, this clearly labels the product, almost like a stamp. The button and the price, I feel, work well together.

Summary

So to conclude, buy now buttons must:

• use a good sized readable font.
• a good contrasting colour for emphasis.
• contain the price or be positioned near the price of the product.
• always be displayed with details, no surprises on hover or click.
• inform the visitor of what it is exactly the button will buy.

Having said that I had variety of reasons to stop which may still need some overcoming. When I started CreativityDen I didn’t have a clue about the design community and at that time I only visited a few sites about web design and development. However, after a few weeks after launch I noticed the sheer number of ‘design blogs’ out there. All their content was the same. I attempted to write longer and more unique posts but I am still undecided to whether they made a difference.

Then there is the design community itself. I found there are many areas/levels to the community. I had managed to get sucked into the wrong level. To this day I receive at least an email a day from other design blogs requesting I up vote their posts on social sites. I haven’t up voted in months yet I still receive emails. The writers of these design blogs have been overcome with greed and popularity. I was much the same at one stage. Constantly checking analytics, constantly asking for votes and constantly forgetting why I started CD in the first place.

I am now once again, reconsidering writing for CreativityDen. My decision will be entirely about your thoughts. If you want to see new posts everyday (trust me I have the time) then let me know what topics to cover. If you think CD needs a fresh start with a redesign, I would happily oblige. If you feel CreativityDen isn’t bringing anything new to the table or I simply get no response, then I will just leave CD as it is. I have always made a effort to please my readers and so I ultimately leave the decision up to you.

One of the many reasons to why I want to buy an iPad is the beautiful design it features. Not only is the product itself designed beautifully but the apps that are built for it tend to have truly impressive user interfaces. Since there was a quick increase in the number of gorgeous app designs I decided to collect and showcase the ones I thought were the best. Hope you like them and I would like to thank LandingPad as the majority of the screenshots came from there and not to forget the developers and designers who worked on the apps.

Web design continues to grow and advance with new features constantly being brought forward through browsers, programming and markup languages. Being creative doesn’t necessarily being the first to use these new features but instead being the first one to experiment. Take a look at the border-radius property, on first glance it just just rounds off corners, but when you begin to delve deeper and experiment you realise that the property can do much more than just round off corners. To be creative you don’t have to magically spark new ideas all the time, sometimes its about working with what you have and ‘thinking outside the box’. In this post I shall be sharing and explaining a number of creative uses of transparency in web design.

This post has an autoplaying video for the example hinted above, be warned, I know some of you can hate autoplaying flash videos (including me) but this one is okay, just some relaxing music while you read.

The Principle

The principle is fairly simple. As with Photoshop if you imagine a website is divided into layers. One div will appear on top of another, whilst another div may appear below. If some areas of a div are transparent you will be able to see what is behind that div. You could have an animation going on in the background for example but only display a select area using transparency in the foreground.

The Showcase

Not many people have experimented with this concept. A few have played with opacity to reveal elements and/or a, background behind but few have used transparency for a specific purpose. Although there are a few creative uses out there.

FRESH01

The first website that demonstrates a creative use of transparency is FRESH01. Designed by Adii of WooThemes. The website features a fixed header navigation bar and two transparent circles either side of the main content. Inside these two circles various elements are displayed, from dates of posts and category icons to a dashed pattern which weaves left and right as you scroll.

Above you can see how the idea comes into play. There is a background and foreground and whatever you would like to be displayed in the foreground you place in the circles. Why use transparency for this? I guess it would be very hard to recreate the weaving dashed line any other way.

We Bleed Design

If there is one website that has appeared the most on CreativityDen it would have to be Bryan’s We Bleed Design. The clever concept gives the user such a fun experience that entices them to revisit the site again and again. By using a fixed image in the background and playing with transparency with foreground, scrolling down the website has never been so fun. With the addition of some jQuery and automatic scrolling you can enjoy browsing the website without even draggin the scrollbar down.

Below you will see a small portion of the website. It is an image with a number of transparent areas so whatever is displayed behind comes through. The image is quite large.

Massive Blue

Sam Brown has also used a little transparency in his new portfolio design. Alongside a CSS3 transition you will notice the background change colour but also the logo.

Think Geek

A final example of a creative use of transparency is ThinkGeek’s footer. The footer uses a transparent gradient image to replace the background image. A very cool effect indeed. If you are interested in seeing how this effect was achieved then head over to CSS Tricks. Chris did a wonderful screencast on the matter.

Is that it?

A question you should always ask yourself. The answer should always be no because there are no limits to how creative you can be. I have been no more creative then the above designers, I have simply used the same effect but with a video as the background. The transparent area could be anything you want but for this example I just set it as text.

Pretty cool eh?

The possibilities are endless when it comes to transparency. For a number of months now I have had the idea of achieving a similar effect as GrayScaleGorilla’s mask animation using jQuery. Maybe you could give it a go.

Since I am a huge fan of LOST and the finale is about to air in roughly 12 hours I thought it would be fitting to celebrate the huge success the show has had. Now some people say there are lovers and haters of the show, I for one believe the haters only hate because they are missing out. The suspense and overall plot of LOST is incredible, the writers seemed to have perfected the ‘cliffhanger’ ending across the years leaving fans right on the edges of their seat. If you haven’t watched any episodes of LOST I strongly suggest you do, if you gave up on the show for various reasons I can only say give it another chance. So in this post, to celebrate, I have showcased some of my favourite LOST fan art I have seen over the past couple of years. I hope you enjoy this post and also the finale coming very soon.

Have I missed any? If you have a favourite piece of fan art that I have missed, feel free to share it in the comments section below.

The amount of icon packs currently available for commercial use is vast, to say the least. Every now and then when you’re working on a design and want to find that perfect icon, you spend hours searching the web. Even if you stay focused and manage to find that icon, you’ve probably been sidetracked to such an extent that you don’t know where the icon goes or what you wanted it for in the first place (exaggeration…or not?). This happened to me a fair few times until I started collecting some icon sets I liked and used regularly. Those sets can be seen below, I hope you like them and if you do, don’t forget to pay your respects to the authors.

Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.

The HTML

The following HTML was used to create the subscription box. Bear in mind this will have no function, I am merely showing you how to design rather than code.

<html>
<head>
	<title>CSS3 Subscription box</title>
</head>
<body>
	<div id="container">
		<h1>Subscribe</h1>
		<form name="input" action="#" method="post">
			<input type="text" name="email" value="Email Address" onclick="value=''"/>
			<input type="submit" value="Sign up" id="submit"/>
		</form>
	</div>
</body>
</html>

The beauty of CSS3

The main CSS3 properties I will be looking at today are the text-shadow property, the box-shadow property and the webkit/moz gradient property.

The above image gives a brief explanation to where some of the CSS3 properties have been used, just in case you thought any images were used.

The container

#container
	{
		text-align: center;

		padding: 20px;

		background: -webkit-gradient(linear, left top, left bottom, from(#243d63), to(#1a2638));
		background: -moz-linear-gradient(top,  #243d63,  #1a2638);

		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;

		-webkit-box-shadow: 0px 1px 0px #000;

		border: 1px #1a2638 solid;
	}

The CSS3 properties used above will be explained individually later in this post

The header

	h1
	{
		font-size: 50px;

		margin: 0;
		padding: 0;
		color: #fff;
		font-family: Arial;

		text-shadow: 0px 2px 3px #000;
	}

The above CSS was used to style the header. Fairly simple stuff. The font size is 50 pixels high, the color is white (#fff) and the font is Arial. The first CSS3 property used is the text-shadow property. It has four attributes. The first two position the shadow. ’0px 2px’ would mean zero pixels down and 2 pixels right. These two values can also be negative to position the shadow to the left and up. the third value of ’3px’ is the size of the shadow or blurriness. Lastly, the final value is the colour.

The input box

	input
	{
		font-size: 16px;

		width: 350px;
		padding: 20px;

		border: none;

		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;

		text-shadow: 1px 1px 0px #fff;

		-webkit-box-shadow: -1px -1px 0px #000;

		background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#efefef));
		background: -moz-linear-gradient(top,  #ffffff,  #efefef);
	}

There are a number of CSS3 properties used to style the input box. The first is border-radius which rounds off any corner of an element. The larger the value the more rounded the element. You can also round off individual corners by specifying four values, with the first being the top left corner and the last, the bottom left corner (clockwise motion).

The text shadow property we have seen before. The box-shadow has exactly the same attributes but is used to add a shadow to a specific area rather than text. By setting the blurriness to 0px, you are practically duplicating the area. I have positioned the shadow 1px above and to the left of the original area to create an inner shadow effect.

The last property adds a gradient between two specified colors. As the gradient property can be a bit extensive, feel free to read the official article regarding this property.

The Button

The button makes use of three CSS states. The normal state, the hover state and the active state.

Normal state

	input#submit
	{
		cursor: pointer;
		color: #fff;
		font-weight: bold;

		width: 140px;
		margin-left: 20px;

		text-shadow: 0px 1px 2px #000;

		-webkit-box-shadow: -1px -1px 0px #4bc824, 1px 1px 0px #000;

		background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));
		background: -moz-linear-gradient(top,  #369a18,  #205f0d);
	}

Nothing you haven’t seen before, however it is possible to have multiple shadows by adding a comma between attributes. I have used two shadows here to create a highlight and a drop shadow effect.

Hover state

	input#submit:hover
	{
		background: -webkit-gradient(linear, left top, left bottom, from(#46b725), to(#205f0d));
		background: -moz-linear-gradient(top,  #46b725,  #205f0d);
	}

The hover state just sees a lighter start color to the gradient.

Active state

	input#submit:active
	{
		-webkit-box-shadow: -1px -1px 0px #000;

		background: -webkit-gradient(linear, left top, left bottom, from(#46b725), to(#205f0d));
		background: -moz-linear-gradient(top,  #46b725,  #205f0d);
	}

The active state has an inner shadow effect giving the impression that the button has been pressed.

There a number of reasons why you may want to be a designer, the flexibility, the freedom and the potential to become the best in your field. But there is one area that continues to push me towards a design career and that is the office or workspace. Designer’s tend to have such gorgeous desks and computers that I envy and continue to strive for. Below is a collection of beautiful workspaces courtesy of Deskography.