The open source WordPress CMS is typically installed to fill the void as a blogging platform. Many webmasters also choose WordPress for handling static pages with a backend interface. But the additional library of free WP plugins can only add to the major publishing platforms which come right out of the box.

In this article I would like to share a few popular choices for adding user voting to your posts and pages. WordPress will allow you to edit the settings in your plugin backend admin. This means you can adjust how the buttons will display on the page and how they behave from user interaction.

I Recommend This

The plugin called I Recommend This is a bit newer yet also has incredible reviews. It has been updated to work with the most current release of WP which is 3.5.2(as of writing this article). According to the original project page we may not see a whole lot of updates in the future.

But this plugin must be one of my favorites. Very easy to install and it looks great on almost any platform. The user interface is modeled similar to Tumblr’s like feature. Bloggers on the social network will know about how this works. You also have access to an internal settings page for customizing the look and styles on the page.

WP Likes

For a more complicated example of user voting check out WP Likes and what it can offer. This plugin allows new visitors to vote on articles which they like the best. All anonymous votes are counted and ranked by IP address to eliminate duplicate voting. There are a series of shortcodes which you should add into the page. They look something like this:

[wp_likes] [wp_likes show="monthly"] [wp_likes show="weekly" count="10"]
    

Also the plugin can be used as a small widget in your sidebar areas. This will display your top liked posts of all time. It can be organized by a certain date/time and there is lots of potential. But in my opinion this will require a more detailed knowledge of WordPress to install and get running properly. It’s not impossible for a beginner, but just keep trying if you run into a wall.

WTI Like Posts

This plugin comes to us from Web Tech Ideas and it seems to be one of the more popular options on the table. The average rating is a whopping 4.9 out of 5! The reason for this is because WTI has released two separate versions of their script. A simpler open source plugin which you can download from WordPress for free, along with a pro version which costs $25.00 USD.

The list of extra stuff in the pro version is quite daunting. You have the ability to create new post widgets ranking the most popular/unpopular articles. Also the choice of 6 different CSS styles for the voting buttons. I think anybody who is interested should try out the free version first, just to get a sense of the plugin and if you could be using it on your website. WTI Like Posts is definitely one of the more advanced user voting plugins with an exceptional array of possibilities.

WP Postratings

If you have been looking for a star rating option then I might suggest WP Postratings. This has an extraordinary backend design which makes handling the plugin very easy on beginners. The user will have a choice of voting on your post from 1 star to 5 stars. Then when users reload the page a new average will be calculated based on the total number of votes.

You will have the ability to change different template tags within the PHP to output various lines of text. The customizations are a lot easier than you might think. I also really like how the plugin will directly show how many votes are on each page, along with the average star rating. This plugin is better suited for general use as it is easy to install, easy to customize, and not much work is required for upkeep.

WP Custom Voting

The brand new open source project named WP Custom Voting is a newcomer into the field. I think the interface is a bit generic and will probably require a few CSS edits. However the functionality is golden and it supports the most currently up-to-date version of WordPress.

The Ajax code is written to check a user’s IP and keep a list of user votes stored in the database. There is not much security required to keep everything running properly. I have not extensively tested this plugin on any of my websites, but after looking over the features it seems to be very straightforward. This is a bare-bones voting plugin for somebody who just needs an easy interface with a quick installation.

KK I Like It

In my own personal opinion the KK I Like It plugins seeks to push the boundaries on WordPress. The admin panel is very well designed, easy to manage, and provides a litany of options such as custom button styles and anonymous vote tracking. You can display Gravatar photos and usernames(if available) for each of the people who votes on your articles.

Webmasters who are running BuddyPress may find a lot more use out of this plugin because it ties directly into the core of WordPress. All the users in your system can share their opinions and it will be displayed right into the post template. Although I haven’t customized much of this plugin, it is not unreasonable to think you could edit the PHP to link back to a user’s profile page. It’s a plugin which is worth testing – but since it is in beta you may not want to use this for a live production environment.

I Blank This

I Blank This is clean, concise, and very straightforward. The backend itself has not been updated for a while and the official plugin website has since gone offline. It is unclear if the developer will return for future updates. However the features are so basic and easy to use that I would not believe it will be difficult to setup your own functionality.

The best way to test out this plugin is by quickly installing and seeing how it looks. The admin panel does not offer a whole slew of options, but you can also go into the plugin editor and directly change PHP codes to display in various styles. The biggest problem is that this plugin was only released as version 1.0 and has not been touched ever since. If you are looking for a solution which will be updated over time, check out some of the other alternatives in this article.

Kudos

The original JavaScript for Kudos voting was put on Github as an open source project. The Kudos WordPress plugin was created by ahoereth and also managed in a Github repository. I think this plugin brings a lot of different ideas to the table which you do not find in any other solutions. The animation is very outlandish and the user vote function triggers by hovering over the button for just a few seconds.

Check out the live demo from the original JS Github entry. The WordPress plugin will work exactly the same, but it also has a custom backend admin panel for rearranging the voting button. Kudos may be worth a try but it is certainly peculiar – in a good way! Test it out and see if it works for your website. But keep in mind there are tons of these voting plugins and you should not stop looking until you find the right one for your project.

Final Thoughts

Any number of these plugins will help to improve the user experience on your WordPress website. There are situations where it does not make sense to include voting features on your pages, or any posts at all. But accompanied by the right features you may be surprised how much influence can be gained through user voting. If we have missed any great plugins feel free to share in the discussion area below.

The post WordPress Plugins for Custom User Voting Functionality appeared first on Treehouse Blog.

Storytelling takes many forms. In the past, stories were told orally, with people telling and retelling myths, fables and even histories. As writing technology became more prevalent, we began to record our stories, and we told them in the pages of books. Now, our society is awash in different devices and technologies, and those traditions of spoken stories and printed stories are blurring.

Multi-screen narratives are being told across all kinds of platforms, pages and devices, making for truly immersive experiences. We are watching them, tapping them and learning from them. They immerse us in the storyteller’s world. This article outlines what I believe are the five essentials of telling multi-screen stories.

How I Fell In Love With Interactive Storytelling

First, a little background. My childhood was spent in Nigeria, West Africa. I am a member of the Tiv tribe, a group of about 6 million people clustered in Nigeria’s Benue River Valley. As a child, I heard a lot of Nigerian folktales, about animals, humans and even magic. In Nigerian narrative tradition, stories are often told orally, in front of a gathered audience. During festivals and cultural events, men even dress up in elaborate costumes and perform stories for the crowds. I have vivid memories of these stories and have always been curious about how they could be translated into something digital and interactive.

The Kwagh Hir, or Thing of Magic, my tribe’s largest cultural festival (Image: Naptu2)

Those fables are a piece of my cultural inheritance. They always seemed to contain essential truths about humans. Take the story of the Ear and the Mosquito. One day, the Ear steals food from the Mosquito and refuses to pay it back. In anger, the Mosquito visits the Ear every evening, demanding the food to be returned, annoying Ear all night with his buzzing. It’s an old tale, with many versions, but the moral is consistent: don’t steal from your friends.

Creating modern, interactive versions of these stories is possible, but how exactly do we do that? Let’s begin by talking about what I mean by the word “multi-screen.”

A Bit About Context And Screens

When speaking about multi-screen storytelling, remember that screens have different contexts, not only different capabilities. The same screen on which you carelessly watch videos at home becomes a closely guarded viewport when you’re watching a movie on a crowded train. The context in which people view stories is more important than the device’s specifications. When we tell interactive stories, we need to be aware of this, and embrace it.

I like to focus on the following screens:

• Sensors (Twine, GPS, Arduino, motion detectors, etc.)
• Mobiles and tablets (phones, tablets, laptops and everything in between)
• Flat-screens (desktops, TVs, etc.)
• Public and immersive displays (store kiosks, large stadium screens, projectors, Kinects, etc.)

Not all of these need to be used at the same time, because they won’t all be appropriate to the story you are telling. Context is extremely important.

Now, as promised, here are the five essentials of multi-screen storytelling.

1. Divide Your Story Into Separate Content Blocks

When we create multi-screen narratives, we need to find natural breakpoints in the story, places where the visual or narrative content can easily be separated. This enables us to deliver different segments to different devices, in different contexts.

Kolobok is a Slavic children’s story about the adventures of a round yellow cake. For the Moscow International Festival, a large team of designers and animators from SilaSveta Studio incorporated it into a truly fascinating demonstration of storytelling. Before the show, the team set up a large touchscreen at the children’s height. With their hands, the kids could manipulate parts of the animation by adding movement and color.

A public display for children to play with

For the show itself, the full story was projected onto the facade of a large building, allowing the crowd of adults and their children to watch the narrative unfold. Along with sound, it made for another discrete content block, one that closely resembled a 3-D movie.

The full animated story in front of a large festival crowd

While the touchscreen and the movie were different views of the same content, they could exist as independent pieces and did not have to appear next to each other. The SilaSveta team found the natural breakpoints in its story and created two separate visual experiences to match them.

Questions to Ask

• Where are the breakpoints in the story? Divide your content so that it makes sense in context. The practice of responsive design gives us numerous guidelines on how to do this.
• Can those content blocks exist independently? Sometimes, the answer is no, but it depends on the story. In the Kolobok example above, they can. In other interactive stories, such as Snow Fall from the New York Times, the blocks are chapters in a single story and should be kept together.

2. Offer People Multiple Perspectives

Bear 71 is an award-winning multi-screen experience created by Jeremy Mendes and Leanne Allison. The creators tell the story of a bear living in Banff National Park in Canada. It feels like a cross between a role-playing game and a TV documentary, and as a linear narrative with a non-linear interface, it works beautifully.

The Bear 71 story is told in a highly abstracted interface.

Multiple viewpoints are accessible. Online, you roam in a stylized landscape, watch crittercam footage from the forest, and otherwise live as bears do — freely. Even though it may look like a game interface, you are not so much “playing” as you are participating in a story. Watching real crittercam footage, you see what the forest silently sees. You also have the option to turn on your webcam (“stealth mode”) to see other users around the world, all watching the same story online.

During shows and installations, the team responsible for Bear 71 set up augmented-reality applications and motion-detection cameras, so that visitors could experience what it’s like to have their pictures taken with one. By playing with the augmented-reality apps and the motion-detection cameras at the installations, users got a bit of the same physical experience that the bears had.

Questions to Ask

• Does the narrative change when viewed from a different perspective? A variety of perspectives can make a narrative much more fascinating. Bear 71 forces us to see the world first from the bear’s perspective and to sympathize with its loss of habitat, but other viewpoints take a slightly different angle. The voyeurism common in our digital sharing culture takes on a different meaning when used for animal surveillance.
• What data sets can be used in the narrative? Bear 71 cleverly combines crittercam video, GPS data, cell tower data, augmented reality, and topographical data. The photographs of visitors to the installation provide an additional emotional layer of data. The data we bring into our stories helps to define additional viewpoints and characters.

3. Redefine A Tradition

As Western culture has moved more deeply into Nigeria, Nigeria’s traditions are weakening. I wanted to take a piece of my culture and put it in the cloud, instead of leaving it locked in the heads of our oral storytellers. That meant redefining how the stories are relayed, how they are saved and, most importantly, what messages they convey to the audience.

In 2011, I started a project named Pixel Fable in which I take those traditional stories and reinterpret them online. In essence, I’m creating an interactive archive of Nigerian stories. As mentioned earlier, the oral histories of Nigerians are rich, but capturing them and translating them into digital stories means they will reach a wider audience. About 25% of my website’s visitors come from the US, while another 25% come from Japan. Canada, France and Germany also send a fair amount of traffic.

Pixel Fable uses responsive websites, iOS apps and augmented-reality animations to reinterpret Nigeria’s oral history.

An introductory screen from “Cricket and Mud Brick,” a new Pixel Fable story built with the Tapestry app

I’ve relied on two primary contexts to reinterpret the old Nigerian storytelling tradition. The first is people on their tablets and phones, clicking on and reading the stories. The spread of mobile devices makes this inevitable — why not tell African fables in a more accessible context? The second is my attempt to update the moral lessons for our modern age. While the original story of the Ear and the Mosquito may be a funny tale about annoying insects, the lesson can be updated to speak about how mosquitoes spread malaria in Nigeria. There’s room to redefine our old myths for the 21st century.

Questions to Ask

• Will people love or hate the reimagined version? Not every fable or myth can (or should) be recreated digitally. However, if people have an emotional reaction to a story that you have designed and pushed out to multiple screens, that is usually a good sign.
• If people talk about your narrative, will it bring about change in society? Each Pixel Fable story has a message. Most fables do. Some revolve around love triangles, others around the wisdom of elders, and there’s even one about why you shouldn’t get angry at your friends. They are small messages, but put together, they force us to reconsider how we treat the narrative history of people in Nigeria and West Africa.

4. Immerse People In The Narrative

The Walking Dead, the famous comic and now TV show, used a polling Web app (AMC’s Story Sync, if you like marketing-speak) to ask viewers questions and show related content as an episode was being broadcast on TV. While the app was simply timed to each scene, it was an experiment in multi-screen storytelling that invited audience participation, not just audience attention. Polling has a gimmicky feel to it, but that probably came about as a result of Hollywood pressure and doesn’t reflect the value of the concept in general.

Polling and syncing apps extend narratives from the TV to the couch.

The creators also added mobile gaming to the mix, bringing viewers “into” the story in a completely different way, in different contexts.

All of these facets of each story’s arc enabled people to immerse themselves in this apocalyptic narrative. Jason Spero of Google notes the need for a seamless experience as users move between devices. Other people, however, say that a second-screen experience can be extremely distracting, forcing viewers to miss key parts of the TV show. It is the opposite of an immersive experience, they say, and is confusing to use. In my opinion, each content block should work independently to avoid putting users in this position.

Questions to Ask

• Will people forget where they are? I’ll be the first to admit that this is not always a good thing. I can’t count the number of times that I’ve almost missed my train stop because my head was buried in my phone. Context, not only device capability, is key. Do you want users to get lost in the story or just engage in a manageable chunk?
• Do the screens you have chosen feel natural? By this, I’m not referring to pixel density. That is simply impossible to control, and if the story if good, it won’t matter anyway. The screens that people choose will depend a lot on the tasks they want to complete, so make your story feel natural for whatever content block they are interacting with.

5. Design Contextual Interactions

Recently, a number of storytelling apps have relied on location to serve additional content, much in the same way that Foursquare or Google Maps do. The Silent History is a dystopian science-fiction story about children who do not speak. The iPad app contains the whole story, but by visiting certain geo-tagged locations, users can access additional content.

For a novel about children all over the US, inviting readers to physically go to where the story’s kids are makes perfect sense. The additional contextual interaction makes the story more layered and thought-provoking, in a way that a simple app would not be.

We use map data every day, to look for restaurants, check the weather, see road conditions and even check for public transit delays. Other contextual interactions make sense when creating digital stories: taking photographs, texting, sharing and saving information, even body motion. Use these, along with your UI and UX skill sets, to devise new storytelling methods.

Questions to Ask

• Does the device matter? With the rise of responsive design workflows, our content should not be device-dependent. Some things, however, such as camera or GPS functionality, may be integral to a part of your story, and so the device would need to be factored in.
• Should the interface be designed as a seamless part of the narrative? As people who work on the Web, we really have a strength here. If we choose to make the interface part of the story, then we can rely on our experience in building websites and content management systems.
• Will your story “remember” anything? As a child, I folded over the top corner of the page when I had to put a book down. It was a simple way to keep my place. With a narrative split across multiple devices, it might be necessary to design an interaction that flags where you’ve gotten to and then returns you there when you visit again. That all depends on the content, but the question does need to be asked. Everyone hates losing their place on the Internet and having to navigate back, so perhaps we should enable a memory in our stories as well.

Conclusion

We have conceptualized different uses of multiple screens to tell stories. All of us, from every corner of the globe, have intensely rich cultures filled with stories and fables. Using them to create interactive narratives is another way to explore the power of the Web, to wow people and to record our cultural history.

I would love to see what you come up with, or hear about other examples of clever digital storytelling.

(al) (ea)

© Senongo Akpem for Smashing Magazine, 2013.

It’s all about presentation. Ideas and concepts are great, but mean nothing if they cannot be properly communicated. To help others understand them, we may create prototypes or sketch out an idea to get to a meeting of the minds. Fortunately, in graphic design, we do that by creating mock-ups.

Most times when we create designs, it’s tempting to send a flat graphic, as is, to our client or out to our intended audience. It can work, but it’s much more effective when we have a way for people to actually visualize a design in its intended environment. It’s easier to understand a mobile app when it’s being presented on an actual mobile phone, rather than just a standard graphic in a simple size.

It’s best to have some photo-realistic mock-ups, but if you have vectors, that will work as well. Today, we’ve put together a bunch of PSD’s and actions for great, professional mock-ups. It includes anything from corporate branding to shirts and more. We hope you find something useful and great to use for your next project.

Interactive design

MacBook Air 

Perhaps you want to show off a web design, application design or even just a desktop background. Whatever it may be, this is a great mock-up that’s fully scalable and can fit any project.

Blackberry z10 PSD mock-up

You’ll find a ton of iPhone mock-ups all over the Internet. However, this new Blackberry Z10 doesn’t get nearly as much love as the iPhone. Fortunately, we’ve found this mock-up to help you show off your app designs and such.

White smartphones mock-ups

What I really like about this set of mock-ups is the flat color design they’ve used. It gives off an illustrated/vector that’s not only great for mock-ups but for design elements throughout a design.

Safari browser PSD

I’m not a huge fan of Safari as a browser, but below, you’re able to download a PSD that you can use with your web designs. It will help your viewers and clients see and understand what your web designs look like in their rightful environment. 

iPod Touch PSD mock-up

The new general iPod Touch is now available for presentations with this mock-up. Great for featuring new music apps and how they’ll work in their new environment.

iPhone 5 PSD landscape mock-up

 This iPhone 5 PSD is made using smart layers and is fully scalable. Also, the iPhone comes in black or white. This is great for when you want to show how different mobile apps work or how responsive sites are seen on an iPhone.

HTC 8x PSD mock-up

Again, iPhones are all the rage. This Windows phone is great for those of us who work on different interfaces and need to present our work in such an environment. 

Samsung Galaxy SIII PSD mock-up

Considered the second most popular phone in the world, it’s probably a great idea to get this PSD in your stash. This white Galaxy PSD is all vector work, so it can be scaled for high resolution work.

MacBook Pro retina PSD mock-up

Sometimes, it’s not just enough to put our web design in side of a browser window. It’s very common for designers to create mock-ups using the actual device, whether it be a laptop or desktop. This time we have the new MacBook Pro.

iPad PSD perspective mock-up

It’s not evident what exact version of the iPad this is, but it shows it can be extremely versatile. Again, this is a vectored image that is fully scalable to fit in any of your designs. It’s great to give another, interesting angle for your responsive designs and apps.

Responsive design mock-up pack

Of major importance in responsive design, is to make sure you know and understand how your design is going to look in all browser sizes. This mock-up pack is great for putting all that together and helping visualize it.

Chrome browser PSD mock-up

As my favorite browser, this is a go-to of mine for when I want to present web designs to clients. It’s fully editable, scalable and all around wonderful for web designs. 

Identity and print

Magazine/Book Front Cover PSD

We’ll get started with a pretty simple magazine or book front cover. It’s high-quality and great for print and easily editable with smart objects. This is great for presenting covers with a fun bit of perspective, rather than just straight on. 

Fold Photoshop Action

This is a fairly simple action that transforms your one-dimension graphic into a tri-fold brochure. This is great for adding that depth to letters or brochures.

Flyer/Poster Mock-Up

If your flyers an posters are A4 or A5 sized, this may be the mock-up for you. You’ll be able to present your flyers with a bit of pizzazz to your clients.

Die cut business card mock-up

Create any shape business card with this Photoshop action. Not only do you get a neat car shape, you get a great angle and presentation as well.

Photoshop action for book cover

This is one of the most sought out mock-ups ever. Lots of people like to use these for e-books and physical books, rather than just looking at a one-dimensional presentation of a cover. 

Corporate identity mock-up PSD

Creating a corporate identity pack is probably something you’re familiar with. This pack features many different elements, including a brochure, letterhead, business cards and more to help present your ideas for an identity package. 

Magazine mockup

I like this mock-up because it’s a standard magazine size to help you show off advertisements, editorial design and more to your clients. This is a must-have for print designers. 

Magic 3D Photoshop action

Sometimes, it can be really hard to present a logo. It can end up being really plain and boring. This Photoshop action has created a way to add a little bit of excitement to our otherwise mundane logo designs. 

Paper fold Photoshop generator

This is another simple Photoshop action that just ads a bit of style to what we be a normal graphic. Great for posters, flyers and any other type of print work. 

Poster mockup template (PSD)

This is one of my favorites, mainly because it adds a bit of something else to what would normal just be a flat design. This is a great example of how one could present something differently. This PSD is also very editable.

Bifold brochure mock-up PSD

It’s often hard to find a realistic, professional way to show our brochures. Most times you lose a side of the brochure, but with this mock-up, you do not. It shows you how to set up your files and where to place them on this wooden background.

PSD business card mock-up

If all you’d like to do is feature your business cards photo-realistically, this is a great PSD for you. It’s also print-ready for creating more professional mock-ups for clients.

Mockup 4 panel accordion

We’ve talked about tri-fold and even bi-fold. Here we have a 4-panel brochure, that’s created by using a Photoshop Action.

Stationary branding mock-up (volume 1)

I found a PSD like this more than helpful for when you want to showcase all of your work in a portfolio. Often times, we don’t design and print every piece of corporate identity first, so this is a great way to show it off all at once.

Apparel

Hoodie template PSD

With this hoodie PSD, you’re able to customize colors and designs while keeping the highlights and shadows in the original. This is a must have for anyone creating designs for hoodies.

Men’s vest PSD

Again, with this mock-up PSD we are able to customize our colors and keep our highlights and shadows to go with any design.

Shirt PSD V2 mock-up

This is an extremely easy PSD to use to show off your shirt designs. The instructions are simple and easy to understand. Colors are easy to change and highlights and shadows stay in tact easily.

V-Neck shirt template PSD

V-Necks are my absolute favorite shirt to recommend to clients. They’re trendy without being too fancy, so when I’m ready to mock it up, I use this wonderful template. The colors are easy to change and it’s even easier to add the design. 

Flat peak PSD

There aren’t a ton of mock-up templates for hats or caps. Fortunately, TheApparelGuy is hooking us up with this flat peak template for caps. You can change colors and even keep the cap sticker, if that’s your thing. 

T-Shirt mock-up

What I like about this mock-up is there isn’t a whole person and it’s also not just a shirt there by itself. It’s a nice in between for those of us who want to show our shirts but don’t necessarily want to feature a model. 

Food packaging

930g steel can mock-up action

Of course, you can see this template being used for any type of coffee can out there. I think there are many uses for this piece, and it’s even better as a scalable action. 

Paper chip bag mock-up

 You may developing the brand design for a new line of chips, popcorn, pretzels or etc. This is the mock-up action for you.

Paper cup PSD and action

Well, we all know what this is for and how to use it. This coffee cup mock-up is great if you want to try new designs or if you need a realistic version of a brand already well known. 

Photoshop PSD packaging

This page features an ice cream carton, two food bags, an two types of jars. This is great for your food packaging and can be scaled, as they’re vectors. 

Wine bottle mock-up PSD

Designers are becoming more and more creative when it comes to creating wine labels. They aren’t just regular rectangular stickers any more. In order to get a good visual on them, here’s a great scalable mock-up for wine bottles. 

Wine Bottle Photoshop Action

Perhaps you don’t want a black bottle for your wine. Or perhaps you find a PSD too hard to work with. This Photoshop action creates a vectored wine bottle for any of your uses. 

Miscellaneous

Wallet CD Mockup

CD and DVD packaging is an extremely important part of print designing for some clients. Though this is a specialized version of CD/DVD packaging, it’s definitely worth having to offer a professional presentation and a new idea.

Visa credit card mock-up

You never know what you’ll get into designing as your career progresses. Your next project may just be a credit card design! Now, with this mock-up you’ll be more than prepared for that. 

13 free professional mock-ups vol. 1

If you’d like a little more consistency between your mock-ups, this may be a great pack for you. It’s great for corporate/branding identifications and includes mock-ups for business cards, CD’s, clear cards, boxing and more. 

3D box generator

This Photoshop action can transform your designs into a 3D box in a matter of seconds. This is great for those of us creating a simple package for anything from food to software. 

What are some of your favorite mock-up templates? Do you have any to share? Let us know in the comments.

Create an HTML5 Browser Game from Scratch – only $19!