The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages

By , August 16th, 2011 in Landing Pages | 32 comments

Not a designer? Not a developer? Not a problem.

You can make sweet looking landing pages that work. All you need is the willingness to try, a trash can for all your excuses, and these 5 awesome free tools that are like the swiss army knife for entrepreneurial hackers. Oh ya, you’ll need an account on unbounce.com. (Editor’s note: umm thanks! :)

Before I get into the details of the handy little swiss army knife of tools, let me put in the caveat that I am not a designer, I am not a developer, nor am I a professional marketer. I’m not a Mac or PC devotee. I don’t have PhotoShop or any other paid or licensed design software whether on my desktop or cloud-based. Nor do I know how to write CSS. I know enough HTML to be dangerous and can dig through CSS to find styles if I need to, but it hasn’t slowed me down.

I am an entrepreneur who needs to be able to do everything. Oh sure, I can hire people to do all of the above tasks but that is expensive and time consuming, especially at the early stages of the customer discovery and validation phase when the ROI is wildly unknown.

Without further ado, in the spirit of agility, running lean, and a just-f*&kin-do-it (JFDI) attitude let me introduce to you to the toolset.

Tool #1 – RoundedCornr.com

This gem of a website is handy for making buttons, tabs, backgrounds, and probably more. If you’ve ever tried scooping buttons and other little elements from other websites, it’s a real pain in the butt (and not that ethical either). The buttons are not big enough, the text can’t be changed, making them transparent can be tough, and in general, it sucks.

With this tool, you’ll be making hawt little buttons and tabs in no time. When I first started using Unbounce, I made square buttons and backgrounds that were barely good enough.

Okay fine, they sucked. But now, with this little tool, my pages have zip.

My favorite feature is the ability to add gradients that automatically gives you street cred as a designer, at least I think it does. To give you an example, check out the little screenshots I’ve provided below. Notice the rounded corners at the top but not the bottom. Also notice the dark grey to light grey gradient. But best of all, because the page looks so good, I upped the price and am making more money.

Tool #2 – ColorZilla, Firefox Extension

I’m red-green color blind so when it comes to adding colors to designs, I am like a fish out of water and can use all the help I can get. There’s nothing more painful than trying to pick a color from a palette of 1 bajillion colors. The preview box is small and then when you see the color in full, it looks hideous. This is particularly true for neon colors.

Enter ColorZilla. It’s like a floatation device in a sea of colors.

Author’s note: If you use Chrome, Safari, or heaven forbid IE, you can probably find an add-on or extension that is the same as ColorZilla. Just do a search for “color picker” in the add-on marketplace.

When I start designing a page, I usually find an existing website that I can use as a guide. For example, I was recently developing a page whose only colors are red, white and black. Naturally most text will be black, the background will be white, and everything else needs to be red. You guessed it, I opted for red on red navigation. Do you know how to pick two reds that are complementary? I don’t but CNN.com does.

I go to CNN.com, whip out ColorZilla, click on one shade of red, copy the HEX code, and paste it to a handy text editor (TextEdit on a Mac or NotePad on PC – both are bonus free tools that you should already be using) for future use. Repeat for the other shade of red and I’m off to the races. look below to see my example of red on red. It’s not earth shattering but it’s extra polish that gives the page more life. You get bonus points if you noticed the roundedcornr’s.

Tool #3 – Google Forms or JotForm.com

In addition to making landing pages look good, it helps to have some functionality, namely forms to collect information from customers. For example, I created a very basic unbounce lead gen page. Great, I find out the customers email, name, and get permission to call them back. But why stop there?

My thank you page offers a 5-minute needs assessment survey which delivers value and strengthens the brand. The best part is that the survey took me a matter of minutes to create and embed into a page branded with my logo.

How did I create and embed the survey, you ask? Easy, Google Forms or JotForm.com. I’ve used both and I prefer JotForm’s customizability better than Google’s. Google Docs doesn’t give you the thank you page customization that I want. It also has Google branding on it which sucks because I don’t want them taking credit for my work.

JotForm, meanwhile, is white labeled and as a bonus, they make it really easy to collect money with quasi-shopping cart functionality. If you’re selling an ebook or other electronic goods, this is a great option to try. Unfortunately, it t is only free up to a certain number of form submissions.

Weighing all the options, the potential cost of JotForm is worth it. Alone, the customizable thank you page makes it possible to track results in Google Analytics and Google Adwords, which is critical for measuring your results.

I could go into way more detail to create a how-to guide for creating and using forms but that’s for another blog post. I hope I’ve at least conveyed enough information for you to just start using one of these form builders.

Tool #4 – FreshBadge.com

If RoundedCornr.com is great for creating backgrounds and buttons then FreshBadge is great for creating round badges that can be used to highlight part of your offering with something that quickly grabs the eye’s attention.

For example, I wanted to highlight quantity discounts. I created a “$15 Off” badge and a “Quantity Discounts” badge. I ended up creating one using FreshBadge.com and one in RoundedCornr.com so I didn’t look like a one-trick pony. See the example below.

There are two or three other badge generators but I found FreshBadge.com to be the most versatile, albeit slow at generating the badge. I think it’s slow on purpose so you’ll spend more time reading the ads on the page. But hey, when you’re cheap, err, I mean frugal, like me, you put up with these minor inconveniences.

Others to try out are:

Tool #5 – Paintbrush or MS Paint

Last but not least, you need an image editor of some sort. My design skills, or lack thereof, certainly don’t justify a licensed copy of PhotoShop. Nor do I care to learn how to use it. I’ve settled for the lightweight and free option.

If you’re on a Mac, grab PaintBrush and if you’re on a PC, Microsoft Paint will do the trick. I seem to recall installing PaintBrush on my Mac but MS Paint is native to Windows. Just do a search for it in your Accessories folder.

Both are good enough for simple editing such as cropping or resizing. I have experience using Corel PaintShopPro and while it offers more functionality, I haven’t found the need to use it for any of my landing pages now that I’ve been using all the other tools above.

Summary

So there you have it. Five free tools: 1) RoundedCornr.com 2) ColorZilla 3) Google Docs / Jotform.com 4) FreshBadge.com 5. Paintbrush / Paint. I hope you jump right in and start making landing pages right away.

Am I missing any free tools? Please add your comments below.

– Stephan Wiedner

This is a guest post, entered in the 2011 Unbounce Conversion Fest Blogging Contest. All opinions are those of the author.

Stephan Wiedner is the co-founder of Noomii.com, the Professional Coach Directory, a Vancouver-based startup that matches people with their ideal life or business coach. Since its inception in 2007, Stephan is most proud of the way Noomii has evolved from an product-centric company to a lean and agile company that is committed to understanding and meeting the needs of its customers.

Comments

  1. Scotty Ward says:

    Great article! As a non-designer, I’m excited to learn about these resources. Nice work.

  2. Stephan,

    You have included some handy tools here that pretty much anyone can use. For that, I give you props.
    Tool #4 is a real find. I was just recently wanting to make some small badges and was hoping to find a simple tool to make it happen. Thanks!
    In the area of FREE and simple to use, GIMP is an open-source image editor that I use every day. Doing the simple tasks of scaling, cropping, etc. is a snap and there are more advanced tools that are comparable (if not superior) to programs costing hundreds of dollars that can be mastered with a little time invested. Also, like most open-source software, there are add-ons and plug-ins to do just about anything.

    • Yomar Lopez says:

      Two things that I love about your opening here:

      * You appeal to the bootstrappers like myself.
      * You appeal to the DIYers (also like myself).

      Even when you have the skills to get things done by yourself or with little outside help, it can be time consuming.. So having the right tools at your disposal is a MUST.

      I’m with James in that #4 is particularly handy. I love using Fireworks or Freehand but sometimes I just want to make something quick and simple without having to mess with alpha channels, masking, magic erasers, and unicorns. =oP

      So, really, these tips are great for hurried designers and folks that just want to “get ‘er done”.

      Great work here, Stephan!

    • Stephan says:

      Thanks James for the heads up on GIMP (an open-source freebee). It looks good if you are manipulating photos but I wonder if it is light-weight enough for the non-designers. It may require a little investment to learn how to use it. At least that’s my impression.

      • GIMP does have a little bit of a learning curve, but even non-designers (like my wife, don’t tell her I said that.), can learn to use it effectively.
        I have found it to be indispensable in manipulating photos and graphics. In fact, I build all of my graphics, banners, buttons, etc. in GIMP.
        For me, the capabilities it offers for the price: FREE make it really good.

  3. Kristi Hines says:

    Love the FreshBadge and related tools – I’m always stuck on what to do for little eye-catching graphics and those are perfect!

    • Stephan says:

      Yes, the badges are a great little find. They really help make a page seem more professional and eye-catching.

      I’ve seen a lot of landing pages use arrows and text that appear to be hand-drawn that really help to emphasize the important points. For example, check out http://www.basecamphq.com. Anybody out there know a good tool for creating those kinds of images? The photo editors I’ve recommended just don’t cut the mustard. They don’t allow you to rotate images and have a limited number of fonts.

  4. Marcus says:

    This is a great article. I have the same attitude as the author, I like to know how to do everything myself. Even if I end up outsourcing the task later, at least I can more clearly communicate what I want, and better judge the quality of the work produced.

    I’d add another suggestion for Tool #5. I find Paint.NET (available on Windows only) to be more powerful than MS Paint, yet still easy to use. Mostly, I use it to create custom headers for my WordPress sites. So far, Paint.NET fulfills my modest needs, so I haven’t had to plunk down the cash for Adobe Illustrator of Photoshop yet.

  5. Anna Sawyer says:

    Oh nooo! You exposed my secret gradient trick!

    While I’m coping with this, let me say that this is a GREAT post: très useful for anyone trying to fake it until they make it (everyone).

  6. Brian Massey says:

    The keys to good landing pages is helping the visitor to decide what to do and what is important. Color and shape are two ways to announce visually what matters. I love this selection of tools (though I hate MS Paint).

    Even a marketer that is mocking up pages can use these tools to emphasize what is important for a designer.

    New tools for the conversion lab.

  7. [...] Want to make a sweet landing page but you’re not a designer or a developer?  It’s easy peasy as long as you have The Non-Designer’s Swiss Army Knife of Free Tools! [...]

  8. RC says:

    I thought the point of unbounce was to provide all of this in their perfect landing pages.

  9. This is incredible. I will really use these tools to help with the design of my website. Since I don’t have a design background I thought I was at a complete disadvantage.

  10. Sam says:

    You should swap out #5 for the amazing program Paint.net – http://www.getpaint.net. It’s a free program.

    (And it’s far simpler than GIMP)

    • Stephan says:

      N.B. Paint.net is only for Windows.

    • Mark says:

      I’ll second that. Paint.net is amazing considering it’s free. And the best thing is it’s really simple. I tried Gimp but it’s a bit of an overkill for most stuff. The only thing paint.net really lacks is a built-in blur tool; but there are add-ons for it, so problem solved!

  11. [...] guest post, The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages, is a great collection of FREE and easy-to-use tools that will help even the most inexperienced [...]

  12. Stephan says:

    Cool, I just found a pretty decent looking button making website: http://cssbuttonmaker.com Check it out and tell me what you think.

    Again, anybody know of a tool to easily make arrows and text that looks hand written like on http://www.basecamphq.com?

  13. I used to be suggested this website via my cousin. I am now not positive whether this post is written by him as no one else understand such precise approximately my trouble. You are amazing! Thanks!

  14. Awesome post! My Photoshop skills are non-existant, and I’m always looking for new ways to compensate ;-)

    Especially Freshbadge.com is a really great tip!

    Thanks

    - Michael

  15. [...] Stephan Wiedner@noomiiThe Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages [...]

  16. [...] The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages - Ah and consider this article for related reading. Here you’ll find a lot of helpful resources, online tools achieving different professional design effects, which can be very useful if you want to do everything yourself: [...]

  17. [...] The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages - Ah and consider this article for related reading. Here you’ll find a lot of helpful resources, online tools achieving different professional design effects, which can be very useful if you want to do everything yourself: [...]

  18. [...] The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages - Ah and consider this article for related reading. Here you’ll find a lot of helpful resources, online tools achieving different professional design effects, which can be very useful if you want to do everything yourself: [...]

  19. [...] The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages - Ah and consider this article for related reading. Here you’ll find a lot of helpful resources, online tools achieving different professional design effects, which can be very useful if you want to do everything yourself: [...]

  20. [...] The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages - Ah and consider this article for related reading. Here you’ll find a lot of helpful resources, online tools achieving different professional design effects, which can be very useful if you want to do everything yourself: [...]

  21. [...] The Non-Designer’s Swiss Army Knife of Free Tools to Make Sweet Landing Pages - Ah and consider this article for related reading. Here you’ll find a lot of helpful resources, online tools achieving different professional design effects, which can be very useful if you want to do everything yourself: [...]

  22. Usman says:

    Great post. Just found it through Google. I especially like the first one, roundedcornr. This service is saving me a lot of time that was being wasted using Photoshop. Thumbs up. Added to my RSS feed. Thanks.

  23. Great post, Stephen. I’ve used UnBounce for a while and love it, but kudos for writing this article– a great resource, it’ll definitely come in handy as a non-designer/developer. Thanks!

x
Get actionable optimization tips delivered straight to your inbox.

You'll learn:

  • What it takes to build successful marketing campaigns
  • Why your landing page design and copy might be working against you
  • How to increase conversions while delighting leads and customers