HTML5, the next major revision of HTML, the language of the internet, is set to revolutionize the way web developers and designers create websites and the way visitors use them. It’s being edited by Ian Hickson of Google and David Hyatt of Apple, two of the web’s greatest creative minds.
Besides enabling web developers/designers to use cleaner, simpler, more consistent code, HTML5 will help them break free from the confines of 3rd party proprietary plugins like Adobe Flash. For the first time, it will be possible to achieve consistency between video player interfaces and overall website design. Users will be able to rotate, move, resize and even detect motion in a video while its playing, using inbuilt video controls.

Through HTML5’s canvas element, users will be able to render graphics and images on the fly, again without the need for plugins. You can try rotating an HTML5 video here and using the canvas element here. Both feel truly amazing!
Besides demos and other online experiments, there are actually a number of working sites using HTML5 today, although few, if any, make the most of this language’s potential capabilities. We explore 25 of the best below, the vast majority of which belong to web developers and web development agencies keen to show off their HTML5 skills to potential clients. Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer.

1. Ella Design

Originally from Hong Kong, but now based in the USA, Ella of Ella Design is an award-winning graphic/web designer with over 8 years experience in the industry. Her website is a “playground” in which she engages with HTML5 and CSS 3.

2. Pelletized

Pelletized is the site of Ed Wheeler, Oregon-based graphic/web designer and HTML/CSS developer extraordinaire. He’s played a major hand in the creation of several high-profile sites, including JobInterviewEdge.com and EssayEdge.com.

3. MiniApps

MiniApps is a mobile phone app microsite from Alex Gibson, currently offering two great, free apps for iPhone, Android, Palm Pre and Firefox Mobile: Card Flip, a classic memory game, and Checklist, a to-do and shopping list tool.

4. Donkey Magic

Donkey Magic is Richard Stephenson’s blog. He uses it to keep the world up-to-date with his web development work and life in general. Recent posts include a CSS 3 & jQuery image gallery experiment.

5. Bonsai

Bonsai is a unique web development tool used to build sites that feature lots of images. Bonsai’s own website has been created using HTML5.

6. letscountthedays

letscountthedays is the online portfolio of Shane Howe, web and user interface designer. His client list includes Pinnacle Security and Urban Shadow, for whom he performed all web design, branding and even online copy writing.

7. Sarsini

Learn more about Martin Sarsini, Glasgow-based web developer, on this HTML5-fortified site. This site, which incorporates a blog, is simple, but very stylish.

8. Nimbupani

Nimbupani is home to web designer, Divya Manian. Obsessed with HTML5, you can learn a lot from her blog as well as her Twitter page.

9. Ousmane Ndiaye

Ousmane Ndiaye is a passionate, French web designer. An SEO and W3C standards specialist, his site makes the most of current HTML5 knowledge.

10. Media Research Institute

Experts in all things web based, the Media Research Institute operates from Tokyo, Japan. Besides building websites, the company has produced many popular mobile apps, such as Mixi.

11. Anino

An interesting bunch, Anino are a shadow puppet collective based in the Philippines. Their site offers listings of upcoming shadow-puppet performances as well as several videos highlighting their work.

12. CatCubed

CatCubed is the site of Colin Fahrion, artist, designer, developer and avid cyclist. The site looks great in Firefox and Safari, but Internet Explorer can’t handle the large amount of CSS 3 used.

13. Impactideas

Impactideas is a small graphic design studio based in Belgium with a lovingly designed website. They specialize in the creation of logos, brochures, catalogues and packaging.

14. Moriconi

Moriconi is a highly fashionable Italian hair studio, based in Camaiore, Lucca, Tuscany. HTML5 has brought this straightforward site to the cutting edge of modern web design.

15. LittleCoogie

LittleCoogie, based in Bangkok, Thailand, sells high-end children’s party clothing through its HTML5 e-commerce site, made by Andrew Brundle. Its color-picker tool is a great feature.

16. OK Cool

German fashion blog, OK Cool, incorporates HTML5 into its search functionality and comment forms.

17. Dn’D

French web development agency and Magento e-commerce expert, Dn’D, has created a really stylish site for itself, even if it is a little too reminiscent of the standard OS X Leopard background. Since its formation in 2004, Dn’D has worked with BP, Warner Bros and many other high-profile clients.

18. Sprachkonstrukt

Sprachkonstrukt is a blog covering all things related to design, photography and digital lifestyles. It’s managed by Ruben Deyhle, a web developer who also runs a photo blog on the site.

19. Stompfrog

Stompfrog, website of web designer/developer Chris Bewick, is a wonder to navigate around. Users can scroll through the website using their mouse wheel- a highly original touch.

20. Shape Shed

Shape Shed, website of freelance, London-based developer George Ornbo, was built using Jekyll, a simple static site generator, as well as CSS 3, jQuery and HTML5. Firefox or Safari is needed to see the site as George intended.

21. Smile Sleepy

Jamie Calabro is a web designer/developer with a great knowledge of everything from HTML to CSS, JavaScript, SEO, brand development and even print and packaging design. He can count Coca-Cola amongst his past clients. Smile Sleepy is Jamie’s place to showcase his work to the world.

22. sw’as

The rather unusually named sw’as is the home of 26-year-old web developer Simon Elvery. Alongside engaging articles on everything and anything internet related, you’ll find musings on politics, books, movies, music and more.

23. Frojd

Frojd is a beautifully designed blog from Swedish digital agency of the same name. Thanks to plenty of white space and a grassy header image, this site feels as fresh and airy as a Swedish fjord.

24. Tim Benniks

Tim Benniks is a Dutch web professional who specializes in the development of simple, intuitive interfaces. Use his site to get in touch with Tim himself or to view his past projects, which include a new CMS called Zotonic.

25. DS3

From Sao Paolo, Brazil, DS3 is a web agency with a fantastic eye for visual communication and style. It recently masterminded a new branding initiative for the largest maker of forklift trucks in Latin America, Paletrans.

We hope you have enjoyed our last collection of web and user interface icons. This time you are going to get a good and quality collection of social media icons. This list will be very useful for bloggers,web designers and graphic designers to promote their articles and their services. The usage license is described for some icon packs here.If you need more information about the icons usage you can get from their source page.

To promote your blog or articles in social media world you need a creative and unique icons and i am sure you will find your most favorite and suitable icons here to include them in your blog or website.

1. WHITE MAGIK – A Free Social Icon Pack

A clean set of icons from chethstudios.Re-distribution not allowed! White Magik is perfect for white minimalistic sites and can be used with image hover for excellent looks!. It includes 45 icons in .PNG format.

2. Elegant social media Icon Pack

Just another contribution from chethstudios. An elegant design icons. Well you’re free to use in your blog. But Please DON’T re-distribute.

3.3D Social media icons

This 3D Social Media Icon Pack comes with 20 icons which include your favorite social media websites such as Digg, StumbleUpon, Twitter and lot more from dawghouse design studio.Get the license details of usage from source.

4.Vintage post stamp icons

The set comes with 23 icons of your favorite social media sites, all in 200 x 200px and in transparent PNG formats. These icons would surely be a perfect fit for your vintage or grunge themed web designs!

5.Glowing social niche icons

Neat icon set.License usage :Creative Common license BY-ND

6.Social icons sticker set

Pretty nice icons. It’s a sticker type social icons.Available in .PNG, EPS and Ai format. Free for any use.

7.Social icons vector set

Consists of 16 popular social media icons, available in both vector and PNG (64×64 pixels) format. Free for any use.

8.Social icons pack by Sylwia Besz

Clear design icons.This work is licensed under a Creative Commons Attribution 3.0 License.

9.Social media icons pack from Blogperfume

Designed as a circular style. Available in 3 sizes (128*128, 64*64, 32*32).Please feel free to use Social Media Icons Pack on both personal and commercial projects. These icons are designed by Eli a south Australia web designer. They provided these icons in two parts.

10.Woven fabric social media icon set

This set contains 26 icons of your most favorite social media sites such as Digg, Delicious, StumbleUpon, Twitter, Facebook and lot more! These icons would be perfect for websites or blogs that uses textures or a grungy theme.

11.Social icons made of wood

Wood theme icons from webtoolkit4.me .The set consists of 11 icons in PNG format (64 x 64). It’s free for both personal and commercial projects.

12.Icon texto web 2.0 inside icon pack

Download this free Windows Vista icon pack for your Website or Application. 32 icons in .PNG format.It’s free! These icons are released under CC License Attribution-Noncommercial 3.0

13.Amazing 3d social icons

A brand new set that consists of 20 3D icons in PNG format (64×64 & 128×128pixels). It’s really an awesome icons.

14.Hand drawn social icons

Very cool and creative set of drawn, sketched social icons! Have fun with this one! Hope you enjoy them.

15.Worn out soda cans-social-icon-pack

The Worn-Out Soda Cans Social Media Icon Pack is free to use for both your personal and commercial projects.The icon pack once again features icons of our favorite social media sites in 200×200, transparent PNG formats.

16.Social media icons by plechi

Free vector social media icons.This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License. Designed by plechi.

17.Jeans-social-media-icon-pack

Great work and unique idea the designer.Free for personal and commercial use.the credit goes to nishad.

18.vector-social-media-icons

This free set includes 50 icons of the most popular social media networks on the internet. The icons are designed in 32px and 16px vector format. With the vector format. Now this icon pack is updated recently.This icon set is released under is licensed under Creative Commons Attribution-Share Alike 3.0 Unported License.

19.Minimum-icon-set

This  minimum social media icon set.includes deviantart, delicious, flickr, Gmail, twitter.This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

20.Grunge peeling stickers social media icons

This Icon Pack is chuck full of 20 Grunge Peeling Social Media Stickers, This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

21.Iconshock’s free social icon pack

Smooth edge icons and a classy look.It’s a freebie from Iconshock.

22.Wooden badges icon pack

The icon pack contains web and social media icons such as StumbleUpon, Digg, Twitter and several others!.This icon pack is free to use for both your personal and commercial projects but may not be sold or redistributed in any way.

22.Icon pack with PSD

A full set of icons ready for use with mac and pc. Attached with PSD.

23.Social grunge icons

Grunge effect in social icons made in a elegant way.available in PNG format.Designed By: tydlinka

24.Networking and Bookmarking icon set

There are a total of 36 icons with 9 different Social Media – Networking  & Bookmarking sites.Of course this pack is going to be regularly updated and reorganized .License/Usage : Free for personal and Commercial work

25.Icons made with the type tool and helvetica

Helvetica social Icons that are 99% made with the type tool in Photoshop.
Everything is made with the type tool in Photoshop and variations of the Helvetica font.There aren’t really any typographical icons around the web like this icons.Free to download and use.

26.Social web button sets

There are 20 social web buttons in two sizes and two colors. Download is free.

27.Old bottle crowns icon set

The icon set consists of 20 very unique and never before created bottle crown icons such as Digg, Stumble Upon, Twitter, Delicious, Technorati and a whole lot more.These icons are free to use for both your personal and commercial projects but may not be redistributed or sold in any way.

28.Gummy-social-icon-set

29.Social trucks icon set

Social Truck Icon set consists of 10 social network icons; These cute icons are designed by Andrea Austoni . Andrea is an Italian freelance designer currently living in Krakow, Poland. He specializes in icon design and illustration.these icons are absolutely free and you are allowed to use them in personal or commercial project. Just don’t redistribute

30.32 Pixel Social Media Icons

Free for personal and commercial use.Cute design.

31.Web 2.0 Gift Icons by IconsPedia

This icon pack contains 14 icons, including popular social bookmarking services and our favourite browser  Firefox etc… The icons are available in PNG, ICO and ICNS format. They are free to use for both personal and commercial projects, including websites, templates & software. You are not allowed to sell or redistribute the icons anywhere else.

A Big treat from webtreat

In this below lists  you are going to view a massive contribution of webtreats.mysitemyway.com in social media icons.They have done a great work in social media icons! and these are high quality designs.

32.Glowing Neon Social Networking Icons

108 free high-resolution Glowing Neon Social Networking Icons. 2,000 more icons of this style will soon be released on ETC format.

33.Crystal clear bubble icons

It’s an updated set of icons including Drupal,Deviant art icons etc… They are free to download and use. 154 icons available.

34.Blue Chrome Rain icons

2000 more icons are available in this style in webtreats.

35.Orange grunge stickers

Wonderful orange social media icons in grunge style with some pop out effect.

36.Black paint splatter icons

No attribution necessary for these icon packs.Splatter effect in social media icons it’s a creative and unique concept from the designers.

37.Red and white pearl icons

38.Glossy black glass icons

20 web icons in .png format made with these styles, and a layered psd of the image below, which has editable text should you want to use this as a text effect.

39.Blue Jelly Social Media Icons

40.In-focus simple white icons

This matching set is designed to be put in the sidebar of your theme so you can link to your social media profiles.There are 10 more color variations for icon set is available.

41.Glossy waxed wood icons

42.Retro Grunge Stripes Social Media Icons

A classy look and these icons meet international standars.Retro Grunge Stripes Social Media Icons.

43.Crumpled paper social icons

A creative look for social media icons by this way.It’s suitable anything like grunge or crumpled themes.

44.Glassy space social icons

Just another beautiful glassy style icons.

45.Grunge-warning-stripes

46.Vibrant pattern icons

This vibrant pattern icons social media logos set includes the most popular social bookmarking and networking icons (Digg, Delicious, StumbleUpon  and Yahoo logos etc…

47.Twitter icons

Free set of unique twitter graphics.There really is no limit to what you can do with this brilliant set, lovingly designed by Pasquale D’Silva.The set includes 40 Files in total, all in transparent .png format.

48.Twitter icons by sibusinho

Really a cute twitter icon for your blogs or websites.Also only noncommercial use is allowed.

49.Twitter icons promo set

This breaks down to roughly 1,800 icons added to each existing set and 20 brand new sets! Here’s a little twitter promo pack with 53 twitter icons, one from each set!.

50.RSS cheese icon style

The set contains 4 high resolution RSS icons that come in four sizes: 512×512, 256×256, 128×128 and 64×64. Icons are completely free and can be used without any restrictions in any type of project including commercial projects.

This is experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.

If responses and feedback will be positive, we will make this monthly or even weekly event analyzing also well known blog redesigns – showing pros and cons. I think real examples are the best way to show the point and teach something! Let’s start – we will be happy to hear your feedback! It will be exciting!

ReadyPhotoSite is a flash photo CMS created especially for photographers, painters, artists and people of art. The CMS is presented in 3 different packages that vary in functionality and a number of skins, so you can choose the design you like and then choose the website features.

We started working on this ReadyPhotoSite project on May 2009 together with Karen Myers who is presently the CEO of readyphotosite. But Karen is not only a partner, but also a good friend of mine so we were both into it.  By the time we started working on website design, the product (the CMS and the skins) was ready and our task was to launch a simple website as soon as possible, apply the changes and make the updates as we go. And so we did.

Starting with a simple website and the problems we faced

The website we have uploaded online consisted of the following main pages:

• home page
• products page
• why buy
• link to blog
• contact page
• links in the footer to Tutorials, TOS, Privacy, Tutorials and Hosting.

The home page had around 10 lines of text and a cool stylish intro in retro style in the middle – home page didn’t share almost no information about the product and thus was pretty useless. Besides it took around 30 seconds for the intro to load and we were loosing most of the people already in beginning process when they were visiting our home page.

Still the owners of the project insisted we should keep the intro as they spent a good amount of money on it and wanted to see it online no matter what.

As I have mentioned at the very beginning of the post, the ReadyPhotoSite websites are available in 3 packages:

• basic,
• advanced
• ecommerce

Look above, there is the screenshot showing how this concept was presented on the website.

While the products page itself had the basic text info, the buttons in the header lead to almost identical pages of basic, advanced and ecommerce packages that had:

• screenshots of design themes listed on them
• the link to the preview
• the buy button

All the pages had the list of the same theme’s screenshots which was obviously somewhat confusing for the website visitors as without visiting the features page they had no idea of the difference and they just saw that same designs.

The initial purchase process was even more complicated. The buy button next to the skin lead to a static html page with 2 options to choose from- “Host with ReadyPhotoSite” or “I already have hosting” and 2 separate links that took you further to the shopping cart page( the WHMCS shopping system allows creating only static product links). It was only later that we realized that the purchase process was a real nightmare with too many steps and no convenient option to choose other design or other package.

The other thing that we initially paid no special attention to was the skin preview page, that was simply opening the website in the new window and where we were loosing customers as well since there was no calls to action or some kind of info how to move forward.

The website required a serious work. In about 3 month after launch we were getting nice targeted traffic from search engines, photo forums and blogs, photo communities, template and CMS reviews websites, paid ads, social networks and our partners, but the website was not converting the traffic into sales. We had a tremendous bounce rate of about 50% and people were staying on the website for less than 30 seconds, getting lost and not sure what to order and how to order. So we have started on conversion rate optimization, creating a user friendly website step by step.

1) Moving the intro to the inside page.

The first step we made was the optimization of the website home page that was the main landing page and where we were loosing most of our clients because of the intro. We have replaced it with the large graphical collage explaining how to launch the website with ReadyPhotoSite CMS and huge buttons next to it: free trial, link to the admin area demo and the link to the page with the intro (requested by owners). Below we had a new keywords-rich text explaining the advantages of RPS and listing some of the main features.

2) Reworking the product pages.

The products pages and the ordering process was a real pain in the ass. We had 4 tasks to solve:

- reduce the number of steps before the purchase;
- give an easy option to get back to other products and packages;
- make the product structure understandable( the relation of skins and packages);
- inform the potential buyer about package features on the fly (so that they don’t go away from the purchase pages to the features page).

And here’s what we did:

1. Removed the buttons (and the pages) to advanced/creative/ecommerce packages from the menu.
2. Replaced the text on the products page with the list of skins screenshots and added buy and preview buttons.

Now the problem was how and where do we actually link the buy and preview buttons (as there are 3 different previews for every skin (for basic, creative and ecommerce packages) and 6 buy links (as every package can be purchased with hosting or without it)).

The new buy page have solved all the tasks. Before reading this articles further I suggest to open this page online so that you check in real how it works. Click on any buy or preview button on this page http://www.readyphotosite.com/products.php and you’ll be taken to the buy page.

• we combined the preview page with the purchase page and now we keep the visitor focused on the purchase;
• the buy or preview button from the products page automatically loads the preview of the ecommerce package of the chosen theme (since it’s most expensive and we’re interested in more people buying it);

- on the first step you can browse between different themes and the preview will load below (to ensure better theme browsing we have added “hide panel” option at the very top of the page);
- having chosen the theme you can now choose the package on the step 2. Next to every package there’s the price and the list of features included;

- finally on the step 3 you can choose whether to host with ReadyPhotoSite or not. You will also be shown the pricing and the hosting details.

With the options for the 3 steps loaded you can still change the settings on that same page. You can choose the other theme or the other package or change your mind about hosting. Finally the buy button will take you to the purchase page with all the options you have taken.

3) The need in new pages.

Making the analysis of the keywords people were using to find our websites in search engines from Google Analytics we have decided that it makes sense to create the keyword oriented pages giving the same time valuable information about the product. Some of the keywords included:

* Photography Website Design
* Family Website Design
* Personal Website Design
* Wedding Website Design
* Maternity Photo Website Design
* ReadyPhotoSite review

While creating the pages we have faced another problem. The main website navigation allowed 5 buttons only and the footer was already crowded with the sub pages and we simply had no place to add the pages. In the next 2 points below I’ll be explaining how we addressed this problem.

4) Creating new home page.

Having tested the new home page for several months time we were still not satisfied with the results. We needed to push more people to the products pages and use the place on the home page in more efficient manner. Though the picture was good for people, the home page itself could not be called a good landing page.

1) First of all we decided to decrease the size of the header area, as it was nice but not functional so we reduced it by 40% or so.

2) We then decided to decrease the height of the collage on the home by 50% to give more place to content and other stuff.

3) To catch the user attention with the products right on the home page we added the big screen of the featured theme linked to the buy page.
4) We added pretty huge buttons linking to the products page, admin area demo, free trial and the buy button for the featured theme. Having all this main options in the center of the page the website visitor don’t even have to click on the menu to go to the main pages, it’s very intuitive and user-friendly.
5) Following point 3 (the need of the new pages) we added the links to the new pages and the section for
testimonials thus giving the website visitors the information they were looking for directly from the home page.

5) Reworking the blog pages

Writing lots of articles about photography, photo website design and promotion as well as just some fun posts, we were getting really good traffic both from social networks and search engines to our blog. For the first 2 months we were just attracting people by interesting and useful tips trying to get the reputation. In the new few months we have taken the following steps to make this traffic result into the product purchase

1) Added the banner to the left column offering to exchange old photography website to the new one with 20% discount.
2) Added the big buttons linking to the features page and free trial.
3) Finally we have replaced all that we have with the banner rotating the screenshots of our products, big button with the “free 7 day” website trial on it and the full list of product features. It was only this last update that has helped us to drive traffic from blog to the website features and product pages.

6) Reworking the menu structure and adding new pages

Viewing the entrance and the exit points of the website pages we were noticing that our visitors were not finding answers to the questions they were looking for. It was then when we decided to create the product guide section of the website that would contain all the info needed to make a decision.

We have replaced the Why Buy page in the main menu with the product-guide and created the sub pages that now contain most of the website/product info in the structured manner. We have also created the new samples page showing how of our clients customized the default themes and illustrating the changes that can be made from the admin area.

In conclusion

We’ve made a long way studying visitors behavior before the website started looking like this http://www.readyphotosite.com. I have learned that there is always place for improvement and that we are just on the start, not on the finish. We have tried different font sizes, buttons, graphical presentations, motos and texts. We still want to try Google Website Optimizer, add Google Translate, feedback form and some other cool features to make the website even more user-friendly and intuitive. You have to act to be on board. Below are some figures from the stats showing how successful the changes we performed has been so far:
- After second home page update and restructuring of the purchase process the views of the products and buy pages has increased by 50%;
- Thanks to rotating product screens about 10% of the blog visitors now visit the product pages;
- Adding new information and keyword-rich pages increase traffic from the search engines by 30%;
- Adding product guide increased the number of free trials by 30% and the number of general product inquiries by 25%.
Unfortunately I can’t share all the details with you, but overall it was worth the efforts and we’ll keep on working!

Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from pc applications to web application. jQuery and other libraries allows to make accessible data visualization in (x)HTML, giving us this needed functionality.

In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.

1. jQuery Visualize Plugin

jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.
Examples

Type of Charts: Bar, Area, Pie & Line.
Requirements: jQuery, excanvas (included)
Browser Support: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.
* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT and GPL licenses

2. Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Examples

Line and column example

Columns with rotated labels

Type of Charts: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.
Requirements: jQuery or MooTools
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!
Demo: http://www.highcharts.com/demo/
License: Creative Commons Attribution  Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.

3. Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Examples

Tracking curves with crosshair plugin

Type of Charts: Bar, Area, Point & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.
Demo: http://people.iola.dk/olau/flot/examples/
License: MIT License

4. jQuery Sparklines

Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.
Example

Type of Charts: Bar, Tristate, Bullet, Box Plot & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://omnipotent.net/jquery.sparkline/
License: New BSD License

5. jqPlot

jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Examples

Type of Charts: Bar, Pie & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://www.jqplot.com/tests/
License: MIT and GPL version 2 licenses

Conclusion

As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.

Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.

Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)

In this Photoshop tutorial we’ll learn how to create a stylish and sleek-looking play station portable. This is very detailed, but advanced tutorial, so if you have basic knowledge and understanding about Photoshop you should be able to easily keep up and let me guide you through this PSP creation process. Each step is followed by screenshots to give you a better understanding. Note that you can always improve and add more details to such designs – it’s hard to understand at first when to stop and when less is more, but I am sure you will get those skills automatically after you’ve done several tutorials and some tweaking by yourself!

This is what we’ll be creating today! Looks good? Great – let’s get started:

Step 1

So at first, let’s create a New Document with sizes – 900×600 px. We will starting by creating the background.

Create a new layer (press Ctrl + Shift + N)  fill it (with any color).

Open the Layer Style window and apply this Gradient Overlay.

This kind of gradient you should get:

Step 2

I’m going to use guide lines to create the PSP shape, so let’s place all the lines that we’re going to need. (To activate the guidelines, you have to activate the rulers at first (CTRL + R) then what you do is click on the ruler, then hold and drag it into position).

For the Horizontal guidelines set: 250px, 280px, 510px, and  540px and for the Vertical guidelines: 120px, 200px, 660px and 740px.

TIPS:

• CTRL +  ; will hide or show the guidelines.
• Use the move tool to move the guidelines around.
• Slide the guidelines back to rulers to remove them.

Pick the Rounded Rectangle Tool (U), set radius to 10px and do the same like I did on the picture below:

Now do the same as I did in the next picture. I used another color so you could see better difference:

Step 3

Now create a new layer, set the Brush Tool to 411px and draw two rounded circles as seen in screenshot below:

Now set circled brush layer behind the other layer and erase the parts you don’t need:

Step 4

Create a new layer, make selection with Lasso tool(press L to get it) similar like in the screenshot below and fill it:

Duplicate it 3 times more and set the others to each corner of the shape. You can go to Edit, Transform, Flip Vertical and/or Edit, Transform, Flip Horizontal to help you rotate the shapes.

Now select all the (parts) layers (Hold Ctrl and click the layers), right click and select  ”merge layers” and add these Blending options:

Step 5

Now with your psp shape still selected let’s create a new layer, select the brush tool and choose white.

Set 35px for the brush tool and then select the Pen tool (P) and create a line like I did. then right-click and select “stroke path”, choose brush and hit OK.

After that click right click and click “delete path” and set the Opacity (of the layer) to 20%.

Create a new layer, set the brush tool to 16 px then select your Pen Tool and create something like this then right click and select “Stroke Path” – choose brush and click Ok. Right click again and click “Delete Path”.

Select the Eraser and erase the unnecessary parts:

Create a new layer, set the brush tool to 170 px and draw the left side to give it shining effect:

Then set the Opacity to 62% and erase the parts you don’t need.

Now select your Marque Tool (M) and move your selection using your arrow keys a bit to the right and inverse your selection (Ctrl + Shift + I) and press Delete. Finally press Ctrl + D to De-select your selection.

Step 6

Let’s create a new layer and create a circle using the Elliptical Marquee Tool (M) (hold down shift to draw a precise symmetrical  circle) and fill it.

Open the Blending Options menu and adjust the settings like in image:

Create a new layer and create a smaller circle to fill it:

..and add these Blending Options:

Step 7

Create a new layer and add a create a small circle like this,fill it:

Add these Blending Options:

Step 8 – Adding text and details

Now select the Text Tool (T) and type SONY with a dark color. I used the font Engravers MT, type UMD with the color code: (#a8a8ad)

..then create something like this using your pen tool (P) to achieve little perspective:

Set your Brush Tool to 2 px, then select your Pen Tool again and stroke it with a gray color (mine is #404041).

(you can duplicate it and set a darker one in its side like i did) ..then duplicate it (Ctrl + J) and go to Edit, Transform, Horizontal Flip and set the duplicated layer on the other side of the circle.

Step 9 – PSP Text

Now create a new layer and using your Pen Tool (P) let’s create the PSP.

Lets begin with the “P” – make sure your Brush Tool is set to 2px, select your Pen Tool again and create something like in the screenshot below:

Stroke it with a white color (right click on selection), delete the path.

Follow the same steps to do letter “S” as well.

..create selection, stroke it… and do the same with the third letter “P”.

Now add these Blending Options to letters:

Step 10

Create a new layer and now we will add a little bit more details in design. Create selection like in the screenshot below with your Polygonal Lasso Tool (L):

Fill it with white and set it below the psp shape layer. DONT DESELECT THE SELECTION.

Select your Brush Tool, set it to 42px, and brush something like I did from the corners to get some shadowing and 3D effect.

Okay, we are done with bottom side, now let’s get to the top.

Create selection like in the screenshot and set it below the PSP shape:

..like this:

Now set these blending Options:

We need the same effect on the other top side of ou gadget right?

Just duplicate the layer and go to Edit, Transform, Flip Horizontal and set it on the other side of the PSP shape. Let’s compare our outcome which is petty much finished, but we will add some more details to make it look really good:

Step 11 – Final Tweaking

You can brush with a black color at the bottom of the PSP like i did in the next picture to achieve more 3D like effect:

Select all the layers EXCEPT THE BACKGROUND (Hold down Ctrl), right click and select merge layers. Hold down Ctrl and click the PSP layer to make a selection, you should get selection like this using your Pen Tool (P):

Right..now set your Foreground Color to white, right click, go to Fill path… and hit OK then set the Opacity to ~ 36%, set your brush tool to a soft brush of 200px, set the Opacity of the brush tool to 50% and erase the parts you don’t need anymore like screenshot below:

Now Duplicate the PSP layer (Ctrl + J) and go to Edit/Transform and select Rotate 180 degrees, set it below the other layer.

Now lets add some reflection, shall we?

With the Duplicated layer selected go to Filter, Blur, Gaussian blur and set the radius to 3.8px:

Now set the Duplicated layer’s Opacity to 60%. Select your eraser and set it to a soft brush of ~185% set the eraser’s Opacity to 50% and erase like i did to achieve natural reflection:

Congatulations – you’re done!

If you have any questions about any of the steps, don’t hesitate to ask!

The role and purpose of icons is user interaction is very important these days.  Icons can enhance the user experience and user friendly icons are really appreciative but they should be unique and easy to understand. There are so many icon websites available on the web but what we are presenting here is only high quality and web2.0 free icon packs collected from various websites ,designers galleries and blogs.

In this icons series we have divided the icon packs in to three main categories. Web and user interface icon-packs, Social-media packs and other icon packs.You might have seen these icons somewhere, But we narrated here some of them you might have not seen. Not all icon packs are for commercial projects, you can use some of them for your private projects and for your personal use. Please see the usage license and derivation rules carefully before using any icons.I’m 100% sure you will love this Huge and Extensive collection of icons.

Web and User interface icons:

In this category you can download the vector,dock and some illustrator icons for your web design and development system and your CMS too.

1.Scalable icons

This set contains 25 scalable Illustrator format icons.
Disclaimer & Conditions: The set is licensed under Creative Commons License.Redistribution, Release for Download, use for commercial purpose or selling of these icons on an another site without permission is completely prohibited.

2.Free vector icons

Here are 30 free vector icons with an apple touch to it. The download contains the PSD source file.These icons can also be used as iPhone menu bar icons.

3. Diagona-icons

400 (200+200) icons are included in PNG format (10×10 and 16×16 pixel).To remove the attribution, please purchase the license.

4. Free web development icons

Free web development icons icon set is done in web 2.0.

License: These icons are free to use in any kind of project unlimited times.
Amount of icons: 80 , Icon Sizes: 24×24

Amount of icons: 60 Icon Sizes: 24×24

Amount of icons: 26 Icon Sizes: 16×16

Amount of icons: 32 , Icon Sizes: 16×16

Amount of icons: 26 , Icon Sizes: 16×16

5. Blogging icon set

Specially designed for bloggers. There are totally 12 shiny and modern icons for your blog. Sizes 24×24, 36×36 and 48×48 in png format. Blogging Icons Set is released under Creative Commons License, please feel free to use it on your personal and commercial projects.Designed by Blog perfume.

6. Go-green-minimalistic-icons

In this icon pack, there are 108 different icons. You can use for your websites, blogs or applications. These icons comes with e Commerce icons, social media, computer accessories, multimedia icons.These icons are available in 64 x 64 px and in transparent PNG formats.It’s a freebie from Dawghouse design studio.

7. Tango icons

It’s a revision pack of the previous release in Tango style.licensed CC BY-SA.

8. Function-icon-set

A consistent style with a glossy look with a set of 128 Free Icons for you to use in any projects,These icons are absolutely free! You can use them anywhere.

9. One bit icons

Icon set of 50 icons.
License: These icons are free to use in any kind of commercial or non-commercial project unlimited times.

10. Vaga icon sets

Set of 60 icons, semi-transparent .png icons (16 x 16) ready to use and available for free download.

11. Woofunction-web design icons

The Woo Function icon set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available at 32×32 pixel PNG files.This is a classy icon set from woo themes.It’s a collaboration of wefunction and woothemes.This icon set is released on the GNU general public license.

12. WIP-Web-Iconset

A beautiful icon set for web designer’s personal use.
License: For non-profit use ONLY. Commercial(e.g. for company website, application interface etc.) use is strictly forbidden.

13. Iconic project

Iconic is a minimal set of icons consisting of 103 marks in raster and vector formats — free for public use.This set is currently licensed under the Creative Commons Attribution-Share Alike 3.0 license.

14. Glossy Buttons

This set have clean and crispy look with consistency.The Glossy Buttons is a collection of 33 high-quality stylish icons ranging from 16×16 to 48 x 48 pixels.This icon collection is created for multiple uses.The icons can be used royalty-free by the license for any personal or commercial project including web application, web design, software application, mobile application, documentation, presentation, computer game, advertising, film, video.

15. Icons from iconblock

Snow pack

102 royalty free website & GUI icons in various formats that can be used for both personal and commercial purposes.

Blue Coral

More collection of 77 blue and grey rounded button icons designed for website use. These icons are perfect if your looking for simplicity and style as well as uniformity. A freeware release

Lingo

74 xp themed icons that will surely breath new life into your blog or website application.

16.ORB icons

Free to use,for more information contact the designer.

17.Mini icon collection

Here are 113 10×10 greyscale icons in .gif format. Creative Commons Attribution-ShareAlike 2.5 licence.

Just another mini icon set

Pretty small icons.Some rights reserved.This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

18.ColorCons icon set

ColorCons are 49 different icons available in 4 different colors.
Formats and sizes included in the package are.Terms of usage are in the  pack.

19.Sweetie–BasePack

The Sweetie family is cute and clean.And free! This set has been around for five years, but it’s still going strong.Creative Commons Attribution-ShareAlike 3.0

20.Milky icon set-All in one package

This is another lovely set of simple but nice icons happily created by IconEden.com. The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds.

21.Adobe-creative-icons

A special icons of adobe’s master collection.For license please verify in icon page.

22.Bright free icon set

This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.So you can use Bright! for free for your personal and commercial projects.

23.Hand pointer icons

Free icon set that includes 36 hand pointer icons of 6 different types with 6 color variants. Icon set also includes .psd source file.

24.Once from Delacro

You can use them on your personal blog. Just send me a mail and let.Non commercial use.

25.Webmaster icons-Dellipack 2.0

The DelliPack 2.0 icons are a high quality pack of developer icons and webmasters icons.

26.Designer icons

This set includes Adobe Graphic Icons, Designers Icon.For more information see in source page.

27.Icon pack by Psferox designs

Specifically these icons designed for designer’s use.

28.Free-Mobile-Berries

These icon sets are specifically made for mobile applications,websites and GUI designs.For license details please get more information from the source.

29.Free-iphone-icons

Specifically for i-Phone developers,Free for anyone to use under the Creative Commons Attribution 2.5 Canada license. You may use or modify these icons in any way as long as you credit www.pixelpressicons.com.

30.Web standard icons

28 icons for web designers and blogger.

31.Vector arrow icons

Freshly made, tasty vector icon with 64 icons.They’re entirely free.

32.Glossy Vector icons

This particular icon set falls into the “window” category. Nothing to do with “Windows” the operating system, but the adjustment of windows, panes, and closure icons.85 shining icons ready for your next design.

33.Icons for your photo editing app

Image related icons.-Some smiling lips, a camera lens, some vortex colour, a crop tool, a TV icon, and plenty more.they’re free to download and use as you wish!

FYI : Social media icons will be coming in the next part of the icon packs after that other icon packs too.

Being a freelancer means a lot of freedom to plan your own days at work, but it also does require discipline and planning. Being your own boss, you need to be good at making the right rules to succeed. Most of these tips sound just like common sense, but actually remembering everything when it’s needed isn’t necessarily as easy as you would think.

Different rules work for different people. Having worked as a freelancer on and off for over ten years, I’ve created this list of my best tips on how to succeed. Maybe you already use several of these or versions of them, great! Hopefully you will also find a tip or three that can help you to succeed in what you do! :)

1. Make a marketing/business plan

This should be the first thing you do. Even though you have all the info needed in your head, putting it on paper will give many advances and definitely be worth the extra work. Not only will you that way be «forced» to think through important issues and possible challenges before they occur, but it can also be a lot easier for you to get the needed help from potential business partners or investors when you have a good business plan to show them.

2. Plan your days ahead

Allow yourself an hour or so at the beginning of each work week, or the last hour of the previous week to plan the upcoming week. Then it’ll be easier for you to plan how to spend your hours to reach the deadlines you have upcoming. The more ongoing projects you have, the more important this is.

Picture by Hilde Vanstraelen

3. Use free software

Starting up as a freelancer can be challenging economically, and by choosing from all available and good free software you can save a lot of costs without necessarily having to give up a lot of functionality. Free doesn’t have to mean it’s not good software, there are more and more options available every day so make sure you check out what can be used related to your business. When you buy a computer, camera, tablet or printer make sure to check out the software that comes with it as well. You may be in for a positive surprise.

4. Create an eye-catching logo

To look professional and catch those potential clients in a tight market, requires hard work when it comes to branding yourself. Creating an eye-catching logo (or getting someone to do that for you if you lack the skills yourself) can make you seem more professional and easier to see. The power of a good logo and actually using it on business cards, websites and such will give you that professional look which could be the extra inch needed to catch the attention of a new client.

5. Learn to say NO!

If you don’t have the time for another client at the moment, it’s important to be able to realize it and say no. It is the most fair thing to yourself, your existing client and the new ones that knock on your door. Worst case scenario is saying yes to too many and it having consequences for existing clients. You always want to make sure you have enough time to give your current clients the best service you can. A client too many could be the thing that lowers the quality of  all your work.

6. Make a blog/website

In this Internet age that we are, having a website of your own can mean a whole lot. Not only does it make you look more professional but it is also a gateway to new clients. Many do surf the net to find people for their next projects and if they can’t find you online they won’t know you’re there.

Picture by Claudio Sepulveda Geoffroy

7. Update your website regularly

Do you already have a website or blog? – great! But to maximize its value to you it’s very important to update it regularly. If new clients visit your site and see that you haven’t updated the content for a very long time, that might just be the reason for them to choose someone else instead. Updating regularly will require an hour of your time every now and then but can pay back multiple times rewarding you with new clients.

Picture by Ben Lancaster

8. Give your online visitors something free

Giving something extra to the visitors on your website always is a good thing. If you work as a designer you can for example consider putting up some free textures or buttons. This will give your site more visitors and potentially more clients for you. Or how about offering every visitor a percentage off on their first order with you? Again, this could be the extra thing needed to stand out to new clients.

Picture by Mario Alberto

9. Use social media

Social media is where many relationships are made these days. No matter which country you live in, using social media can connect you to potential clients and partners all over the world. Twitter is a must, and you should consider Facebook and also forums related to your business. If you are a designer consider having a look at deviantArt and YouTube aswell. In several of these media you can advertise for your own business as long as you make sure to not spam it too much.

Picture by Davide Guglielmo

10. Get allies

Having allies can mean everything. Connecting with people through social media or even spreading the word of your business through friends and family can get you just that word out there that you need. Also making relations with people who can do things for the clients that you can’t can help, you give the clients a more complete package of what they need. One day you are the one sending a client to an ally that can offer a more suitable service in that case, the next day you could be the one having clients sent your way.

Picture by Glenn Pebley

11. Save for rainy days

Even though your business may go really well, there can and probably will come a bad month or two every now and then. Being a freelancer is being vulnerable to changes in the market. My advice would be to save up a little bit of your income each month, save it in an own savings account so that you have it as a safety buffer for when times get rough. You sure wont regret doing that. It would be a shame if a couple of small bills would ruin everything for you in a bad month.

Picture by Marcelo Moura

12. Be creative

There are many ways to be creative, to get new clients or to make better use of equipment and office space. Some examples can be to upgrade an existing computer if you can’t afford a new one, redecorate a spare room if you can’t afford the rent for an office outside of your home. Add a new product or service to your current list or ask friends or family if they know anyone that may be in need of your services. The options are many, all you need is to try think a bit out of the box.

Picture by Ayhan Yildiz

13. Reward loyal customers

If the market is tight you need to do what you can to have your customers back a second and third time. Being friendly and service minded is always a must, but what about giving them a discount the second time? Or sending them special offers of various kinds. Use your fantasy and implement these things into your business plan. Make customers want to come back and you will have the best possible chance to survive.

Picture by Deb Walker

14. Treat every client as if he is the only one

Giving existing customers good offers as mentioned in the previous tip is important. But remember to be service minded. If a customer feels important that will make him more loyal as well. Use positive language when you talk or write to him. Don’t be afraid to say that you will go out of your way to make sure he is satisfied with the product/service he is getting. And remember to let him know that feedback is appreciated. That way you can keep making your services more and more attractive and get happier clients. Don’t forget that existing clients can be the best advertising you ever get!

Picture by Shlomit Wolf

15. Work when you are at work

If you have decided to work from lets say 8am to 4pm every day, then do so. If you have errands to run, private mail accounts to check, private phone calls to make and so on, these will quickly eat of your much-needed work time. Make a promise to yourself to only do this when you are not supposed to work, as in before or after work or during your lunch break. It may not seem that much to you, but I’ve seen several great freelancers getting their days completely messed up because they were not good enough at managing their time properly.

Picture by Zsuzsanna Kilian

16. Know when to start and stop

Just as important as actually working when you are at work, is starting when you should and stopping when you should. You may have to prepare yourself for working extra hours every now and then to keep your business alive, but it is very important that you have free time too. You need to recover and get your mind filled with other things or you will get burned out and ruin things for yourself. The more hours you work at once, the less productive you get. So remember to follow your own rules on when to start and stop the day at work.

Picture by Nick Colomb

17. Keep your finances tidy

Keeping your finances tidy probably sounds easy, and it can be – as long as you keep an eye on them regularly. No matter how small a business you are running you will run into trouble if you only spend time on billing and accounting once or twice a year. Set up dates for when you pay your bills, when you send out invoices to clients and to make monthly budgets. Not only will this make it easier for you throughout the whole year but you will be able to fix errors quicker, do adjustments if needed and so on.

Picture by Michal Ufniak

18. Remember to breathe

Breathe you say? Yes ;) And by breathing I mean that you need to take care of yourself. You may be freelancing using a computer or two, a camera or other tools, – but the most important tool will always be yourself. And just like any other tool you will be in need of some defragging and polishing yourself. Remember to continue to spend time on your hobbies, friends and family even if you have a busy work schedule.

Picture by Alex Bramwell

19. Get out of the house occasionally (especially if you work from home)

If you have a home based office it’s important to get some fresh air. Book some of your meetings somewhere else, meet business partners for lunch, or spend an hour or two working from a library or coffee shop with your laptop if you can. The change of scenery may boost your energy level/creativity and give you a lot back.

Picture by Jesse Therrien

20. Make an inspirational string

Rough days come and rough days go. Simple as it may sound, having something around you to remind you of why you are working this hard can be what you need to get some extra energy on that one difficult day. Make your own inspirational string! Take a piece of string or use a cork board/whiteboard, whichever you have available. Add a picture of your kids, of the vacation spot you are saving to go to, or maybe a car you hope to be able to buy. Add some of your favorite inspirational quotes or pictures, whatever inspires you really. And there you go, your own inspirational string! Taking a look at it when you are close to giving up or when a day is extra stressful can work wonders for you. You should give it a try :)

Picture by Cristopher Bruno

21. Be humble

No one is born an expert or world champion. If things go well or you feel on top of things it can be easy to get a little bit too confident, which can be bad for your reputation and bad for the quality of your work. You should always aim to be humble, listen to your clients on what they want. Give them your professional opinion when needed but in the end it is the client that generates your paycheck. Also remember to willingly take advice from colleagues or others who have been in the market for a while.

22. Look professional, in every way possible

You have the logo, the website and so on and things are starting to look pretty good. Remember to also meet clients with respect, look presentable and be polite. Being your own boss doesn’t mean you can talk or act in any way and still keep your clients. Remember that.

23. Ask for feedback

Not only should you have comments enabled on your website but you should also ask your friends/family/allies for feedback on your work. And most important of all, after you have finished your project – ask the client what he thinks. Not only do you get a great chance to improve but the client also feels important. Getting someone else’s opinion is always good and this will help you to become even more successful.

Picture by Dominik Gwarek

24. Always carry a notebook around with you

It being a normal notebook, your iPhone or any other digital form of “notebook” you should carry it with you and remember to take notes. This is for many reasons. Not only can you unexpectedly run into a potential client or an existing one, but you may come up with valuable ideas when you are on the bus, on the plane or basically anywhere else. Several times have I had amazing ideas, not had a notebook, forgotten the ideas and seen them used somewhere else a year later.

Picture by Typofi

and last but not least

25. Take the time you need!

This is so important, it can’t be mentioned enough. Same as with the tip about learning to say no. Once you have said yes to a project you need to make sure that you take the time needed to do the best you can do. Handing over a project that is half done will not only give you a client who won’t come back, but it can give you a bad reputation. Your clients are your best references to show in the future and no one want a freelancer who leaves the work half-finished.

Picture by Kriss Szkurlatowski

That was my first article here on 1stwebdesigner, and I hope you enjoyed it and found the tips useful.
Feel free to leave your own tips or feedback using the comments, and good luck in the world of freelancers! :)

Twitter background design is one of the most important things, you can change in your account to attract new followers.  We only can change little things in Twitter so why we don’t put there the best we can? Let’s change our background right now, but before we do that – time for you to get inspired!

I hand picked those 50 Twitter backgrounds, while I was browsing through like 200-300 twitter pages – these all were the ones which caught my attention. Interesting to notice, not all of favorites are really colorful, but even subtle, clean and elegant but still stood out. In my opinion the best case is to create what suits you in the meantime thinking about usability and readability – but light designs with few colors included to make design shine seems to be the best case! What’s your case?

1. @nicholaspatten

2. @chrisspooner

3. @bongobrian

4. @bartelme

5. @abduzeedo

6. @boagworld

7. @cameronolivier

8.

9. @DesignerDepot

10. @digitalmash

11. @graphicidentity

12. @mmpow

13. @ArteWebdesign

14. @cheth

15. @KrisColvin

16. @marcelsantilli

17. @Ubikwitusrex

18. @rodneireiz

19. @just4theALofit

20. @Chryseiss

21. @oxygenna

22. @luciana_luz

23. @tonypeterson

24. @showcasemark

25. @XquiziteLizard

26. @HungryGirl

27. @elianarod

28. @davewilhelm

29. @nbawiileague

30. @LisaWorsham

31. @Go_Media

32. @Doubleolee

33. @theleggett

34. @Farrhad

35. @chadmcmillan

36. @myklroventine

37. @nullvariable

38. @Genuine

39. @imagedesigns

40. @marekuk

41. @Krftd

42. @ramesstudios

43. @rafalmeidaf

44. Pudny

45. @Alyssa_Milano

46. @andysowards

47. @binojxavier

48. @sharebrain

49. @Scarletbits

50. @nymphont

If your exclusive and unique background is not in this list, then feel free to share it with us in comments section!

Form is an important element in a website.The recent developments in web 2.0 scenario and the growing quantity of web apps has even make it more important. The most important point in building a form is the usability fact. Form should be easy to understand so that visitors can enter values into the form correctly without getting confused.

In this article we will explain the various techniques, tutorials, examples relating to the modern trends in building web forms to enhance the user experience.

Form Validation Techniques

when users enter values into the form, as the owner of the site must ensure that the value in accordance with the insert is expected, provide information on visitors to the validation before they are sent to the owner of the site

1. Live Validation

Live Validation is a small open source JavaScript library built for giving users real-time validation information as they fill out forms.

2. fValidator

fValidator is an open source (free) unobtrusive JavaScript tool for easy handling form validation.

3. Validation With Prototype

The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

4. Ajax form validation

This is Ajax form Validation, you can learning how to use AJAX to process and validate your forms.

5. jQuery inline form validation

6. sForm – Ajax Form Validation

This validation form is a real-time feedback to users, when they fill out the form, they will know what happened to see the color will appear. Fields that have not been properly will appear red and after validation is going to be green. This will facilitate the user when filling out the form

AJAX/CSS Forms Tutorials

7. How to make a password strength meter for your registration form

This tutorial will teach you how to make a password strength meter

8. AJAX Form POST/GET

With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX JavaScript either displays the answer (page) or does some action depending on the answer

9. Style Web Forms Using CSS

In this article you will look at step by step how you can use CSS to create attractive and usable forms.

10. Styling File Inputs With CSS And The Dom

This tutorial will explain stylish file upload inputs via clever use of js and css. This is great tutorial form Shaun Inman.

11. Degradable Ajax Form Validation

If you’ve ever confronted the task of validating data in a form, you know about choice. Whether it’s choosing between client side or server-side scripts, or the amount of information a user should see on the screen, the results should always give the user quick and meaningful feedback, while providing a solution for when things go wrong.

12. Fancy Contact Form

In this tutorial you will learn to make an AJAX contact form which leverages modern web development techniques. You will using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin, which will style all the input fields and buttons of the form.

AJAX CSS Form Online Builder

13. Form Assembly

This is A CSS Stylesheet Collection for Web Forms

14. Web Form Factory

Web Form Factory is an open source web form generator . They will automatically generates the necessary backend code to tie your form to a database.

15. JotForm

JotForm is the First Web Based WYSIWYG Form Builder. Create and publish web forms using your browser. Its drag and drop user interface makes form building doable for anybody that wants to do it

16. Wufoo

Wufoo is HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

17. FormLogix

FormLogix is an online form builder tool for creating web databases and web forms. FormLogix is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as: Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM

18. Phpform

Phpform  is free form builder . You can create online forms quickly and there are many color options available form

19. Formspring

FormSpring’s is easy form builder that make companies and organizations an easy to create some form online to begin the integration with the web site and data collection

20. Icebrrg

Icebrrg can easily create any kind of online forms for websites and blogs – no programming skills or special skills needed.

AJAX CSS Form Best Examples

21. Masked Input Plugin

22. prettyForms

23. Ajax Contact Form with YUI

24. Ajax Chained Select – demo

25. Instant Edit

26. Anchor Layout with Forms

27. Uploadform

28. Textarea

29. CSS-based Form Template

30. Uniform

Feel free to share your tips and techniques using comments section.

Want to stand out? Buy a unique T-shirt! In this article you are going to find a lot of cool and creative t shirt designs from talanted artists.You can actually purchase almost all of them. Also it is interesting to look at them from proffesional point of view. Try to analyze and understand why and how interesting effects are achieved, how 3D effects are put effectively in use.

I would love to have all of these T-shirts! How about you, what’s your favorite?

1. Downtown by 7sixes

2. CMYK 2.0 by wisseh

3. Lights out by Brock Davis

4.Lions Are Smarter Than I Am by Keith Carter

5. Hearts with wings by lookinducky

6. Lillith Potsbottom by facefriends

7. Zaal Persian Legend by B.B. Hive

8. Breaktrough by FRESHFAUXX

9. The painter by sebasebi

10. FrequenCty by Dan Rule

11. ACIDorange by kiwie

12. BlueRoyal by kiwie

13. FUN by kiwie

14. Paint La Skull by myargie22

15. That design we love by fansoption

16. Sketch T-F by JAGboards

17. Rockstar by reack

18. Adidas Originals by Philippe Intraligi

19. Aqua Earth World Pixel Map by winterrenaissance

20. From The Depths by cbass99

21. Tectonic Wormhole by Joe Van Wetering

22. Fight For A Better Tomorrow by Mike

23. Revelations 2 by jimiyo

24. Tranquility by Dina Prasetyawan

25. Ariel by Alice X. Zhang

26. Time To Say Goodbye by cbass99

27. Floral Explosion by AJ RJ

28. Night Of The Dead by Mike

29. Chaos Theory by mathiole

30. Bird In Flight by zomboy

31. 5bugs “Cowboy” by PEACHBEACH

32. Coeur de voyou by zombiecorp

33. Surfing Space by gums

34. Friends from abyss by TheW_aka_Look

35. Funkmaster by short

36. Townshipfunk by Peachbeach

37. Vutterfly Leaf by Cib

38. Quality by Lars Wunderlich

39. Coloures by song

40. Breaking Down Barriers by gaunty