Usability, user experience and review survey for vistors of IAMWD

Dear visitors, I had requested you to go through a review on one of my previous post “How I AM Website Developer can improve even more? Visitors review” before. “I AM WEBSITE DEVELOPER” started on 2009 November and it is very close to a year with only 37 posts, all written by EVAN SHAJED (me). I am a freelance website developer and as a writer I am very new. Last one year there were lots of different techniques has been taken to insure best usability and experience towards visitors with better posts. It is quite unfortunate not having much visitors as expected.

i am website developer survey

picture is taken from Survey Monkey

I have taken some analytical steps to improve my blogging services targeting more visitors and also trying to get direct comments from them. It will help to understand what my visitors think about this small blog. Very soon depending on different research taken so far, within next few weeks I will convert current UI to a fast, user friendly and accessible website. I will need your help to insure that.

Please take a short survey!

To get reviews, feedback and comments about this website, I created a survey on Survey Monkey which includes only 8 questionnaires. I believe it may take only 5-6 minutes. It is a request to browse this blog first then take the survey.

You may take this survey in two ways. You click into this link: Help us understanding usability matrix for IAMWD or you can take the survey right into this post below.

Create your free online surveys with SurveyMonkey, the world’s leading questionnaire tool.

It will be great if you can share this post within your network. It will really help me to understand my current blog rating. Very soon I will improve overall user experience, design and other matrix related to better usability for visitors; after getting these feedback data. Thank you for being with us this far. Don’t forget to comment. you can also give your valuable comments in our comments section.

Design a modern twitter icon in photoshop for your website

Syncables 360 Premium v7 Save $10

Right now I am working on a web template for SME DEVELOPERS for Real state Business and have intention to release the template for free under IAMWD. While working on the template I tried to find few nice social icons, buttons that can fit into my design. After a long search within web and my existing resources I failed to grab one, on secondary solution I decided to design a twitter icon on my own!

I am not good on Photoshop, though I manage with templates but not good in sketches. I gone through Google and find out a nice tutorial by Desizntech. What I am going to show below is quite close to the tutorial from Desizntech but here I am including some of my custom parts.

Choose your image size

twitter icon

The easiest step for sure. Chose your canvas and image size. Here I have chosen 300×300 and transparent background.

Set your icon size with guides

Next I placed 4 different guides along with the rulers to initiate 50×50 pixel of size. Please see the above picture with blue box mark.

Draw Rounded Rectangular box

Select rounded rectangular box from tools and give it’s radius value to 5 in the square box you defined with guides in previous step. It will be something like the picture below.

Edit Layer Style

Here I have chosen Gradient Overlay, Pattern Overlay, Drop Shadow and Inner shadow. Please follow the pictures one after other…

Gradient Overlay

twitter gradient overlay

Twitter Gradient Editor

For gradient color chose #63d2f4 and second one on right #e9f5fa. Please note I have selected to show the gradient in reverse mode.

Pattern Overlay

Twitter Pattern Overlay

You can edit this section as you like to. I included it to give some patter feel but if you want you can skip this part.

Inner Shadow

It is better to chose a darker color than that of your background in Multiply Blend mode, here i have chosen #c4ddeb. You may give different value according to your need in distance or size.

Drop Shadow

Twitter drop shadow

According to the website background color I have chosen drop shadow color to #8d8b8b as my web content background is white. You can give any color that suits with your web background.

And that’s it your box styling is done. Next we can concentrate on twitter text ‘t’ !!

Adding Twitter Text ‘T’

First you will need to download Twitter Font Pico if you don’t have it in you collection. You can download this font via Bitrebels

After download add new text layer on top of the rounded rectanguler box and type ‘t’ with font style PicoBlackAI with the color #2cb7e2. Vertical Scale of the text will be 130%.

twitter text pico

After typing the font align it into the center of the shape by selecting both of the layer and then select Layer->Align->Vertical Centers and Horizontal Centers. If you do it correctly it will something like the picture shown below.

twitter text box

Add styles in to text layer

Double click on the text layer and select stroke. Chose color #ffffff and size: 3px position->outside

twitter text stroke

Then Select Inner Shadow and give values according to the picture below,

twitter text inner shadow

If everything goes fine the outcome will be as below,

twitter button big

And that’s it you are all done. You got your own custom icon!! Here what it may look like….

Twitter icon big

And this is your final icon

You can download the source from here: twittericon.psd

Finally I would like to hear from you. Please let me know about any of your techniques that we can share with others. I really need some guest writers who can contribute their concepts, techniques or knowledge with us. Please feel free to contact me at e…@i… Help us to promote our blog by sharing this page if you think it helps you. Don’t forget to subscribe to our RSS feed

Coming Soon: Keep an eye on our blog. We are going to submit a free website template based on XHTML, CSS3 and JQuery on Real State Business very soon.