Posts Tagged ‘animation’

Design great HTML5 banners with Bannerwise

One of the most effective ways to market your brand online is through banners. Attractive, eye-catching banners don’t just play the part of getting customer attention they are also one of the most traditional-but-still-relevant methods of promoting your brand image. The easiest example of effective banner marketing is affiliate program banners. They have all the relevant information squeezed into a box sized attractive banner that’s so catchy that a significant percentage of people viewing them end up either visiting the affiliate marketer’s website or actually enrolling for it.

While using banners is one thing, designing them is an entirely different story. Actually, the way your banners perform depends to a large extent on the way they are designed. That’s probably the reason organizations really wanting to reap a significant advantage hire banner designers and marketers dedicated to the end. However, affording good banner designers is not everyone’s cup of tea.

So if you’re a professional just starting out, does that mean you have to lose out on online marketing? Of course not! With Bannerwise, you can design and use engaging banners at an affordable price and capture all the audience attention you want.

Bannerwise – Easily create beautiful banners!

Bannerwise is a tool that lets you easily design ad banners of different sizes for different devices like mobile, desktop, and laptop. Suitable for businesses of all sizes, this cloud-based tool provides users with an interactive online interface where users can either upload images and design custom banners or choose from a rich library of pre-built templates. With users across the globe raving about it, Bannerwise is well on the road to grabbing the spot of the most coveted online banner designing product.

Key advantages Bannerwise offers include:

  • Allows thousands of businesses to scale-up their banner production
  • Optimize their display campaigns
  • Improve their workflow

Here’s a quick glance at the best features of Bannerwise:

  • Enables users to create professional HMTL5 banner ads quickly and easily
  • Intuitive interface means no coding skills needed
  • More than 100 professional animated banner templates
  • Allows you to create one design and scaled it to fit all sizes and formats automatically
  • You can edit all your banners simultaneously and monitor the changes keenly
  • Banners designed with the tool are compatible with most popular ad networks
  • Banners are high resolution but low in size
  • Professional animations in a few clicks
  • Allows easy banner optimization and testing

How the tool works

Trying a tool out before putting money on the line is the smart thing to do. So start using Bannerwise through the free 14-day trial by clicking on the dark pink button that says “Get My Free Trial” on the home page; doing that will redirect you to a sign-up page where you need to fill in your details. Once done, you’ll reach a login activate page with the message “We’re very excited to have you on board!”

But this is where the story sadly took a halt. Quite surprisingly, this message was followed by another one stating that we’ll be contacted by one of Bannerwise’s display experts soon. We weren’t sure why we were rebuffed like that when the next screen we should have seen was the tool’s dashboard. One reason we could think of was that we filled in dummy details since we simply wanted to check out how the tool looked in action.

But even after trying with legitimate details the message was the same. Either the platform was under maintenance or they weren’t accepting new registrations at the time, or maybe that was just the way they operated. But it was unusual. There was nothing more we could do except wait around to be contacted.

Pricing & Licenses

Bannerwise can be used in one of 3 flavors:

  • Starter plan that gives a single user access to create about 25 banners for €99 per month
  • Standard plan that allows up to 2 users to create unlimited banners for €239 per month
  • Professional plan that lets up to 5 users create unlimited banners for €399 per month

There are additional benefits associated with each plan with more features being available with the higher priced plans, obviously. Steep prices if you ask us, but then, if you strike the right cord with your audience through banners created using the tool, you’ll end up making much more that you spend.

  • Design creative, elegant, catchy HTML5 banners within a few clicks with @BannerwiseNL bannerwise.io/ via @supermonitoring

    Tweet this

Verdict

We actually couldn’t find out any pros or cons with Bannerwise because we didn’t get a chance to use it. At the time of writing this review, we were waiting for someone from Bannerwise to contact us and take things forward. So saying anything at this point would be futile. But we promise to put up a review of the tool’s working with its pros and cons as soon as we get the chance to experience it.

Build, Tweak, & Play with CSS Animations on Animista

One of the most essential parts of web development is finding the right look-and-feel for what you’re building. When working on a project, web designers experiment with tons of themes, customizations, animations, and other aspects to find exactly what they or their clients like. And CSS plays a major role in such web designing. Typically, web designing with CSS involves putting in the code, watching how it turns out on the website, tweaking the code a bit, then again watching the results, and so on. It’s an iterative process involving considerable time and effort. And for someone who’s new to CSS, the whole thing can turn into a nightmare since he’d have to research to find the exact lines of code that can result in the effect he want.

Although it’s a part of the job, it is natural for designers to feel exhausted and frankly, annoyed with it after some time. But that’s just how the process goes. There isn’t really anything anyone can do about it right?

Well, not actually! With Animista, a lot can be done to ease CSS based web designing; actually to the point of making it click-based. Want to know how?

Animista – the wonder tool for creating and testing CSS on the fly!

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and save only the ones you actually wish to use. It’s like a supermarket for CSS animations. You visit, you tweak and play around, you consider options, and you pick the stuff you like. The online tool contains a considerable amount of animations that have been organized in a meaningful and accessible way so that they can be easily reused on different projects. What started off as a small personal project for a web designer, has shaped into this online playground which contains a collection of pre-made animations that can be tested with various options like easing, delay, duration and others. Once a user is satisfied with his selections, all he needs to do is save the code for the animation and he’s done. The work which would have taken hours to research, build, and test, squeezed into the work of minutes – that’s Animista for you!

Here are the best features of the tool at a glance:

  • Generates CSS animation code at the click of a button
  • Contains pre-designed motions like slides, transforms, swings, shade dump animations, and more
  • Supports exporting generated code
  • HTML5 FileSystem API based downloads supported in Chrome browser

Now, let’s start playing!

This is how it rolls

The tool’s homepage is a bit confusing to be honest, but you can view that as a sign of uniqueness too. When you visit the page, all you can see in the name of the tool and a ‘Try Me’ button next to it. That’s it! No scroll-bars, no menus, no footers, nothing. For a moment you start wondering if the page has loaded properly or are some elements still pending. Once you’ve figured out that you need to click on ‘Try Me’ to proceed, you’ll land up on the tool’s dashboard. And everything will instantly become clear.

Here’s the working of the tool explained step-wise:

  • Instead of the black box in the center of the screen, select an object which gets affected by animations. For this click on the drop-down named “select object” in the Options section on the left (try the card (hor-flip) 3D object)
  • Browse through animation options displayed within circles on the top and play with various options like easing, delay, duration etc. You should be able to see how they affect the animation on the spot
  • You can change animation attributes through the Options section of the left. Everything will show results instantly
  • When you see something you like just hit the ‘heart’ icon on the upper-right corner of the animation panel. Once you do this, several options will become available on the top-right corner of the screen.
  • Rinse and repeat until you are happy with your picks. You can see your favorites at any time by hitting the “Funnel” button or click the “Trash” button to start from scratch.
  • When you are ready, head to download screen by clicking the ‘Download’ button or download link in main navigation. If you use Chrome browser, hit the download button and check your download folder. If everything went well the ‘animista.css’ file should be there.
  • Alternatively, you can generate the code for the animation by clicking on the “curly braces” icon on the upper-right corner of the animation panel. When you see the code, simply copy it and paste it into your favorite code editor.

What we like and what needs to be improved

Needless to say, a tool that offers such flexibility, variety of options, and ease-of-use and is also free is a clear cut winner. However, Animista does have a lot to improve on. This includes direct download support for browsers other than Chrome, more object options, and a brief explanation of what the different options on the left exactly do (it’s mostly try and find out for beginners right now).

  • Build, Tweak, & Play with CSS Animations on animista.net/ @cssanimista via @supermonitoring

    Tweet this

Verdict

We like Animista, and so do a lot of designers across the globe. A few more enhancements and sometime later this tool could be one of the simplest-yet-most-useful tools out there.

Whiteboard animation made easy by VideoScribe

Vibrant colors coming to life, hand drawings of complicated charts, ideas that demand a world of their own; you get all this and more if you have your animation down pat! With the increase in its trend, animation is one of the most sought-after marketing techniques. It is widely used in branding, imaging, education, and a lot of other fields. Until now, Microsoft PowerPoint was the popular choice to help with those arrow tricks and zooming gradients. But that has changed; with the rising demand for cool animation tricks, comes the increase in the number of animation software options available in the online market. However, one fact remains established: Animation is the key to any marketing proposition you make to capture your audiences’ attention.

Now that that’s established, if you wanted to use animation marketing for your latest project, how would you go about selecting the right tool? Of course you’d need something easy to use so you can avoid the need of seeking help from a professional. At the same time, you need to avoid doing a sloppy job of it. You need to ensure that the end product looks as good and as professional as an expert would do it.

That’s exactly where tools like VideoScribe come into the picture.

VideoScribe – Making Doodling Fun!

Created by Sparkol in 2012, VideoScribe has seen a surge in their number of customers, and for excellent reasons too. They are at the top of their game when it comes to whiteboard animation, and have gained customers in not only the marketing industry but also in government agencies. VideoScribe has been used to create presentations by the US government, the Swedish parliament, and the UK government.

The animation software allows you to create engaging presentations without the help of a professional. It can be installed as a desktop program on both, Mac and Windows. What’s more, you can download its application on tablets running Android or iOS. The interface that VideoScribe provides is intuitive. A little playing around with the application and you will know what all the icons do and what templates are available. Additionally, you get guidebooks and tutorials to help you create engaging presentations.

Some of the most attractive features of the tool include:

  • A huge library of high-quality images to add to your presentation. You have the option to purchase premium images if you can’t find a suitable free one.
  • Support for video size and resolution modification.
  • Vast collection of royalty-free music to add your video.
  • Voiceovers can be imported or recorded.
  • Ability to add your own watermark / logo (premium feature).
  • MOV, WMV, and AVI file formats for your video output. JPG and PNG sequence offered too.
  • Facility to share whiteboard presentations on Facebook and YouTube or covert them to Microsoft PowerPoint presentations.
  • Saving projects online while working on them offline.

Created on one device, your VideoScribe presentations can be downloaded to multiple other devices.

Tool working

After you have downloaded and installed VideoScribe, you can start creating your very first scribe. While the software does come with a guidebook and tutorial, here are a few easy steps that will help you monitor your ideas come to life:

  • Launch VideoScribe and click on ‘Create a New Scribe’.
  • Click on ‘Add an image to the canvas’ and type what you are looking for in the keyword search field.
  • After you select the image, you can make changes to its resolution, size, or color in the ‘Image Properties’ window. All effects that you add to your image come with a preview.
  • Click ‘Add text to the canvas’ and type the text in the ‘Add text’ window. You can change the font, size, and color of the text.
  • Click on ‘Add a chart to the canvas’ and select the type of chart, dates for data depiction, and color in the Add chart window.
  • Click ‘Add or change a music track for this scribe’ and select a track by browsing for it in the ‘Browse music’ window.
  • Click ‘Add or change the voiceover for this scribe’ and click Record in the Voiceover window.
  • You can also change the background paper for your whiteboard presentation by clicking ‘Change the paper texture and color’ and selecting one of the available options in the ‘Paper options’ window.
  • Click ‘Select a different default hand for this scribe’ and select one of the options in the ‘Select hand’ window. You could even add something of your own by clicking the ADD YOUR OWN button.
  • To save your creation, click on Save or export this scribe -> Take a single snapshot to a PDF document. To save the scribe locally, type the name of the scribe in the ‘Save scribe’ window and save it on your system. To save your scribe online, click on ‘Save (export) online’. To export your scribe, click ‘Export to a “scribe” file’. To import your file back, click ‘Import’ and save it locally.
  • To publish your project, you must create a video file. Click ‘Publish (render) your scribe video’ and you will be able to share your video on Facebook and YouTube.

Pros VS Cons

Why we love VideoScribe

  • Ease of use.
  • The massive library of high-quality images and sound tracks.
  • Eliminates the need of a professional.

What we wish it would offer

  • Something that the others in its competition are offering: sketch to video. The sketching of a video before it plays is a good-to-have feature, and bundled with VideoScribe, it would really be the whole package.
  • The lifetime package of this software does come at a price too steep. If you are just starting out, investing in an expensive product like this one might not be a good idea.
  • Create whiteboard-style animation videos easily with VideoScribe videoscribe.co/ by @SparkolHQ via @supermonitoring

    Tweet this

Verdict

Overall, we’d say that VideoScribe does the job and does it well! The best part about it is that you can find out for yourself and test its mettle by trying it out for free. So go, download it right away!

Website-monitoring.com service greatness secret revealed: Superheroes (video)

See how www.website-monitoring.com REALLY works!

  • Browse Categories

  • Follow us



  • Super Monitoring

    Superhero-powered monitoring of website or web application availability & performance


    Try it our for free

    or learn more