yensdesign – Tutorials, Web Design and Coding

Daily free tutorials about web design, coding, jquery and more

Posts Tagged ‘design’

Creating an OS Web Interface in jQuery (Part I)

Tuesday, December 16th, 2008

Finally here you have the First Part of this series of tutorials to recreate an OS Web Interface with our lovely jQuery javascript library.

As you could see in the preview of this tutorial we will focus to create the drag & drop interaction, the double click on icons and a basic taskbar with a start disabled button and a real clock of the system.

As always, here you have a preview of the final result:

It will be very interesting how we can achieve all our goals without using thir party plugins etc.

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 (bad display of PNG icons, IE bug) & 7, Opera, Safari & Chrome.

So let’s go guys!


Stunning 128 free icons by wefunction

Thursday, December 11th, 2008

We are trying to make cooler webs by adding javascript effects, cool CSS tricks and more, but what about icons? If you are looking for smashing and free icons that’s your pack ;)

Courtesy of wefunction in their words:

We’ve tried to keep a consistent style with quite a glossy look to the icons, admittedly some are better than others, but our first attempt at a set of icons I’m happy how they turned out. We’ve Included some of the main Social Media Icons such as: Design Float, Digg, Delicious, Furl, Technorati, Flickr, Stumble Upon, Twitter & Many more…

You can download these 128 free icons over here.

Have a nice designing guys! Let us know if you have already used these icons in your websites :)

Download the VCP-410 tutorial and 640-863 guide to learn how to create inspiring icon designs. We offer free 642-642 design resources to get inspiration.

Top 10 free fonts for professional design

Monday, December 8th, 2008

Hi there guys! We are starting a new kind of articles called freebies to try to show you free interesting resources for your personal projects. We hope you find it useful and be inspired by these articles ;)

In this first freebie article we will focus on collect the top 10 typefaces around the web that don’t cost money, but with high quality.

Remember guys: Don’t overestimate the importance of typography in design!


Boobles: First theme on Themeforest released!

Friday, November 28th, 2008

Hi there guys! These last 2 days I have spent my spare time in creating a simple and clean theme for submit it to Themeforest, a new marketplace from Envato where users can submit and buy (x)HTML, WordPress, Joomla themes and more.

I tried to create a clear template for personal websites such portfolios, combining blues and light grays with smooth gradients. I am really happy with the final result, considering the time invested in the theme.

I called it Boobles, judge for yourselves :)

Checkout Boobles theme!

I was thinking about the chance to make a fast-screencast of the creating process, maybe it will be interesting and funny… :) Do you know some interesting free software to make screencast? Tell me please!