Even if you don’t end up using the elements themselves, consider taking a look at the blending effects to see how they were achieved. I’ll be using this kit and others like it to help create Photoshop mockups for clients more quickly, it saves time not having to remake elements over and over again (obvious I know, not sure why I didn’t consider it earlier).

As always, please leave feedback in the comments and let me know if you like the set!

The CSS:

The HTML:

About the Demo

The only image used in the demo is for the textured background – all other gradients and effects are done with CSS3. As a result, compatibility is limited to a handful of browsers, including Firefox, Chrome, Safari and possibly IE8. It looks strange in IE7 and the gradients don’t work in Opera, so I’d use caution if you’re considering using these in a production environment.

It’s quite easy to reproduce this effect using images, which is why I decided to go for the slightly more challenging route of using CSS3. If you’re really good, you’ll want to have an image-based solution as a backup for browsers that don’t support fancy CSS3 effects yet. I’ll leave that up to you guys though. ;)

As always, feedback and constructive criticism is always welcome. Be sure to check out Orman’s blog, it’s chock full of great resources!

The design is still a work in progress and the discussion forum is still on the old theme, so bear with me while I fix that and patch things up. Among the various new changes, the site now uses Google Font Directory‘s Droid Serif font and it’s the first time I’ve used any such service for font rendering. I do like this font though and think it’s excellent for overall readability.

Edit: To show you guys that I do eat my own dog food, I’m making available the PSD I created before constructing this new WordPress theme. You can download the file and see for yourself why making a mockup in Photoshop can be useful (and how close I try to stick to the PSD when developing).

Last Month’s Results

In November, I wanted to get an idea of what version of Internet Explorer people were still developing for. As it turns out, the majority of you said that the lowest version of IE your websites currently support is IE7 (33%). A significant amount also said they may support IE but don’t really care, which is much more interesting in my opinion. Are many web developers completely forgoing IE compatibility checks these days? My sample size is still very small so it’s hard to tell but it would be very interesting to see a more thorough survey done on a bigger website.

Honestly, I was surprised that IE7 was the top voted result and that IE6 was still getting decent attention, as it’s so outdated now. I understand IE7, as I believe it is installed by default on Windows XP but I think as a community, we should be moving away from IE6. I guess it all depends on your visitors though, since for most big sites you can’t just ignore a big chunk of your audience. I was also expecting more votes for IE8 support, which is now the standard browser included with Windows 7.

Are most of you using tools like the IETester to do your Internet Explorer compatibility checks?

New Poll for December

As I continue to get a few more freelance projects, I’m curious as to what my fellow web developers are charging for a simple WordPress-powered website (essentially a custom theme, with a few extras). For example, my latest project involves designing and developing a website for a family dentist – I plan on using WordPress as the backend and will utilize a few plugins and custom hacks to get the end result my client wants. How much do you guys charge for something like this? I’ll post details on how much I’m getting paid for my work next month, when we analyze the results.

As always, please subscribe to the RSS feed by filling in your e-mail in the (new) blue box in the top of the sidebar, and be sure to follow us on Twitter!

The following tools make usability and user testing affordable, quick and simple:

1. UserTesting.com

Used by several large companies including Disney, Dell and Sony, UserTesting.com provides video recordings of real people using your website. You’re able to provide information about the site to the user and also present them with tasks or questions to answer. They have a decent set of filters to help choose your target audience, including gender, age, country, household income and technology (OS, browser, etc). Prices start at $39 per user and decreases with bulk orders. It’s a bit expensive but from my personal experience, it’s well worth it, especially when you’re close to launch and need video of real-world testers using your product.

2. Feedback Army

This is another user testing site I’ve personally used with fairly successful results. Feedback Army charges a flat $15 for 10 reviewers to answer 4-6 questions on a given URL. Unlike UserTesting.com, you can’t select your audience demographics and you don’t get back a video, only simple text answers to your given questions. If you’re looking for a quick and dirty usability test, you should definitely look into Feedback Army.

3. UserFly

UserFly lets you record the actions your users perform on your website – everything from mouse movements to page-scrolling to typing, you can replay the exact session they had on your site to better understand what they did and why they did it. All it takes is pasting a single line of JavaScript to your header and the rest of the work is handled by UserFly, you just log in and check the replays. They also offer a free plan that lets you try out their service with 10 recordings a month (their cheapest plan is $10/mo for 100 captures).

4. Concept Feedback

Concept Feedback allows you to get direct feedback on websites, mockups or even wireframes from hand-selected industry experts. Using the service requires you to submit your design/website to either a public, private or expert group of reviewers (public is free), and the reviewers then provide their suggestions, recommendations and input on your design. There are several different pricing points for their premium services, starting at $10/mo for their private feedback plan to $100 for 3 expert reviews.

5. ClickTale

Very similar to UserFly, Click Tale allows you to monitor every action your user performs on your homepage – from mouse movements to keystrokes. They have a long list of corporate clients and their pricing points seem to indicate that they are targeted towards fairly larger companies, however they do have a free plan with 400 recorded pageviews a month (their next plan costs $99/mo). The free plan only allows playback of the first two pageviews of each user.

6. Clixpy

Another simple tool that captures mouse-movement and actions your users perform by loading a simple JS file in your header. These guys are even somewhat cheaper than UserFly, as they offer set numbers of captures paid via PayPal (100 captures for $5), and include 10 captures to try out their service.

7. CrazyEgg

CrazyEgg is a very popular service that lets you track where your user clicks using heat maps. As you can see in their online demo, CrazyEgg also provides a lot of great information about the users on each link. Prices start at $9/mo and includes 10,000 hits over 10 pages, which is very affordable for the type of usability data you’re able to gather from this tool.

8. Feng-Gui

Probably the most interesting out of the bunch (seeing they don’t use real users), Feng-Gui “simulates human vision during the first 5 seconds of exposure to visuals, and creates heatmaps based on an algorithm that predicts what a real human would be most likely to look at.” The downside is that they only analyze images or screenshots of webpages, and they charge per-image to analyze and create heat maps. Their cheapest option is $25 for 5 images, however they do have an evaluation upload widget thing on their homepage that lets you try it out with small images.

9. FiveSecondTest

The FiveSecondTest is just that – users are allowed to see your mockup or website screenshot for 5 seconds, after which they are given a set of questions you set. It’s meant to mimic the amount of time real-world users spend to gauge a website and whether or not they will stay or leave. While you don’t get any data on the users that perform your test, one cool thing about FiveSecondTest is that you can earn credits by doing tests for other people (karma system), so if you’re willing to work for it you can use their free plan indefinitely. Their paid plan starts at $20/month and limits you to 100 responses per month.

10. Silverback

Silverback is an OS X application that allows you to perform simple user tests on your Macbook or iMac computer. The program records all on-screen actions performed by the user as well as video capture of the users’ face, which provides additional clues to user behavior. You can download a free 30-day trial or buy it for $70, and 10% of the proceeds actually go towards saving gorillas.

Usability Checklist

When you’re performing a usability test for your website/app, think about questions that will help you increase conversions or make the overall experience better for your users. For instance, instead of asking your testers if the design looks good, ask if the design is professional and if they would feel comfortable purchasing something (or entering their credit card info). Some other important questions to consider:

• Is it clear what we’re trying to sell or what service we’re trying to provide?
• Did you have any trouble navigating the site?
• Is our homepage too busy or cluttered?
• What is the worst or most confusing part of the site?

Most of the sites listed above also provide tips and sample questions to get you started. Try to focus on what your users will experience and relate your questions to that. Remember that your goal is to filter out / extract actionable feedback from these users.

Conclusion

Usability testing should be an essential part of your startup launch. Even if you’ve already launched, a usability test can help you improve your product and sales page, which will in turn help you increase conversions. With the competitive (downright cheap) prices of usability tests these days, there really is no excuse to skip on this – a little time and effort spent testing can go a long way!

As always, remember to subscribe to our RSS feed and follow us on Twitter!

Edit: this post seems to be getting a lot of traffic – can anyone help identify the source?

Bebas Neue

Swansea

Katy Berry

Bradbury Sans Light

SF Old Republic

28 Days Later

PTF Nordic

Que FONTita!

Grantham

Bandung Hardcore

Ghetto Marquee

Sansumi

Times New Yorker

Expressway

Elementale

Clementine Sketch

Caviar Dreams

Boister

Comfortaa

Base

Conclusion

Like I said above, if you use any of these fonts, leave a comment or a link so we can check it out. If you have any other free font suggestions leave those as well, as I’d love to add them to my collection.

And as always, please subscribe to the RSS feed and follow us on Twitter!

Step 1 Prepare the Canvas

Create a new Photoshop document about 600px wide and 300px high, that should give us plenty of space to work in. Fill the background with a light grey color (I used #eeeeee) and apply the Noise filter (Filter -> Noise -> Add Noise) with the following settings:

Step 2 Create the Base Shape

Create a white rounded rectangle (hot key: U) with a radius of 3px and with Anti-alias turned on. I made mine 150px by 40px but any size will do. Make sure the button itself is white (#FFFFFF) as that will help when it comes to applying effects in the next step.

Step 3 Apply Layer Effects

This step is really where the button gets it’s 3D feel from. We’ll be applying a number of layer effects:

To summarize, we are applying:

1. Drop Shadow – #000000, Normal blend mode, 15% Opacity, Angle: 120, Distance: 2, Spread: 0, Size: 2
2. Inner Shadow – #FFFFFF, Multiply blend mode, 30% Opacity, Angle: 120, Distance: 2, Spread: 0, Size: 2
3. Inner Glow – #000000, Normal blend mode, 40% Opacity, Choke: 100%, Size: 1
4. Bevel and Emboss – Style: Inner Bevel, Direction: Up, SIze: 2, Soften: 2, Angle: 120, Altitude: 30, Anti-aliased, Highlight Mode: Hard Mix, Highlight Color: #FFFFFF, Highlight Opacity: 50%, Shadow Mode: Multiply, Shadow Color: #000000, Shadow Opacity: 35%
5. Color Overlay – Mode: Linear Burn, Color: #b6f27a (you could use another light color instead)
6. Gradient Overlay – Blend mode: Luminosity, Opacity: 25%, Gradient: Black to white (left to right)

The above settings should produce a 3D-looking button effect. Applying both gradient and color overlays allows us to easily change the color of the button – simply change the color overlay until you’re satisfied with the color of the button.

Step 4 Add Text

Depending on whether or not you chose a light or dark color overlay, your text will have to be either black or white. For light backgrounds use black and for dark backgrounds, use black text color. I used the Gotham Bold font with uppercase letters. I cranked the layer fill opacity down to 75% and applied the Bevel and Emboss style with the following settings:

Step 5 Create Hover and Active States

To create the hover state, I simply change the Color Overlay value to something a little lighter and punchier – in this case #ccff84. As for the active state, I change a few settings on both the text and the button itself.

Active Button:

The button itself has the gradient and bevel reversed, a different color overlay and a inner shadow among other things. The exact values are:

1. Drop Shadow – #FFFFFF, 50% Opacity, Distance: 2, Size: 2
2. Inner Shadow – #000000, 30% Opacity, Angle: -60, Distance: 2, Size: 2
3. Inner Glow – Same as default and hover states
4. Bevel and Emboss – Change Direction from Up to Down, Change Highlight Opacity to 25%
5. Color Overlay – I set mine to #7ab91f
6. Gradient Overlay – Reverse gradient and set to 45% Opacity

Here are the same settings in Photoshop:

Active Text:

For the text, I changed the color to white (#FFFFFF) and lowered it’s fill opacity to 85%. I also moved the actual text down by a pixel, which gives it the feeling of being pressed. Lastly, I applied a Bevel and Emboss layer effect with the following settings:

Final Results

As you can see, I also made some darker colored buttons. For the text on those, I used the same settings as the Active state of the lighter buttons, with the only difference being the Fill Opacity was turned up to 90% instead of 85%.

Download

The complete PSD is available under the Creative Commons License, feel free to download and share as you please:

Conclusion

This is my first real Photoshop tutorial. Were the screenshots helpful? Did I cover everything needed to reproduce the desired effect? As always, feedback is highly appreciated.

Also, subscribe to the RSS feed and follow us on Twitter if you’re not already, there’s going to be a giveaway soon you don’t want to miss!

Demo

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the image file used.

Example 1

This is probably the more practical example, as it uses the standard/conventional menu markup that you are probably already using. Applying it only requires adding the necessary class to your UL/OL element.

The CSS for Example 1 is as follows:

The code is pretty self-explanatory but the key part to make note of are the transition properties applied to the .nav a selector – they produce the animation effect on CSS3 compatible browsers. The first value is which effect the transition animation should apply to and in our example, it’s set to all (which will animate any and all changes possible). The second is the duration of the animation, which in this case is 200 milliseconds. The third is whether you want the animation to ease-in, ease-out or a combination of both – ease-in-out. Feel free to play with these settings as well as the actual changes in the element, including padding, border widths, height, etc. to get a feel of how the transition property works.

Example 2

While this animation arguably looks cooler, it requires a bit more effort when we’re not using Javascript. Here is the HTML for example 2:

The way it works is that two blocks are created, the first being the text in the strong element and the second being the em element. The elements are stacked on top of each other with only one being visible at any given time (the other is hidden as the parent element has a fixed height and overflow set to hidden). The transition property is applied to both objects and on mouseover, both objects shift up, producing the desired effect.

The CSS for Example 2:

Browser Compatibility

The examples only work on browsers that support the CSS3 transition property, which right now include Safari, Chrome and Firefox 3.7. I believe the latest build of Opera should support it as well, though I haven’t tested it yet. For all other browsers, they will degrade to standard CSS rollovers.

Final Remarks

This tutorial is meant to be more instructional than practical. If I were attempting to produce the effect from the second example in the real world, chances are I would probably use JQuery to do it. If you have any feedback on this technique, please leave a comment!

And as usual, please subscribe to the RSS feed if you haven’t yet and follow us on Twitter!

Examples

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the image file used.

The HTML

I wanted to keep it dead simple to use, enough so that a single class could be added to any element to create a button. The HTML I used in the example is as follows:

The CSS

In order to add a subtle gradient effect, I decided to use a single image file. If you really want, you can leave that out and the buttons should still work fine. To give you an idea of how it can be customized, I created styles for 7 additional colors and 3 different sizes.

The CSS is pretty self-explanatory, however an interesting point is that I change the padding in the active state (.button:active) while shifting the element up by 1 pixel – this creates a pseudo-3D effect of physically pushing down on it.

Compatibility and Final Remarks

While the buttons themselves do work on all major browsers (FF, Safari, Opera, Chrome, IE7+), certain effects may not be available on all browsers. For instance, IE and Opera will not render rounded corners.

Play with it and let me know what you guys think! I’m sure most of you designers already have your own button code – if you’d like to share it, please post it in the comments (directly or as a link) so the other readers can check it out!

Also, if you haven’t already, please consider subscribing to the RSS feed or following us on Twitter.