A while ago, I posted a shot on Dribbble with a typeface I was working on.
I’ve finally found the time to finish it and today I’m happy to present Napa.
As you can see in the shot the original name was Napapiri, but hey, here in Tuscany we are used to short names, so Napapiri has become Napa.
Hope you like it and feel free to use it in both personal and commercial projects.

Download Napa

Well, this short post is more an exhortation to myself than to others because sometimes it happens that the clients’ work is very absorbing and we consequently overlook our own projects. I’m guilty of that.
But lately I imposed myself to find the time for side projects even if I’m full booked with clients’ work.
I found it very useful, relaxing and time saving. It’s like to find the time to go to the beautician for girls or to play football for boys.
But let’s see the main reasons to find the time for “makeup”:

• For ourselves

  We can have the necessary objectivity to tackle peacefully the clients’ work in which otherwise we risk to be too much involved
  e.g. deadlines, bills to pay and so on…

• For our clients:

  We have the chance to do some uncompromising work. This will bring benefits to our clients too. Many ideas for clients’ sites came while I was working at my own projects.

• To relax

  In order to deal with some clients we have sometimes to accept questionable design decision. Well, we can dive in side works to balance this bad feeling.

• To grow

  We can experiment with new techniques and consequently grow as designers.

• To make money

  Why not? Sometimes our side projects allow us to earn some extra incomes.

• And of course…

  For the fun of it!

Some delicious examples of side projects

• Free Faces – A website dedicated to free fonts where Simon Foster puts some of his favourites.

  

• Lost Type – Pay-What-You-Want Type foundry founded by Riley Cran and Tyler Galpin.

  

• The Web Fonts Gallery – a web fonts gallery by Macaroni Bros.

  

• Centratissimo – all centered auto-resizable layout
  with some jQuery juice created by the guys at Musings.it

  

• WP–Dribbble – a plugin that brings your latest Dribbbles on your website by Dave Rupert.

  

• RainyShots – a plugin that solves the same problem as WP-Dribbble, but comes at it from a different philosophical angle. Created by Nishant Kothary.

  

Photo Credits

Lately I created some patterns for my designs and today I want to offer to my visitors Dot Party, a cool set (in dotted style) for Photoshop.
Some of them come from scanning of old magazines while others have been directly crafted in PS.

Download Dot Party

This set is free for your personal and commercial projects, a link back is very appreciated but not required.

The idea was a pretty flexible design, a design with pages and articles that could be a little bit customized, just enough to not become boring.
Almost every page, while sharing the same layout, keeps its own identity.

Minimal sidebar

The toughtful element in the redesign was the sidebar. In some intermediary steps it contained more elements but I found it could distract from the content and at a point I thought to remove it.
In the end I opted for a minimal sidebar and I shifted to the footer every content not directly related to the current page.

The “selfish” footer

The footer gets together a brief summary about me and my activities to avoid spreading these information across the site. Except for the about page of course.

Styling the 404 page

I enjoyed so much working on the 404 page, and after a different(and textured) approach, I decided for the foreground version.

The default post layout

In the future It could happen that I’ll write articles with a non illustrated title, I also want to keep a retro compatibility with previous entries. So this is the solution for the default post layout and the relative images

So…

Care to share your thoughts about this design? Have your say!

Credits : Kyle Steed for the Clumsy font

The difference

• VPS hosting options limit the number of users on a server and offer them a pre-determined minimum amount of access to hardware. In most cases, VPS servers can be virtually rebooted, meaning that any and all websites owned by a single customer can be reset remotely if necessary. While VPS hosting tends to be more expensive than shared web hosting, it is usually less expensive than colocation hosting.
• Colocation hosting is when a client sends their own server to a facility that specializes in hosting, and the server is managed both remotely by the client and often personally by the staff at the facility.
• Dedicated hosting is similar to colocation hosting in that customers get complete access to a single computer server, but that computer server belongs to the hosting company and not the customer.
• Finally, self-hosting requires the customer buy their own server, pay for an ISP to allow connections to that server, and a host/DNS routing account to ensure that traffic from the Internet is connected directly to that server.

When to use that?

Some web hosting customers use different kinds of web hosting options for different types of projects. For example, parked pages with simple affiliate links do not require a lot of space or resources, so they are often placed on shared web hosting accounts or low-end VPS hosting accounts to increase profitability.
More complex sites that manage databases for thousands of daily visitors require dedicated, colocation, or self-hosting options unless extremely robust VPS options are available. Most companies with serious web hosting needs prefer to use multiple companies to ensure that a single hardware failure does not take out mission critical websites or infrastructures. The downside to that is that using multiple web hosts is usually more expensive than upgrading a plan or stepping up to a more powerful type of hosting solution with a single web host.

Web designers and developers often offer hosting options for their clients, which helps them build residual incomes after their initial project is complete. This also helps ensure ongoing revenue in the form of future work as many clients may be unaware that they can change service providers without losing their relationship with their design and/or development team. The downside to developers and designers that offer such services is that they generally become the immediate go-to contact whenever something goes wrong with a host. Fortunately, changing hosts is generally fairly easy so long as customers have read through the process of changing domain names from one host to another. Generally speaking, clients signed up for anything but shared web hosting can receive substantial assistance in transferring their existing website from one host to another, often at no additional charge.

Things to consider

When determining web hosting needs, most people compare computing resources, storage, and bandwidth allocations. Most shared hosting plans offer unlimited storage and bandwidth, but very limited and typically unspecified access to computing resources.
VPS hosting plans and higher all generally offer finite or minimum specifications for computing resources, but generally have finite storage and bandwidth limits. Storage and bandwidth limitations can usually be increased for an additional fee. Most people plan their computational resource needs for worst case/peak usage scenarios and then add a little bit of overhead for the proverbial rainy days.

La crème de la crème

Host Gator offers an amazing array of shared web hosting plans as well as some great low to mid-range VPS hosting options, and it is no surprise the developers and customers alike appreciate the combination of performance and price that Host Gator’s plans typically offer.
VPS.net has some truly amazing VPS plans that are incredibly reliable. In fact, some customers claim that their VPS.net VPS accounts are more reliable than many low-end dedicated hosting plans, and many companies absolutely require stability when it comes to their hosting.
Media Temple may be one of the most popular dedicated hosting options today, and its reputation for rock-solid reliability is second to none. That type of reliability does not come cheap, but nothing worthwhile ever does. Designers and developers love Media Temple as clients that choose MT for hosting almost never have to call and complain about server downtime, and the same is true for VPS.net options that are only slightly less powerful.

And the winner is …

WEBBOgrafico Congrats!

The other precious feature is the easy way to track the time you are dedicating to a project.

Billings also won the Apple Design Award at WWDC in 2009.
See some creative testimonials

The prize

1 Billings license

How to join

To participate just leave a comment saying why you would like to win the giveaway.
Use a valid email address

Winner will be announced on Monday, May 24th 2010!

This giveaway is kindly offered by MarketCicle.

We are going to see a step by step tutorial and how to apply it on a live example.
At the moment you can enjoy the animation only in webkit browsers (Chrome and Safari)

See the demo

Download the full example

The markup

We have a very simple page coded in HTML5, below there is the portion of code involved to achieve the effect.
<body>
<div class="balloon-container">
<figure>
<img src="images/air-balloon.png" alt="" />
</figure>
</div>
<div id="wrapper">


Basic CSS

Before to see the animation properties in detail, let’s take a look at some CSS properties required to prepare the ground.
In this case we need the overlapping of two different background images and to put the animated image between them ( see image below)

First of all we need a background image of the sky and some clouds
html {
background : #8ac2e5 url('images/main-bg.png') left top repeat-x;
}

The next will be the container of the image we want to animate
.balloon-container {
height : 500px;
top : 0px;
width : 100%;
z-index : 1 ;
position : absolute;
}

And finally we have the .wrapper div with the rest of the page content and some other clouds as background.
#wrapper{
position : relative;
width : 960px;
margin : 0 auto;
background : transparent url('images/page-bg.png') 30px 105px no-repeat;
z-index : 2;
}

The position property allows the overlapping between the .balloon-container and the .wrapper

z-index property specifies the stack order we need to achieve.

Define the three animations we need to move our air balloon

With the first animation called position we are just setting the start and end coordinates of the animation, in other words the exact position we want it starts and ends in the page.
Of course this is a particular case, indeed you can also set intermediated phases (eg . 20%, 31% and so) if you need to move the object along a different path.

@-webkit-keyframes position {
0% { top : 220px; left : 0%; }
100% { top : 146px; left : 75%; }
}

The second animation is called fade and sets the opacity during the animation phases.
@-webkit-keyframes fade
{
0% { opacity : 0; }
10% { opacity : 1; }
80% { opacity : 1; }
100% { opacity : 0; }
}

The third and last animation is called reduce
We want a depth effect as the air balloon goes away, so we reduce the size of the image with the –webkit-transform property.

@-webkit-keyframes reduce {
0% { -webkit-transform : scale(1) ; }
40% { -webkit-transform : scale(1) ; }
60% { -webkit-transform : scale(0.9) ; }
100% { -webkit-transform : scale(0.5) ; }
}


Start the animation

Positioning this element with top: -300px, the image will be invisible in a browser that doesn’t support animations and will improve the animation behaviour avoiding a sudden reappearance of the air balloon at the end.

—webkit–animation–name associates the animation(s) at the air balloon image
—webkit–animation–duration set the duration of the animation in seconds
—webkit–animation–iteration–count set the number of times we want to repeat the animation
—webkit–animation–direction set a no return trip
—webkit–animation–delay set the delay, if needed, before the start of the animation.
—webkit–animation–timing–function a smooth curve defined by a mathematical function, more examples of other keywords for this properties and their value here
—webkit–transform–origin

.balloon-container figure img{
position : absolute;
top : -300px;
-webkit-animation-name: position, reduce, fade;
-webkit-animation-duration : 30s;
-webkit-animation-iteration-count : 1;
-webkit-animation-direction : normal;
-webkit-animation-delay : 0s;
-webkit-animation-timing-function : ease-in-out;
-webkit-transform-origin : 50% -100%;
}

Finally we have our animation fully working.

See the demo

Download the full example

Conclusions

I preferred to leave a flexible area width for the animation, so, if you resize the browser window, you can experiment different overlappings.
This animation has been created exclusively with CSS, sometimes this can be enough, sometimes we need Javascript to handle other particular events

Further readings and examples

• CSS3 transition are we there yet
• Pure CSS3 Animated AT-AT Walker from Star Wars
• CSS3 animations and their jQuery equivalents
• CSS Animation
• Controlling animation using CSS3
• Supported CSS Properties

To view some others of her shots you can visit her flickr page(while waiting her website will go live)

I like in particular her work with decadent subjects, but now let her introduce her shots

In this package you will find some “experiment shots” I’ve taken to try my camera. They are not intended to be masterpieces, I choose them because I think there can be some useful shape or element easy to edit and “re-use”. Michela asked me to make some textures as well, I liked the idea even if I’m new to this kind of photo. The result is not perfect because this is my first time to catch textures and recently I’m short of subjects! I hope you like them anyway and the next time I plan to find new and better material for Webislove.

All photos are free for personal and commercial use

Download subjects 59,4 MB

Download textures 90,5 MB

And now some previews:

Subjects

Textures

Download subjects 59,4 MB

Download textures 90,5 MB