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

First I want to welcome you to my very first article for 1stwebdesigner. Today I’ll show you how to create a very nifty looking dynamic shadow with a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base. I’ll explain every line of used code, so you can easily follow along and create your own awesome looking dynamic shadow powered by jQuery.

Introduction

When I first published my jQuery shadow experiment, I got a huge response from the community and a lot of people asked me, how I achieved this effect and if I’m going to write a tutorial for it – So here it is now!

If you want to follow along with the source files, you can download them by clicking here (*.zip archive). You can also take a look at the final demo here.

Step 1: Creating the transparent PNG’s

First we need to prepare all PNG files we’re going to use. We’ll need following image elements:

1. The on/off switch (needs two states)
2. The light source (in this case, a sexy light bulb – also with two states)
3. The object which is going to drop the shadow (here it’s going to be a logo)
4. and last but not least, the matching shadow of our logo

We’re going to use the CSS sprite technique for reducing HTTP requests. So we’ll need 3 images (otherwise we would need 6 separate images and twice as much HTTP requests).

1st PNG Image: The Light-Switch Sprite

2nd PNG Image: The Light-Bulb Sprite

3rd PNG Image: The Logo Sprite

I’m not going to explain how to create those images, as I’ll concentrate on the source code. If you want to use your own images, just make sure to save your images as PNG 24 , so your transparency gets saved too.

Step 2: Preparing our HTML, CSS & JS files

To make your files well-arranged, we’re going to create following folder structure for our files now:

The root folder (dynamicShadow) will contain our index.html with all layout containers inside of it. Inside of the img folder, you should put all three PNG image files you created or copied from step 1 above. Inside the css folder create a file named style.css. There we’ll style all layout elements we used in the html file. And the magic will happen inside of the js folder. There we’ll create a file named script.js. It will contain our jQuery JavaScript code.

If you have done those two steps above, we are now ready to go on and finally let the magic happen!

Step 3: Writing the HTML file with all containers we will use

First we need to include the files we created in the previous step, into the header part of our HTML.

First our stylesheet file:

<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />

Now we’ll attach the latest version of jQuery itself and jQuery UI from Google’s AJAX Libraries repository:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Last but not least we need to attach our JavaScript file (script.js):

<script type="text/javascript" src="js/script.js"></script>

Our header should look something like this now:

<head>
	<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>

We can start with the body part of our HTML now:

We’re going to need following div’s with the same id’s for the next step, where we are going to style our containers.

<body>
	<div id="switch"></div>
	<div id="light-bulb" class="off"><div id="light-bulb2"></div></div>
	<div id="logo"></div>
	<div id="logosh"></div>
	<div id="infobox"><p>Please activate JavaScript!</p></div>
</body>

For explanation:

1. “switch” will be our element, which is going to turn the light bulb on and off.
2. ”light-bulb” and “light-bulb2” are our containers with the actual light bulb (I’ll explain later why we need it twice). Just make sure you don’t forget to add the “off” class to the outer light-bulb container.
3. ”logo” is our element which is going to drop the shadow.
4. ”logosh” will contain the appropriate shadow for the object.
5. ”infobox” is just a bonus and not mandatory for our effect. It will contain some status messages. Additionally it contains a message for all (bad, bad) users, who are visiting your site with deactivated JavaScript. You can write them a message there. Take care at your diction, don’t be too evil to them ;).

Step 4: Let’s get some colors into our HTML file!

Now we’re ready to style our HTML with the CSS file we included into our header.

We will start with the info box. If you have chosen to include it, here is a styling suggestion:

body {
background:#3B4D61 url(../img/bg.jpg) repeat 0 0; }
#infobox {
	position:absolute;
	width:300px;
	bottom:20px;
	left:50%;
	margin-left:-150px;
	padding:0 20px;
	background:rgba(0,0,0,0.5);
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	z-index:999;
}
#infobox p {
	display:block;
	color:#D1D8DF;
	font:bold 15px/10px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align:center;
}

For body, an image is used to enhance the effect of shadow.For the #infobox we are using some CSS3 to make it prettier. The background is black and 50% transparent with the awesome rgba attribute and the corners are rounded with a 15px wide diameter through the Mozilla and WebKit specific attributes. The box will be 340 pixels wide (300 + 2 x 20) and placed centered on the bottom of our page. With the z-index set to 999 it will be the topmost element in our page so it does not get covered from our logo, the shadow or the light bulb.

Next is our switch:

#switch {
	position:absolute;
	bottom:50px;
	left:50px;
	width:80px;
	height:120px;
	background:url(../img/light-switch.png) -80px 0 no-repeat;
	cursor:pointer;
	z-index:100;
}

It will be absolute positioned to the bottom left corner of our page. The backgrounds X position is set to –80px. There we are using the CSS sprite technique the first time. The cursor is going to be a pointer, so the user knows that he can click it. z-index to 100. The logo, the shadow and the light bulb must get a higher z-index, so they don’t disappear behind the switch.

Now let’s style our two light bulb containers:

#light-bulb {
	position:absolute;
	top:20%;
	left:70%;
	width:150px;
	height:150px;
	background:url(../img/lightbulb.png) -150px 0 no-repeat;
	cursor:move;
	z-index:800;
}
#light-bulb2 {
	width:150px;
	height:150px;
	display:none;
	background:url(../img/lightbulb.png) 0 0 no-repeat;
}

The backgrounds X position of the main light bulb container is set to –150px. This is the “turned off” state of our sprite-image. The “inner light bulb” (light-bulb2) is set to “top left” (0 0), so it is the “turned on” state of the sprite. Later we will animate the opacity of it from 0% to 100% and create a smooth blend effect from the on to the off state and reverse. z-index to 800: It will be above the switch, above the logo and above the shadow but behind the info box. The cursor attribute is set to “move”. This way the user will get a nice, OS-based cursor which tells him he can move this object around.

Our last two containers are the logo with his shadow:

#logo {
	position:absolute;
	top:40%;
	left:20%;
	width:450px;
	height:150px;
	background:url(../img/logo.png) 0 0 no-repeat;
	cursor:move;
	z-index:700;
}
#logosh {
	position:absolute;
	width:450px;
	height:150px;
	display:none;
	background:url(../img/logo.png) 0 -150px no-repeat;
	z-index:600;
}

The main logo containers gets also the “move” cursor and the background position is set to “top left” again. This will show the main part of our logo sprite. z-index to 700. It’ll be above the shadow and above the switch, but behind the light bulb and the info box.

The shadow container gets z-index of 600 and the backgrounds Y position is set to –150px. It’s the shadow part of our logo sprite-image.

If you came this wide, your index.html file should look something like this in your browser (of course only, if you used the same image files of this tutorial):

Now let’s get this party started and add some spice to our page. We will write some JavaScript now!

Step 5: The magic starts to happen now!

Ok now let’s go with the interesting part of this whole tutorial. First we start with the jQuery’s main function:

$(function(){

});

This is the short hand code for jQuery’s document.ready(). Our whole script needs to be inside of this function, so it gets loaded, as soon as the DOM is ready.

Next we’ll define some variables and set the default text of our info box. The descriptions are inline as comments:

// shadow offset
var shadowOffset	=	1.08;

// the light switch
var lightswitch		=	$("#switch");

// outer light bulb
var lightbulb		=	$("#light-bulb");

// inner light bulb
var lightbulb2		=	$("#light-bulb2");

// center of light - X-axis
var lightCenterX	=	parseInt(lightbulb.width()/2);

// center of light - Y-axis
var lightCenterY	=	parseInt(lightbulb.height()/2);

// logo container
var logo			=	$("#logo");

// light and logo containers
var lightAlogo		=	$("#light-bulb, #logo");

// center of logo - X-axis
var logoCenterX		=	parseInt(logo.width()/2);

// center of logo - Y-axis
var logoCenterY		=	parseInt(logo.height()/2);

// shadow container
var logoshadow		=	$("#logosh");

// center of shadow - X-axis
var logoShdwCenterX	=	parseInt(logoshadow.width()/2);

// center of shadow - Y-axis
var logoShdwCenterY	=	parseInt(logoshadow.height()/2);

// info-box text container
var statustext		=	$("#infobox p");

// info-box default text
var defaulttxt		=	"Drag the light-bulb or the logo!";

// info-box text for hovering switch while state is "off"
var ontxt			=	"Let there be light!";

// info-box text for hovering switch while state is "on"
var offtxt			=	"Switch off the light!";

// set info-box text to default text
statustext.text(defaulttxt);

// start our main function (will be used later)
moveShadow();

For now, you can comment the last line out. moveShadow(); will be our main function which will change the position of the shadow.

Now let’s get dynamic and let us make the light bulb and the logo draggable. We’re going to use jQuery UI’s draggable interaction element to keep things easy.

// making the light and the logo draggable
lightAlogo.draggable({
	drag: function(event, ui){

		// change the statustext to "dragging + element id" state
		statustext.text("dragging " + $(this).attr("id"));

		// our main function which will move the shadow
		moveShadow();

	},
	stop: function(event, ui){

		// switching to default text when stopped dragging
		statustext.text(defaulttxt);

	}
});

While dragging, we’re going to set the status text of our info box to “dragging” + the id of the current element. So in our case it will be logo or light-bulb. When we release the mouse and stop dragging the current object, we revert the text to our default value.

Our two objects should now be draggable! Isn’t it easy with jQuery UI? :)
(There comes the “write less, do more” from, which is jQuery’s slogan.)

Again you can comment out the moveShadow(); function for now, if you want to try your code in the browser. This will be the main function which makes the dynamic shadow moving, while you drag either the light bulb or the logo.

With the following function, we’re going to change the default text of the info box to our on or off text when hovering:

// changing the info text when hovering the switch
lightswitch.hover(function(){

	if(lightbulb.hasClass("off")){

		// when lightbulb has the class "off" show this text
		statustext.text(ontxt);

	}else{

		// otherwise show this text
		statustext.text(offtxt);

	}
},function(){

	// hovering out will show the default text again
	statustext.text(defaulttxt);

});

If the light bulb has the class “off”, then show the “on text”, else show the “off text”. When hovering out, the default text will be shown again. Still easy, right?

Next is our function for calculating the opacity of our logo shadow, according to the distance of the light source. In our case the light bulb:

// calculating the shadow opacity according to the light bulb distance
function setOpacity(getDistance){

	if(lightbulb.hasClass("off")){

		// if the lightbulb has the class "off", opacity = 0 (no shadow)
		return 0;

	}else{

		// otherwise we calculate a suitable shadow opacity with this formula
		return (1.2 - getDistance /1000);

	}
}

If our light bulb has the class “off”, we’ll return “0″, which stands for zero opacity. No light, no shadow. Sounds logical, right? More interesting is the “else” part, where we’re going to use this formula “1.2 – getDistance / 1000” to calculate a shadow which will look quite good. getDistance /1000 will just move the decimal point 3 points to the left, giving us a usable number for the next calculation, where we are going to subtract it from 1.2 (which would be 120% theoretically).You can experiment with this value, if you are not satisfied with the results.

The next what we are going to do is to assign the things which should happen, when the user clicks on our light switch:

// assign the things, which should happen, when clicking the light switch
lightswitch.click(function(){

	// when the light bulb has the class "off" do following:
	if(lightbulb.hasClass("off")){

		// first remove the class "off"
		lightbulb.removeClass("off");

		// change the background position of the CSS sprite
		lightswitch.css("backgroundPosition","0 0");

		// showing the shadow of the logo with a fading animation
		logoshadow.stop().fadeTo(750,setOpacity(shadowDistance));

		// fade in the inner light bulb container (light is turned on!)
		lightbulb2.stop().fadeTo(750,1);

		// changing the status text to the "off text"
		statustext.text(offtxt);

	// else do following:
	}else{

		// adding the class "off"
		lightbulb.addClass("off");

		// move the background position of the switch back to original position
		lightswitch.css("backgroundPosition","-80px 0");

		// fade out the logo shadow
		logoshadow.stop().fadeTo(750,0);

		// fade out the turned on light (no more lights now)
		lightbulb2.stop().fadeTo(750,0);

		// changing the status text to the "on text"
		statustext.text(ontxt);

	}
});

A few things are happening now. Let’s get through it line by line.

First we need to differentiate if the lights should be turned on or off. For this we will check once again if the light bulb has the class “off” or not. If it has it, we’ll do following:

1. We will remove it right again.
2. Then we make use of our sprite image of the light switch and move it to the “on” position, which is “0 0″ / “top left”.
3. After this we are going to fade in the shadow of the logo. We are doing this with the setOpacity function, described before. For now you have to change “shadowDistance” to “1”, if you want to try it. We will get the variable “shadowDistance” in the next function.
4. Last things to do is to fade in our inner light bulb which is positioned via our CSS to get the “energized” part of the sprite image
5. and change the status text to the “off state”.

If the light bulb has not a class named “off”, we will do the opposite of above which is following:

1. add class “off” to our light bulb
2. move the image of the light switch up by 80 pixels, so it is turned off again
3. fade out the shadow
4. fade out the inner light bulb (the lighten up one)
5. and changing the status text to the “on state”

The last function we need is finally the one, which will move our shadow (and probably the most interesting one):

// the main function - our shadow mover
function moveShadow(){

	// save the current X position of the light bulb
	lightX			=	parseInt(lightbulb.offset().left) + lightCenterX;

	// save the current Y position of the light bulb
	lightY			=	parseInt(lightbulb.offset().top) + lightCenterY;

	// save the current X position of the logo
	logoX			=	parseInt(logo.offset().left) + logoCenterX;

	// save the current Y position of the logo
	logoY			=	parseInt(logo.offset().top) + logoCenterY;

	// save the value how far the logo is away from the light bulb on the X-axis
	distanceX		=	logoX - lightX;

	// save the value how far the logo is away from the light bulb on the Y-axis
	distanceY		=	logoY - lightY;

	// calculating and saving the value of the square root of those two distance values
	distance		=	Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));

	// calculating and saving the shadow distance with the offset we defined in our variables
	shadowDistance	=	distance * shadowOffset;

	// preparing the CSS value to put into the "left" attribute of the shadow container
	shadowPosLeft	=	(distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px";

	// preparing the CSS value to put into the "top" attribute of the shadow container
	shadowPosTop	=	(distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px";

	// finaly using the results of all above calculations to position our shadow and set the opacity
	logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) });

}

This may looks a little bit weird and strange to you on the first sight, but it’s really not so difficult to understand and I used only some basic math formula for the calculations which I will describe you now.

Let’s get through it, line by line again:

1. lightX: Getting the current X position of our light bulb
2. lightY: Getting the current Y position of our light bulb
3. logoX: Same like 1. only with the logo container
4. logoY: Same like 2. only with the logo container
5. distanceX: Calculating how far the logo is away from the light bulb on the X-axis
6. distanceY: Calculating how far the logo is away from the light bulb on the Y-axis
7. distance: Calculating the square root of distanceX and distanceY using the Math.sqrt(); function and for the two values the Math.pow(); function, which stands for exponential power. The first parameter, in our case distanceX or distanceY is the parameter for the base and the second parameter stands for the power. For making it clear: On the paper you would write: distanceX² and distanceY²
8. shadowDistance: Multiplying the actual distance with the offset we defined at the top of our script where the variables are defined. We used this variable on click function of the light switch. So if you changed “shadowDistance” to “1”, you can now change it back to this variable.
9. shadowPosLeft: Making the left offset of the shadow ready, to use it in our last line.
10. shadowPosTop: Making the top offset of the shadow ready, to use it in our last line.
11. logoshadow.css(): finally we are changing the CSS of our shadow container so it gets correct positioned and has the proper opacity

That’s it!

The last thing you need to do is to uncomment the moveShadow(); function twice (only if you have commented it out). At first at the variables section and at last in the jQuery UI’s draggable function.

Your shadow is now dynamic positioned and also has a cool looking dynamic opacity, depending on the distance and position of both: The light bulb and the logo.

I hope you liked this tutorial and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this: DEMO.

If you had some troubles with any step or need further instructions or help, feel free to write your question into the comments section of this post so I can take a look at your question and help you out!

Thanks for reading and have fun trying and using it in your next project!

Having worked as a project manager at several companies and having to monitor my own projects there’s a certain list of things I do to check on often (and I still do). Some of the things are SEO related, some are tech tasks, some help to achieve the marketing goals. Some of the things are just general but still it’s very convenient to have the nice set tools to perform the actions that you do on a regular basis. Today I’m going to write about Firefox add-ons that I have added my browser options (yes, I’m an addicted Firefox lover) as a project manager and just a human. All the add-ons listed help me in my daily work and I don’t know how much time I would spend if I had to search from all the information they give to me manually. I decided to divide this list into 2 sections-  the add-ons that I use as a usual human being and the add-ons I find extremely useful for the project management. So here we go.

The Add-ons for regular Internet Surfers

1. The WOT Add-on (Web of trust)

Web of Trust warns you about risky sites that cheat customers, deliver malware or send spam. Never in my life did I have a problem with some serious viruses infecting my computer until about a month ago. Suddenly my browser got frozen and in about 5 minutes all the programs and applications on my computer stopped working while the antivirus software that I had (kasperski) haven’t showed any thread which surprised me tremendously. Having restarted the system I trying at least something I was continuously getting the notice that I have to send a sms to some address and buy the security code that should unblock my computer or something along that line. I had to reinstall the system on my pc but this was not the end yet.

On the next day I found out that I got the virus on my server that have infected all the .html and .php files. I knew from the server logs that the virus got there from my computer and thanks God I had files backed up.
Doing my daily job I visit hundreds of website and I had no idea where I could get such a deadly virus from. That’s when I started thinking that I need in some way to exclude the potentially dangerous websites or at least know what websites have low reputation. Now I’m a happy user of the WOT add-on. It works very simply and graphically clear.

Next to every link and in the browser address line you will see the circle that changes the color from green to red depending on website trustworthiness, green being safe and red very poor. They gather this information from website visitors using the WOT and you can also rank the website for several parameters like trustworthiness, vendor reliability, privacy etc. You can also leave a review if you say got infected from this website and want to warn the rest of the community. In case you get to the dangerous website they will show you a big pop-up with the warning before actually prompting you to the page, where you can choose where you want to see why the page is considered as dangerous, ignore the warning and go to the page or leave the page. If you have children there is also a children control option where the websites will adult content will not be available for browsing. You can get additional info on WOT add-on here.

2. Read It Later Add-on

Read It Later allows you to save pages of interest to read later. It’s very simple but very useful, at least for
me. Browsing tens of interesting pages daily I often don’t have time to read them right away. I used to add the pages I wanted to read to the bookmarks and then was totally forgetting about them or couldn’t find the pages I needed and finally I ended up with the long-long list of bookmarks cluttered with stuff of any kind one can ever imagine. Read it later add-on allows you to add the page to the read list in one click. You can right-click with the mouse anywhere on page you’d like to read later and choose an option “read this page later”.You can also copy the link and add it to the library clicking on small yellow arrow on the top right cornet of the browser.

3. Ad block Plus

A simple nice add-on that blocks add-on the pages. Once installed it will show up in a red hexagon in the top right of the browser window. Nothing special to say about it but it makes my life easier.

4. AddThis

AddThis is a nice add-on making sharing and bookmarking simple. The list of social icons will be added to your
browser toolbar area as well as to right-click mouse options. You just click on the icon, the application connects to your social network account and posts the update there. Here’s the sample how it looks in Twitter:

Though I use AddThis I still have a separate toolbar for stumble as this is one of my favorite websites and I love to have the options to leave a comment, thumb up or just view some cool stuff directly from the toolbar. You can install this add-on here.

Add-ons that I use in my work of a project manager

If you are starting the career of the project manager in some company or just have a start-up project I do recommend you to add this add-ons to the browser as they can not only make your life easier but help you choose the right direction in your marketing campaign as well as provide help to the customers if they run into some problems with the website.

1. Fire FTP

This might be one of the most Firefox add-ons. This plugin allows you to upload files to the server as any other FTP client but you don’t have to install it separately on your computer. The interface is quite intuitive. On the left you will see list of files on your computer and on the right once connected to the server you will see the files on the server. When you start the files upload or download you will see the how the process flows in the bottom area, the connection errors will show up there as well. You can choose the mode for files transfer (binary, ASCII and automatic) and whether to show or not to show the hidden files.

I started using FireFtp after my website files on the server were infected. Before that I was using Total Commander for years which I had to reinstall as well and since I didn’t want to get used to any other similar programs I decided to give a try to Fire FTP.

It’s not perfect and the websites in the other tabs and windows start working slower when FireFtp is working and there are now usual hot keys but it’s not bad at all. I like the error reports and I like when the program says ZZZZ when it’s connected to the server but not command is performed. This can be actually the only reason why I’m using it :)

2. HTTP Fox

HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. In simple words it shows you how the website interacts with the server and if any errors occur you can get the details of the error without having to check the server log files. I used to work for the company who developed a cool CMS system running on php and flex. Working with the customers, uploading files to their servers and helping them to actually manage the website I was facing some php or flex errors pretty often but the problem was that these were the errors the admin area was showing and I had no idea how to handle that. I’m neither a programmer nor a flash developer and this was a real nightmare for me. One of my friends recommended me to install the HTTP Fox plugin and there hasn’t been a single problem I couldn’t fix on my own.

I guess things would still work for me much easier if I had a better php knowledge. The way it works now- I start HTTP Fox (toogle HTTP Fox as they call it in the application), get the error description, go to google to type it there and then check for solutions how the error can be fixed on the php and flash forums :) With the HTTP Fox add-on you can also check whether some website will save a cookie on your computer as well as get some other useful info.

3. Fire Bug

Fire Bug is a great add-on that will be of a great help not just for a project manager but an advanced develop as well. The number of features is enormous but in my daily work I use just a few. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I used Firebug multiple times to customize and make small changes on the WordPress themes, to get info on the images and embedded videos and flash files and get info about properties of the page elements. You can call the application from the Tools section of the browser or just right clicking on some elements on the page.

4. SeoQuake SEO extension

SeoQuake extension is a must if you perform any type of work related to SEO, links exchange, online advertising etc. It gives you a profound info about the website, helps you study your competitors and potential partners. At one glance you can see the page PageRank, the number of pages from the domain name indexed in Google, Yahoo and Bing, Alexa Rank, the age of the domain name and the direct link to the whois info. There’s information about internal and external links on the page as well as the information on the keywords density ( you can check what main keywords your competitors use and how often and where on page).

The SeoQuake extension has another cool feature- so called Yahoo links- showing the number (and the list) of external URLs pointing to the page and domain name. Extremely useful when you need to check who’s linking to your competitors.

5. Search Status

That’s a good alternative to SeoQuake but I prefer using them both. By default the Search Status add-on options will show up in the bottom right corner of the browser alone with the traffic stats from Alexa (alexa rank), Compete and mozRank by SeoMoz. Earlier I was using Alexa stats from the SeoQuake and had a separate Compete add-on installed and now I have them all in one place. Some of the other features Search Status add-on include: no follow links analysis, general page’s link report, stats about indexed pages and keywords density, whois info etc. There’s almost the same features as in SeoQuake and some additional ones but they are not convenient to use. I prefer clicking on an icon in the toolbar rather than going to the footer, clicking on the icon and only then getting the list of options available. It would be perfect is someone could combine these two.

That’s it, I’ve listed all the add-ons that I use daily. I’ll be glad to hear what add-ons you use and how they help you in your work. I still have a place for two or three until my browser stops working so do let me know :)