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.

Showcase

Interview

CZ Custom logo was designed by Jan Zabransky, very talented designer from Czech Republic. He is one of the busiest as well but he somehow found a spare second to join us for this interview, so let’s use that opportunity while we still have a chance!

1) Hello, Jan! Why did you decide to have a body figure for this logo and use this illustrative technique?

Hi Alen, illustration in CZ CUSTOM logo was intentional. First of all I want to introduce to reader background of clients brief. Logo was done for specialized on-line store of Angus Hobdell & Ghost Products Inc. E-shop is the home for all IPSC International Practical Shooting Confederation) and USPSA (United States Practical Shooting Association) shooting needs. Major part of the logo is illustration of Angus Hobdell – awarded US Multi Grand Master, 4 times STI/American Handgunner Shoot Off winner and multi-British & European champion. Handgun, he is shooting with on the illustration is CZ 75 SHADOW
Custom Shop pistol. This pistol is the flag ship of store product portfolio and it is presented by characteristic details and shape. So this brand is visually presented especially by portrait of his owner in logo, who is well known in community of customers and target audience.

2) Can you pick out 2 or 3 more logos from this selection and tell us why do you like them?

My favorite logo among this collection is definitely Roy Smith´s Yoga Australia. About two years ago it was one of the logos I saw and then “fell in love” with logo design and started my career as logo designer. Thanks for this moment of inspiration if you read this, Roy. Why I like it so much? It looks great, communicates subject to target audience, it is simple and unique! At first sight attracts and grabs attention by a smart idea with negative space, original style and well
elaborated execution. It is instantly representing subject to target audience. There are anchored answers in design, that immediately tells story about who, what and how. It works across all media, through all sizes. Design is so brilliant, that there is not even color needed to gain attractive look. And what is most important, it is unique logo, is good enough to stand test of time and will be recognized in competitive environment. That is why this logo is iconic. But all logos in your collection are masterworks. We should discuss why is it so for the long time. I let me pick two more from this selection that
I like very much. It is Gerhardt Bakery for great style of illustration and 4R for simplicity and sporty look.

3) Is there any special approach to this kind of style: do you use photography for a base, traced images, how does it work?

My approach to illustration is usually based on photography. As I have photo I trace basic shape into vectors and after that modify details, shadows and outlines. In case of CZ CUSTOM logo there wasn´t photo of Angus Hobdell in desired position available. I needed position of a shooter with attention on a pistol and face in this illustration so I searched through dozens photos of shooters on internet until I found it. In tracing and vectorizing stage it was hardest to draw shooters face recognizable as Angus Hobdell´s. There were modifications needed on a shape of a gun, too. That was important because gun has to represent specific model in this illustration.

4) Do you maybe know of some well known global brands that use the same style for their own visual identity, like NBA for example?

Redesigned KFC Colonel from 2009, AkzoNobel is beautifully done and especially some of US and Canada sport clubs logos from as you said NBA and NHL to NFL as well.

5) And at the end, as usual, feel free to share some tips to other designers that could improve their skills for this kind of logos.

Most important is study to draw, study anatomy of a human and animal body, perspective principles, shading and do a lot of portraits. Comic books are great inspiration for this too. It is a lot of time consumption work but it’s the only way to make realistic and good looking illustrations for a logo design.

Personal mini-sites (or vCard sites) are simple one page websites that have become extremely popular over the last couple of years. They serve as brief personal introductions to the owner, and launch pads to their profiles and content on popular web sites and applications.

They typically share the following properties.

• A single page, with JavaScript often being used extensively to switch between sections
• A mini biography (sometimes as brief as just a few words describing where the owner’s job title and place of work)
• Lists of interests and hobbies
• Links to websites, social networks and profiles on various other popular websites
• Contact details (email addresses, phone numbers), and sometimes a contact form
• A personal touch to design aesthetics and navigation interaction

This article is more of a high-level overview of my design and build process when creating my own mini-site, rather than an in depth tutorial that goes line by line on technical details. If you’d like to find out more about a particular aspect of the site, jump straight into the code and take a look, and if you have any questions then you can either leave a comment here or get in touch with me directly.

A brief history

I produced my first personal mini site in 2005, in the form of a web based CV while I was seeking a full-time job. I wanted something that stood out from the crowd of template based Word document CVs, and as someone working with web technologies, what better medium for my CV than a website? It was a very basic site without any fancy JavaScript, and as it was effectively my CV, the content focused heavily on my skills and interests (all of which have since either evolved slightly or changed completely).

I landed a full-time job (with a little assistance from my site, although it was mostly my suave interview technique that won it for me), and I promptly forgot about the site altogether.

Fast forward a few years, and Tim Van Damme launched his mini-site that resembles a rolodex card. The look and feel of the site was and still is remarkable, and it spawned a huge wave of similar sites, ranging from inspired derivations to horrendous rip-offs. After being inspired by Tim’s site, and some of the amazing work that was listed on Tim’s Wall of Fame (now no longer being updated), I decided it was time to tear down my old mini-site and put something new together.

Concept Development

With the popularity of Tim’s design and the many hundreds of spin-offs based on his work which followed a similar structure, it was clear to me that the “card” metaphor had been done to death. I wanted something different, so I started planning.

I’m a strong believer that design work should always start on paper, and usually with words rather than graphical forms. My first step was to identify the content I’d have on my site, because of course you can’t expect to be able design something until you know what its purpose is. The content outline came out like this:

1. Mini biography, with a bit of personal background and covering my hobbies and interests
2. Photographs I’ve taken, since that’s a major hobby and I have a bunch of shots I’m really proud of on Flickr
3. Links to profiles and presences on other web sites and apps
4. Contact methods (probably email and Skype)

The Design

When designing, it’s always important to know your preferred aesthetic style and your specific areas of expertise, and to play to those strengths. I’m actually rather hopeless when it comes to conjuring up graphical interface wizardry in Photoshop, so I tend to rely on my weapons of choice:

• Clean, simple but well structured layouts
• Strong typography (let the type be the interface)
• Close attention to detail in visual hierarchy, spacing, colouration, and so on

Once you can identify your core strengths as a designer, you’ll know where your comfort zone is and where you can impress, and also where you might to practise a bit more (like me and graphical interface elements).

I then started to play around with some layout ideas, focusing mainly on how the navigation between content sections would work, since this was pretty much the main aspect of the site, and would probably be the only element (besides my name) on the page.

I was starting to settle on the idea of having really big type for the navigation, with the content for each section revealed when the relevant heading was clicked. JavaScript accordions are often mis-used, but I decided that if avoided the cliches of accordion headings wrapped in glossy bars and over-engineered transition effects, and turned almost the entire page into one big accordion, then it might be quite an interesting way of categorising my content.

The Process

For a design this straightforward, I pretty much bypassed Photoshop altogether, going from rough sketches on paper directly to TextMate and Firefox/Firebug. My workflow for starting a new project goes as follows:

1. Set up site folder structure, open up HTML templates and CSS Reset (I use a modified version of Eric Meyer’s Reset Reloaded).
2. Write the markup as cleanly as possible, entering content as I go
3. Write CSS, starting with the site’s layout and then working down from the top of the page
4. Refine and polish the CSS, making changes to the markup where necessary
5. Add any images required
6. More rounds of cleaning up

This got me to a stage where I had the content for the about section (which I liberally styled with some typographic treatment), the social networks and the contact sections sorted.  That just left the Photography section which is the most complex.

Rather than go for a more typical JavaScript image gallery with sideways scrolling between items, I wanted to make use of the excellent jQuery Masonry plugin to display a nicely tiled layout of image thumbnails, which are of varying sizes. With some help from Marc, the in-house development wizard at Neutron Creations who put together some jQuery to pull my photos with specific tags from the Flickr API, this eventually turned out almost exactly as I envisioned on paper.

Design refresh

After living with the design for a few months and continuing to work on other projects, I started getting bored of Helvetica. I’d been overusing it a bit, and was on the lookout for a replacement typeface for my site when I found FF Enzo Web on Typekit. It has a lovely technical, almost stencilled feel to it that’s reminiscent of architectural draftsman’s hand lettering which I’ve always admired.

What we have to come to terms with is that data visualization can be used anywhere. Navigation is filled with data. It contains a list of links to pages on your website or to other websites. So why do the web designers of today always display these list of links in the same way? Why not develop a pie chat type navigation or line graph? Not only this but there seems to be a lack of creativity when it comes to data visualization. When was the last time you saw a ‘new’ type of graph. This article will highlight some of the brilliant data visualizations we see around the web along with some that we could or should see.

Current popular methods

Now I am no expert when it comes to data visualization and if I say there very few ways to represent data, a table, a pie chat, a bar/line graph, I am most likely wrong. For one these are two dimensional. However, the current forms of data visualization of today are probably the most efficient ways of representing data, hence why there have been no new developments.

Tables

Take the table for example, a simple representation of data using rows and columns to arrange data. Websites that use tables and their default CSS stylings in web design are not particularly exciting. However, when you visit websites such as wufoo you can see the potential of beautifully styled tables. Bare in mind a table does not have to use the dedicated tags supplied by W3.

Pie charts

A further example of data visualization is a pie chart. I shall always remember who invented the pie chart thanks to QI. Florence Nightingale, a nurse during the Crimean War needed a way to better represent her data. She devised a circular graph known today as the pie chart. (After visiting wikipeida it would seem William Playfair has been credited for the first pie chart). I’m unsure if the name has anything to do with it’s origins but It would make sense if it does. Few websites tend to use the pie chart to represent data but the few that have pay close attention to the colour scheme. A section can be emphasized even if it is not the largest.

Bar and line graphs

Probably one of the most popular forms of data visualization is the bar or line graph. You will see these everywhere. In the newspaper, on the television, in books, everywhere. I feel the clarity of bar and line graphs have led it to be the most popular.

In todays websites these types of graphs find themselves on analytic websites. It is clear to see when you get a spike or a fall in traffic without any labelled axis.

Mint’s gorgeous bar graph displays the number of visits each day, the attention to detail here is outstanding. This graph also uses tabbed navigation to alter the data used.

Below are a couple more bar graphs used in web design. The right bar graph displays how many posts were published each month. Have you ever thought of displaying your blog’s archives like that?

Venn Diagram

Very rarely used in web design. However, when pulled off in excellent fashion (as we can see here from analog.coop) I can only see a rise in the use of Venn Diagrams. The team at Analog have inspired me to explore Venn Diagrams and I hope they have inspired you as well.

Incorporating these into your designs

It’s (relatively) easy to incorporate graphs into your designs. If you are experienced in Photoshop you can mock one up manually paying close attention to all the small details or if you’re not I guess you could save graphs produced in Excel as images and upload. There are also a number of JavaScript solutions for online graph drawing. It’s interesting to see that tables have been given the necessary HTML properties yet other visualization methods have not.

When staring a large chunk of data try and forget about lists. Instead delve deeper into a single list item. Say you want to display the latest comments from your blog. What could be displayed for each list item: the author name, the gravatar, the time and the comment itself. Now take a step back and think how this data could be displayed. Firstly, the first latest comment could be more prominent then the second, perhaps by size or colour. The length of the latest comment could determine the width of the containing div.

Experimenting

I think the time has come for all web designers or designers in general to begin experimenting with data visualization. The few that do, I would suggest moving away from infographics and print design. Make infographics interactive. Turn infographics into websites..

Analyzing what data you have

If you would like to design your own graph then first you must gather all the data that you would like to display. Group and categorize the data through abstraction until you have data that in it’s simplest form can be sorted into a table. Then analyze what each bit of data is, is it a colour, a place, a thing. Begin to think visually how each bit of data could be displayed. For example a place, such as a city could be displayed by the size of it’s population or by it’s geographical size.

Being creative

When visualizing data one doesn’t have to be entirely creative and reinvent the wheel. It is easier to experiment with current methods. Instead of using rectangles in bar graphs use an image, a skyscraper for example, each floor could represent a value. If you try to be creative you will undoubtedly fail however if you forget about everything but remain focused on visualizing data I’m sure you will succeed. Get off the computer, go outside. Spend twice as long looking at things that just pass you by on a normal day. I’m sure a number of designers will be familiar with analyzing every font/typeface used in a shop’s logo, looking at the layout of a restaurant’s menu or even looking at person’s dress sense.

Creative examples of data visualization

I assure you, you will find more inspiration from the world around you than from your computer. Nonetheless I have gathered a number of examples that demonstrate creativity when it comes to data visualization. Use these as inspiration but remember the real inspiration is away from computer.

Further Examples

15 Stunning Examples of Data Visualization
50 Great Examples of Data Visualization
30 new outstanding examples of data visualization
Grid Accordion with jQuery
Digg Labs

Showcase

Interview

This interesting ‘Showcatcher’ logo was made by an very experienced logo designer Sean O’Grady from Ireland. His fellow designers and clients also know him by the alias Fogra. He kindly accepted to share with us the secrets behind the 3D style in logo design, so let’s check it out together.

1) Hello, Sean! Why did you decide to use the 3D style here and how complex was to transfer your idea from the paper onto screen?

The client is a web-based company who gathers information for their clients from trade exhibitions through a wide range of media. The data is recorded for future reference, hence the name ’showcatcher’. They requested an ‘organic’ logo and they liked the look of a ‘cala lily’ and if I could possibly use it as inspiration. I wanted to create something natural yet modern. After many sketches and trial & error I managed to create a 3 dimensional appearance with the use of gradients. I provided the client with many colour options to choose from and they eventually chose the blue/green combination as their final choice. Helvetica Neue Light font was utilized for the name ’showcatcher’.

2) Can you pick out 2 or 3 more logos from this selection and tell us why do you like them?

‘Tincau Nicolae’ by Capota Florin (AKA, dotflo) works well as it relies on the use of line work to achieve a 3 dimensional look and one which looks dated and well established. ‘Hoppenia’ by Sergey Babenko is a fantastic example of gradient & illustration work especially on the type to create a nice, rich, bevel effect. ‘Colibry’ by Nido creates an almost tactile effect with the use of highlights of the bird to make it seem like shiny glass.

3) Can you describe this technique a bit more to us? What does it take to use this style successfully and are there any limits in the phase of the logo usage?

Well the great thing is that it can be created in a vector program such as Adobe Illustrator. Just pick the two colours for example, and blend them both from dark to light with the use of the Gradient Tool to achieve a three dimensional look, which is very simple. It can mean trial and error too, but it’s important to think of contrast and light direction in the final result. There are many limits to this type of design as it usually means that a full CMYK print process is required to achieve the effect but the main aim of this type of logo design is to be eye-catching.

4) Do you maybe know of some well known global brands that use the same style for their own visual identity?

Sony Ericsson, 3 mobile, Google Chrome, Woolworths…

5) Since this designs seem very hard to pull off are there any short cuts maybe you would like to share with us, any special software or software tools that might make the work more easy?

In Adobe Illustrator CS, tonal gradations are rendered via the Gradient Tool and the Gradient Mesh Tool. The Gradient tool is fairly straightforward in its approach to rendering a gradation and blending subtle tonal and colour gradations. On the other hand, the Gradient Mesh tool is one of the more labour intensive tools in the Illustrator tool pallet. Once you become comfortable with this tool you can create seamless blends and gradations that are infinitely scalable in vector format, making the final file far more versatile than a Photoshop raster file. So, I guess the best way to approach gradient work is to experiment and practice.