“The goal should be to find enough good clients to support the business you enjoy.” ~Nathan Peretic, Full Stop Interactive

You do that by setting good rates, getting better clients, and having more stable income.

For the past 9 years, I’ve worked as a freelancer, both as a side job, and full time. For the last 5 years, I’ve supported my family, on my income alone. In the last two years, I’ve increased my income by 50% each year.

I’ve learned a lot about freelancing, in that time, and it can be summed up in a few words.

“As a successful freelancer, you need to be first a business person, and second an artist”.

The trouble arises when we as creative types just want to do our craft. As indicated by my title, that’s only about 30% of what it takes. In order to be successful, you need to become an crafts-person with your business.

So today, I’m hoping to teach you how to bring the same care and attention to your business, as you do your craft.

So how do we look at our business?

A great way to get an overview of your business, is thinking of it like a franchise, pretending you are preparing to sell it and it’s processes. This enables you to look at it from all angles more effectively.

(All links: http://bitly.com/bundles/benklocek/3.)

Before the work

Before you actually connect with clients, and start working, there are a few things that you should consider.

Decide what you actually do

Be clear about what you actually want to do. The service changes the business model. A developer might be better off contracting with agencies, instead of courting his own clients. A manager/owner looks to hire others to do the work she finds.

• Business owner
• Designer
• Developer
• Creative …

Positioning

How you position your services should be a direct reflection of the following:

• Assets (What you do well/what you have now: knowledge, skills, connections)
• Aspirations & Values (What you want to do)
• Market Realities (What you can be paid to do)

The Marketing

Your advantage as an independent is you. By highlighting, with clear reasons why you are different, unique, better, etc., you differentiate yourself from others, and strengthen your authority in your chosen niche. Your personality/quirks/values can be your strengths.

(Also see: How the Web Pro Gets Work: Marketing for Online Professionals.)

Who is your customer?

For you to answer

• Who do you do it for? Be very specific.
  • Bad example: Websites for local non-profits.
  • Good example: Promotional sites for spa & massage businesses which specialize in organic & natural treatments.

• Two questions to answer when you think you have it.
  • Do they have the ability to pay?
  • Do they have the willingness to pay?
• Think long term
  • Think of it as a relationship
  • Think of projects/clients in terms of building your brand identity. How will this project/client help build my business?
• Who DON’T you want to work with? Review past clients and decide who or what type of client was not enjoyable/profitable. Avoid them in the future.

Them

• They don’t care about your specific skills, they care about how you can help them hit their business goals.
• Figure out what they want, then pitch it to them.
• Clients choose you because they like you, feel comfortable with you, or trust you.

Finding clients

• Don’t waste time with social media when small.
• Do your homework, and speak to their problems.
• The Plan: Marketing Doc
• #1 way to get things going? Ask for referrals
• Attribution links on sites/work you have done: Link to specific landing pages, not your home page.
• 80% of your business should be repeat business.

Winning the Work

Sales

• We are all in sales. It’s part of being a a business owner. Come to terms with it and read To Sell is Human by Daniel Pink.
• Aligning their needs with your services.
• Make the connection with them personal & purposeful/

What to charge

• Figure out your cost of living rate.
• Profit margin should be included in your hourly rate (above what you need to live). It enables you to grow or save.
• Only work for free when:
  • Building portfolio
  • Working for a connector (let them know you expect referrals/recommendations up front)

Value pricing

Value pricing is about asking “What is this worth to my client”? You would not do a similar project for the same amount for Adobe and your local ice-cream shop. Adobe will get much more value ($) from your services than the ice-cream shop. Your rate should reflect that.

Here are a few ways you can add value to your services:

• Learn to solve your client’s problems, don’t just deliver designs/code.
• Don’t just talk about your services, put the client at the center.
• Try calling yourself a “consultant”, even just to yourself. Words have power.
• Charge for great customer service. Clients are not only looking to save money, they also value their time and mental energy. Make yourself easy to work with.
• Be a businessperson too. Learn about business, so you can know how best to leverage your skills for them.
• Ask what success looks like. Be goal oriented.
• Know what to sell your client: it may be money, time, or mental energy savings.
• Focus on selling to their problem, not cost or features.
• Don’t get stuck in the “Which technology” debate.

Strategy

As an outside player in the projects you take on, you are in a unique position to have a more strategic view on things.

Done right, you can save a client huge amounts of time and money by thinking strategically. The huge benefit is that they start to think of you as a business partner, instead of just a hired hand. This leads to long term relationships which are very good for stability.

What exactly is strategy? It’s having an intention, which indicates an action, and leads to an intended result.

Intention > Action > Result

It means having a better why and how for the what a client is asking for.

• Why the need to change/create/remove?
• What to design/build based on Why insight.
• How will the What be done.

One of the best ways to help with strategy is to clarify goals.

Goals

In order to measure the success of a project, it is important to define focused, quantifiable goals.

• Increase in sales
• website visits
• leads, etc.

Make sure to understand what the client will use as a metric when determining the success of the project. Their reasons may be “feel-good” types of reasons, but make sure you satisfy those, and you will see repeat business.

Finally, understand the problem you are trying to solve.

Creating stable income

To a freelancer, irregular income is part of the package, but there are some things you can do to make it more stable.

• Retainer contracts, just be sure to work out the details beforehand.
• Higher-value clients leads to longer term relationships.
• Project Minimums means less time switching between projects, searching out new work.

On-boarding

To lessen the (unpaid) time required to get a new client onboard, develop an automated, repeatable process that makes them feel taken care of and informed.

• First Contact > Form letter: include project minimum, schedule, request for more info.
• Delay getting on the phone until it’s clear there is a good fit.
• Details from potential client > Verbal proposal/estimate based on similar past work.
• “Do you want to move forward?” Get verbal approval
• Then send a detailed project definition + estimate + timeline
• This whole process should not take more than 3% of the estimated project total, and is not charged to the client.

Estimates

• Estimating gets easier over time, as you collect data.
  • You do collect data don’t you?
  • ALWAYS track time.
  • Your internal estimating system, should match task for task, what you input for your time tracking.
  • Time/money budgets on each task in your time tracker. I use Harvest.
• +15% of total for project management
• 10-25% risk/contingency
• Don’t forget to mark up pass-through services. You are extending credit if you pay, then charge your clients.
• Bracia Internal estimate generator.

Contracts

A contract is to protect you in case of misunderstandings. Yes, it should be legally sound, but more important, it should clearly outline what the expectations are for you and the client.

• Don’t work without a proposal/contract. I use Bidsketch.
• Be specific about deliverables, they are what protect you from scope creep.
• Include maintenance & hosting costs.
• I add a Attribution Link clause, which allows me to put a “Site by Bracia:.” in the footer. It they don’t want it, the site costs more.
• A List Part on Contracts for the 21st century
• I use parts of the Contract Killer from Andy Clark.

Doing the Work

Get more done

• Set a weekly/monthly schedule. This is probably the biggest contributor to making more per year. The less time you spend figuring out what you should be doing, the more billable hours you can complete.
• Batch tasks like email. Take time twice a day to process email, not all day long. Avoid multi-tasking, humans are bad at ti.
• Outsource tasks like accounting, scheduling.

Project management

“Most designers/devs/agencies are hired for their skills, and fired for their lack of project management skills”.

• What it is:
  • Finances (Budget, Estimating)
  • Scheduling/Planning
  • People
  • Client services
• Get good at it, and you wil have very happy clients.
• Charge for it.

Process

Your “process” is the repeat-able, phases and steps you go through on each project. If you write it down and follow it, you can refine it. Otherwise, you won’t know why a particular project went smoothly.

• Set client expectations early, even in proposal.
  • List steps and deliverables.
  • “A Website Designed”
• Automate and document.
• Plan how you handle scope-creep, into your process.

After the work

Once the project is finished, you have several opportunities to give great service, and learn from your successes and mistakes.

Client relations

• Make them feel excited about the project: launch party, certificate, at the very least, send them a congratulations email.
• Ask for a testimonial (now and in several months when they have data on the success of the project).
• Ask for referrals.
• Follow up (maintenance, additional services)
• Include them in your newsletter, or send high-value clients personal notes with links to relevant articles.

Data

• Track everything: time, budget, vendors, successes, failures
• Run reports
• Annual review
  • what worked, what didn’t
  • which were good high-value clients

Networking

• Network with your client and their associates.
• Lead generation happens in all phases, that’s how you keep the project schedule full.

Closing

There’s a lot to running your own business, but taking it one piece at a time and focusing on building a solid process pays huge dividends. Once the business side of things is running smoothly, it frees up your mental energy and time to be more creative. Set aside a little time each week to put on your business hat, and look at your data. Your clients, your business, and your bottom line will thank you.

Questions, other ideas, concerns? Please leave a comment below. I’m still learning as well, and love feedback.

The post Business of Design appeared first on Bracia:..

Expectations of speed, availability, and increased output are impacting our ability to truly innovate. As our expectations require us to act increasingly machine-like (analytical, logical, information-centered), our abilities to empathize, play, understand nuance, create beauty, and synthesize the big picture are at risk of being lost.

We’ll explore ways of remaining conscious to this effect, and liberating ourselves from the poor inner habits our devices encourage.

Resources

Books

• A Whole New Mind, Daniel Pink
• Devices of the Soul, Scott Talbott
• The Nature Principle, Richard Louv
• Bit Literacy, Mark Hurst
• The Shallows: How the Internet is Changing the Way We Think, Read and Remember, Nicholas Carr

Video

• TED Talks: We Are All Cyborgs Now – Amber Case
• On being human: The Greatest Speech Ever Made – Charlie Chaplan
• On listening to our intuition: Shut Up and Dream – Ann Hill

Articles

• NY Times: Growing Up Digital, Wired for Distraction
• Fast Company: I Can’t Get My Work Done: A New Industry Survey Looks At Workplace Distractions
• Frontiers in Science: On-line social interactions and executive functions

The post Presentation: Digital Distraction – Optimizing Human-ness appeared first on Bracia:..

Being a web designer/front-end developer in 2003 was a lot easier than in 2012. There are lots of new things to learn – it can be overwhelming. In this talk I go over how a typical “kickoff meeting » Photoshop comps » coding » launch” style of workflow no longer suffices. We need a new workflow, which includes accommodations for responsive design, and much more complexity.

So Where do We Start

Establish expectations

• What is the desired outcome?
• Is it measurable?
• You need to do your own diagnosis of the problem. Don’t rely on the client to accurately assess the problem. That is part of the expertise they are hiring you for.

Budget

• What is possible with budget? The budget determines what type of team and often technology you ultimately use.
• Educating the client about what is possible within that budget is your job. Don’t let them dictate what they should get for a certain budget.
• Establish expectations. “Google offers <insert your favorite functionality here> for free, why do you charge for/can’t you build the same thing?”
• Ensure you discuss a Maintenance Agreement. Modern sites need continued care and feeding.

Scope

• Business Goals: Define business goals up front. What will be the measure of success?
• User Goals: Focus on user tasks. What is necessary to satisfy the tasks a user wants to accomplish on the site?
• Use “Use Cases” to understand the scope of a tasks. Drawing out the user flows highlights hidden complexities.
• 3 essential questions for managing scope creep: Why scope creep is your fault.

Team

A successful website project requires close collaboration between IA, Creative, and Technology. A smaller team will have fewer specialists, in which case all members will need to pick up the slack and be familiar with all disciplines. As the budget increases, it is suggested to add the team members as you go down the list. A small project may only have a designer/developer who will wear many hats.

• Designer/Developer: Most freelancers end up falling in this category by default. By necessity, they will fill all the other roles.
• Developer
• Project Manager
• Information Designer (User eXperience, User Interface, Information Architecture)
• Content Strategist
• Engineer (Developer)
• Researcher

Successful Sites…

• Serve business and user goals
• Are highly optimized
  • HTML5 Boilerplate Especially check out the .htaccess file. It’s a gold mine of best practices.
  • Modernizr.load() for conditionally loading javascript libraries.
  • Google Pagespeed Get your site graded, to see where you can improve.
• Adaptive: Adjusts to the device it’s being viewed on. See responsive design below & read Pragmatic Progressive Enhancement
• Secure
• Provide useful, appropriate, current content: See content strategy.

Workflow

• Research + Sketch
  • Figure out User Flows + Goals
  • Content: Determine the content attributes & structure. There are many tools.
  • Determine what modules/components the site will have. Ex: navigation, social proof, newsletter sign-up, slideshows. Building your pattern library for the site ensures easy adaptation, and maintenance.”The ability to work on small clusters in high-fidelity (in a browser), while developing an overall experience in low-fidelity (sketches in notebooks, style tiles in Photoshop), is the mark of a designer who understands the nature of the web.”~@nicewebtype 
  • Sketch: Through all this research, you should be sketching out ideas on paper. Do thumbnails of whole page layouts, and larger sketches of modules. Use some paper.
• Prototype/Wireframe
  •  Twitter Bootstrap
  • 320 & Up
  • Foundation
• Style Tiles: A little bit mood board, a little bit Photoshop comp.
• Design = increasing the fidelity of your prototype. Applying the approved styles to the prototype. Generate the refinements in Photoshop or similar. Many refinements can now be done with CSS3.
• Iterate & Prioritize: Include the client in the feedback look, choose where to focus your attention, and do more sketches.
• Optimize: Make that site run as fast as humanly possible. Learn how to use Chrome Dev Tools.
• Communicate: The highlight of this way of working is the client can be part of the feedback loop, avoiding the ever nerve-wracking “Big Reveal”. Doing so gives them ownership, and avoids any problems of going too far in a the wrong direction. They also get clear about what it means when you say “It will look different on different devices and browsers.”

Responsive Design

• A responsive design resource overview from a previous talk by Ben Klocek.
• Responsive+ (RESS)
• Update: Responsive Images are drafted in the spec and a little more.

Conclusion

The web is changing fast, and unless you want to be left holding your 960px PSDs, with no projects on the horizon, now is the time to learn more about this. Start small, and think big.

The post Design & Development Workflow for the Modern Web appeared first on Bracia:..

Ok, but what do I do?

Let’s make a plan. Here’s the steps:

1. Define overall situation. What is your field of expertise? What customer problems do you solve? How do you help existing clients? (Ex. defining business needs, determining how they want to present them selves in branding, developing collateral, marketing event, etc) What is their pain and what do they NEED to alleviate the pain?
2. Determine companies you can work/partner with. Who have they partnered with and what markets are they in? Who is your perfect customer? (Here’s a great write-up for figuring out your perfect customer: Avatar Marketing: Sell to Carol at asmartbear.com).
3. Set goals for what you want to accomplish with business development/marketing. Do you want to expand services? Reach more potential customers?
4. How will you measure success? Set up basic metrics that will indicate if your efforts are a success. Revenue, Customer satisfaction, Inbound leads.
5. Action plan. What do you need to do to make this a success? Do you need to create a partner program? Do you need a list of companies? What kinds of marketing materials will you need? Can you leverage referrals?

Start by asking yourself these questions. Just a general answer is good enough to get the idea, but be prepared to do some thinking to ensure you’re setting yourself up for what you actually want to do. I’ll go into these in detail soon, but for now…

I’m too busy for all this!

If you can only spend an hour a week on promoting, try this: Make sure your existing and past clients continue to be aware of your business and what you offer. The easiest way to do this is with a monthly email newsletter. In the newsletter provide real value. That is, don’t just talk about yourself, offer tips and links to articles you think might help your clients. Still don’t have the time? There are loads of great ideas for generating new business at the Institute of Awesome.

Stepping Up

Generating new business is great, but what if you really want to step up in the industry and take on bigger projects and clients?  Nick Pettit in Climbing the Ladder in the Web Industry says, you need to “meet people in real life” and “demonstrate your value by sharing knowledge”. In other words, get out into the world of meetups, conferences, and other events, and learn to speak intelligently about what you do. If at all possible, get a speaking gig. Ryan Carson of Carsonifed.com says, “when you get on stage, you automatically get the ‘expert’ badge”. Plus, you are much more approachable since people recognize you.

Essentially, you need to start evangelizing yourself. “Share your message, build your network, exude confidence”.

—

Whether you do a little or a lot, make sure you are always thinking about ways to remind about/share/promote your business. I’ll leave you with a few daily marketing activities from the Institute of Awesome:

Daily Marketing Activities

• Do *Awesome* work
• Share ideas, tips, sneak peeks, etc on: blog, client email, email list, FB, Twitter
• Make connections: write to someone you admire, refer a client to a fellow freelancer, recommend a product or book to colleague/friend/client, post promo materials around town
• Hand out biz cards
• Call an old client or new lead

The post How the Web Pro Gets Work: Marketing for Online Professionals appeared first on Bracia:..

The trouble is, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. In order to deliver video to Firefox 4+, Safari4+, Chome11+ and IE9+, we need 2 video formats (.mp4 and .ogg) and 2 video players (HTML5 and Flash).

.mp4

This makes Safari/Chrome happy (iOS devices as well). Make sure it’s encoded using H.246, which is the important part.

.ogg

This makes Firefox Happy, but only if the file is served by the server with the “video/ogg” mime type, which is not usually a part of the standard configuration. Add the mime type to .htaccess for this.

Video Players (HTML5 Video, Flash)

Not all browsers support HTML 5 video, of course. To compensate, I use “Flowplayer“, a fallback Flash version, that uses the .mp4 encoded file. The Flash player is used for all browsers that don’t recognize the <video> element.

The final problem is that we can’t just use .mp4 for the iOS devices and fall back to Flash for Firefox, because Firefox understands the video element, looks for a src it can read and just sits if it doesn’t find one. It won’t use the fallback.

Solution

1. Make one version that uses Theora video and Vorbis audio in an Ogg container.
2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container. (This version will also work in the Flash Player for IE and older browsers.)

Create the .ogg version

1. Use ffmpeg2theora (it’s a command line encoder) to convert the video.
2. My command was as follows:
   ffmpeg2theora -v 7 --soft-target -V 2500 -x 1024 -y 432 -a 5 /Users/ben/Trailer.mov
   (Just type ffmpeg2theora at the command line for help with the params)

Create the .mp4 version

1. Use Handbrake with the “Apple > Universal” preset. The iPad has certain limitations about what type of video settings should be used. See also this article at stackoverflow.
2. Change the extension .mp4 (It’s exactly the same internals as .m4v, but for some reason it’s the standard extension) More here.
3. Check the “Web optimized” checkbox under “Output Settings” just below.
4. Process the video.

HTML

I’m using Video for Everybody and videojs to format the HTML5 player with a Flash (Flowplayer) fallback.

The post Using HTML5 Video appeared first on Bracia:..

The web lives and breathes content. As such the content on your site should receive the kings portion when it comes to attention. Design is there to support your content, because without good content, design is just decorating.

Unfortunately, it’s usually left to the last and pushed out with typos, bad grammar and in first draft form. The content on your site is how your visitors know you! Take a little time. Craft content knowing that this is your brand, your online value. Content that has soul and substance keeps visitors (and search engines… more on that in another article) coming back.

That said, good content is hard! Having a content strategy in place can really help. Content strategy is the analysis, creation, publication, and maintenance of useful, appropriate and current content, developed to meet particular goals. In short, when you put something up on your site, make sure it is high quality, you know who it’s for and why you posted it.

The points below, should be considered for every page of the site:

• Audience: Who are you trying to attract?
• Primary Message: What is the primary message?
• Audience Specific Message(s): Is there an audience specific message? Are there audience specific trigger/key words?
• Purpose of Page: What is the business objective the page is aligned with?
• Style and Tone Notes: What tone and voice is appropriate?
• Call(s) to Action: What you want visitors to do.
  (credit lofwebdesign.com)

If you are unsure of any of the points above, consider whether you should be creating the page at all. Fewer pages of all high quality content are much better than 1,000 pages of dull drivel. What would you want to read?

Let me know when you need help with your content!

Good Resources:
http://www.alistapart.com/articles/a-checklist-for-content-work/
http://www.lofwebdesign.com/content-strategy-resources.html

The post Good Content Pays the Bills appeared first on Bracia:..

You probably already have a clear idea about your business goals. Have your goals list handy, we’ll need it soon.

Who are your website visitors?

Next, we’re going to look at your website from the visitors perspective. We need to get inside their heads to understand their motivation and goals. Why are they visiting your site? What do they hope to accomplish? There may be several types of users, with different goals and motivations, so we’ll start by making lists of the users goals, needs, abilities, and technical capabilities (how they access the site).

The best way to determine visitor goals is to ask some of your actual visitors. If that’s not possible, write down the major groups of users who will be using your site in different ways. You may have returning visitors, prospective new visitors, customers, pro users, etc. Write down the typical goals for each group. For example:

• New visitors may want to get a general idea of what your site is about. They will also likely want to compare prices for your products or services.
• Existing customers may need support/help.
• Pro users will need quick access to the main functions.
• Users on old computers with slow internet connections will still need access to the information, but may not care about the fancy welcome video.

A handy way to organize all these attributes is with “personas“, a mental model comprised of goals, characteristics, habits and values of the target audience. Give your personas proper names. It helps you identify with them. Making design decisions for “Jim, the teacher with 3 kids” is a lot easier than for some abstract notion of a middle-aged man.

Aligning business goals and user goals

Once you have your personas, it’s time to line-up user goals with your business goals. Say your main business goal is to get website visitors to call your office. The user goal might be to learn more about your services. Aligning these two goals, we would put the office phone number just under the services listing with a call-to-action like, “Call now for a free consultation 777-665-6565″.

As we align and prioritize users goals with business goals, we begin to get the building blocks and paths through the site we want users to take.

Next, it’s time to create the content!

The post Understanding Your Users & Aligning Goals appeared first on Bracia:..