On Designing Tumblr Themes: 7 Ways to Design a Useful & Customizable Tumblr Theme

Categories Articles, Web Design, Wordpress

So you had tons of fun decking out your own personal Tumblog, and now you want to try your hand at contributing a theme to the Theme Garden. But how do you design a template that would be used by (hopefully) tons of people? What should it look like? How customizable should it be?

These are the kinds of questions A Good Company ran into when we got the chance to design a couple of Tumblr themes ourselves recently, and we thought we’d share a few things we’ve learned on how to create a useful, customizable, and well-designed theme.

1. Who’s going to be using the theme?

Your target audience – that’s the first thing you need to figure out, because knowing who the user is will help you figure out how the theme should look and work.

A few questions to help you come up with a user persona:

• What would the user use this theme for? Would it be used for personal posts of things they like, or would it be a professional blog where they post articles and editorial pieces?

• What types of posts would they likely to make? Long text posts, image posts with short captions, audio posts?

• How many members would the blog have, one person or multiple users?

2. Prioritizing the different types of posts

Once you have a good idea of your user, you can now decide which type(s) of posts are most important. Which type of post would be used the most or not at all? Does the theme need to support all types of posts? Knowing which type(s) of posts would dominate your theme would greatly impact the layout and design for the page.

3. Know your Tumblr

You use Tumblr everyday, so as certain things, such as Reblogging, become almost second nature, it’s easy to forget to account for these special features that only Tumblr has. So make sure to plan for those special features like the Description section, Reblogs, Ask Me Anything, Pages, Notes, and Likes. If you want to display them, how you want to display them, and if you want to give the user a choice whether to display them or not.

Go through each type of post and know exactly how they work and find out their limitations. For instance, Photo posts can be set up to 500px wide but you can also set it as its original size. However, the images you upload within a Text post can only be a maximum of 500px wide. Knowing these details will help you set up a proper grid for your theme.

Also, Tumblr rolls out new features all the time, so while designing your theme, be sure that you follow what the Tumblr staff is working on.

4. How customizable is it?

Once you have a general layout and design for the theme, it’s time to figure out which part of the theme the user should be allowed to change. To answer this question, start by understanding how the back-end Customize section works on a test Tumblr site.

Here are a few customization choices to consider:

• Color: It’s the part of the theme that’s easiest for a user to change and make the most major impact. Changing a few colors on the right places could make a theme look drastically different. The trick is to find the right places – being able to change colors for every little element on the page would just end up being confusing for the user and make the design inconsistent. We’ve had a lot of success by making a single color customizer apply to a bunch of different elements all at once.

• Upload a logo: Another great way to customize a page. Instead of giving users a limited list of fonts to choose from, allow them to upload a logo instead. That way they can use exactly the font they want to use. Or they can stick with the default header font if they like to. Keep in mind, though, that your target audience may not be adept at Photoshop and Illustrator, so include these in designs where it makes sense.

• Upload a background image: Instead of picking a color for the background, maybe users can choose to tile an image to create a subtle texture for the background. Transparent images on top of customized color can give your user a lot of flexibility.

• What information to display: Giving the user a choice to display (or not) things such as: Notes, Reblogs, RSS link, Archive link. Not everyone wants them, so it’s a fine balance between a useable amount of customization and a good, flexible theme.

• Social networks support: If you decide you want users to be able to display their social networks, be sure to account for this in the design. Where do you want to display this information? What should the icons or text look like?

5. Show your own personality

We’ve been talking a lot about the audience here, which is important in giving you a direction for the them. But you should also let your personality show on your design. You’re a good designer, you’ve got a good sense of typography, you have a knack for making textures and patterns, you’re a great illustrator and you make awesome icons – these little things that you’re great at is what’s going to make your theme stand out.

There’s a fine line between showing your personality and letting the users feel like the theme is theirs. Knowing your audience well and creating something that shows off both your personality and your user’s personality is what makes a theme really great.

A few ways of showing off your design style in non-distracting ways:

detailed screen shot of Carte Blanche

• Use hand-crafted details. Create mini icons or other details like background textures. It’s a great way to show off your illustration skills and a great way to show different types of posts.

Fonts used for Carte Blanche

• Pay special attention to your typography. There are a handful of great free open-source fonts out there that you can use on the web. Having something other than the usual web-safe font palette would add a nice detail to your theme. Some great resources for open-source fonts: The League of Moveable Type, Font Squirrel, and Google’s Font API.

The Daily Tumble theme

• Come up with a unique layout to present the blog content. Consider using double columns for content with a lot of text, thumbnails for blogs dominated with photos, or giant quotes for when those snippets are important.

• Animate. If you’ve got the chops for it, you can use subtle animation to go from one post to the next! Maybe a new post slides in when you hit a button on your keyboard, or a CD slides out of a case on audio posts. Learn some JQuery or practice some new Webkit CSS animations if you want to try something new.

Whatever your strongest suit is, highlight that and make that the special selling point of your theme.

6. Build early

Turning your mockup into a working theme

Once you have the general idea for the design and layout, it’s best to start converting your design into a working theme and start using it as soon as you can. After you start using the theme, post content: short posts, long posts, reblogging, posting comments. You’ll see if your original layout is working well or not. You might find that something that looks good as a static mockup may not work well once you start using it.

Also find other people to test the back end, to see how user friendly the customization process is. Is it easy for them to know exactly which part of the theme they’re customizing at all times?

7. Show it off!

showing off your theme

Finally the last step of making a theme is to release it! When you’re making your theme preview page, of course you’ll be talking about the different features, but don’t forget to actually show, rather than tell, all the things it can do. If your theme is customizable, make different previews to show off how many different looks the theme can create. Show off all the different types of posts the theme supports.

Showing off the backend

And don’t forget to show off the back end! How would the Customize page work? If your theme allows people to upload their own logo, or connect their social networks accounts, or pick different fonts, it’s helpful for the user to know how they would be able to do all these things, before they decide to install or buy the theme. A few screens shots of the back end will go a long way to help people understand how useful a theme is, and to avoid unsatisfied users down the line. Not being able to see how the back end works is kinda like buying a book without looking at what’s under the cover.

A lot of people who use these theme are most likely people who don’t have the budget, time, or knowledge to build their own awesome theme from scratch, and our goal here is to provide a well designed and easy to use template that fits their need, so they can customize and make into their own.

Hopefully this has gotten you going in a good direction. We love Tumblr, and you do, too. So let’s go make some great themes!

Our 642-982 prep courses & 642-631 include the latest set of 642-661 practice questions and 642-467 dumps with 100% guarantee for victory in 642-515.

Say hello to Caroline and Micah. We believe that as designers our super-powers can be used to do good, so we've come together to make it happen.

A Good Company™ means more than simple beauty: we think design can help people. We're aiming for the little guys, but we've got big plans.Our passion is purpose, so if you've got something up our alley, say hello@weareagoodcompany.com or on twitter, @agoodcompany!