Think keeping a candy jar on your desk will make you the office MVP? Well, it will. But there’s another way, too—mastering Microsoft office with this 12-course bundle. Pay what you want for it at SitePoint Shop. This bundle contains $990 worth of Microsoft Office courses that’ll help you work faster and smarter. You’ll learn […]
Continue reading %Pay What You Want for 12 Microsoft Office Courses%
In this tutorial we’re going to build a chat application using Cordova and Socket.io. To make things easier we’re using the Ionic framework. I’m going to assume that you have already setup all the relevant SDK’s in your machine. And have installed Cordova and Ionic as we won’t be going through those steps in this tutorial.
Continue reading %Using Socket.IO and Cordova to Create a Real Time Chat App%
Several themes and some of the most popular frameworks don’t have pricing tables built-in and those who use them need ideal substitutes. A pricing table is going to be the first thing your visitors see which makes it important for you to display your product or service’s price the best way possible.
There are a number of premium pricing table plugins for WordPress available in the market that will help you fabricate well-designed pricing tables that will fit right in with your site’s theme. In this article, we’ll look at the Top 5 Premium Pricing Tables for your WordPress site.
Let’s get started.
Overview
The CSS3 Responsive Web Pricing Tables Grids For WordPress made it to the bestsellers list on Code Canyon. The plugin is in pure CSS and HTML which makes it lightweight and efficient. This pure coded table can be implemented among responsive layout – and is the best one for the job, too.
This plugin is one of the few pricing table plugins that does not require you to have coding knowledge.
The regular license costs $18 which gives users the plugin quality-checked by Envato and enables them to receive future updates for it. The developers, QuanticaLabs, provide 6 months of support with every license.
Features
The CSS3 Responsive Web Pricing Tables Grids For WordPress offers users a pack of two attractive styles of tables with 20 color variations to choose from. The plugin allows you to alter the dimensions of the pricing table, create unlimited rows / columns and add hover effects to it.
Continue reading %Top 5 Premium Pricing Table Plugins for WordPress%
Animation is not the art of drawings that move but the art of movements that are drawn - Norman McLaren
Everyone knows what animation is, but what about how to merge animation with web and mobile design for a better experience. A lot of sites these days are using animation in their designs but a lot of times it's just to show off instead of enhancing the actual content.
As with traditional design, there are concepts, principles, and the willingness to think outside of the box that will make animation work for you. If you start with these four handy tips you should be able to use animation to improve your site.
Think about movement rather than code. This will allow you to put more focus into the actual animation conceptualization process. Of course, there's a chance that not everything you design can be coded to perfection but that's when you'll make your artistic compromises.
[caption id="attachment_121178" align="aligncenter" width="400"]
Beginning with a "code focussed" mindset is more likely to undermine the personality of your animation due to worrying over possible coding constraints. It's a little like planning an illustration based on the colors of the pencil you have (and don't). It's the wrong starting point.
This undermines your reasoning for adding animation in the first place. Try to focus more on how you want your animation to move and look. Implementation details will work themselves out later.
At the end of the day, the coding is only going to make your animation move but it's the design process and mental execution that is going to make your animation human.
If your animation doesn't have a purpose, then lose it. For instance, animated spinners that serve as loading indicators have a strict, innate purpose but how many people think beyond 'everyone else is doing it' and 'it looks pretty cool'.
Loading animations are designed to give the user an estimated time between launch and arrival (or at least some sense of progress). Other menu animations might be useful for showing the user where a menu goes when you close it. They are both examples of how your animation delivers practical benefits to the user.
Unfurling navigations and spinning logos have been the poster-boy examples of a more decorative, less functional type of animation.
Remember that your animation is built for the benefit of the user, NOT the creator. This isn't your show-reel for Pixar.
Let's take a look at decorative, flashy animation versus something more purpose-function influenced.
As you see here, you can achieve virtually the same outcome without going all out on flashy, decorative animation. It gives a clean look and doesn't leave the user asking "whoa.. what just happened?".
It's difficult to animate well without having a solid understanding of movement. Effective motion animations rarely have tell-tale edges, stops or seamsThe key to good animation is less about pure artistic talent and more about the skill of mimicking real life motion.
Movement is typically shown as up, down, left and right, but just because your animation moves in these directions doesn't mean your motion will be organic. Factors like speed, acceleration, bounce and reflection should always be taken into account. It's important to creation seamless motion to maintain the illusion and fantasy. In other words, try to keep your animation almost "invisible".
It is easier to create 'invisible animation' when you understand how people view movement. It's a good idea to study the world around you.
Look at video game interfaces, particularly the titles put out in the last 3 years and pay attention to how you, as the user, track them. If you're not in the mood to watch gameplay then simply watch various animated films and shows. Most importantly, create real tests.
[caption id="attachment_121177" align="aligncenter" width="612"]
Try to refrain from sporadic or flashing movement. Keep it steady. Allow the viewer to enjoy and take in what they are seeing especially if the animation is crucial to digesting information. Movements the follows curves opposed to points are ideal, and soft movement over hard sharp twists and turns unless necessary.
Synchronization is key in animation. It is easy to want to design one element after the other all for the sake of trying to generate as much animation as possible, but this isn't the way to go. All of your animation - no matter how big or small - should be one homogeneous unit.
The best way to do this is by sitting down and creating something close to an animatic. These are animated storyboards composed of still images/drawings that have been edited and paced to match as close as possible to the final product.
Trust me when I say these are extremely helpful whether working on a website or a film. The image below is a storyboard I had put together for a music video. Needless to say, this wasn't the final structure but it kept me on track.
By creating rough sketches of your desired animation, you can see how everything will look which will allow you to catch inconsistencies early in the process. For example, your loading animation is a mix of spinning movement and blocked elements yet your navigation menu is a dropdown fading animation using circles. By seeing this disconnect, you can make the necessary changes or try something different altogether.
Doing small yet critical mockups and tests such as this can help fuel your overall message through harmonic motion. There are some great websites that do this perfectly. Reverend Danger and Every Last Drop use small snippets of animation to tell their story.
Continue reading %4 Tips for Using Animation in Design%
