Archive | Design RSS for this section

5 Ways to Increase Your Conversion Rate

Mobilecubix

Everybody has something they want to sell nowadays. So how do you stand out and gain the attention of the readers? By following these steps you greatly increase you chances of converting a reader into a customer. These tips are no secret, once you look around on your favorite websites you will see these tips in action and realize that your product has been neglected.

1. MAKE YOUR PRODUCT STAND OUT

People love pictures. Fact. Studies have shown that people are more interested in the actual pictures on a website than the words themselves. As pointed out in THIS article, the main section of a website and the top left are the hottest zones of the site that are viewed, so take advantage of that! The average person decides if they want to stay on your website in as little as three seconds, even shorter for our stumbler friends I’m sure ;). So you have to gain their interest as soon as possible.

You can do this by creating your main image and making it the center of attention. Make it clean, don’t crowed the space. Users need to be spoon fed, they want to know what to look at, so make it easy for them. It also helps to make it look pretty. Get a professional to shoot your product for you. If you have a kick-ass site, a low resolution picture of a product on your coffee table wont do it justice.

2. BODY COPY

This tip is just as essential as the image itself. If you have an awesome center image of your product but have a book of text near it, then users will not take the next step. The most important thing with body copy is to keep it short and sweet. But how can you do this effectively? Bullet points. They are the easiest to read and understand. If someone is skim reading (like most of you are now) then the chances of them actually retaining the info or even making sense of it goes up. This leads to a greater chance of them clicking through.

You also want to highlight the benefits of the product. Show the user that they NEED this product or service. By highlighting the benefit and putting them in bullet form, the chances of them wanting to know more and clicking through goes up.

Bullet Points

Damnnn, look at those bullet points!

3. CALL TO ACTION

Making your product stand out and having great body copy is all good and well, but by not having an immediate call to action to allow the user to move past the home page is one of the biggest mistakes you could have on your website. Without a clear and concise call to action the users will be lost and move on without even thinking.

To do this you should have your call to action be grouped with the picture and body copy. By placing it below the body copy the user will know immediately where to click to move onto the next step. Again you need to spoon feed the users, so make the call to action nice and prominent. A simple “CLICK HERE” at the end of your copy is not enough nowadays. Try making the call to action a stand alone part, just like the image and body copy. This is often done in a button format with an icon or some sort of text to entice the user even more.

You should also have call to action buttons at the bottom of your webpage. If a user decides to read more and scroll down it is much more convenient for them to have a button down there when they are done reading than to have to scroll back up.

Call To Action

A nice combination of imagery, bullet points, and clear call to actions

4. TELL THEM, DONT ASK THEM

Wording can play a HUGE difference in conversion on your website. Just look at THIS website to see different examples of experiments done to website. You will see that by just changing a single phrase you can increase your conversion rates significantly. A great way to get somebody to actually take the steps and click that button or submit that form is to simply tell them to. By telling somebody to do it, it shows confidence instead of asking somebody to do it. It’s all in the wording. Which sounds better, “Read More”, or “Click now to find out how I made millions”? Phrases like “See In Action, Sign Up Today, Download Now, Buy It!”, all work to convert your users into customers.

5. BRANDING

If you have non of the above, you should at least have some logical branding. You need to create an image for yourself that non of your competitors have, and you need to follow this as a template for all of your material. Each of your webpages should have the same branding and it should flow. If blue is a primary part of your logo, make key elements on your website blue, but do it subtly. Trust me, that looks much better than taking a red logo and making everything on the website red. You need to also transition this branding to all other aspects of your business like your business cards and so on. At least this way people will recognize who you are, even if you do not have the first 4 tips.

If you have a bland website, no branding, a bad header, terrible body copy, and no call to action…well then you better have some networking skills because users wont convert on your website.

Sony

Their branding flows from page to page and product to product

PUTTING IT ALL TOGETHER

The entire point of these steps is to have a higher conversion rate. Without each of these steps then your product will be lost and the user will move on. If you do not have web design skills and you care about your product, well then you need to hire somebody who can give your product the justice it deserves. If you at least try to follow these steps you will see an increase in traffic and conversion.

Remember that these steps compliment each other, it creates a sense of hierarchy. If you have a beautiful site with amazing body copy highlighting the benefits with a clear call to action right in front of their eyes, well then you are serving them your product on a silver platter. It can’t get any easier for the user to move to the next step.

Most importantly, remember that some things work better than others so you need to TEST everything. If you do not test, then you do not know what your results are, or could be.

Also, remember that this applys to anything you are trying to sell, wether its a product, software, a service, or a newsletter. These techniques can help you sell anything you want, just use your imagination!

Below is a list of webpages that use these techniques to their advantage.

Skype
Steam

Twitter

Free Vector Stickers

Hey everyone, I’ve been really busy lately and I haven’t been as active as I would like here. So here is a set of stickers to make up for my inactivity. I hope you enjoy them! Oh and you can use them for whatever you would like.

Vector Stickers

DOWNLOAD: Vector Stickers

 

Stickers

I used them for my Thesis project for aesthetic purposes, you can see them in action here.

Coming up this week I have another tutorial and an article about job hunting.

Use The Gradient Mesh Tool to Create a Photorealistic Image

Gradient Mesh

The Gradient Mesh tool is one of the lesser used tools in Adobe Illustrator, for some reason people seem to neglect its capabilities. I cant count how many times I would stumble onto an illustration and think it was a photograph, and I’ll be the first to admit that I never knew what the tool was. Thinking back to my early days of college, I would get frustrated that I had mastered Adobe Illustrator, but I still didn’t know how to properly use the Gradient Mesh tool. Maybe I was afraid of it? The tool is a little intimidating to learn, but with some  a lot of patience, you too can master the tool.

Every time I attempted to use this tool, I kept remembering why I never use it. Its hard to master, its complicated, and its time consuming. Yet, every time I sat down and said to myself “todays the day I master this damn tool” I would make it half way and stop because the results were…lets just say…not photorealistic. Well, in this tutorial I will show you all a very easy way to master this tool!

PREPARATION

The things we are going to need is Adobe Illustrator, preferably CS5, and any image that you wish to recreate with photorealism. You will also need a fine eye for detail and patience.You can click below to download the F-35 jet image that I am using or use your own.
Sample

STEP 1

The first thing you want to do is put your image on the bottom layer and lock it. After you do that, create a new layer above the locked layer. You should double click on the layer and name it L_Rear for left rear. Before you hit OK, change the color to something that will be easily viewable, I like to use gold because it shows when it is above light or dark colors.

Layers

STEP 2

Next we want to zoom in to the left rear wing. You want to be close enough that you can see all the details, but you can see the entire wing at the same time. Now press M to equip the rectangle tool, then make a general shape around the wing.

Rectangle

STEP 3

Now grab the mesh tool or press U for the shortcut. This is the trickiest part, all of your work will depend on this part, it is the foundation. Even so, its not that hard once you get the hang of it.

Start by command clicking the eye next to the layer you are working on. This will make that layer appear in outline mode so you can work without you view being blocked. Next, with the mesh tool selected, click once on any of the vertical lines of the rectangle. This should make one horizontal line dividing the box.

Box

Then select the Direct Selection tool, or press the A button. This is when you can start manipulating the shape of the rectangle. Your goal is to “trace” the shape with the rectangle. You should always start with as few lines as possible so just move the two center points in and start moving the corner points. It doesn’t have to be perfect right now.

Reshape

To really get a tight shape you need to manipulate the anchor points. By using the Direct Selection tool, you can grab the handles to straighten out all the shapes. This will give you straight lines and tight corners.

Anchor Points

Now start bringing in the rest of the points to meet the edges of the wing. You will notice that eventually you will get to a point where you cannot bring the line any closer without messing up the rest of the points. This is where you start putting in additional lines. Just like before, click the middle of where you need the line and then start manipulating it. Its that easy!

Notice

This is where you can be liberal as possible. You need the rectangle to conform to the shape of the wing so start adding line by line. Each time you add a line you need to correct all the handles and reshape them so they do not do a zig zag. Zig zags are bad when working with the Gradient Mesh. Every detail you see, add a point to form it.

STEP 4

Detail

This is what your wing should look like with all the lines added on. Remember that for more detail, you need more lines. Don’t forget to add some vertical lines in there too. I didn’t add many lines towards the top of the wing because there isn’t many details, but at the bottom there is, which is why there are more lines. Also, don’t forget that overall, this shape is rounded, so you need to adjust your handles to be rounded.

STEP 5

Now for another tedious step. Again, make sure that your layer is in outline mode by cmd clicking the eye. Once you have your shape finalized, you will be using the Direct Selection tool (A) and the Eye Dropper tool (I). I would highly recommend using the keyboard shortcuts because you will be using them a lot.

OK, now find a comfy position because this might take a while depending on the complexity of the shape. Zoom in extremely close to the mesh outline and simply select a point. Now press (I) and take the Eye dropper to select directly under that point. You now have made that point the color that it is on top of. command click the layer eye to see if it worked.

Color
A really good tip to help you get the details perfect is that the closer the lines are together, the sharper the lines of the color will be. That is because each line stops at the next. So a wide open point like the one I just showed you will spread outward to the next lines. That means if you have a really sharp detail that needs to end abruptly, just create a line right NEXT to it. That way it will stop where you want it. Notice how close some of my lines are, that is because I want the color to stop.

You might also notice that once you preview your finished piece that there might be a few stray colors or blemishes. This is because you are picking up different colors from the photograph. Simply click that point and grab the Eye Dropper, then select a color in proximity so that it blends evenly.

STEP 6

Finish coloring in each point, get comfy and toggle between the two tools. Remember to be working in outline mode so you can get the exact colors. If you need more points and details, you can add them with the Mesh tool as you go.

Finished

This is what the final wing should look like. See? It wasn’t so hard. It might not look like much on its own, but once you start blocking in the rest, everything really pulls together. You just need to do it piece by piece. When I started doing this I made the mistake of making all my original shapes too big, trying to fit too much into it. When in doubt, make it a new shape.

 

STEP 7

Now you need to finish the rest of the Jet, or whatever you are making. I wont walk you thought each piece but I will do a quick overview of another larger section to make sure you know what you are doing. I will be making the left wing, so make a new layer and name it accordingly. This wing will be made up of three shapes.

Wing Rectangle

First, I will do the highlighted part that is not in the shadow. Simply block an outline around the shape. Then, make one single mesh point going down the center, vertically.

Shape

Start shaping the section to trace the wing. It is okay that it overlaps into the shadow part, this will come in handy later when we are trying to blend all the pieces together. Now start adding in all the detail by adding more and more lines. Remember to fix all the handles to conform to the shape of the wing.

Wing Details

This is what the finished details should look like. Notice how it extends past the shadow. If you do not do this, then there will be obvious lines inbetween each shape. By doing this the points will blend making it seamless. Now do the same exact thing for the two shadows.

Shadow Rectangle

Shadow Shape

Shadow Details

Finished

Finished Outline

 

TIP

If you ever have two shapes that need to be blended, as in not have an abrupt line like the wing above, just grab the two closest points of both respecting object and choose the same color. This will ensure even blending between multiple shapes.

CONCLUSION

These are just a few pieces of a greater image, but hopefully I have given you enough to follow through and finish the Jet or whatever it is that you chose to work with. These techniques will literally work for EVERY image you would ever want to Gradient Mesh, all you have to have is a fine eye for detail, patience, and create many lines. Below are a couple examples on how I used the Gradient Mesh tool, I hope you found this tutorial useful!

 

Gradient Mesh Cover

Christian Bale Gradient Mesh

How did your Gradient Mesh come out? Post below for us to see!

 

How to Properly Design a Restaurant Menu

Menu

Tacky restaurant menus beware, more and more restaurant owners are realizing the importance of a properly designed restaurant menu. How many of us have gone to a kick-ass restaurant with great decor only to be let down by a subpar menu filled with clip art and stock images? Well, it seems that most new restaurant owners are revolting against this horrific trend, and I will show you what they are finally realizing.

AN EASY WAY TO MAKE MORE MONEY?

Ah yes, if only it were so easy right? Well guess what, it is! All it takes is the right sales person – your menu! Most restaurant owners put all of their time, effort, and money into making their decor stand out and making sure their food tastes just right. Whats the point if your number one sales person is an outdated mess with coffee stains? Customers will be confused and end up ordering what they don’t really want, probably the week old tuna that isn’t selling. I bet they wont be returning.

What the owners don’t seem to realize is that the menu is the ONLY thing in your restaurant that is guaranteed to be read by your customers, so you should be taking advantage of that! People are there for the food and drinks first, not the decor. So it helps that the entire restaurant and branding is cohesive, don’t make the menu an afterthought. Once you realize this, you can turn your menu into a marketing tool as well as a sales predictor.

Menu

So how does a well designed menu make you money? Well, that boils down to something called “menu psychology”, which was written about in The Wall Street Journal. It says that if you highlight your most successful dishes, then they will sell at a higher volume. You can learn more by reading about it in this NY Times article. Basically, you can tell your indecisive customers what to buy. This works just like a display in a store, you put your best items out for all to see. This works to your advantage in multiple ways. First, you can increase check averages and sell more items. Second, you can get rid of your least selling dishes, and put that money into buying more of the highlighted dishes. No more throwing out old produce because you don’t know how much to buy!

ALL YOU HAVE IS 109 SECONDS

Dave Pavesic, who has a PH. D btw, has given this subject matter a lot of time and research. He says that customers view a menu for an average of 109 seconds. This is the average time a customer will look at your menu and decide the fate of your restaurant. In that time, you have to advertise and clinch the sale. Now ask yourself, is your menu designed for this type of sales approach? A well designed menu is crucial for making sure it gets the sale. An easy to read menu that features highlighted entrees will guarantee that your customers will make the right choice, instead of just settling on something they don’t want. It will also increase the time the person will look at the menu, which will increase the likelihood of them ordering even more food. Think of it like this, would you rather look at a Ferrari or a Fiat? I bet you will be looking at the Ferrari a lot longer, and which one are you more likely to talk about with friends?

Menu

WHAT MAKES GOOD DESIGN?

You cant just throw together a menu with no thought behind it, even if it follows the menu psychology. It needs to be designed around your restaurant, it should all be cohesive. Does your restaurant have a sports bar niche? Well, then so should your menu. Is your restaurant gourmet? Then fancy up that menu!  It shouldn’t be random, every design decision should have reason behind it.

Want to know another way to get people to notice your menu items? The design world calls them “eye magnets”. If you put certain things on your menu that pops, then the customers eyes will be guided to them. Many restaurants use pictures of their highlighted menu items as their eye magnets. Mmmm looks good right? This only works if you are using images of your actual food, skip the stock images, get a photographer. Most people can tell when you cheap out on the images, especially when the photo is a different restaurant.

The positioning of menu items is also a science, but when the design works around the placement, you can accentuate your items. The average person looks at the middle of your menu first, then top right, bottom right, top left, then bottom left. You can use this to your advantage by placing the important highlighted items in certain locations that are appropriate.

Inside layout
This is the inside of a tri fold menu that I am currently working on. I used the menu psychology technique to highlight their important items. I also used eye magnets to attract the customers eyes to the food. Also, the aesthetics of the restaurant is reflected in the design.

CONCLUSION

Your restaurants menu is the most important piece of marketing that you could give your customers, it is your business card. Many have neglected this fact, but more and more restaurant owners are realizing this importance. It will literally pay for itself in no time at all. Hopefully after reading this post, you now understand why your competitors restaurant have been getting your customers. Now all you have to do is put in the time and effort that everyone else has, and your customer loyalty, check averages, and profits will all rise! For more in depth info on restaurant psychology click here.

%d bloggers like this: