Tips For Creating High Selling Templates

Creating templates that will sell extremely well is something we all want to do, but it takes time and skill. Luckily, there are some tips we can take from the masters and apply to our own work. Here are some great ways to improve your templates and increase your sales.

Visually Appealing

You could be the best coder in the world but your templates won’t sell if they don’t look good. Make sure you aren’t making design mistakes and you take the time to polish things up. Buyers may not be able to recognize the little details of a design but it’s attention to detail that sets the high sellers apart.

Common Mistakes in Web Design

Common Mistakes in Web Design

“Many rejected templates here on Themeforest suffer from the same few common mistakes: typography (font, line-height, letter-spacing, color), alignment (grid), and spacing (padding). In this tutorial, we are going to take a closer look at how to avoid these common errors.”

The Importance of Color in Web Design

The Importance of Color in Web Design

“All too often, I see a great design concept with a poor choice of colors. Part of what makes a great web design “great” is layout, typography and color. When each of these aspects work to compliment each other, great design is born.”

Customize those contact forms

One of the most neglected aspects of web templates submitted to Theme Forest is the contact form. Author’s probably spend the least amount of time with this element. Sexy and creative contact forms are something businesses are certainly going to look at since their clients will be using them.

contact form

Check out “Web Form Design: Modern Solutions and Creative Ideas” for more examples.

Establish a strong visual hierarchy

Your job as a designer is to make it easy for visitors to quickly and easily view the content within the design. Establishing a strong visual hierarchy helps guide visitors through content in order of importance and enables them to find what they’re looking for faster. If a visitor can’t find what they’re looking for within a few seconds, they’re likely to leave. Without this visual hierarchy, templates tend to feel awkward and uncomfortable. Potential buyers are much less likely to purchase templates without a strong visual hierarchy.

The Iconic HTML Template shown below establishes a great visual hierarchy creating an easy “z-eye flow”. This is one of the best selling templates at Theme Forest and is relatively new.

Iconic HTML Template

Read more information on Visual Hierarchy in Web Design.

Solve Problems

Theme Forest is in business because it solves problems. People need website templates, themes, etc. and designers need to sell templates, themes, etc. Theme Forest puts authors and buyers in touch. As a result, Theme Forest (and Envato) has been quite successful so far.

If you want to be successful, solve problems. A perfect example of this is content sliders and tabs. Many authors are tired of seeing this everywhere but it’s so popular because it has solved a problem for buyers. It enables people to display more content in less space.

Bluelight HTML Template

The Bluelight HTML Template provides several features that provide solutions for buyers and is our third highest selling HTML Template at Theme Forest. The two highest selling templates are Admin Skins. :-)

The Golden Ratio in Web Design

The Golden Ratio in Web Design

The layout of your design will have a pretty big effect on visual hierarchy, “z-eye flow” and balance. If you’re not familiar with the golden ratio or the rule of thirds then it’s definitely worth looking into. Properly proportioned layouts and elements in templates create a more natural and comfortable flow since the golden ratio is all around us.

Pixel perfect details

Web designers are pixel pushers, there’s no question about that. As such, it’s important to pay attention to every pixel we use in our designs. Below is a shot of our highest selling HTML Template, “Complete Liquid Admin Control Panel”.

You can’t quite see the details in the reduced size below so check out the full view here. As you can see, the author of this template has paid very close attention to the small details that make this template really exceptional. From the web 2.0 gradients to the borders and edges at every point, even the footer.

Seriously, take a few minutes to really analyze the detail to every element in this template.

Complete Liquid Admin Control Panel

Functional and Flexible

Ok, so you’ve made the most beautiful design in the world but it still isn’t selling like hot-cakes, why? If your template isn’t very functional or flexible, people aren’t nearly as likely to want it. Design is important but a good design is only as good as the structure it’s built on.

Examples and Tips for Great HTML/CSS Formatting

Examples and Tips for Great HTML/CSS Formatting

When people buy your template, the first thing they’re going to do is start customizing it. That means they’ll be digging through the markup you’ve written and if you’ve done a poor job of formatting it, it’s going to make their lives suck. In turn, they’re going to give your item a poor rating. If you haven’t already, start developing good markup formatting habits. It’ll save you time, money and grief.

15 CSS Tricks That Must be Learned

15 CSS Tricks That Must be Learned

Once you get familiar enough with CSS, you’ll be able to write more flexible and less bloated code. Learning the “tricks” of the trade will help.

“As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.”

10 Reasons Why Your Code Won’t Validate (and How to Fix it)

10 Reasons Why Your Code Won’t Validate (and How to Fix it)

If your template doesn’t validate when we review it, it won’t be accepted. Make sure your HTML and CSS files are valid before submitting.

W3C validation isn’t very forgiving at times, but it allows you to see errors that are generated by your markup. Lots of errors and warnings thrown by the validator are a good indicator that your XHTML isn’t in very good shape, and might not look consistent across different browsers. Here are 10 sneaky validation problems that trip developers up, and how to avoid them.”

Quality, Quality, Quality

Remember that quality takes time and attention to detail. I see lots of templates that very clearly look like they were rushed. I know these authors can do better but they’re anxious to start selling templates and it shows. Be patient and make sure that every aspect of your template is done at the best of your abilities.

When you take the time to provide the best quality work, buyers will take the time to consider purchasing it.

Provide an elements overview page

Including a page with examples of content styles like headings, text, tables, forms, etc. will help buyers see that you’ve taken the time to provide styles for every aspect of your template. It’s really helpful for them to see the examples in one place but you can just as easily spread these examples out among separate pages.

elements overview page

Provide a live preview

Some authors argue that by providing a live preview you take the risk of someone stealing your work. That is true but the person who wants to steal your work isn’t going to pay for it anyway. You’re more likely to gain more sales by providing a live preview to potential buyers.

live preview

Provide in depth documentation

I see a lot of templates with documentation that is barely enough to get by. Take a few extra minutes with this aspect and write more in depth documentation to help your buyers understand how you’ve built your template. Another great idea is recording a short screencast demonstrating how to use the template.

contact form how to

Include common features

Almost every website has some form of contact form (among other things) and I know lots of people who only buy templates with contact forms included. Include features like this and others in your templates to snag some extra sales.

Awhile ago Jeffrey put together a great little tutorial including source files for a simple and easy to use contact form.

Promote Your Work

Promoting your other work at the end of your item descriptions will give you more of a chance for more people to see more of your work.

You can also brand your thumbnail images to help create an identity for yourself.

promote your items
12 Creative Ways to Promote your Theme

12 Creative Ways to Promote your Theme

“While quality is the key factor in how well a theme will sell, there are many techniques and tips one can follow to help increase the chance of a sale. Taking a little time to promote your work and your themes is sure to be reflected in your number of sales. Today, we will go over 12 creative ways to promote your ThemeForest themes.”

Use Twitter

Use Twitter to get input from other people as well as share your newly accepted items. It’s a great way to get help and/or promote yourself and your work. You can follow Theme Forest to see updates on recently accepted items as well.

Conclusion

Hopefully these tips will help you increase sales and become more successful. As you can see, they’re working for a lot of authors already. If you have some additional tips you would like to share, let us know in the comments. :-)


16

Comments
  • Paul Ehrenreich says:

    I been thinking of coming up with some templates to try and sell on theme foret. This article comes at a pefect time to make sure that I create something that is appealing and won’t get rejected.

  • Ashish says:

    Wow!

    Nice article. Highly recommended

    Thanks

  • Brandon says:

    All excellent tips; great article Jarel… it’s nice to see such an informative post written by an actual reviewer :)

    My suggestions (besides that you should make the images in this post link with the products *wink* *wink*):

    1) Classic designs sell. This doesn’t mean copy the same old homepage design, but establishing a “classic” feel on any design template appeals to more users than designs that look “truly unique”. This is counter-intuitive to most designers who want to express themselves with eccentric frills and bells and whistles. Often times, those design elements that make your design feel special to you only distract potential buyers… so be selective in what art elements make the final cut. The bottom line is that with stock art, classic is king.

    2) Offer variety. All of my products offer at least 5 different colors. It might seem silly to offer so many colors – heck, it usually just takes an extra hour or two to hammer out the multi-color versions – but it shows buyers the full range of what they might be able to do with your template. This doesn’t mean offer the full 256 RGB range of colors… somewhere between 4 and 7 is the sweet spot.

    3) Explore new genres – develop new niches. There is still a LOT of room to explore on ThemeForest… meaning, if you find a specific type of site or layout that’s not being represented well enough, then take the time to design a template that reflects this. I think my “Atlantica” templates are a good example of this – their layouts are simple, straight forward, and quite traditional compared to some of the glossier templates out there, but they’ve sold well so far because they run against the grain of the gradient-heavy web 2.0 products in the store:
    http://themeforest.net/item/atlantica-html-premium-portfolio-template/44324
    http://themeforest.net/item/dark-atlantica-html-premium-portfolio-template/45907

    4) Have fun! It might sound silly, but I believe strongly that the level of enjoyment that you take in the design process shows itself in the final products, be it for a client, an art director, or for a microstock site :)

    Thanks again for the awesome post Jarel. I’m looking forward to reading more of your posts in the future.

  • That is a great article. Must read for every author at the ThemeForest.

  • Cool

    That is really nice article

    Thank you,

  • Joel Vardy says:

    Some really useful tips outlined here with links to relevant content!

    Two Thumbs up, off to read some of the linked articles I haven’t seen

  • ram says:

    Really its very very useful article like me :)

  • Kevinsturf says:

    great article Jarel thanks

  • iwpdesign says:

    WOW. That is awesome. Thanks.

  • Mark Dijkstra says:

    nice!

  • Josh Maxwell says:

    Wonderful article. Bookmarked and following all of the tutorials! Thanks!

  • web says:

    Would you consider CSS sprites as a positive or negative when submitting a site as changing the code and images after can be quite tricky after purchase if the customer want to change sizes.

  • Jarel says:

    Hey everyone thanks for the great comments! :-) I hope everyone read Brandon’s comment, some great tips I didn’t list.

    - –

    @Brandon – I didn’t link to the products since I didn’t know if I could promote them like that. I think I can and should have, lol. I will next time.

    Those tips are great, thanks!

  • Jarel says:

    Oops, forgot to reply to one.

    @web – I think you could go either way on them. CSS sprites are definitely better for web standards, etc. but won’t be as easy to edit for buyers. I don’t think a whole lot of buyers will be changing the images used for CSS sprites and if they did they most likely won’t change the size so it won’t be much of an issue.

    I hope that helps answer your question. :-)

  • Jarel says:

    Hey everyone, if you want an example elements overview page (all the HTML) you can find it here: http://themeforest.net/forums/thread/elements-overview-page/13559 :D

  • Akin says:

    Hi, great post thank you very much for preparing it. I’d like to see the post “10 Reasons Why Your Code Won’t Validate (and How to Fix it)” too, but the link to it opens 15 CSS Tricks post..