Entries Tagged as “Inspiration”
Creating a reusable message style in Photoshop
As a designer, I have a massive collection of layer styles and gradient styles that I refer to in order to speed up my design process. I started with some free styles I got from Designer Folio and have added a ton of my own styles to the list based on projects I have worked on.
One style that has always been missing was something that looked like an error message that you might find in many css frameworks. Typically these look like solid blocks of color with borders on the top and bottom. Granted this is not a difficult thing to design but it is time consuming and when your quickly changing up a design it can really bog you down. At least it does for me. You can always short cut the design by adding a stroke border all the way around but that's not always what I want to show a client.
Figuring out how to create the 1 pixel rule at the top and bottom of the solid block of color is the only real trick. If your interested in knowing how it was done check out the mini tutorial below. If not, you can download the sample layer styles now. Figuring out how to make the 1 pixel rule at the top and bottom of any block was a real productivity booster and it allowed me to explore and test comon design elements very quickly while not feeling bogged down in the process.
Example of included styles
Creating the effect is actually very simple. First start with a base of any color on a separate layer. I like to use a bold color that is similar to the color I intend to use. I only do this to make it easier to spot the correct layer in the layers palette later on should I need to make a change.
Figure 1
Next, you can apply one of the starter styles and modify it to your liking. All the effects are editable and non destructive.
Figure 2
As I said earlier, the effect is very easy to create from scratch. The only trick is figuring out how to make the border appear on the top and bottom of an element without using a stroke. To do this, I added a drop shadow and an inner shadow only I changed the blend mode to normal, set the opacity to 100%, angle to 90 degrees, distance to 1 pixel, and reduced the size to 0.
Figure 3
This effectively gives you a one pixel stroke at the top and bottom of your design elements. Now add some gradients and other types of fill, and now you have the ability to rapidly create many types of design elements like menus, footers, sidebar details, table rows and cells, and etc. The style is actually very versatile and can spawn all sorts of new creative ways of increasing your design productivity.
Download The Photoshop Layer Styles
I packaged up a small handful of these basic layer styles that you can use as a starting point in your own work. Note, these were based on 72 dpi resolution document. If you design at higher resolutions, then you will need to adjust the distance of the drop shadow and inner shadow to suit your needs.
Download the Photoshop layer styles for free
→ Respond NowTags: Design · Photoshop · Inspiration
Usability Testing On A Budget
I recently participated in a meeting with a client about a homepage redesign. They wanted us to put a pretty face on it hoping that would fix some of their usability issues. Granted a better design may increase usability by a small percent, but the real problem with the site is that nobody once stopped to consider the users when making critical decisions. When I asked them about user testing, and focus groups, their response was typical. It's really expensive. They explained that they had intentions of doing user testing sometime in the future.
It makes more sense to me that you do user testing now, before doing yet another site redesign. Proceeding with a redesign would only be treating the symptom, not the cause of the problem.
Usability testing does not have to be expensive. There is a plethora of tools available nowadays for low cost usability testing that do not require elaborate testing centers or large budgets. In the list below, I have compiled a list of tools that will cost you next to nothing to run. I think of it as guerilla usability testing for those on a shoestring budget.
Index Cards
Costing less than $3.00 and a little bit of your time you can easily run card sorting exercises with some friends or office personnel. I prefer to enlist the help of user that do not have a personal investment in the site. Choose someone like an intern or office secretary. Persons that don't have an agenda in mind, will give you a more accurate test and a better representation of an "average user"
Card sorting is the first step in determining a good structure for your sites navigation system. After all if your sites navigation fails to get visitors to the pages they seek, then the site has failed for them, and they will likely leave.
If you prefer an online card sorting tool, Optimal Sort offers a free online application allowing you to run a free test with up to 10 users, and a max of 30 cards per project. If your testing a small to medium site, this should be all you need!
Crowdsourcing User Feedback
Sometimes getting feedback from users that have absolutely no investment at all in your site can have a significant impact on how you need to look at your website. What if you can stop 10 people on the street, ask them each 5 questions about the site. How valuable would those responses be to you? A dollar each? Probably more if you ask the right question! Feedback Army can provide you with responses from a large number of users for $1 per user. Not to bad if you need to generate responses quickly or in large volumes.
For just a little bit more money, Usertesting.com allows you to crowdsource your user testing, but you have a little more control by specifying the demographic profile of your target audience. You can even choose what tasks you wish for them to perform while on your site. The service costs less than $30 and you get a video screen capture with users talking through their experience as they browse your site. Not a bad option and it's not too expensive.
DIY Screen Capture
Nothing beats being able to watch your test users navigate your site, hear their feedback, AND see their expressions. It's not uncommon for users to experience a problem but not say anything about it chalking it up to their lack of understanding, or confusion about what they are doing. Thats where desktop software like Silverback App (Mac) and Camtasia (Windows) come in handy. Both applications offer a picture in picture format so you can see the screen as the user is navigating it, but you can also see their expressions too. Perfect for discovering the tiniest nuances.
The biggest benefit to using a software based app like Silverback and Camtasia is that you can hand pick your test subjects. My problem here is that your starting to get up into a higher cost per test. I thought it was worth mentioning because if quality testing is what your after, this is definitely a budget minded alternative to an expensive set of tests.
Five Second Test
Finally a site that makes it easy to run five second tests on your designs. Thought it won't let you test your site with users, it will allow you to get feedback on what people remember to be the most prominent elements of your design. This would be critical if you want to determine if people are seeing your calls to action, or some other important page element. It's free to use the basic, with an option to upgrade for more features, like custom instructions, more feedback, and more results in less time.
Another feedback tool useful while your in the design stage is Concept Feedback. It works similar to the Five Second Test Site except it is geared more towards designers and marketers. You get feedback from other designers in the community through a standard set of questions. It also uses a Digg style voting system so users that provide thoughtful and useful feedback are given a higher score allowing you to determine just how reputable they are, and help you to place a value on their feedback.
As you can see there are a ton of tools available for you to use that do not have to cost you an arm and a leg. Usability testing can be done on the cheep, if you just don't have the budget for more advanced tests now. In the end, even just a little bit of guerilla style usability testing can go a long way to improving your site for everyone.
Do you have a tool or resource that you would like to share? Please do so in the comments below. Share the knowledge and lets help make the web a better place for everyone!
→ Respond NowTags: usability · Inspiration
Free Grayscale Textures
As a designer I understand the value of great free textures. Textured images are a great way to add some pizzaz to a design project. That's why I decided to give back to the design community by offering these textures up for free.
I originally shot these images for use in various video projects I had going. Because I used them as video mattes they are all in grayscale. This made it easy to matte the textures to a background to create the desired effect.
Your free to use these textures for personal or commercial work. The only restriction is that the images cannot be redistributed on any other site or as part of a collection for sale or free. You are NOT required to provide a photo credit, but if you can do so without mucking up your project I would love you long time. Please Enjoy!
Share the goodness with a retweet!
→ Respond NowTags: Design · Freebies · Photography · Inspiration
Tips For Better Password Security
In the last few months I have had a few people tell me that their web based email accounts or other web based services had been hacked into. Their accounts taken over by crooks or criminals and in one case (my aunt) her H&R Block credit account liquidated. When I asked about their passwords they admitted that it was an easy password to guess. Often times we don't think about security until it's too late. With web based systems, cloud computing, and other mash ups I think it's about time we revisit the idea of a strong password.
How do hackers get my password?
More often than not, hackers gain access to your accounts because the password you selected was far to easy to guess. By "guess" I mean it's probably a dictionary word or a variation of a dictionary word. Hackers don't just sit behind a keyboard and type random words from a dictionary into your login page. No, they use complex tools that run automated attacks against a websites login function until they get lucky. Having an easy to guess password, one that can be found in a dictionary is like handing the hacker keys to your accounts.
Another method of cracking a password is through "social engineering". This is where the hacker attempts to use or manipulate data that put out for public display. Like social websites, instant messengers and email. They may try to manipulate people into divulging confidential information or use the information to guess passwords, or security questions. In a time where many people use social sites to stay connected, we need to be cautious that the person on our friends list is really our friend.
What's Makes A Password Bad?
Unfortunately the list of things that make a password bad is pretty long. I wont create a long list here. If your interested GeodSoft has a pretty comprehensive list and I am sure there are plenty other sites out there with their own lists. Here are a few of my basic rules.
- Don't use personal info, account names, or any information that could be found on a social site, or address book. No phone numbers, names of spouse, children, or pets. Streets you lived on as a child, birth dates, or social security numbers.
- Don't use a word that is in the dictionary. This includes other languages. Not even words that have letters replaced with symbols or digits. For example: P@s5w0rd is way to easy to guess.
- Don't use a word in reverse or swap the first and last letters.
- Don't append or prepend a number to the dictionary word.
- Don't think your slick by doubling up on letters in a word too. "wwoorrdd" is still an easy guess.
- Lastly, a bad password is one that you will forget. So if it's not memorable, then it's all pointless.
Creating Memorable Passwords
Creating a memorable password is easy, creating one that is difficult to guess but still memorable take a bit more work but it's still pretty easy if you use some techniques to help you remember.
The best passwords are at least eight characters in length, contain upper and lowercase letters, numbers, and a special character. With this in mind lets construct a password that is both memorable and difficult to guess.
One method I use is to think of a phrase or a quote that is memorable to me. For example my football coach used to always say to us defensive players. "You have to stick it to them and drive, drive, drive!" I can still hear his voice ringing in my ear. Using this phrase I might construct a password like "Uh2stic&D,D,D!"
Repurpose With Layers
Because creating a good password takes a bit of thought, I like to repurpose the same password on several sites. Normally this is not a good idea, but let me explain.
I think of the sites I use in terms of layers. There are some sites that I don't use often or sign up for and then forget about. Then there are sites that I use often, they may contain personal information, but not connected to any sensitive info. Then there are sites like banks, email, and other services that store or use my sensitive information as part of the service like paypal, or a credit reporting site.
Because creating a strong password is only good if you can remember it. I create three levels of passwords. One for the fly by night sites that I visit and sign up for. This one might be easy to remember and type quickly It may not be the safest password, but I probably don't care if someone wants to hack into IconBuffet account. It's also not uncomon for these outer layer sites to restrict passwords to only letters and numbers, as special characters might create programming challenges that the creators don't feel is important enough to fix. For these Outer layer sites I might use "yh2st1ck" as my password. It's easy enough to remember but unique enough to challenge a would be hacker.
A second layer password that is more difficult yet. I might use this for social sites, or sites that may contain personal information or access to my friends and contacts that could be used in a social engineering attack. For a second layer password I might use "UH2s&dDD!"
And lastly, the highest layer needs a really strong password for banks, email accounts, or other systems that use sensitive information. This might be the strong password I mentioned earlier like "Uh2stic&D,D,D!"
To reiterate my point. My reasons for recommending this technique are to make all your passwords memorable so that you don't write them down on a scrap piece of paper or put them into a password file on your computer. It's also better to have three passwords that are safer and more secure than one to ten passwords that are easy to guess.
Tools For Generating & Testing Memorable Passwords
If your finding it difficult to create a memorable password or not sure the password you picked is as safe as you think it is, there are tools out there to help you.
Password Assistant – Macintosh utility built into the OS
The memorable random password generator
Password Security Meter
Microsoft Password Checker
Macintosh Password Assistant
My personal favorite utility is the password assistant. It's built into the OS, and thanks to the gurus at Code Poetry, they have created a simple utility to call the password assistant without having to access the accounts preference pane. Here is a screenshot of the utility and a sample of the suggested password. It also gives you a visual meter of your passwords quality.
What I really like about this utility is it's ability to can give you useful feedback when your password is too weak. For example here is the word "rocking" with the typical number replacement on the letters "o" and "i" As you can see the Password Assistant instantly recognizes this as a dictionary word and alerts you in the Tips field allowing you to modify your password to something a bit more secure.
→ Respond NowTags: usability · Inspiration · General
New Years Resolutions 2009
I heard from someone that you're not serious about your new years resolutions until you write them down. Apparently this is some form of accountability program designed to make you stick to them. Truth or fiction? I don't know but here are my resolutions for 2009.
- Stop drinking soda
- Make more time for myself and my family
- Take more photos for fun
- Try more foods that I didn't like before
- Redesign my personal site
- Work on my sofware idea
- Exercise
- Learn to use After Effects better
- Go camping at the Lost Coast
Okay it's written in my blog. Like being written in stone. Not capable of being edited or altered. :) The betting begins now! Place your bets in the comments area.
→ Respond NowTags: Inspiration · General
