Today on LinkedIn, I discovered a question titled "How do you define Web 3.0?" and my stomach turned. Are we really going there? Has mankind fallen so far as to need a consumer friendly buzz word for everything we do?

I'm guilty of mocking buzz word heavy web sites and blogs for using the words Web 2.0, and just as guilty of sprinkling sales meetings and client conversations with the same term, touting Web 2.0 as the magical solution to customer needs.

The truth is, the web is just the web. We simply use the term Web 2.0 to communicate that we're doing something "new", or that we've found new ways of doing something old.

Jeffrey Zeldman wrote a great article over at A List Apart that sums up my thoughts on the subject, he hit the nail on the head in my opinion.

I hope the term Web 3.0 doesn't catch on, and we can all embrace the fact that the internet, being organic, global, and growing as fast as it is, will continue to grow and spawn new ideas every day, everywhere.

Let's just call it the web.

In my previous article I offered my thoughts on how to make it as a freelance web designer. One of the things I mentioned was the need for a solid contract and proposal so here I offer my contract and proposal templates, free for your use.

About The Downloads

I'm not sure where the contract came from; I picked it up somewhere over the years, so if you recognize it, please comment and let me know so I can give proper credit.

The proposal, budget, and timeline documents in AI format are all mine and have helped me to land projects ranging from $5k to $200k over the years (no joke). This is good stuff.

Here They Are

Choose the file you want to download below:

Sample Web Design Contract
This is a great sample web design contract to use and modify
Download (13kb, PDF, zipped)

Sample Proposal
Here's a copy of my proposal, budget, and timeline templates
Download (1mb, AI, zipped)

Update January 1st, 2010: Thanks to the immense popularity of this proposal sample - I built an exciting new web app to help you create proposals, using the template. Check out QuoteRobot for a 30 day free trial.

If you find these useful, please Digg This or comment and let me know. Feel free to check out my profile on BrandYourself - Shawn Adrian. Thanks and good luck!

While cruising Google for GUI inspiration the other day, I was surprised at how difficult it was to find great, up to date, user interace design examples from the web. Therefore, I've collected a few to share with you and written my personal opinions about each of them. This is by no means a conclusive collection or study, it's just a short collection for some inspiration.

Amazon.com

http://www.amazon.com

Image

I like the ability to search, as well as choose from a traditional list of links on their Gifts & Wishlists javascript drop down menu.

Facebook

http://www.facebook.com

Image

In the friends browsing area, I like how you can click to expand or collapse a friend for a quick look without leaving the page, also, I like how the drop down menu allows you to either (a) click Friends to view the friends page, or (b) click the arrow to expand the drop down menu. You'll need a Facebook account to really see the interface action here, but hopefully my screen grabs provide a glimpse.

Flickr

http://www.flickr.com

Image

Flickr has some great UI ideas. I especially like the drop down menu when you click a person's avatar (including your own) and the batch editing interface. If you don't have a Flickr account, you'll need to sign up to see the good stuff.

Blinksale

http://www.blinksale.com

Blinksale

I find Blinksale so easy to use, I actually use it to manage my customer invoicing. I especially like the create new invoice page, which allows me to tab through the form without using my mouse to create new line items. It's fast and great looking. You can get a free account which should allow you to grab some inspiration.

Uservoice

http://viviti.uservoice.com

Image

Uservoice allows people to add suggestions for sites who use it and then vote on them with a limited number of votes. The first time I used it was on CushyCMS, and I was impressed a how easy it was to make a suggestion and vote on others. Elegant and simple.

Dell

http://www.dell.com

Image

If you haven't been to Dell in a while, it's definitely worth cruising around their e-commerce areas. I was amazed by how they've squeezed so much information into an easy to use system builder.

As today is officially Firefox 3 Download Day, I eagerly went to the Get Firefox page expecting to add my triumphant download to the mass of other fans, and was disappointed to see that the site was down.

I've been checking throughout the day, and it's been on and off... Once, about at about 12:15 pm PST, the page displayed a download for Firefox 2, but no download for the new, full version of Firefox 3. Right now, 12:42 pm PST, I get this:

Http/1.1 Service Unavailable

Have any of you been able to download the new Firefox? I hope so.

Interestingly, there's also a bit of controversy on whether or not Mozilla's goal of 5 million downloads in one day (or 1.7 million depending who you ask) will even be enough to set a world record. Ben Forta wrote in a post on his blog that the Flash player averages over 5 million downloads every single day. Wow, I knew Flash was popular, but over 5 million download a day?!

Still, the Flash plug in is not really an optional download, as is choosing one web browser over another. I'm still rooting for Firefox and their Download Day. Hopefully we can all get in there grab Firefox 3.

Update:

At 2:35pm PST I was finally able to download Firefox 3 from the Spread Firefox site! Also, Orchard has created a useful widget, based on Kent Brewster's work that will show the number of FF3 downloads worldwide. I've included it here:

Also, I found an official blog post by Melissa Shapiro on the Mozilla blog talking about the site being crippled.

"The outpouring of interest and enthusiasm around Firefox 3 has been overwhelming (literally!). Our servers are currently feeling the burn and should be back to normal shortly. Download day will officially commence once the site goes live. The 24 hours period will be clocked from that moment. Thanks for your continued support."

Now that Viviti is rolling along with full beta steam, we're getting a lot of feedback and I find myself re-thinking parts of the user interface design. I thought it might be interesting to discuss my thinking while re-designing the editor toolbar.

In order to understand my thoughts on re-design, I'll need to briefly explain my thoughts on the initial design.

How Viviti Works

Viviti is a web site creation tool and content management system that let's users create a web site without writing any code. A Viviti site is made up of pages, which contain content locations, which contain content components, which contain actual user inputted content.

Viviti is an Inline Editor

Users can point at and click on whichever content component they would like to edit on Viviti, so the most direct way for a user to add content to a blog or photo gallery is to point at it and click the appropriate button when it is highlighted.

Site Specific Actions vs. Page Specific Actions

I usually begin designing an interface by laying out use cases on paper, what I like to call user actions. These are things a user may do with the site.

Originally I decided to differentiate Site Specific actions and Page Specific actions by way of a color variation on the toolbar:

In this image, the Manage drop down on the darker background is for performing Site Specific actions, and the options on the lighter background are for performing Page Specific actions. I've noticed a few problems with this approach.

The Problems

  • The Add Content button is misleading to users who want to add content such as a blog post or photo to an individual content component, rather than adding an entire content component such as a blog or photo gallery
  • No easy way for a user to add a single image to a page
  • The Settings and Delete buttons are not clearly defined as Page Specific rather than Site Specific and therefore are misleading to some users

Solving the Problems

To add a single image to a Viviti page, the user needed to be able to add an Image Component to a page with only a single image inside of it.

Our Add Content button would have popped up a dialog offering a number of content components available such as blog, rss, images, and more. Users who clicked the Images Component in the popup dialog were confused as the options presented to them were for adding an entire thumbnail gallery of images and not just a single image.

I resolved this by replacing the Add Content button with three smaller, but more direct buttons and a more accurate description:

I decided to highlight the Add Image and Add Text buttons because those are the first and currently most commonly added content components.

These buttons contain only icons, which isn't as clear as text, but the icons are fairly standard across operating systems and word processing software so I figure (hope) they will be received warmly.

Now it's clear in a users mind that to add an image or text to the page, this is where they click. It's also clear that to add more, they click the more button.

Content Components vs. Actual Content

The current method of inline editing is great for adding blog posts to a blog component, even photos to the photo gallery component, but what about when a user wants to sort through 100 comments on a single a blog post in a specific page and approve, delete, or feature them as needed? Should we force them to navigate to that page, click on the blog component, find the post in question, and then scroll through the comments, managing them as needed? This method seems a bit cumbersome.

In order to solve this issue, I needed to consider that content is not necessarily page specific; A user can add blogs (content components) to multiple pages, but they can display the same blog posts (content).

I figured that to speed up editing mass amounts of content, the user needs to have access to a central content repository or database, therefore I created a My Content dropdown in the Site Specific area of the toolbar.

Now the user has a place to go where they can manage content without needing to navigate to it directly or edit it inline. This re-inforces the idea that the Page Specific area of the toolbar allows them to add content components to pages, but they need to edit those components to add real content to them.

Here's an example of what the user would see if they clicked Manage Blog on the new My Content dropdown:

Additionally, by renaming the Manage dropdown to My Website, we've clearly differentiated between items relating to the web site as a whole, and items relating to content and pages.

In order for the My Website dropdown to be accurately named though, I made a few more changes:

  • I removed the Manage Theme option and replaced it with a Choose New Theme option
  • I moved the Customize HTML and Upload Theme options out of Manage Theme and into their own dialog named Edit Source Code to dissuade non technical users from clicking on them
  • I added a Domain Names option to the My Website dropdown rather than having DNS Settings inside the Website Settings option

Finishing Up

I'm hoping that my thinking on these issues will make things a little more clear for users of the Viviti web site. After the changes are launched, I'll monitor user feedback and write a follow up to let you know if they are successful.

If you'd like to thank me for this article or if you disagree with any of my thinking, please post a comment below. Also, please Digg this if you feel so inclined.

Before I took the plunge and went freelance full time in March of 2007, I was a little nervous. How would I survive without a cushy agency job? Could I sell myself to potential clients as easily as I could sell an entire agency of talent? How would I find work? What about stability?

I've learned a few things about being prepared, finding work, managing projects, and the tools every freelancer needs to have.

Preparing to Find Work

Have a Contract Ready

For projects spanning more than a month and occupying a budget over $1500 (give or take) it's important to use and customize a well written "custom software development" contract for a couple of reasons:

  • it shows clients that you think things through and are prepared, and
  • it helps you clearly plan and identify potential problems before starting a project

I usually only use a contract for projects over $1500 because I find small business customers to be intimidated by a massive contract and because I can turn those around in such a short time it's hardly worth outlining everything in detail. I don't mind putting in a few undocumented hours here and there on a small budget project. I usually break smaller projects up into 2 or three payments. One at the beginning, one at the end of the creative (visual) work, and one upon launch. For larger projects that require a contract, I set up more milestones and payments.

Here is the contract I use (13kb, RTF format), feel free to download it and customize it as you see fit.

Prepare a Nicely Formatted Quote & Invoice

Better yet, go all the way and create a quote, invoice, contract, and a proposal with a timeline, budget, and about me page. Having a well branded template for your quotes and proposals will go a long way to affirm who you are and how organized you are in a potential customers mind. I create mine in Illustrator and I constantly receive praise from clients on my "professional presentation". Have your templates on hand so you can rock one out at any time.

Here is a copy of my proposal (1mb, AI format, multiple pages), feel free to modify and use it as you see fit.

Prepare a Professional Proposal Template

Generally, I only send a proposal for jobs over $5000, as it takes me a couple of hours to come up with one. For jobs under that budget, a one page quote and contract outlining the details in point form will usually suffice.

Have a Network of Co-Workers Available

One of the hurdles to get over as a freelancer in prospective customers minds is that you're working alone, at home, so you may get stuck, be overwhelmed with their project, or just get lazy with nobody to keep you in line. I've discovered that as a freelancer, I can still tout the merits of my teammates, even though they too tend to work from home, or have agency jobs and work with me in their spare time. It usually goes something like this...

Client: "So, are you going to do this whole project yourself?" (doubtful worried tone, looking at the budget)

Me: "Absolutely not, I work closely with a few reliable friends who are also freelancers, who've helped me on many jobs over the years. These guys are incredible, and there's no way I could do this all on my own. We use [insert project management software here] to keep organized." (confident, friendly)

Clients don't need you to be a one man superhero, they want to you get their job done on time and budget. Often when you get their job done on time they'll believe you're a hero anyway.

Finding Work

What's your target market?

When I set out to re-design nerdburn.com with the intention of being full time freelance, I thought a while about what sort of clients I would have, and what kind of jobs I would take on. I discovered that they tend to fall into two brackets:

  • Agency Work (big business)
  • Direct Business Owner Work (mostly small to medium business)

If you visit nerdburn.com, you'll see a couple of pink tabs inviting clients of each kind to get more information. It's important to think about how you intend to sell yourself to both markets, unless you want to focus on one specifically.

Creating & Maintaining Agency Relationships

Agency relationships can be created in a few ways and are very helpful for keeping a regular supply of freelance work.

  • Send an email introducing yourself to as many as possible, just letting them know you're available for freelance work, link to your portfolio
  • Bid on jobs on sites like iFreelance & eLance (often jobs are posted by agencies and not clients directly)
  • Let agencies know that you can be discreet, and not necessarily use the work they send you in your portfolio

If you have a positive relationship with a creative agency, you're likely to receive work on projects you may not have been able to land on your own. Additionally, since you'll likely be working under a creative director or art director, rather than directly under a customer, you'll find the jobs to be better organized and less work.

If you're having difficulty maintaining a regular income, talk to some agencies about sending you 16 hours a week or something similar, at a reduced hourly rate. You'd be surprised how many clients are interested in this kind of arrangement, and it will provide you with some peace of mind and stability while still giving you your coveted freelance freedom.

Maintaining Relationships With Other Designers

Recently a designer friend of mine from high school who I hadn't talked to in years, asked me to put in a bid on a $30,000 job I wouldn't have known about otherwise. My instant messaging contact lists are full of other web professionals, who I've organized according to their specific lines of work, and I make sure to say "hello" regularly to keep those relationships open. I don't mean to constantly pester your friends about sending you work, I just mean to keep in touch and let them know what you're working on, and ask them about their professional lives.

In any given month, the work I receive from people through instant messaging makes up for 15% to 40% of my work.

Bidding on Jobs Through iFreelance & eLance

Sites like iFreelance and eLance that allow you to create a profile and bid on jobs are a terrific resource, especially when starting out as a freelancer. When I was beginning, I bid on a new job almost every day, to make sure potential customers knew about me.

Keep your profile short and sweet. Focus on selling your strengths and bid on jobs that look easy to you. The faster and more accurately you complete a job, the better your customer feedback will be, and the easier it will be for you to land jobs in the future. Additionally, don't focus on landing the "big" jobs. Bidding on a number of small, easy jobs, can make up your income for a month, or provide a much needed payment in between larger checks. As a freelancer, regular payments are valuable as there's no company giving you a check every two weeks for being in their office.

Useful Tools For the Job

Here are some useful tools that I use religiously to manage my freelance business.

  • Blinksale - In my opinion, Blinksale is the easiest way to get an invoice out to a client quickly. I use it for all my invoicing.
  • Basecamp - Basecamp is great, even if you only use the 15 active projects per month account, you will find it helps you to be more organized, and impresses your clients when they can track your progress.
  • Google Docs - I don't know about you, but I think that one of the benefits of being a freelancer is pitching up in your local coffee shop, sipping a latte and working (it helps not to feel part of the world and not just your home office). Google docs is great because you create spreadsheets and write stuff (like this blog article) without needing to worry about transferring the files anywhere.
  • Google Analytics - Use Google Analytics to track visitors to your site and traffic sources.

In Summary

In short, the keys to being a well and regularly paid freelancer are being prepared, finding work, and having the right tools for the job. You can do this by creating agency relationships, maintaining relationships with your professional friends, bidding on jobs, and keeping things nice and organized.

I hope this article has been helpful to you, if so, please Digg This, and if not, please comment and let me know what I could have done better. Thanks for reading it!

This week I received a random phone call from a startup founder down in Virginia - a young woman planning a fashion startup. In hindsight, I could have given her better advice, but having been in the middle of coding at the time, the business logic side of my brain was mushy.

Here's some better advice, based on her situation - she's an individual founder of a retail ecommerce fashion startup, just getting going and looking for some direction.

Get A Cofounder

This woman's experience was in marketing, which is awesome because marketing is such a need for startups. The buzz around "growth hacking" attests to this need, and in my experience, marketing is the one thing aside from fixing bugs and upgrading software that is a constant demand.

That said, as somebody starting a fashion brand, I advised her strongly to get a designer cofounder and to launch a beautiful brand before pitching investors. In my mind, getting a cofounder and building something is top priority to any startup.

Build Something

Rolling from my last point - it's absolutely key in my opinion to build something. You're just an idea until you create something and put it live into the world. You need to have a brand, a product, and some interaction with customers so they can help you determine which direction to head.

Investors always want to know what you've done, and if you haven't launched something yet, it's likely they're going to look at startups with a product and probably some traction too.

Sell Something

What's better than having a live beta product in the world? Having a live beta product that's making money. In my opinion, your top priority should be to close a few sales. This shows potential investors that you have a repeatable business model.

You need to close the gap between an idea (in your head) and a business (cash in your pocket) as soon as possible. The sooner you figure this out and the better you document the process, the more likely investors are to want to throw money at you. It's like the old adage about how the bank only loans money to people who don't need it.

I like to think of outside money as rocket fuel - you need a functioning rocket first. You can tweet that :)

Raise Money

Once you've got a functioning rocket, a repeatable business model, and a brand you can stand behind, then by all means get out there and raise some money. The best way in my opinion is to make yourself visible by going to events and meeting people in person.

Our journey into raising capital started at #startupriot in Seattle. We just wanted to get in front of a crowd and talk about QuoteRobot. We didn't expect to place in the top 5, and we certainly didn't expect to get investment offers, but that's what happened.

I hope this has been helpful to some of you - feel free to let me know in the comments and to tweet or share this if you enjoyed it.

I’m moving my blog to Postach.io - the Evernote powered blogging platform I cofounded with Gavin Vickery and the Input Logic crew. Stay tuned for old posts and portfolio work to be migrated over. Lots to do.