10e20 Blog

“Contact Us”, “Learn More”, “Click Here”, “Free Money!”. OK that last one I made up, but we have all seen these calls that ask us to do something.

Calls to action in interactive media are usually buttons or links that begin a process. Making these important calls stand out requires some designing further than, and in addition to, the underlined hyper link.

The text and words used in calls to action are topics of another discussion. For this tutorial I am focusing on the design elements of a graphical button and specifically simple gradients with a 1 to 2 pixel gap from the border created in Photoshop. This tutorial is similar to the previous one on creating cool graphical text, but changing a few things and applying it to buttons.

Last week I wrote about how to create great header graphics for linkbait pieces. Now I would like to go a bit deeper into that and explain how I create graphical text, text that is an image, that stands out and screams to be noticed.

Like the last tutorial mentioned, it is important for your article to have an image associated with the content of the article. When you go on Digg and see a link to a story without an image or photo what do you do? Well, I tend to not click on that story and move on down the line. The same holds true, to some degree, to linkbait pieces and the inclusion of catching header graphics.

When you need to focus the attention of the reader to a certain area in the text or story pull quotes are the best method. Pull quotes are small pieces of the story or article that is being repeated and set in a larger size font and placed near the middle.

The idea is to pull the reader in further and also pull text from the main body of text. You have seen these allover, if you read an article online or in print today it may have had a pull quote in it and that may be the first thing your eye went to and read.

For this ‘How to…’ I am going to use a linkbait piece from PC World called 10 Cool Gadgets You Can’t Get Here-Yet. The piece tells about how often the coolest gadgets originate overseas and usually in Asia.

The information is interesting enough to hold my attention and I want to see which gadgets they selected and also find out what it is that I can’t get-yet.

However the main graphic header is obvious and could have been worked on a bit more to capture the interest of those people that may be on the fence about whether or not to read further into the piece. So lets get into how I would have used stock photos and created a more compelling graphic to try and lure some more eyeballs into the piece.

For this round of the ‘How Would I Do This…’ I am looking at an article on CNN called ‘How do you know your love is real? Check Facebook’. I am also going to tie in my previous post on the overuse of stock photography.

The article from CNN is a news story that is generating 100’s of comments and opinions from people expressing how they deal with relationship status on Facebook.

The photo used is great. I think it conveys right away the feeling of being watched while on your computer. But I would have pushed it one step further and incorporated the Facebook logo on the computer where there is a blue space on the back of the monitor. It seems so obvious to me and would add that extra bit of information to the photo to make it almost tell the story.

OK, before I begin let me say that I use stock photography. Stock photos are a great convenience. I sometimes depend on it, especially in a crunch or when I just need someone smiling and expressing happiness for a call center spot. That being said, there comes a time when stock photography is so obviously staged, politically correct fluff that screams “I am STOCK PHOTOGRAPHY!”

You all know the image, a group of happy employees who all are various ages, genders and races. Everyone is sitting around a desk pointing to a computer screen in some bland office interior.

Sometimes only the top few results are ever used in a stock library search and those photos are everywhere. How do we avoid these pitfalls of overused imagery and photography?

With great design and implementation you can break all the rules and still be successful. This, by any other means, shouldn’t have worked. It shouldn’t have reached the ridiculous number of 3,338 diggs after being posted just 4 days ago. It was Flash animation. It was an advertisement for a product. It was selling you something. But as the submitter ‘ad-hater’ #1 stated :

If all advertisements were done like this, I might actually start reading them.

What happened? It was a healthy combination of good design and smart implementation of a beautifully created product that spawned a much deserved buzz. Pink Floyd was selling their limited edition 40th anniversary 14 album box set called ‘Oh, By The Way’. The Flash animation was designed by a London digital creative agency called Bloc.

If we look at the presentation and design of the interface that the user controls to view the various albums in the set we see that it is very minimal.

The web is competitive. You need an edge. Social media marketing is becoming an essential tool to optimizing an online presence and creating strong connections with your audience. It is undeniable.

With billions being spent online each year, social media is gaining in popularity as a valuable resource. 4 out of 5 Americans read blogs and 57% of adults online watch or download videos. The stats keep going on.

Marketers are utilizing these tools to the best of their abilities and attracting more consumers than ever before. OK, sure- you need to have good content based around your idea, product or service. But some elements, when put in place, can add tons to that content. What are some of the elements that make a social media piece a success?

Treating your users or audience like a human being rather than a faceless mouse clicker is crucial to any relationship online. Some sites excel in their ability to inspire and encourage a user to go deeper, feel comfortable with the experience they are about to have and possibly visit again or tell a friend.

Professional design has this effect, from the spacing of information so that each block of content is far enough apart from the other so that the eye can flow smoother- to the copy written with personality, making an audience feel as if they are understood or even better part of the conversation.

Give me options
Look at this page that I am directed to after I create an account with Flickr.com:

It welcomes me with an ‘OK, you’re all set…‘ and then suggests some pointers to help get me started as well as some recent photo submissions from users that I can investigate further.

Designing content whether it be an article, landing page or a website you want to evoke a certain image. If you are selling then hopefully your image has a lot to do with trust. What makes one design more trustworthy than another?

Many things come together to form trust. Starting from the design of the logo to the text and what it reads, all the way to the amount of white space around all the elements.

Professionally designed work looks solid, the same holds true with the written word. Typos and grammatical errors express a disregard for the user and effects the image of your company being able to deliver good service. Some of these practices may be obvious, but worthy of review.