Nerdburn - Web application & graphic user interface design blog by Shawn Adrian

5 Ways I Use Google Docs as a Freelance Web Designer

2009-04-26T19:46:00-07:00

I never intended to become an advocate for Google Docs, and I'll probably write web apps to accommodate my needs some day, but lately I've found myself using Google Docs every day, without ever intending to depend on it. As a freelance web designer, it's an excellent tool I use to operate my day to day business.

1 - Writing Blog Posts

I'm usually working on a number of blog articles at any given time, and with 3 different computers around my home and office, I used to get a little confused about what I wrote on which machine. I'd often end up with multiple versions of the same article on different machines.

Now, if I want to write a new article that I'm unlikely to finish in one sitting, I'll create a new document in Google and get to work.

2 - Sharing Quotes With Agencies or Other Designers

About 90% of my work comes from design agencies or other designers, all of whom maintain contact with their customers directly, so there's no need for me to produce my nice looking PDF quotes for them as they're going to put the number on their own letterhead anyway. I used to stroke my ego and deliver one anyway, waiting for the compliments from my peers on my lovely used of grid systems and typography on such a bland document, but nowadays I've settled into a more efficient routine with Google spreadsheets.

Whenever I'm asked by an agency or designer for a quote, I just create a new Google spreadsheet, get all the numbers and line items in there with a total, and then share it via email. They're free to modify it so that I can see the changes, and also to copy and paste the data into their own format. This allows the quoting process to be more collaborative and not so one sided.

3 - Maintaining an Ongoing List of Projects

Ok, I'll admit, I'm current writing a web app to replace this useful task, but a simple spreadsheet nails it pretty well in the meantime. Whenever I create a quote, I'll add that project and it's expected value to a Google spreadsheet that maintains an ongoing history of projects month by month.

This allows me to see a total of potential income for each month, compare it to previous months, and also to see after every month what percentage of potential jobs and payments actually came into fruition. This is helpful in determining how much I need to sell on a month to month basis to maintain a regular income.

4 - Personal Budgeting

This is closely related to the last item. I keep a list of my recurring bills in a Google spreadsheet, with totals that need to be paid from each account. For example, I use my Mastercard to pay for things like hosting, telephones, internet, and other automated payments, so my spreadsheet lets me know a minimum balance I need to maintain. I use my bank account to pay my rent, gas, food and other bills and my spreadsheet gives me an idea of how much I need to live on.

As an added note, I also use Wesabe to maintain a historical record of my spending on everything by tag. So I can add stuff like lattes, or movies to my Google spreadsheet to get an idea of what I'm likely to be spending the next month!

5 - Miscellaneous Spreadsheets

I've touched on this in some of the last items, but basically whenever I want to add anything and keep track of it, I create a new Google spreadsheet. It's become invaluable to me! For example, this month I've been planning to launch a creative shared space for tech freelancers in my city (Nanaimo), and I've kept a list of potential expenses, who wants to be involved, how much everyone will pay, and how much is left over.

Wrapping Up

So, there you have it. This is how I use Google docs to run much of my freelance business. Let me know if you have any other clever ideas by commenting below.

Ballpark Proves There's Room for Another Invoicing App

2009-04-11T10:32:00-07:00

Today I learned an interesting lesson I thought I'd write about. I signed up for Ballpark, the terrific new app from Metalab Designs in Victoria, right in my backyard, and was duly impressed. I, like many of you I'm sure, have thought about creating a new invoicing app but didn't for whatever reason. I figured, the market is too saturated - and with competitors like Freshbooks, Blinksale, Invoice Machine, and others, who's got room to make any money there?

Room For a New View

For many of us, cyberspace feels a lot smaller than it actually is I think. Every morning I roll over groggily to the sound of my iPhone's alarm, check my email, and then check my Twitter feed; I marvel at the new apps, designs, and blog posts that enter the world fresh that day. Then once I'm up I chat with the long time friends and co-workers I have on my IM lists, and the internet is a comfortable, familiar place. I have my own view of it.

The problem with this view is that it's a bit small. The internet is bigger than the little room I've carved into it. There are more viewers out there, more target markets, more people joining every day, and it's not slowing down any time soon.

Somehow I've had it in my mind that I can't build another invoicing app, because someone's already done it. I can't blog about that, someone's already said it. While I'm all for original content, fresh ideas, and innovation online, here's a valuable lesson for all of us out there with a killer app idea: Just because somebody has already done it, doesn't mean there's not room for you to do it again with your own unique flavor.

Ballpark isn't that different than Blinksale. It has it's own flavor and some additional features: Estimates and client interaction. Suddenly it's new, suddenly there's room in the market for another invoicing app. Not everyone is going to flock over there from Blinksale, and not everyone using Freshbooks is going to feel a little less fresh - there's room in the market for more, and that's the beautiful nature of the ever evolving internet we call home.

Just Do It

So, what's stopping you from bootstrapping your next web idea? My excuse it that I'm always busy with client work. I keep hoping some day I'll have a month of "free time" laying around waiting for me to rock out the next killer app. Looking back over the years, I've had the time, I just didn't take advantage of it. Sure, I designed a bunch of great client work, and I have a fantastic network of clients who constantly refer more work to me, but I'm sure they'll understand if I squeeze a bit of time in now and again for one of my own ideas. Heck, I bet some of them would even want in on the action.

Just do it - make the time, get your app out there, even if somebody's already done it. Metalab Design just proved it's possible, as have hundreds of other little agencies all over the world, probably in areas I've never heard of. What's happening in your back yard that could be happening in your basement?

Art vs. Design, Passion vs. Cash

2009-03-20T10:04:00-07:00

Over the last 3 months I've been struggling in my mind with the balance between doing what I love, and making a living as a responsible adult.

The 9 to 5 Dilemma

Back in January of 08 I joined up with the Viviti team as the only UI designer on board - it was fresh, exciting, and I told myself I'd give a year of my life to the project, 3 days a week. It's now 3 months over my 1 year deadline and I've only just put in my two weeks notice. Why did it take me an extra 3 months to get up the nerve?

There are things about a 9 to 5 that can be addicting - a regular paycheck, a fun group of guys to work with, a lack of real pressure, and the confidence that other people higher up than you are looking out for your well being. Basically, the need for comfort and stability is a huge draw.

This is a problem for me. I'm a designer because I'm passionate about design. I create because I am creative by nature. This is my passion, my life. When my passion is replaced with my desire for security and comfort, I'm letting go of a major part of what it means for me to be human.

It Goes for Freelancing Too

I'd love to say this is only a problem in the 9 to 5 world, but in my freelance life I can see it too.

I started around 15 years ago with teenage ideals - art for fun, rock'n roll, anti-establishment. I'd spend all night designing band posters, artwork for me, cruising for inspiration and being wow'd by the glorious, seemingly endless, vastness of the internet.

Fast forward all these years to now. I may still shave my head into a mohawk, cruise for inspiration and ride a skateboard - but the real evidence is where the majority of my time has gone; I've given the lions share of years to online banking and interface and web design for business, while half-sewn t-shirts lay in my closet, unused silk screens litter my house, unpainted canvas's beckon from the corner, and unexpressed creativity bubbles to the surface in my every day interactions.

I guess being an adult means I have bills to pay. I guess it means I want that car, bike, boat or house. I guess we all want our Starbuck's or Pete's a few times a week eh?

Finding a Balance

This isn't meant to be a complaint letter - I love my life, I'm happy with what I've achieved and who I am - but there's definitely room for growth.

Think about where you're spending the majority of your time. Think about what your passions are. Why did you get into this work? If your time spent isn't lining up with your passions, it may be time to make a change. I don't necessarily mean doing anything as drastic as quitting your job - but make the time to create what you love, for the sake of being creative.

In Closing

There's a fine balance between living and loving, and in this next chapter of my life I intend to get closer to it. What do you think?

How to Parse Google Maps Returned Address Data: A Simple jQuery Plugin

2009-02-19T12:42:00-08:00

Google maps makes it very easy to add a map to any page - but it's not so easy to extract meaningful address data from what Google returns. The goal of this article is to help you do three things.

Article Goals

Send a string to Google Maps
Parse the response Google returns
Do something useful with the parsed response data

I've created a simple jQuery plugin called jquery.parseaddress.js that will help us along. I'll go through and explain what it's doing further below.

What You'll Need

A Google Maps API key - Get one here
The latest version of jQuery - Download it
The parseaddress jQuery plugin - Download Demo Bundle

Example Usage

Here's an example HTML page using the parseaddress plugin. Feel free to use this with your own experimenting.

<html>
<head>
<title>Google Maps Address Parser - jQuery Plugin</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="parseaddress.jquery.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA9Hrr6tkKuGxfRHuyIpietBQ7Xg9Ta2yeHpAqGBGjsEdHdZsJLRTluI9qA-Kn-VHt_6Rh6NRVWIR6Ew" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

   $("#submit").click(function(){
      
      // use parseaddress plugin on an element, send response to callback function
      $("#addressinput").parseaddress(callback);
   
   });

   // function to execute on callback to do somethng with the returned address data
   var callback = function(cleanaddress) {
      console.log(cleanaddress['street']);
      console.log(cleanaddress['city']);
      console.log(cleanaddress['state']);
      console.log(cleanaddress['country']);
      console.log(cleanaddress['zip']);
      console.log(cleanaddress['lat']);
      console.log(cleanaddress['lon']);
   }
   
});
</script>
</head>

<body>
   
<form>
  <label>Address:</label>
  <input type="text" name="address" id="addressinput" />
</form>   
   
</body>
</html>

How It Works

The following bit of jQuery basically says, whenever the browser is ready, execute the following code. This makes sure that your javascript only gets executed after your page has fully loaded.

$(document).ready(function(){

});

Next we call the actual jQuery parseaddress plugin function on an element in the document.

$("#addressinput").parseaddress(callback);

This uses jQuery to find the element with the css ID of addressinput and then calls the parseaddress function on it. Notice we're also sending the variable named callback to the parseaddress function. This is important, as this is the function that gets passed in to handle what we do with the data Google Maps returns.

Next we need to create the callback variable, which is actually a function. You can put whatever you want inside this function - I just chose to output the contents of the returned address to the javascript console.

   var callback = function(cleanaddress) {
      console.log(cleanaddress['street']);
      console.log(cleanaddress['city']);
      console.log(cleanaddress['state']);
      console.log(cleanaddress['country']);
      console.log(cleanaddress['zip']);
      console.log(cleanaddress['lat']);
      console.log(cleanaddress['lon']);
   }

Last but not least, we need a form on the html page to collect the address string from that we want to send to Google Maps. Here it is:

<form>
  <label>Address:</label>
  <input type="text" name="address" id="addressinput" />
</form>   
   
<a href="#" id="submit">click me</a>

This form has only one field, an input with the id of addressinput. If you remember, we attached the parseaddress() function to that element in our javascript. The link below is the function that we wrapped around it so we can activate it.

And that's it! Please let me know if you have any thoughts or questions.

Chubby CMS Framework, Mark Boulton & Other Friday News

2009-02-06T14:36:00-08:00

My eyes feel grimy, I have a coffee buzz, and my feet keep tapping to the unrelenting drum beat in my head as this week comes to a close. My task list feels monumental even though I've been steadily chipping at it all week (I'm imagining it looks a bit like the post-nuclear version of the Washington Monument in Fallout 3 - check it out if you haven't yet).

Ah, but victory is sweet, and Gavin and I are close to releasing the first version of Chubby, our CMS Framework - one of the first of it's kind. Chubby is a PHP5 framework created specifically for creating customized CMS's, removing the need to hack and slash at Wordpress, Joomla, or whichever giant you've been slaying this week. It weighs in at around 150kb so far.

Almost as exciting is the release of A Practical Guide to Designing for the Web, by Mark Boulton. I bought the PDF for $22 CAD, which I'll be honest, feels a bit steep for a PDF only book, especially since it fell apart when I tried to open it on my PC (half the fonts are missing), but thankfully the folks at Apple have saved me once again and it works fine on my Macbook. I'm dying for a hard copy of the book though, as what I've read so far has been really juicy. I've given it to my fiance to read so she doesn't need to go to design school.

In other news, I read a great article on stopdesign about Google's new Gmail buttons. After attempting to make stretchy html buttons of my own for a number of years and only achieving the horizontal variety, with irritating floats or positioning, Douglas' approach seems so simple I'm kicking myself with inspired awe.

I finally got my beta account at graphicriver.net, the new product from our friends at Envato, so I'm excited to upload some goodies for the masses. Additionally, I'm eagerly awaiting the unveiling and beta access to Gist - it's something to do with email that makes me really curious.

And that's it folks, keep checking back for some upcoming great content. I'm still working on my aforementioned interview with David Kaneda, the creator of Outpost (an iPhone app for Basecamp users), and some new tutorials as well.

The 5 W's in Web Application Design: 10 Useful Questions to Answer

2009-01-28T10:44:00-08:00

A subject I enjoyed in high school was English. Unfortunately in my 11th year, my English class was directly after lunch break and I enjoyed being outside with my friends more than I did being in school. During one of those times that I actually attended the class there was an interesting discussion about journalism and an assignment to write a news story. We were instructed to answer the 5 W's in our story: Who, What, Where, When, & Why.

The other day I was reading a great book, Designing for the Social Web, by Joshua Porter and he kindly reminded me of the 5 W's as they relate to web application design. Now, I'm a little attention deficit when it comes to books (I generally read 4 or 5 at a time) so I'm also reading Blink by Malcom Gladwell, which introduces a concept called "thin-slicing", basically: making snap decisions based on information presented by our subconscious mind.

We're all familiar with the 5 W's: Who, What, Where, When & Why. Malcom Gladwell seems to believe people are making snap decisions everyday - to use products, services, and yes, even software. Are we giving our potential customers the information they need to make split second decisions about using our web apps?

Here's a list of useful questions to answer that will help web site visitors make better decisions.

Who

1) Who is this for? - Communicate right up front who your target market is and try not to be too broad. A visitor should know right away if you are talking to them or someone else.

2) Who is using it? - Are there any well known examples of your target user? The guys at 37signals did a great job of this by having video testimonials of well known designers and companies using Basecamp. People tend to follow other people: give them some good examples of people to follow and they will.

3) Who created it? - Don't hide behind an obscure corporation. Tell potential users of your web app exactly who you are. If you're creating the application for a corporation, try convincing them to let you present a page with the key team members on it. People relate better to other people.

What

4) What is this? - Is it a web site? A mobile app? An iPhone app? Come right out and say what it is. Too often we get caught up talking in marketing jargon. Words like tool, system, solution. Rather than saying, "A solution to your email marketing needs", say something like, "We deliver opt-in emails to 2,000,000 customers." See the difference? One presents an idea of what it is, the other communicates exactly what it is.

5) What does this do? - Does it send millions of emails? Does it catalog contacts in your address book? Does it send invoices? Say it clearly.

When

7) When is the best time to use it? - Give examples of situations where your application will come in handy. What were the use case scenarios you thought up during development? Let potential customers know when your app will help them out.

Why

8) Why use this at all? - This question can be answered in a number of ways, but it's important that your "why" is different than your competitors. You'll want to grab a slightly different angle.

9) Why is it better than other similar apps? - Or, worded differently, why would somebody choose your app over one of your competitors? Outline the similarities and differences so people can make educated decisions.

How

10) How do i use this? - It always helps to have a step by step description of using your product or service. Many popular web apps now are creating screencast videos of performing certain actions on their apps. This is a great idea, but make sure to outline the steps in text as well.

A Couple of Examples

Here are two examples of web sites that do a good job of explaining the 5 W's (and an H) in their interface and marketing on their web application.

Twitter

Here's a screenshot of Twitter's home page, with the answers circled in pink:

Basecamp

Here's a screenshot of the Basecamp home page, with the answers circled in pink:

Wrapping Up

Do you have any more examples of web sites that use the 5 W's (and an H) in web application design? Link them below in the comments!

Tactful Error Messages in Web Application Design

2009-01-22T12:00:00-08:00

In my previous article, I touched on the idea that users of web applications perceive error messages as direct communication from the developer or proprietors of the site in use, and that these messages are an extension of an ongoing brand conversation that exists. I also briefly mentioned the need to use tact when conversing with the opposite sex.

To continue on with this idea of relationships, conversation, and error messages, I want to draw a similarity between using tact in "real life" conversations, and how it can be used effectively in virtual conversations with customers through better error messages.

What is tact and how does it relate to web application design?

At it's essence, using tact is a form of manipulation; it's kind manipulation, but manipulation all the same. Communicating tactfully is the art of saying something with the intention of motivating somebody to respond in a certain way, or perform a certain task.

The dictionary defines tact in this way:

NOUN
1. A keen sense of what to say or do to avoid giving offense; Skill in dealing with difficult or delicate situations.

The military uses tactics (a closely related word), to accomplish it's missions.

You can probably see where I'm going with this. Since an error message is a communication with the intention of convincing someone to perform an action, it makes sense that error messages should be written with tact.

Do you want your users to use your software in the way it's intended to work? Communicate tactfully.

How to write Tactful Error Messages

Now, I'll be honest, I'm not an expert on tact or etiquette, and I'm no Jakob Nielsen. I'm just sharing what makes sense to me, it might not make sense to you. In my opinion, a tactful error message should include these 3 key steps:

Communicate the problem
Communicate how to fix it
Communicate why to fix it, give incentive

Password Example

A poor example:

A tactful error message:

404 Example

A poor example:

A tactful error message:

Password Length Example

A poor example:

A tactful error message:

Communicate The Problem

Try telling the user what's wrong without using any technical jargon. It takes a few more words, but it will give your visitors more comfort if they understand why they received an error in the first place. Words like invalid, fail, error & exception create negativity. It's important to communicate what happened in a non-accusatory, positive, descriptive manner.

Communicate How to Fix It

It's amazing how many error messages I come across that say what's wrong (in the bluntest way possible) but give no indication how to fix it, just a red arrow or text near a field on a form. Give a detailed description of how to correct the problem.

Communicate Why To Fix It, Give Incentive

This is the piece that is most often left out, but contains the most tact. Why do we require certain information from users of our applications? How does it benefit them to jump through the hoops we set in place? It's important to communicate why.

If you require them to have a password with both numbers and letters, tell them it's because it will make it more difficult for hackers to get their personal information. If you need them to re-enter their username or password on log in, tell them it's because what they entered didn't match your records and that they'll be able to log in if they correct it.

Moving Forward

This is really just the tip of the iceberg when it comes to talking about extending brand conversations through communications in web applications, but it should spark some thought the next time you're writing error messages. Do you agree with me? Do you disagree? Add a comment and keep the conversation going.

Error Messages in Web Applications and Customers Perceptions

2009-01-14T10:39:00-08:00

The other day over sushi I was having a conversation with a few guys and we found ourselves chuckling over a peculiarity we found with the women in our lives. It seems that when talking to our significant others, a bit of tact is necessary to get our way, even though we're essentially saying the same thing, tact or no tact.

For example, I could say to my girlfriend, "Honey, get in the car now so we can leave" and she might do it, but grudgingly. However, if I said, "Honey, I'm going to start the car now, so why don't you grab your purse and we can leave?" She'd likely head off to get her purse without a moments hesitation (provided she was ready to go).

In both cases, I mentioned that we should get in the car - one with tact, one without. Now, let's think about error messages in web application design for a minute (which is easier to understand than women, coincidentally).

Hello World

It seems the first thing anyone learns in any programming language is how to print "Hello World" to the screen. Now, let's not read into this too deeply, but I figure there's an innate need in us, as human beings, to hold conversation.

As developers get more deeply into an application, we build messages into it that tell us what's going on. Just like displaying "Hello World" to the screen, we're enabling our program to talk back to us. Our perception as developers is that our program is talking to us. We create conversations between ourselves and our applications.

So, Who's Talk to Our Customers?

Interestingly enough, customers, most of whom have never written a line of code in their lives, don't always carry the same perception with them. Rather than assuming the application is conversing with them, they're more likely to interpret any communication from the application as coming directly from the organization who operates the application.

Suddenly, the application we've created, with all its' functons, lines of code, quirks and bugs, has morphed into a living representative of the company we built it for, or, for ourselves as we launch our own apps. The application has become capable of having conversations with customers on our behalf, and they assume these communications come directly from our own mouths.

Conversations in Branding

This idea of conversations may feel a bit new to web application design, but it's old hat to the advertising and branding community. There's been plenty of chatter about creating authentic conversations between brands and consumers for years. So, what kind of conversations are the apps you're building having with the customers who use them? Are they short and to the point? Are they borderline rude? Or do they interact like the human beings they represent?

My next article is going to offer a few tips and tricks for writing what I like to call Tactful Error Messages in web application design.

Some Further Reading

Lately I've been reading through the web version of 37Signals Getting Real, which, hardly related to the content of this article, is a great read. Also, Designing for the Social Web is a great book I've been reading lately, as well as Blink. Stay tuned for my next article on tactful error messages. Thanks for reading.

Productivity & Inspiration to Kickoff 2009

2009-01-09T10:31:00-08:00

While weather in Vancouver flips flops between winter and spring and the stock markets continue to flip flop daily, we've just flipped over to 2009, and I'm a week late in welcoming you all to the new year. So, without further commentary...

I stumbled across a beautiful re-brand by Moving Brands of Norton & Sons, a bespoke tailor on Savile Row yesterday. I mean literally stumbled the old fashion way, by clicking from one site to the other. It's truly inspiring so check it out. Speaking of StumbleUpon, apparently this site has been blocked because I "stumbled" my own blog entries a few times? Would I write this stuff if I didn't think it was interesting?

In other news, I recently bought Outpost (an iPhone app for Basecamp) for $12.99, thinking the price was a bit steep for the app store, but when I fired it up I realized how worth the money it is. Maybe it's the combination of Apple's iPhone GUI with Basecamp functionality, but in my opinion, Outpost is almost easier to use than Basecamp itself. To celebrate, I've confirmed an upcoming interview with developer David Kaneda from Morfunk, so check back here for that soon. Have you tried Outpost yet? If not, get on it.

A Few Tips From Uncle Shawn

Now, since it's a New Year, I've been working on getting my finances in order, something all of you freelancers should be doing (or have done already).

Keep track of your invoices this year, I use Blinksale and it's quite simple.
Don't be afraid to pay for services that will keep you organized like Basecamp, Blinksale, Freshbooks, or whatever is your fancy this year. Just work them into your business expenses.
For my personal spending, I like to use Wesabe to categorize / tag my transactions, it's a miracle worker.

It's 2009 & You're Still Flipping Pancakes?

Yea, me too. When doing project after project and getting paid for each, I call this flipping pancakes. It's just one after the other, and if I stop flipping I'll go under. I have a few ideas this year that I'm going to launch, so look out ;)

Why not come up with your own idea to create residual income this year? Subscription based web services are a great place to start. Think of a gap in your own productivity toolset and fill it. Chances are someone else will want to use it too, maybe they'll even be willing to pay for it.

Here's to a fantastic 2009 for everyone.

4 Great UI Designs for E-Commerce Web Sites

2008-11-28T09:50:00-08:00

E-commerce is one of those areas where great design really adds to the user experience. Whether it's injecting some extra excitement into the shopping sensation, or presenting a lot of information in an easy to digest manner, we have our work cut out for us as designers while creating UI for e-commerce.

I've noticed a few great designs over the last few months, both aesthetically and functionally so I thought I'd throw a bunch of screencaps at you for inspiration.

ShoeGuru

The Canadian shoe retailer ShoeGuru has a slick, minimalist design to house their inventory of Gola shoes, while using Pay Pal for everything from the cart to the checkout. It seems to be working though!

Etsy

As designer's, most of us familiar with and love Esty. Some of us have products there, or aspire to sell products there (ha, I'm still working on my T-shirt designs). Considering how many products are on Etsy, it's practically an e-commerce mega-site, but definitely doesn't feel that way.

TokyoCube

Selling some fantastic Japanese toys, art, and clothes, TokyoCube is a fun company, with a fantastically fun online shopping experience. There is a lot of great detail in these designs, and I think the subject matter just makes it even more technocute.

FontShop

A retailer of fabulous typefaces, FontShop could have gone with a boring site like many in the genre, but instead their design can stand alone, while featuring the products they sell. Pretty impressive in my opinion. I didn't get a screencap of it, but they also have a nice "Add To Cart" effect when you add a font to your basket.

Get Designing!

Now that you've had a few minutes to gander at some other design projects, it's time to take that inspiration and get back to work... I know I should anyway. But first, let everyone know what your favorite e-commerce sites are, from a graphical design (how it looks) and usability (how it works) standpoint below. Leave a comment, and have a great Friday!

3G Nanaimo, Outpost for Basecamp, and My iPhone

2008-11-26T10:44:00-08:00

I rolled over this morning at 7:15 AM to the sound of the alarm on my iPhone, lazily reached around for a minute to shut it off, and then groggily checked my email as I always do. To my delight, in the upper left corner, next to three glorious bars of service, was a brand spanking new 3G icon in place of that depressing little E. Hear that people from Vancouver Island? 3G has finally reached Nanaimo.

Thank you Rogers Wireless, we can (almost) be friends again.

In other news, I was on the bus today thinking about how much I'd love to use Outpost to check my Basecamp during the 20 minute ride to Viviti, so I checked out outpostapp.com and found it amusing that the site seems to virtually explode all over iPhones version of Safari. Well, at least they're working on the app instead of the web site, ha.

Speaking of the iPhone, I found a funny quote by someone named Phil on pleasefixtheiphone.com the other day:

"Lack of MMS support. People laugh at my iPhone because its the only phone since 2002 that can't send or receive picture messages. Why am I ashamed to have the most advanced mobile hardware in the world?"

A wonderful company called FullSIX in NY made that site, and in my opinion it's pretty cool.

My biggest qualm with my iPhone is that I can't seem to figure out how to edit the in-memory dictionary to stop capitalizing the word "nerdburn" every time I write it. Does anyone else know how to do this?

Average Web Designer Incomes: How To Set Your Freelance Hourly Rate

2008-10-22T11:13:00-07:00

Like many freelancers, when I decided to go full time freelance back in March of 2007, I was unsure what to charge. After polling my freelance friends and other designers and doing a little googling, I discovered the amazing rates calculator on Freelance Switch and personally determined that I should charge $35 an hour, based on the costs in my area and my desired standard of living.

About six months later I was accepting a couple of new jobs a week and felt busier than a kid with attention deficit on Ritulin and energy drinks, so I decided to raise my rate to $45 an hour to (hopefully) slow things down a little bit.

Anyway, all of this preamble is just to say that choosing your rate is a personal thing, so there is no right or wrong rate, but you should consider a few things when coming up with one that is right for you.

A Few Things to Consider

Here are a few things to consider when choosing to set your freelance rate.

Your rate should be higher than what your friend is being paid per hour at a local agency.

Why? Because you need to cover your costs. Consider in your rate things such as rent, telephones, internet, and other costs that agencies calculate over and above the wage they pay their designers.

Collis Ta'eed, founder of Freelance Switch and (I think) designer of the Freelance Rates Calculator put it this way:

"The best thing to do is sum up all your costs and divide by the number of hours you think you can bill a year." - Collis Ta'eed

I mostly agree with this, but take into consideration that if you live in an area with relatively low living costs, you may price yourself too low and get more work than you can handle, like I did.

Your rate should fit with your moral values.

What I mean is, if you feel like you're gouging your clients, you'll come off as apologetic and unprofessional in your communications. Choose a rate that you believe is fair based on your costs and desired standard of living.

Your rate should in most cases be relative to the industry you work in.

For example, in a study performed by the U.S. Bureau of Labor Statistics in 2007, the average income for a graphic designer by industry was:

Specialized design services: $48,790
Newspaper, book, and other publishing: $39,390
Advertising: $46,990
Printing: $38,880

Also, here's a breakdown from Simply Hired, who allowed me to generate a nice graph on their web site today:

Basically, these figures indicate that as graphic designers and web professionals, our rates can vary anywhere from $45,000 to $75,000 per year, so ideally you'll want to choose something that fits into this range.

In Closing

What to charge is ultimately a personal decision, but you can make it easier on yourself by considering some of the factors I've mentioned above. If this article has helped you or if you disagree, please comment below. Also, I'd appreciate if you would digg or stumble it, as that will help to share it with others.

Freelancers: Two Methods for Making Sales the Easy Way

2008-09-20T05:19:07-07:00

Growing up in a family of entrepreneurs I was constantly told, "You can have the best product in the world, but if nobody knows about it you're still going to be broke." The point is, if you're going to succeed in this (or any) business, you need to be in the business of selling.

So, what are you selling?

As a professional who provides a service, I often realize that I'm not actually in the business of selling web design, I'm actually selling... myself. That's right, if you don't like me, you're likely not going to hire me because there are thousands of eager geeks lining up for the job.

As a teenager, I did a web site for a local tailor shop, got a free suit out of the deal and set out to make my millions selling door to door. I recall a hilarious encounter with one would-be client, the owner of a large hotel in a small city who actually said to me scornfully, "You're a web designer? So what. You throw a stone nowadays and you hit a web designer. You guys are in here every week. Why should I listen to you?"

And this is where the line is drawn between selling the easy way, and selling the hard way.

The Hard Way

Cold calls, leads, follow-ups, fake smiles and suits; we've all been the victim of the poor sap in a suit, slinging a product to make a living or the crafty salesman trying to swindle us into buying something we don't need. The hard way of selling is being just another stranger selling a product.

Don't sell products, sell yourself

No sales pitch required. The nice thing about selling yourself, is that you can be yourself. Here are a few methods I use that have a sure-fire success rate:

1) The Shop & Talk Method

This is my favorite way to sell. Simply go shopping... walk from store to store, check out products, and linger in the stores you enjoy the most. Eventually you'll encounter a salesperson or even the owner of the business, and that's where the magic begins.

(you) "Wow, I love the design on this T shirt, who makes it?"
(salesperson) "Oh, they're a company out of Canada I think. Pretty sweet eh?"
(you) "Yea, I've always thought it would be fun to design T shirts. I make web sites right now."

At this point the person you're talking to will either express interest or ignore you. If they express interest, tell them a little more about how much you love your job, and if they need a web site, they'll ask you for help. It's as simple as that. No sales pitch.

2) The No Bullshit Email Method

When I don't feel like leaving the house, I use this method, which is lazier, but still effective. Simply do a Google search for a topic, like "web design vancouver", or "chrome plating los angeles", and start cruising the web sites. When you encounter one that needs some work, email them with a no bullshit, no salespitch personal message.

If it's an agency:

"Hey, I'm a freelance designer in the area, check out my portfolio if you could use a bit of help. Cheers."

Believe me, if they're looking for help, they'll click the link to your site in your signature. If not, you don't want to be cold calling them anyway.

If it's a business directly:

"Hey, What would it cost to chrome plate the frame on my motorbike? I have a 98 Ninja. Also, I'm a web designer, I'd love to help out with your site if you're interested. Send a note back either way. Cheers."

Or, if you don't want to ask about a product:

"Hey, I just noticed ____ and ____ about your web site. I'm a web designer and I'd love to help work on it. Let me know if you're interested. Cheers."

Again, if they're interested, you haven't invaded their business in any way, you didn't subject them to reading (or immediately deleting) a long boring sales pitch, so they'll likely get back to you. If they're not interested, they simply won't return your email.

To Sum it Up

In order to sell your services, you need to first sell yourself. You sell yourself by being yourself, shopping where you enjoy, emailing businesses you'd shop at, and by not caring whether you close a sale or not. You're here to live your life, you love your job and you're damn good at it. Don't worry about making a sales pitch, just offer to help wherever you can.

If you liked this article, or if you disagree completely, please comment below! Also, I would be forever (ok, so not forever, but briefly) in your debt if you would Digg This as well.

Some Web Design Inspiration

2008-09-18T05:54:41-07:00

I found a great blog site today on CSS Mania (a nice resource for inspiration) by author Jason Bradbury and thought I'd share it.

Jason Bradbury

I love how you can change the color of some of the items, and how the background changes on reload. The PNG transparencies up top work beautifully, though I haven't tested it in any browsers other than Firefox 2 on my iMac.

Nice eh? Also, here are a couple more links for inspiration today:

Have you been wowed by any great sites lately, or galleries of interesting work? Feel free to comment them below!

Stop Kicking & Ride The (Not Quite) Dead Advertising Horse

2008-09-10T14:36:38-07:00

Maybe it's the books and blogs I read, or maybe it's the rise in popularity of the disaffected emo rocker in mainstream media, but it seems lately that everyone is declaring the death of advertising. Advertising is dead, the consumer reigns supreme, we get what we want and ignore advertising completely.

If you look at big spenders in advertising over the last years, companies like GM and Coca-Cola who's advertising budgets have increased but sales have dropped dramatically, you may be inclined to believe the naysayers.

A Lack of Credibility

In their latest book, The Fall of Advertising & The Rise of PR, Al & Laura Ries present a couple of very interesting points about traditional mass media advertising:

It lacks credibility - We know that ads are ads, and we view them with a grain of salt. Am I going to get exactly what is advertised? Will this product change my life? Probably not.
Its pretty but not persuasive - It's no secret that designers are out to be creative and win awards, and it's also no secret that ads that make us laugh don't necessarily persuade us to buy the products they tout. Budweiser spends more each year and has hilarious advertising, but sales have been giving way to Coors Light annually.

One Word Equity

In the Financial Times, Saatchi warns of the death of advertising, saying he believes it has been extinguished by a change in consumer culture and commerce. He believes, similar to Ries' theory from the 70's that brands need to occupy a single position in the consumers mind, and that their position can be summed up by one word. What is a unique word to describe each brand? Out of only 750,000 English words to choose from, there may be tough competition for major brands to capture their ideal position, and it's advertising's role to put this word in our minds.

Maybe I haven't read enough yet, but I'm unclear on how advertising, a medium that fundamentally lacks credibility, is meant to instill knowledge of and belief in this "one word equity" for each brand in our minds as consumers.

No Shortage of Sales

One would think that if advertising as it is were dying, we'd see a significant decrease in consumer spending, credit card debt, travel and generally unnecessary expenditures, but in his latest book author and fellow blogger Rob Walker shares that exactly the opposite is happening. Consumers are spending more, credit card debt is at an all time high, and products are flying off the shelves at record speed.

The Butterfly Effect

So if advertising is dead but products are selling every day by great new brands, what is going on?

As the ugly worm morphs into a butterfly late in it's life, I'm inclined to believe that advertising is changing, and not dying at all. Sure, consumers have more direct influence over new products, we're empowered by YouTube and blogging, but we still want to buy things, and we differentiate products from one another largely by their brand names.

Al & Laura offer the theory that public relations (PR) is the only credible way to build a brand, whereas advertising should be used to remind us of what we already know about the unique position in our minds that existing brands hold. Rob touches on something similar in his book, Buying In: The Secret Dialogue Between What We Buy and Who We Are, when he talks about the salience of a brand: our awareness of it.

Public relations tools such as local news, newspapers, word of mouth, and magazines tend to deliver stories that people want to read, and more importantly, that people tend to believe. It makes sense then that PR is a more credible way to communicate a message than advertising, and that advertising is meant to re-inforce that message once it's been communicated.

What This Means for Web Professionals

This idea of public relations as the main vehicle for brand building gets me really excited as a web professional. We blog (public relations), we use Google Adwords (advertising), and we design businesses on the web through web applications. It's our job every day to design interactions with customers that can potentially form the backbone of direct customer and public relations. We can put words into people's minds about new products and ideas; and for those of us who are freelancers we can potentially do it all for much less money than traditional advertising firms, and with more credibility in the public relations world.

Moving On

I'm sure I've only scratched the surface of this topic, so please share your ideas and opinions by writing commments, and don't forget to digg this if you found it interesting.

Silverback Helps Usability Testing

2008-08-22T11:50:42-07:00

So today I downloaded Silverback because I noticed it's finally available, and wow am I impressed! Great work guys. This is going to be perfect for my upcoming usability testing on Viviti.

I love the gorilla theme and the beautiful vector gorilla illustration, which I'm assuming was designed by Paul Annett over at Clearleft, but please somebody comment and correct me if I'm wrong.

If you have an Apple, and need to record somebody using a web application for any reason, download the free trial of Silverback today and get on it! The retail version will cost $50, but in my opinion it's worth it. What do you think of Silverback?

Awesome UI Design Resource - Pattern Tap

2008-08-15T10:21:39-07:00

I don't usually just write about a web site without getting into bits of its UI design, but I came across Pattern Tap while cruising around for inspiration on FeedMyApp today and immediately fell in love with it. It's too great an idea not to share and I wish I had built it first.

Basically, the concept is that people like you and I can create collections of screenshots of our favorite UI goodies around the web: forms, buttons, borders, whatever... and share those collections with others.

I've been meaning to collect and discuss some of my favorite interface elements from around the web, and this site is going to make it 100% easier. What do you think about Pattern Tap? Leave a comment!

UI Design Examples from the Web - Jott

2008-07-30T12:51:03-07:00

Yesterday I came across a fantastic little web app called Jott that allows me to add tasks to my to do list with my voice. Not only that, but it's nicely complimented by a flawless iPhone app. Here are some examples of the user interface design to hopefully inspire you.

Simple is Better

Jott's tag line is "Get simple back" and the interface does a pretty good job of reflecting that. For example, the sign up page is quite short, with nice check marks (with on/off states) to show which fields have been completed. I always love those javascript details.

It only took me about 5 minutes to sign up, install the app on my iPhone, and create my first task by recording my voice. Jott automatically converts voice recordings to text so they can be stored and sent in a variety of ways.

Standard Log In

The login page is a good example of a standard, no frills, simple log in with all the necessities: some way to identify the user, a password, a "Forgot password?" link, a "Signup" link, and a "Remember Me" checkbox.

I find that logging in with my phone number is a good reminder that I can call Jott as well to create tasks and notes, even when I don't have my iPhone with me. I'm not sure if that was the thought behind their decision, but it seems to work well.

The Jott Inbox

After logging in, I'm taken to my Jott inbox, which is where new tasks and notes appear unless I specifically put them in a list when creating them.

Here's a closer view of the left navigation and the task options in the inbox:

I personally think a standard check box would have done the trick for task completion, but kudos for making an effort to keep things consistent by designing a custom check. In my opinion, the existing icon could be made more effective if the "incomplete" state didn't have a check mark in it, and the "complete" state did, to copy the standard form element more closely.

When you mouse over a task, you get a nice pop up options tab on the left hand side with a play icon and a grab point for dragging tasks to different list. I like that I don't have to click anything to see the other options, just point, and that what pops up isn't in my way.

Simple Dialog Window

If I click on the bell icon to set myself a reminder on a task a clean dialog appears that's pretty easy to follow.

I'm always interested in what other designers are doing for pop up dialogs, since javascript frameworks like jQuery have made it so much easier to create them.

Contacts On, Contacts Off

There's a right hand menu for some extra social networking features, and it has a nice slide down effect that doesn't feel too invasive. It's actually pretty usable.

If there were a ton of options in each sub-menu, and more top level menu items, this mouse over accordion might be a bit awkward, but it seems to work well with what they have going on here.

iPhone Interface

Although Jott can be used by anyone with an internet connection or a regular telephone, they've added a beautifully simple and well designed iPhone app which deserves some praise.

Simply tap the screen to start recording, then tap it to stop recording. It will upload the audio from your iPhone to the server, turn it into text, and add the text task to your list. Perfect!

Finishing Up

Overall, Jott seems to be a simple, easy to use web application with some good design principles behind it. Try it out and let me know what you think, I'd love to hear your comments on it.

If you liked this article, please Digg It, and if not, write some comments to let me know why.

Mastering Meetings - 10 Tips for Freelance Web Designers

2008-07-25T16:25:09-07:00

If time really equals money, then I've spent a decent amount of money purchasing awkward silence with strangers over the years. What I'm talking about is the minor panic evoked by a sudden realization that I'm sitting across the table from a total stranger and neither of us has anything more to say, yet after only 15 minutes of our first meeting, we both feel obligated to stick around and pretend to be interested in each others families and pets.

On that note, here's a comic that's only vaguely related to the subject of this blog post:

The following is a short list of tips for freelance web designers who want to know more about mastering the awkward social interactions we call meetings.

1) Have a general routine in mind

This is more important with first time meetings than follow ups, but it's always important to know how the meeting will flow before you arrive. Are you going to introduce yourself or ask about the client first? Do you plan on asking personal questions or getting right to business? Do you have a list of questions to ask? Be aware that the client might have their own routine in mind as well, so there's no need to be militant about your routine, but having a routine in the back of your mind will help keep things flowing along smoothly.

2) Know what you're going to ask beforehand

I like to create a list of questions on paper and then go through them with a pen over the phone to get things started, but this is just as effective in person. If you're working from a list of questions in person, be sure to make eye contact and not just stare at your page as you write down their answers. You don't want the meeting to feel like a test for the client.

3) Be ready for show and tell

Clients love to look at things, see what you've done in the past, and talk about what they want to do in the future. If you have mockups, make sure you have them with you either printed or locally on your laptop, just in case you can't get online where the meeting is taking place.

4) Bring the right stuff with you

This is in line with the third tip. If you have mockups to show, take your laptop with you or some method of showing them. I also like to take extra paper, more than one pen (just in case), my business cards, and any quotes, contracts, proposals, timelines, or marketing material I intend to leave or discuss with the client. You can keep this all tucked away some place so you don't overwhelm the client. I use a leather conference folder and place it beside my chair so it's off the table.

On a related note, I wrote a previous post that included a sample web design contract, budget, timeline & proposal for download. This can be helpful for impressing clients and landing projects.

5) Don't be afraid to bill for your time

I always like to build a certain amount of hours labelled "Consulting" into my quotes for initial and future meetings. This way I know I'm being paid when leaving the sanctity of my home office to lounge in a restaurant with a stranger while my deadlines are subconsciously calling to me. Of course, initial meetings that don't turn into real projects are the exception. I just chalk that up to the cost of sales.

6) Take many notes

I like to draw boxes and arrows, scribble mercilessly, and jot down every detail so when I'm back in the office it doesn't take much longer to get a quote or concise follow-up email sent out. Also, I find that some of the best ideas and thinking comes out of the first creative meeting with a client, and its valuable to have a record of it to review during the projects life cycle. In some cases, I like to scan these notes and upload them to Basecamp as project assets. Ideal candidates for this would be: site maps, rough database relationship schemas, scribbled mockups, and similar spontaneous notes.

7) Be prepared to eat or not eat

It's embarrassing to show up to a lunchtime meeting and be only one eating or vice versa. I always like to figure this one out before heading out the door to make sure we can both allot the same amount of attention to each other. Related to this one is knowing whether you're going to offer to foot the bill or not beforehand as well.

8) Dress appropriately

When I'm dressed in jeans and a graphic tee but chatting with an older man in a suit, I can't help but imagine I'm back in high school talking to the principal, or in a meeting with the boss. If we're dressed the same, or I'm dressed slightly better, then it's easier to casually discuss business on an equal footing. You can determine how to dress by thinking about what type of client you're meeting or dressing kind of business casual.

9) Set a clear time limit and stick to it

I find it effective to set clear time limits right up front by saying something like, "I'm glad we could meet today. I have about an hour with you before I need to leave for my next appointment, so let's get things started. Why don't you tell me a bit about your business first then I'll talk about how I can help?" This way you have an easy exit and know the meeting won't drag on.

10) Have a little fun

It's ok to smile and be yourself in a meeting, and it'll make a potential sale much easier. When it comes right down to it, many sales are won or lost simply based on how much the client likes you over another bidder, so smile, be friendly, and don't worry about getting or losing the business. You're a professional with skills, you can relax and let your experience speak through you.

In Closing

Hopefully this article was able to give you a little bit of a laugh and provide some useful insight as well. Please Digg It if you liked it, or write a comment below. I'd especially be interested in hearing about your meeting horror stories or successful techniques.

UI Design Examples to Inspire You - Big Human

2008-07-17T12:53:34-07:00

Fellow designers and friends Rus Yusupov and Dominik Hofmann have created a beautiful and functional little web app called Big Human that's perfect for this series I'm writing on inspirational user interface design. Prepare to be inspired.

Big Human

In an effort to easily share music with one another, Russ and Dom designed an audio player that could import music from their blogs using RSS. Other people started listening too and Big Human was born.

They realized they had accidentally created a blogging platform that was specifically designed for audio blogging, while most are geared totally toward text blogging.

Moving Forward

The next step? Let everyone share their favorite audio blogs with one another! Dom and Russ decided to open it up and let anyone sign up to share RSS feeds of audio blogs with one another. Now Big Human is an undiscovered gem where audio bloggers can share their favorite music, and you and I can listen to uninterrupted tunes with one click.

Easy to use

I love how lightweight and easy to use the interface is. It's slightly reminiscent of iTunes, but less clunky, and you don't need to do anything but click play to enjoy endless streaming music from one audio blog after another.

When you visit the site for the first time, you're looking at the application. No need to sign up to use it, no need to log in.

Signing Up

If you do decide to participate, signing up will allow you to add feeds to the player that will be accessible by everyone. A nice UI feature is that signing up doesn't stop the music from playing; the registration form pops up in a nicely formatted javascript dialog.

Logging In

As with signing up, logging in uses a popup dialog as well, although for some reason the log in and log out functions cause the music to stop. Must be something to do with setting and killing a session.

An awesome personal touch is the custom messages that appear with your username once you're logged in.

I actually chuckled when I read that, along with the other random messages that bring a little personality to an otherwise common task: showing a user their username and letting them know they're logged in.

Other UI Goodies

It's pretty great that while each track is playing, Big Human shows you the first paragraph or so from the sourced blog post, with a link to read that entire post in a new window so the music doesn't stop.

Additionally, adding a feed is dead simple, even more so than signing up and logging in. Clicking the clearly labelled Add Feed button brings up a simple inline form for adding a feed. Presto.

In Closing

Big Human is a terrific example of UI and web application design today. A couple of guys decided to solve a problem, and created a simple, easy to use interface, knowing who their target users are and catering to the way they like to listen to music.

If you've found this helpful or interesting, please Digg It. What do you think of Big Human? Let other readers know by commenting.

Nerdburn - Web application & graphic user interface design blog by Shawn Adrian

5 Ways I Use Google Docs as a Freelance Web Designer

1 - Writing Blog Posts

2 - Sharing Quotes With Agencies or Other Designers

3 - Maintaining an Ongoing List of Projects

4 - Personal Budgeting

5 - Miscellaneous Spreadsheets

Wrapping Up

Ballpark Proves There's Room for Another Invoicing App

Room For a New View

Just Do It

Art vs. Design, Passion vs. Cash

The 9 to 5 Dilemma

It Goes for Freelancing Too

Finding a Balance

In Closing

How to Parse Google Maps Returned Address Data: A Simple jQuery Plugin

Article Goals

What You'll Need

Example Usage

How It Works

Chubby CMS Framework, Mark Boulton & Other Friday News

The 5 W's in Web Application Design: 10 Useful Questions to Answer

Who

What

When

Why

How

A Couple of Examples

Twitter

Basecamp

Wrapping Up

Tactful Error Messages in Web Application Design

What is tact and how does it relate to web application design?

How to write Tactful Error Messages

Password Example

404 Example

Password Length Example

Communicate The Problem

Communicate How to Fix It

Communicate Why To Fix It, Give Incentive

Moving Forward

Error Messages in Web Applications and Customers Perceptions

Hello World

So, Who's Talk to Our Customers?

Conversations in Branding

Some Further Reading

Productivity & Inspiration to Kickoff 2009

A Few Tips From Uncle Shawn

It's 2009 & You're Still Flipping Pancakes?

4 Great UI Designs for E-Commerce Web Sites

ShoeGuru

Etsy

TokyoCube

FontShop

Get Designing!

3G Nanaimo, Outpost for Basecamp, and My iPhone

Average Web Designer Incomes: How To Set Your Freelance Hourly Rate

A Few Things to Consider

Related Information on This Topic

In Closing

Freelancers: Two Methods for Making Sales the Easy Way

So, what are you selling?

The Hard Way

Don't sell products, sell yourself

1) The Shop & Talk Method

2) The No Bullshit Email Method

To Sum it Up

Some Web Design Inspiration

Jason Bradbury

Stop Kicking & Ride The (Not Quite) Dead Advertising Horse

A Lack of Credibility

One Word Equity

No Shortage of Sales

The Butterfly Effect

What This Means for Web Professionals

Moving On

Silverback Helps Usability Testing

Awesome UI Design Resource - Pattern Tap

UI Design Examples from the Web - Jott