Categories

Friends

How To Build An Infographic For $279, Not $5000

How to Build an Infographic

There are certain technical charts, diagrams and other visual media that probably bring back horrible memories of High School aptitude testing and harsh criticism of performance. Fortunately, the present generation of web designers, graphic artists and creative writers have found a way to turn those passing points of trauma into massive business exposure and renowned Web content.

Skills like SEO and link mastery are useful, but they tend to irritate readers more than peak interest in a service or product. The key to your business site or creative contributions becoming viral is dependent on a very creative media approach.

It is imperative that in order to become a ranking site, and not just one that has clever SEO juice to weasel its way into everyone’s browser, you must successfully integrate useful written content with eye-catching, universally attractive visual content.

Just a few months ago, my solution for eye-popping content consisted of  blogs, video and social media. I am a web designer by trade, thus aware they existed but consciously refrained from jumping into the world of online infographics. It was a bit of an self-induced intervention since I was technically an infographics “virgin.” My business, Biz Name Wiz, has greatly benefited since.

Infographics are a visual aid which accompanies your master content, or illustrates any type of trend in business, economics and “virtually” any other subject. The more relevant the infographic is to your content, the more people will be inclined to adopt what it illustrates and share it with their demographic. It can be simple maps and charts, or complex how-to diagrams that are unique on the Web.

Biz Name Wiz is a company that provides business naming help to start-ups and those wanting fresh profiles. The brain center of our team decided infographics are the correct type of evolution with which we could really grow.

After a bit of looking around, I discovered that Infographic creation services average $5000 per project! Having a tiny budget, I was stuck with accomplishing the impossible. I somehow needed to create a professional-looking infographic without breaking the bank. Oh yes, it can be done. Here is my “secret” recipe for success, and how my ingredients only cost me $279.

 

Infographic Success Recipe
 

  • 1 Highly interesting and creative bit of content with useful subject. The subject must be attractive, or site popularity will not rise.
  • 1 Tireless Researcher. This is the major “prep step.” (Cost ~$50)
  • 1 Fast Writer (Cost ~$100, save on this expense using your own honed writing skills)
  • 1 Experienced Artist with Photoshop mastery (Cost ~$100)
  • 1 Month Pro Subscription to Piktochart (Cost ~$29)

Total: ~$279 Now let’s get cooking!

 

Research

This is the crux of your infographic success recipe. I found an incredibly talented research expert by posting a job at oDesk.com. My ad contained the following:

“Looking for a web research expert who can help us find a “buzz worthy” subject for an infographic. Must be incredibly fluent in written and spoken English. Must proficiently navigate Google Trends, Google Keywords and Google Spreadsheets.  You are required to have high English test scores, be proactive to your inquiries via Skype chat and email. Must have logged over 100 hours on oDesk. No rookies.”

oDesk

I then asked the researcher to come up with 10 ideas using Google Trends to discover subject matter that is hot and trend-related to our business. Also, to use Google Keyword Tool to narrow down the subject to keywords with substantial search traffic.

After doing all of this we decided on the subject of “funny business names.” Admittedly, I always go for low-hanging fruit. This means a low-competition keyword with several thousand global monthly searches. We asked our new researcher to find 100 funny business names. She delivered it in stellar fashion and it only took $50 of her services.

Google Keyword Tool

 

Writing

Use your in-house team to dive into the content pool. If your writing resources suck, then take advantage of a brokered copy writing site like Textbroker.com. The downside is you cannot communicate directly with the creative team, the site moderates it incredibly well. Generous compensation for expert writers who provide type of service is about $.067 per word plus a small brokerage fee. (1500 words = $100 )

Textbroker

 

Design

Piktochart will get mad at me for saying this but “Picktochart an AMAZING online WYSIWYG tool to help quickly create high quality infographics. However, it’s not worth paying the recurring monthly fee for, and the design interface is limiting to the point of frustration for any professional designer!”

That being said, use it for one month to kick start your style in the right direction, and for its large library of style elements. I started our project in Piktograph essentially as a visual prototyping tool. We gave the username and password to the designer hired through eLance.com to recreate the prototype offline in Photoshop. Obviously, the powerhouse Photoshop software allows any designer a higher level of creativity and direct communication. Design Cost: $129 (10 hours @ $10/hr + $29 for Picktochart)

 

Timeline Estimate

Technical work on the project should only take about two weeks. Our project took about a month because I had to find a way to fit development into my regular work and home-based diaper changing duty. Budgeting time and balancing the cooperation between the team was really the most difficult and rewarding element.

 

Summary

It’s possible to produce high-quality content for a little dough.

It’s a little like producing a great movie, but with a tiny budget. Think about James Cameron’s Avatar. It would have been a monumental achievement even without a huge studio because everyone involved gave it their utmost.

The process of integrating infographics to your site should adhere to this formula. Everyone must give it their best and produce absolutely concrete, inarguably high quality work. It sounds harsh but, spend the time. If then, team members are not up to par, pay them, wish them well and replace them.

So, the final infographic outcome? We’re stoked!

Not only has the introduction of the infographic showcased our creative writing skills to the world it has also increased our website traffic, brand awareness and overall “buzz!”

I think the team at Biz Name Wiz succeeded. Please judge for yourself!

LINK: http://www.biznamewiz.net/blog/business-naming-images/52-Funny-Business-Names-Infographic.jpg

 
 

Keep In Mind, It’s Just A Blog

Way more complex than you need

Way more complex than you need

Ok, so you’re tacking a blog onto your site to (1) quickly get breaking news about your products and company online and (2) boost SEO.  We all know that (2) is the REAL reason you’re adding that blog onto your corporate site.  You want to get on the first page of Google for certain search terms.  Good plan!  In fact, it’s such a great plan that EVERYONE else on the internet is doing the same thing.So what can you do to get in front of your competition?

First off you can use the latest version WordPress.  WordPress does optimized URI rewriting and about a hundred other little things that rocket it to the front on the long list of blog platforms.  Next, you should automate site map submission to Google, Ask, Bing, Yahoo, and 5 or 10 minor players plus the new challengers that pop up weekly (and get shot down almost as quickly — anybody remember that massive market changer, Cuil?).  You can line up your Twitter feed to stream to the main page of the blog.

In short, simple layouts rule.  Make your blog  as visually simple as possible.  Any fancy tricks (like the java tag cloud over there on the right which we are in love with) are just going to slow down your blog and MAY prevent it from getting indexed.

That leads me to my next point.  Get it live and online ASAP.  If you are building or re-building your main site, get the blog up and indexed before all the main dev is done.  It’s gaining search engine traction while you’re testing and making final mods to your site.  Even if you decide not to take the blog live, you can always line up 15 or 20 posts.  With WordPress 2.6 & newer, you can schedule your posts to auto-magically go live on a specified date.  So you drink two or three cups of that crazy Vietnamese coffee that has quadruple the caffeine and write them all in one mad literary sprint.  Then stagger out the publish dates.

If you keep the blog layout simple, you’re going to get it online faster.  You won’t waste time debugging complex interface issues.  The simpler the layout, generally the more compatible it is with blog platform upgrades and plugins.  I’ve worked with some very complex WordPress themes.  After we add some plugins, the really crazy animated multi-columns themes will inevitably break — and that is just during the initial build.  Complex themes and heavily customized layouts limit forward compatibility.  Weigh that carefully.

Finally, use your blog.  Post to it consistently.  Especially at the beginning, daily posts that are rich in relevant keywords are the key to success.  You can slow down once you have a couple hundred posts.  Seriously.

Now with all that said, do you REALLY want that fancy layout???

A Few Hints for Tutorial Videos

A client recently needed some help on setting up video tutorials on her website. I realized that this info is probably of value to just about everybody, so here it is. Disclaimer: these are my opinions as to what constitutes an effective tutorial and this is by no means authoritative.

  • Initial capture:
    1. Script out the mouse clicks and screens that you want to hit in order (sometimes I do this in PowerPoint)
    2. Capture that workflow in a video with Camtasia or Captivate (possibly run the PowerPoint in another window for visual queues OR just print it out)
    3. Edit LIBERALLY to get tutorial down to final runtime
    4. Play video and record VERY rough voice over to get the basic structure down
    5. Replay voiceover and transcribe into a script, editing for brevity
    6. Read your script while the final video is playing and capture audio
    7. In Captivate or Camtasia, marry the audio with the video
  • Stay away from the post-it style popups that are so popular in Captivate … people are way too impatient to read in a video, so these are not effective (example: subtitled films don’t do well)
  • Instead, to highlight content or actions, perform a ZOOM in the video editing software
  • When doing the VO, keep a consistent distance from the mic. I’d say 12 – 14 inches if you have a standalone mic. If it’s clip on or headset, then ignore this.
  • I like audible clicks and typing sound effects in tutorials.  In Camtasia, this is one click box.
  • Make sure the volume is fairly loud, but not blaring on the final version … people always have their speakers wayyy too low
  • If this is an intro-style of video, it should be really fast, like 30 – 45 seconds (you are telling your audience that your service or product is as easy as 1-2-3 … so REALLY make it as easy as 1-2-3)
  • Unless you have an insanely complex form (and if you do, you might consider redeveloping it), when demoing a form being filled out, show the beginning of filling out a form, then do a blur transition to “fast-forward” to the completed form.  If you must, fast-forward blur to the challenging parts of the form and in your voiceover, give users clear, concise direction.  Or, like I said, redevelop.
  • Break non-intro tutorials into 1 minute to 1:30 chunks
  • Use an SEO-friendly player like Longtail

That’s a messy, incomplete set of guidelines to making an effective tutorial.

Amazing Web Software: Aviary

aviary_logoAviary has an impressive suite of web-based software that is free to use.  They have built scaled-down versions of Photoshop, ImageReady, and Illustrator that run within a web browser in Flash (not Air, for the techies).  In addition, they have a multi-track sound editor that has the same core functionality as Apple’s Garage Band.  Although Aviary is pushing the limits of what Flash is capable of, their execution is outstanding.  This software suite works and works WELL!

Although these apps are lighter in features than their desktop counterparts, they are some of the most advanced web apps I’ve yet used.  All are incredible models of how web-based software should work.  These are the prefect tools if you have to do a little photo editing on an underpowered laptop or netbook.  If you’ve ever had to edit some photos when you’ve been on vacation with your old junky laptop, I’ve got the solution to your pain.  Photoshop on a crappy laptop just grinds your productivity to asnail’s pace.  But these apps fire up in about 30 seconds and you’re ready to go.  Working with large graphics files is nearly instantaneous because all the heavy lifting is being done on Aviary’s servers.

I highly, highly recommended Aviary as both a top-notch tool and an example of how to build web-based software.  Check it out here.

Way Kuler!

Pronounced like “color”, this flash application built by Adobe is great for creating a nice color scheme to use on a website design or elsewhere.

http://kuler.adobe.com

Favicons: Small Graphic Thingys in the URL

“I want one for my website! You know that square graphic thing-a-ma-jig next to where I type my website name!”

They’re called favicons (not to be confused with decipticons) and these 16 x 16 pixel sized graphical icons in .ICO format are found in the URL of the web browser.

To create one you’ll Photoshop, a plug-in from Telegraphics, some sort of design skills and patience to work with a small palette.

To post live on your website you’ll need to upload the file to your servers root directory or wherever your website index file resides and may also need to add this line of code to your page:

<link rel=”Shortcut Icon” href=”/favicon.ico”>

Full tutorial

Favicon

Adobe Taking Photoshop Online!

A few days after I posted a blog about Google’s online apps waging war on Microsoft more big news comes from a major player in our field. Adobe is taking it’s flagship product Photoshop online.

Adobe recognizes that the future of software is to be a hybrid offering both online and installed versions.  They’re also following the lead of companies like Google who benefit from ad supported online services and subsequently are bringing both Photoshop and the new Adobe Remix (a web based video editing tool) to the internet.  Released dates are scheduled within next 6 months.

To quote Borat “NIIIIIIIICCCCCCEEE!”

Full story from CNN

My Favorite Web 2.0 Feature

Web 2.0 sites are totally focused on the user experience addressing even the simplest things. My favorite so far has to be the “suggested phrases” which appear below input boxes as you type. Sites like Snap.com utilize this perfectly and they not only save you time typing but also offer alternative phrases you may not have thought of. Even better is that they also show you correct spelling and for 3rd grade spellers like myself  … I say thank you very much! Without it, I’d have a tough time dining out for always punching in typos like “resteauront.”

2007 and the Technologies Our Clients Will Want this Year!

Welcome to 2007 and Happy New Year!  Lots of great opportunities in the web development world this year and just like each year before it some cool technologies and ideas will emerge and some will fade away.  And although personally I prefer to stay on the cutting edge of technology, the reality is that my business and my business clientele is about one or two steps behind.  Not a bad thing of course, in fact staying a step behind helps reduce the risk of investing into any unproven technology or concept thus wasting time and money.  So, with that in mind here are some things that we predict will be a hot topic for both our fortune 500 and small entrepreneurial clients in 2007:

Video in Flash

Take a lesson from YouTube and note that an ideal alternative to video formats quicktime and windows media to display on the internet is Flash. You’ll have less trouble with your audience having to download plug-ins, codec and compression conflicts and potential streaming issues if you embed your video in flash then post online.

Using Non-Stock Image Search Engines to Spark Ideas

When creating graphics for your website stock agencies like iStockPhoto and Corbis are usually the first place artists go before they start drawing.  These agencies have a large selection and will meet all of your legal requirements but sometimes the imagery can be a bit too “conservative” or “canned.” So, when you need to get more creative try exploring image search engines like Snap or Google Image Search.  Google has slightly better results but Snap has a cool flash interface.  Both of them however will deliver image results that you won’t expect.  In fact, the images you will find, although most likely not legally usable for your project, could spark that idea and in turn motivate you to either pick up your digital camera or get creative using Photoshop and purchased stock imagery. 

www.snap.com

images.google.com

Original Signal: Great Design for Impatient News Junkies

Damn!    These dudes (or girls) nailed it … the design/layout that is.  Go to OriginalSignal.com and you’ll see a great way to display multiple RSS feeds in a tight design with perfect use of ajax mouseovers.  I’ve shown this site to two clients already, and both were “When can we have it?” Expect to see some topLingo development in this style very soon and happy clients as a result.

www.OriginalSignal.com

Jpeg or Gif, What File Type When?

Creating imagery for the web is nice balance of quality over file size.  You have a choice in file types of either a JPEG or GIF and what to use when totally depends upon your subject matter in the image.

For instance, if your image is mostly photographic like a sunset scene or a portrait of a person, we call this RASTER based and always use the JPEG file type because JPEG’s can handle thousands more colors than a GIF can. If your subject is illustration based like a company logo this is what we call VECTOR based and always use the GIF file type. If your image contains a mix of photographic and illustration subjects (Raster & Vector) JPEG is a safe bet.   HINT:  always save your JPEGs at 60% to 70% compression for optimal quality and file size.

Client Testimonial

See what is being said about topLingo.

ZyXEL Communications

"Just a brief note to express my satisfaction with topLingo..." ZyXEL interviewed many firms when planning a complete overhaul of its large and outdated website. We've got a great many products that formerly had not been properly categorized, making visitors' searches nearly impossible.

Case Studies

Tap into our design chi.

topLingo Portfolio

Stalk Us

We're on the grid.

  • LinkedIn topLingo
  • flickr topLingo
  • twitter topLingo
  • facebook
  • YouTube topLingo
  • vimeo topLingo
  • RSS topLingo

Make Contact

Get in touch with us.

Call: 1.877.87LINGO

Email: us@topLingo.com

topLingo Location2 Venture
Suite 450
Irvine, CA 92618
Map It / Get Directions