Type Tester

The Typetester is an online application for comparison of the fonts. Its’ primary role is to make web designer’s life easier. It also gives you the CSS of your desired type you just created. It is an incredibly useful tool. That's all I can say. Choose your typeface from dropdown menu or specify your own. However, keep in mind that there’s a possibility that not everyone have that same font on their systems. If you are choosing font for broad range of visitors, it’s good idea to stick with those from the safe list.

It contains 3 columns of type faces to compare between, in every column you can change the type of the font, its color, line spacing, word spacing, background and also the alignment. Once you settle on the font type you like, click on tools and choose the CSS of the column you just created. Copy it and use it in your site.

Hamad Darwish releases high resolution Vista wallpapers!

Hamad Darwish, Flickr photographer, has just released his collection of images taken during Windows Vista photoshoot which did not make the cut into Vista's wallpaper collection. The collection on his personal website is awesome.

If you use Windows Vista, then his work might be on your computer. In fact, it might be even on your desktop right now, and all he had to do was upload his photos to Flickr!

For those who do not who who is Hamad Darwish, he is 24 years old and was born in Kuwait. In 2001, he moved to the United States as a full-time student to get his bachelor’s degree in Radiologic Science from Oregon Institute of Technology. After obtaining his degree in 2006, he moved back to Kuwait with his family. He is currently an employee in the Ministry of Health, working in a public hospital specialized for chest diseases. He work as a CT (CAT scan) Radiographer and also as a network administrator in the Medical Imaging Department.

He got a short Flickr message asking him if he was interested in selling some of his work, without mentioning the party that is interested in buying. After he replied to message saying “yes. why not”, he received a professional offer from Microsoft’s MSX Design Group!

Hamad's web site
His Flickr page

How to create rounded corner box using CSS

For a long time web designers were using table tags to create rounded corner tables or boxes. They all used the same method, three rows by three columns to be able to create flexible tables with rounded corner. This way is absolutely gone and we are no longer using it now, we are using the CSS method, which is easier and faster.


ONE
First thing is to prepare all your rounded corner images


Then create a normal <div> box
HTML:
<div class="box"></div>

CSS:
.box {width:200px; height:200px; background-color:#FFFFFF;}



TWO
After that we add the top left background to it, or whatever corner you would like to add. The CSS will be:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your progress till now:




THREE
Create another <div> tag inside the first one and add the top right background to it.
HTML:
<div class="box"><div class="tRight">
</div></div>

CSS:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.tRight
{
width:200px;
height:200px;
background-image:url(images/tRight.gif);
background-position:top right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your progress till now:




FOUR
Create another <div> tag inside and add the bottom Right background to it.
HTML:
<div class="box"><div class="tRight"><div class="bRight">
</div></div></div>

CSS:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.tRight
{
width:200px;
height:200px;
background-image:url(images/tRight.gif);
background-position:top right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.bRight
{
width:200px;
height:200px;
background-image:url(images/bRight.gif);
background-position:bottom right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your progress till now:



FIVE and the LAST STEP
The last corner to add, do the same and add the forth <div> tag inside with the bottom left corner in the backround of it.

HTML:
<div class="box"><div class="tRight"><div class="bRight"><div class="bLeft">
</div></div></div></div>

CSS:
.box {
width:200px;
height:200px;
background-color:#FFFFFF;
background-image:url(images/tLeft.gif);
background-position:top left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.tRight
{
width:200px;
height:200px;
background-image:url(images/tRight.gif);
background-position:top right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.bRight
{
width:200px;
height:200px;
background-image:url(images/bRight.gif);
background-position:bottom right;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

.bLeft
{
width:200px;
height:200px;
background-image:url(images/bLeft.gif);
background-position:bottom left;
margin:0px; padding:0px;
background-repeat:no-repeat;
}

This is your final output:



EXAMPLE
The online HTML example here

Can color blind people work as web designers?

I'm working as a web designer for almost 8 years, and on August I found out that I'm "Red-Green Color Blind" after making this test, can you imagine?!

I made that test on all office members, they all solved the test so fast! (I was going to cry). 8% of males are red-green color blind, this might be bad news to some of them, but to someone who is a web designer for 8 years and then he knew this fact, this might be extremely shocking.

But, I am a successful web designer, my color schemes are always bright and nice (what people says to me). I use a lot of green, I love green, so how come I'm a successful web designer and having green-red color blindness?!

Most people think that color blind people are like dogs, do not see colors at all (dogs do not see colors). No, we see colors but we cannot see red and green together with low contrast, or reds and greens only with low contrast between them. That's why we design better designs that is safe for color blind people!

I loved that fact :)

Good Designers Copy, Great Designers Steal

Pablo Picasso, the first living artist to be featured in the Louvre, influenced the artistic world in a uniquely original way. So why is he known for saying “Good artists copy, great artists steal”?It’s true. Picasso really said, “Good artists copy, great artists steal.” Or at least, since his death in 1973, everyone believes he said that.

But why? Why would someone as original as Picasso say something as ironic as that? And what did he mean? Google Picasso’s quote, and you’ll find plenty of opinions and interpretations as to what he really meant.

Click here to read the full article on sitepoint.com. Written by Cameron Moll

How I (color blind person) see the world!

A lot of people were asking me "so, what do you see!!". This post is to make you understand what exactly I see. Well, after 27 years I discovered that I see the world in a different way than others, and I am a successful web designer, my color schemes are always bright and nice (this is what people tell me)

I was asking myself, do the green fields which i love look red to normal people?! do normal people see orange like my blue?! when you are born your parents teach you colors, they point to that box and tell you "this is green" they point to this red circle and say "this is red". To them it is green box and red circle but they don't know how you see it! you might see that red circle as what they see blue! so you will point to every blue color you see and say RED (they told you it is red), which they actually see as red! so they won't tell you, you are wrong!

This is of course wrong , I see red as you see it and same with green, but, I see it with different shades. After browsing the internet searching to understand more about color blindness and different types of it, I discovered that I'm red-green color-blind, I also found these images which will help you to better understand what I see.



The images above are a tool to make normal people able to imagine how color blind people see what they see.
In the first image, normal people see a number. But if they look at the 2nd and 3rd images they will see what color blind people see in the first image. The difference between the 2nd and 3rd is just different types of color blindness.



In the upper 3 images I can't see a difference in them, they look the same to me, but to you as normal person you'll see a number in the first one.



In this gradient you (as normal person) will see every number in a box of color which is different to the one next to it. I can't see these boxes, I just see numbers from 0 to 5 as one block with gradient from lime green to yellow but no boxes! same happen from 10 to 15 just a gradient.



The first earth image shows how normal people will see it. The second one shows how a person with a red-green color deficit (deuteranopia) would see it and the third shows how it looks for a blue-yellow color deficit person (tritanopia).



The first colorful hats image shows how normal people will see it. The second one shows how a person with a red-green color deficit (deuteranopia) would see it and the third shows how it looks for a protanopia person, another form of red-green deficit.



People with color deficiencies may have difficulty distinguishing certain colors (e.g., a red-green color deficiency means that reds and greens are more difficult to distinguish). But as this photo demonstrates, many other colors are just as distinguishable to a person with a color deficiency as to someone with normal color vision. The first image shows how normal people will see it. The second one shows how a protanope person would see it and the third shows how it looks for a tritanope person.



The first dotted image is an ishihara plate commonly used to check for red-green color blindness. While on the second image it is what a red-green color-blind person might see. Note that the digit (3) is practically invisible.

You now understand more about what I can see!
hmm, you can start donations now! :)

It is really important to make color tests to your kids!
Color test 1
Color test 2

The BIG stick and small carrot approach!

Yesterday I met a project manager from IBM Egypt, to discuss a system which they want to design its user interface. After listening to his requirements, which was a small part of a system, with its HTML and CSS, we discussed the requirements together for a while (If the customer only accepted this part, he will complete the rest of the job with IBM). And then he asked me about my time and price estimates for the project so I answered him. He did not like the pricing at all, I gave him like 33% discount, which he did not like either. By his rejection I told him I'm sorry I cannot work with a less pricing. I tried to convince him that he is paying more for quality; it seems he is not interested in quality!

Till now this is OK!
This happens every day in a lot of places on earth.

But what happens next do happen rarely!

• He tried to convince me that "why should I pay you more for a thing the customer might refuse!"
  (your work might be useless to us)

• I told him, tell me what your budget for such thing is, he said I don't know there is no budget till now for such thing, but your price is high.
  (So why is he negotiating with me if he doesn't know, he only knows that it is high!)

• We discussed the pricing for a while and I told him I can't work with less than such pricing. I tried to convince him that my pricing is ok relative to the market and I showed him samples of finsihed work with the same margin or even higher prices with other customers.
  

• The funny part, after I refused to work with less than such pricing he told me "It doesn't work that way, if I were in your shoe I would not refuse such projects. You might have better (paying more) customers, but with IBM there is more projects to come." He said it in a way that for the sake of the name I should sacrifice pricing if I am wise, because with IBM they will give me more work (might not of course!). This is a technique used by many people in the market. They start encouraging you to accept their unacceptably low prices because he will get you more work and he never does. As a matter of fact if you accept, he will finish this work with you and then do the same thing with someone else in the next job. This way he guarantees that he always gets his work done with the least prices. Needles to say that this will make his boss happy; after all he is saving money!
  (The stick and carrot approach)

This phrase is so annoying, as if he is telling you
"You are working with IBM, why take money, you are going to be famous!!"

Why do customers think that designers are desperate in finding projects, Isn’t it rude to tease someone using the stick and carrot approach?!
And isn't it rude to give the designer a less amount JUST becuase you MIGHT get him more projects?!

What customers want?!

Did you meet weird customers before? I did.
Sometimes I think they swear to god they will make the site worse!
When you tell your client, if we removed that feature which will cost you more and added that feature which will gain you more money, and he refuse, because his competitors has these features he is asking for, and he doesn't want to appear less than what they did, I put him in the category of weird customer!

That kind of customers need the same features their competitors have, exactly the same. They ask you to do what they want, and not telling you their problem and asking you how to solve it online.

I know he has competitors and that’s why I want to make him a real website that will get him money not just cool features which do not gain him a thing!

Really, I feel I’m in front of a small kid who want the same toy his friend has!
What to do in that case? Just refuse the job.
better for you, you know why?
before we finish the project by days his competitors launch their new website!!
you’ll find a mad person on the phone shouting and saying “we need to do as they did”

believe me, weird customers are pain in the ass!
there is some designers that loves working with that type of customers, because they just copy the features from another website OR they love the pain in the ass!!

SilverKey one of the top 12 distinguished Microsoft partners for early adoption.

SilverKey Technologies was nominated at the vista & office VIP launch as one of the top 12 distinguished partners for early adoption of Microsoft technologies. Our logo was presented for 600 executives and BDM's in the event!

The best thing about SilverKey, we don't like using old or common technologies, we only use new and upcoming ones as much as we can. learning is our main concern here.

Here at SilverKey we always use the quote said by Johann von Goethe
"Knowing is not enough; we must apply. Willing is not enough; we must do."