1stwebdesigner - Graphic and Web Design Blog » Personal

50 Heart-Warming Greeting Cards:Enjoy Your Holidays

Sheena Dosdos — Tue, 28 Dec 2010 10:00:23 +0000

“It’s the thought that counts” – may sound cliche, but it’s true. It makes one feel bubbly to realize that there are people who have thought of them in such special holidays & occasions. Especially at this time of year, when people give gifts, attend to parties here and there. Even to some who annually makes a Christmas wish-list, receiving something more personal and intimate creates a very warm and heart-felt smile. Reading love one’s thoughts and wishes for you makes you feel warm & fuzzy all over. It’s amazing how simple things in life can give joy to others. The best way to do this is by sending personalized greeting cards.

Here’s a collection of very inspiring holiday greeting cards for you. Happy Holidays!!

1. Multili ngual

2. Happy Holidays Card

3. Holiday Photo Greeting Card

4. Everything in its place

5. Holiday Greeting

6. Holiday Card

7. Where My Hos at?

8. Natal

9. Ready for Santa

10. Christmas Card ’07

11. O’ Christmas Tree

12. Holiday Card 2

13. Holiday

14. Christmas Tree Card

15. Hour Media Holiday Card

16. Xmas ’06

17. Flowery Xmas

18. Xmas Cards

19. Festive Joy

20. Christmas Card

21. Chill Wishes

22. It Keeps Getting Warmer

23. Love, Peace, Rock N Roll

24. Christmas Card 2007

25. Christmas card no.1

26. Christmas Present

27. Holiday Card Design

28. Snowman Hugs

29. McGee Holiday Card

30. Holiday Card Series

31. New Year Card

32. Happy Holidays to All

33. christmascard 06

34. Holiday Card

35. Christmas 2003

36. Fal la la la

37. Christmas Card 2006

38. Holiday Card

39. Merry Christmas 2007

40. 2008 Holiday Card Front

41. New Year Greeting Card

42. Happy New Year

43. Corporate Holiday Card

44. Holiday Card Project 2

45. Card 3

46. A Little Holiday Magic

47. Personal Holiday Card

48. Mecha Nut Cracker

49. The Magical Christmas Tree

50. Merry Christmas

* Now the next thing you need is the finishing touch. Put your thoughts and sweet wishes in words and send it to your loved ones. That would surely melt their hearts and put the sweetest smile on their faces. Happy Holidays and have a kick-ass New Year!

How to Make Better Decisions (by Understanding Cognitive Biases)

Darren — Tue, 14 Sep 2010 10:00:08 +0000

According to Wikipedia, a cognitive bias is:

the human tendency to make systematic errors in certain circumstances based on cognitive factors rather than evidence

There are certain things you can do as a web designer to make better decisions by recognizing and thinking twice about these cognitive biases. My attempt here will be to make you familiar some of these common decision mistakes and offer suggestions on how you can avoid them.

Before committing on something in the long run, do a premortem

Let’s suppose you’re planning to switch from freelancing to selling web design templates (so you’re changing your business model). After 3 months, you see that the new business model of selling templates doesn’t make you much money (which was your primary goal). Postmortem is the analysis you do after you’ve seen that your project failed (so you do the plan, see the results and analyze why it failed after you did the execution.)

Premortem is a powerful principle because it forces you to look into the future and assume that your plan has totally failed. So, for our example, suppose you’ve just finished planning your web design templates business model and you want to do a pre-mortem. What you need to do is imagine yourself 3 months in the future (it could be more, depending on how much time you plan to dedicate on the project) and imagining seeing that your plan was a total fiasco. Nothing worked. Why? Write down the reasons. Some of them could be:

Not having enough money to get enough clients to make the whole business worthwhile
Not many people interested in generic web design templates

and so on. You see the power of this? By focusing on why your project might fail you’re getting much more balanced view. So now you can do some more research and take factors like the size of the market (enough people interested in web design templates) etc.

You can do this type of premortem analysis for every medium or long-term project you do (premortem and the rest of the principles here aren’t required for all types of decisions, most decisions we do are without much risk & the choices are obvious). You can read more on premortem here.

Prove Yourself Wrong!

These are 2 mistakes we often do and pay a high price for it:

Not considering enough alternatives when making a decision
Making a decision based on very limited evidence

Making a Decision Based on Limited Evidence

In one experiment, the researchers gave people the choice of a number of treatments for a fictitious disease and told them the effectiveness of each treatment. Each option was combined with a positive, neutral or negative anecdote.

Let’s suppose a person named Anny was a part of that experiment. She was given a choice of a treatment with 90% effectiveness but was also told a story of a person who wasn’t part of that 90% of people for whom the treatment worked. How do you think would Anny respond?

Anny would be 39% likely to choose that treatment, as we can see from the pictures. An extremely good treatment with 1 negative experience decreased the chances people will choose that treatment by almost 300%. That’s the power of anecdotes.

The above study is an example of people making a decision based on very limited evidence. Another example I often see on web design blogs is people blindly copying themselves. Mashable, one of the most popular social media blogs, once introduced a feature called ‘Image sharing’, you could just drag an image and a box (see below) would appear suggesting you ‘share’ that image on Twitter or Facebook:

After some time they removed the whole thing but still, many smaller blogs use that feature based on the rationalization: “If Mashable did it, then it must be good!” In reality, that was probably just a test they did and didn’t see any results from it.

What about web design blogs? I see a trend in web design blogs of producing extremely long posts (when it’s well known that people read at most 28% of the words on a page) instead of focusing on quality (it’s hard to measure the quality of a particular post, many factors need to be considered there so people often rely on the number of words as a measurement). There are some information quality theories which can offer a more objective picture of a quality of a content by taking into account several factors.

So the important lesson here is:

COLLECT ENOUGH DATA BEFORE YOU MAKE A DECISION. Want to test what’s the best way to monetize your site? Then run ads using 1 ad network for a week, then go for another one next week. Get enough large samples in order to make decent conclusions.

What about consulting with other people? As long as it’s people and not 1 person (the Mashable technical designer who introduced that social sharing feature or 1 anecdote), it’s fine. The wisdom of crowds is a powerful thing. Just make sure the “crowd” is DIVERSE and you hear as many different opinions as possible. Which leads me to my second point…

Not considering enough alternatives when making a decision

People love to surround themselves with people who have similar opinions/beliefs. The reasons are obvious: it’s a very comfortable position to be in, no negative emotions and conflicts are happening etc. Unfortunately, this is very detrimental for your decision-making process. I’ve mentioned previously that you want to make better decisions, consulting outside opinion is very helpful.

Consulting with outside similar opinion is not very helpful, however. This contributes to a phenomenon known as Groupthink which is the last thing you want to do if you want to get to an accurate decision.

What can you do here?

Seek diversity

This can be hard to do initially. Look for opposite opinions from the people in your group. Here you’ll risking short-term comfort (emotionally) for a long-term benefit (a broader and more accurate view). In my experience, I often get very useful opposite opinions and become aware of things I previously overlooked when trying to make a specific decision.

For example, when you try to decide between 2 or 3 web design tools, look for the pros and cons of each. Many people often look for the advantages only not realizing that nothing is perfect and that by becoming aware of the limits a specific tool has, you can make your job easier by eventually finding additional tools that can fill that void.

Look for ability

Of course, when consulting with people, look for people which file of expertise is relevant to your own. So if you want to find a good software, asking experienced people from review sites + web designers is a good idea.

How much skill (and how much luck)?

People are often inaccurate on saying how much skill/luck is required in order to reach a particular outcome.

One good question to ask yourself to help you sort luck from skill is:

Can you lose on purpose?

Can you lose on purpose in roulette? Almost never. Roulette is 100% luck. What about poker? Well, yeah, you can lose on purpose but not always so it’s part skill, part luck.

I think it’s important for you, as a web designer, to distinguish luck from skill because you’ll be often predicting things (like if a client really likes the design you made etc) and need to have somewhat accurate view of the probability of the outcome happening.

Learn more:

Wikipedia has a great list of cognitive biases if you want to learn more about this topic. Hope you found this article to be useful.

Credits:

I got many of the principles here from a great book called Think Twice + some of my previous experience in reading psychology research.

Customize your WordPress Backend for Personal Branding

Kevin Stanley — Sat, 29 May 2010 10:45:55 +0000

With more and more people building custom WordPress themes, it only makes sense to want to create it more personal. I have found a few ways that I will share with you on making your WordPress powered site more personal. This tutorial will show you how to create a custom WordPress login, and explain how to fit it to your needs.

We will then take it a step further and create a custom admin panel footer, and also a custom admin header image for our WordPress site.

Let’s Get Started

Setting it Up

For this example we are going to modify our functions.php file. If your theme does not have this file you can create a blank file and name it functions.php – Make sure this file is placed in the theme directory of the current activated theme you are using.

Add the following to your functions.php file:

functions.php


php
function custom_login() {
echo 'wplogin/wplogin.css" />';
}
add_action('login_head', 'custom_login');
?>

Explanation of the Code

We are using the functions.php file to tell WordPress to override the default settings for the .css file used to make up the login screen. By doing this we are directing WordPress to use a specified .css file that we are going to create for our custom login screen. This .css file will be what we modify to design the login page.

Please make note that there are some very specific styles within the .css file that MUST be present, and changed accordingly for this to properly work. I have created the folder and placed the .css file in it to keep it separated from our regular theme files. If you want to the path can be altered as long as it points to the direct location of the CSS file within your theme.

The Setup

Next we will need to do two things. First, we will need to create a new folder in our theme directory. For this example we are going to use the folder name wplogin.

This folder will be placed within our WordPress theme file folder.

In this folder we will make a new blank file and name it wplogin.css

Taking a look at the setup

This is now what you should have. Remember that the location can be changed using the code we placed in our functions.php file – but for this example you should now have the following:

The file structure will be: wp-content\themes\YOUR_THEME_NAME\wplogin

The new folder we named wplogin will go into your theme folder, and the new .css file we created will be held within the new folder.

Now let’s view what we will be adding to our .css file:

wplogin.css


/* Page Background */
html {
	background: #eae2d5 url(bgimage-path);
	margin: auto;
	font-weight:bold;
}
/* WordPress Logo - MAKE SURE TO MATCH THE WIDTH AND HEIGHT */
h1 a {
	background:url(logo-path) 0 0 no-repeat;
	width:290px;
	height:150px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
/* Top Bar Background Color */
body.login {
	border-top-color:#dac6ad;
}
.message {
	margin-bottom: 0px;
}
/* Login Button */
#wp-submit {
	background: #bc3d1d;
	border: #f24643;
}
/* Lost Password Link */
.login #nav a, .login #nav a:hover {
	color: #443030!important;;
}
/* Top Bar Link */
.login p#backtoblog a:link, .login p#backtoblog a:visited {
	color:#443030;
	font-weight: bold;
}
.login p#backtoblog a:hover, .login p#backtoblog a:active {
	color:#443030;
	text-decoration:underline;
}

Explanation of the .css

Now that we have both the functions.php code in place telling WordPress to use our custom .css file, and our .css file in place, we can start to modify it a bit. The comments within the .css example should explain most everything but we will break it down to further understand it.

Make a note that when changing the logo image you MUST match it with the width and height in the CSS file. That is noted up above in the comments within the CSS file but it is VERY important or it will not always work correctly.

Full Breakdown

I know the .css is commented well but I still want to cover each editable item. Let’s see below to take a look at it:

The Page Background will be the entire page background color and image. The example .css file above shoes a link to the image but there is not one set. You can modify this to create a full-page background image, or change it to a color of your choice.

The WordPress Logo: This is where you will need to be sure to change the width and height to match your image. As long as the dimensions fit your logo you are using it will work correctly.

Top Bar Background Color: This is the bar located at the very top of the page. This can be changed to any color you like.

Message: This is the bottom bar that can be changed to any color you wish as well.

Lost Password Link: This is the a:link button to retrieve your password if lost.

Top Bar Link: This is the a:link’s at the very top of the page within the Top Bar area.

Take a look at the image below for a diagram of items within the CSS file we can change:

Taking it a step further

Now to continue making our WordPress install more custom and personal, we will change the footer link on our admin screen. This can personalize our website just a little bit more.

Again using the functions.php file we can force WordPress to change something. We will be telling WordPress what we want in our footer area of our admin screen instead of the generic text that comes standard with a regular install of WordPress.

Here is the code we will be adding, but this can be modified to your needs:


function remove_footer_admin () {
echo 'Anything you want can go right here | Copyright © 2010 My Website name';
}
add_filter('admin_footer_text', 'remove_footer_admin');

Changing the Admin Logo

This can also be really useful when trying to personalize your WordPress powered site. Even if you are creating the site for a client they will always enjoy seeing their logo on the admin screen. This is easy to do, and can be done by editing the functions.php file. Add the following code and be sure it points to your image that you will be using:


// Custom Admin Top Logo
add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '