I’m talking about keeping tabs, but digging deep, on other freelancers, entrepreneurs, designers, developers… your peers in your industry. And not only the “rockstars”, but your true peers. The ones who seem to be on the same level as you in terms of career goals, reputation, etc.
This is an integral part of what I do
Every few weeks, I try and take the time to seek out a freelance web designer I haven’t heard about before. Sometimes I come across their name by accident via twitter or elsewhere. Sometimes I find them while browsing for design inspiration (the majority of sites featured in gallery sites are designer’s blogs). Sometimes I actively seek them out. The FreelanceSwitch freelancer directory is an awesome resource for this. Sortfolio aint bad either.
Once I find someone interesting, with a similar background as me, I start reading their recent blog posts. Then I follow them on Twitter and scroll down through their tweets a bit. Then I come back to their blog and dig through the archives, scanning and reading articles like if I keep doing it I’m going to win something (when in reality, I’m just burning away what little time I have left in my work day!). I’m trying to learn their story, what they’ve done to get to this point, and where they’re going.
Sound creepy yet?
I think one of the key factors that drives me forward as a business owner and entrepreneur is my obsessive hunger for information. I listen to podcasts while I work and watch video interviews on a daily basis. I read Inc magazine cover to cover. I bought a kindle so that I can read everywhere I go – that is when I’m done reading my RSS feeds on my iPhone.
Just as it’s important to stay on top of trends and happenings in the industry as a whole, it’s also important to see what others in the trenches are up to. This is where I get my real inspiration and cultivate ideas for how I can move my business forward. Seeing what others are doing and have done up to this point is one of the best ways to stay on your toes, keep the inspiration alive, and keep going.
Learn to love archives pages
Archives pages are one of the most important, yet undervalued pages in a blog. They tend to be one of the last things we think about when designing a WordPress theme or reading a blog. But there is so much to learn just by browsing through an archive page of a blog that’s been around for some time.
You can compare and contrast how their stories differ from the past to the present. You can see how their writing style has developed. You get an idea of the major events that happened in their career up to this point. You can find the lessons they learned and shared based on those events. And most importantly you can relate their past and present to your own path and draw inspiration for how you’re going to move forward.
Love your work. Love your business. Obsess over it. But don’t forget to remain equally passionate about watching and learning from others.
In the first part of this series about my WordPress theme design process, I covered how I go about the concept and design phase.
This post covers my process for developing a WordPress theme. That is, after the PSD mockup is complete, this is how I go about coding and preparing to release it as commercial theme on ThemeJam.
NOTE: This is not meant to be a tutorial, but rather me sharing my personal style and process. I mention many technical aspects of web development here. If you’re unclear or interested in more detail on anything discussed here, let me know in the comments and maybe I’ll post an in-depth post about it!
First, the markup.
Panic Coda has been my coding application of choice for the past 2 years or so. A few months back I gave MacRabbit Espresso a try, but it didn’t stick with me. Coda has everything I need: A clean interface, user-defined keyboard shortcuts & snippets, and a built-in seamless FTP client.
I start by coding the main templates in valid XHTML and CSS. I’ve never been one to use a CSS framework or pre-built template created by others (like the 960.gs). I prefer to make every line of code my own to ensure that every bit is optimized for this particular theme, with nothing leftover that I don’t need.
That said, I have crafted my own “new theme” template, or set of files/folders if you will. I’ve been tweaking and improving this set of templates over time. It to speed up the process at the very beginning by covering all the items that I always put in every theme. My starter template consists of:
Index.html – blank-slate HTML doc, including the doc type, basic HTML page structure, and a call to the stylesheet.
reset.css – Created by Eric Meyer, with a few of my own tweaks. I haven’t always used this in the past, but recently I do. It’s good for making things consistent across all browsers from the very beginning.
style.css – This has all of the basic elements of a typical WordPress theme stylesheet, including the theme info declaration at the top. It includes the clearfix method, basic styles and margins set on the common elements like P, H1-h6, UL, OL, etc. It also has a few WordPress-specific styles that I know I’ll need later such as some basic comments styles, .alignleft, .alignright, .aligncenter, blockquote, and a few other things.
Scripts folder – I always include jQuery here. I realize that WordPress has jQuery built in, but I’m first starting with the static HTML templates, so I’ll need my own copy of it. I also have the jQuery cycle script here because I use it so often.
With my starter template fired up in Coda, and my finished mockup open in Photoshop, I get to work on slicing and coding up the static HTML template. My goal here is to get as much of the site structure and details coded as I can. The things I want to have coded at this stage are:
Overall structure and layout.
Typography, including implementation of Cufon (my choice for font-replacement in commercial themes. For other sites, I go with TypeKit).
jQuery enhancements. This includes dropdown menus, featured posts sliders (though I use static content for now), etc.
Widget styling. Again, using static content now, but styling the markup to be used later in WordPress.
Most of the time, I’ll do a home page (index.html) and generic interior page (page.html). Sometimes I’ll create an additional blog page if blog posts will have a unique layout or something. Usually in website development I would implement a system of includes, like a global header and footer. However, since WordPress will have it’s own include/template system, I don’t bother creating includes for the static HTML templates.
Browser Testing & Validation
When it comes to browser testing, I always say test early and test often. Some folks don’t even look at IE until they’re done coding everything. This is a bad idea, because more often than not, IE requires you to re-think your (perfectly logical) code and you’ll end up wasting time to go back and re-code.
I prefer to test all browsers as I go along, especially as each major piece is implemented. For example, I’ll get my featured posts slider working perfectly across all browsers before moving onto the rest of the site.
To finish off the static HTML phase, I put my pages through the W3C validator until that refreshing green light appears.
Alternate Colors
Most of the time I implement alternate color stylesheets after doing the static HTML templates, but before integrating WordPress. I do this so that I can release the static HTML templates as their own product, with multiple color options built in.
The way I do this is simply by creating additional stylesheets, which override specific styles and colors found in the main stylesheet. Basically, I commit the main stylesheet to being the “default” color scheme, and use additional stylesheets for the other options. I take very special care in picking alternate colors. Sometimes I’ll go so far as to pick and implement a color scheme, only to trash it later because I feel it’s not good enough for release.
Time to integrate WordPress
Finally, the real fun begins…
I create a fresh installation of the latest version of WordPress within the ThemeJam demo section (this particular demo is not live yet). Then I import some basic blog content. WPCandy has a great “test content” import file you can download and use to quickly fire up a new demo site. I have created my own version of this, which I think works better to showcase my themes on ThemeJam.
Then I begin creating the theme. For this, I have created my own personal starter template, which I have named “FrameJam” (Framework + ThemeJam, get it?). It’s not meant to be a WordPress Framework in the common sense of the word. Really just a starting point for my own personal use. Included are a few things I like to have across all my themes:
The ThemeJam Options panel – with basic options included. I’ll add more options specific to this theme a bit later.
Various SEO markup and template tag enhancements.
Some PHP functions I always use – like images and thumbnail handling, registering widgets, a custom widget template, custom comments markup, custom excerpts, etc.
I duplicate FrameJam and rename it to the new theme name. Then I overwrite the entire style.css file with the one I created earlier for the static HTML templates. Now we have basic styling, but the markup isn’t together yet.
I go line-by-line integrating WordPress tags and functions with the markup I already created earlier. It’s just a matter of pasting chunks of markup from the static HTML templates into the WordPress templates. I start this process by setting up header.php, index.php, and footer.php as these 3 templates will basically create a full page from top to bottom. Then I’ll fill in the rest of the template files.
Now is a good time to re-test everything across all browsers.
The last phase of WordPress integration is to implement all of the theme options. This adds an additional layer of template tweaks, turning static things into variables, adding inputs and sets of inputs to the Theme Options page, and whatnot.
Then of course, there is testing, testing, and more testing. TIP: Test at night, but test again in the morning when you’ve had a good nights sleep. You’d be surprised how many things you miss when you’re bleary eyed. There are so many little things that go into a WordPress theme, it can take a whole week just to tie up all the loose ends.
That wraps up the wordpress development phase. If you have any questions for me, or if you have a different approach you’d like to share, please leave your thoughts in the comments.
Next up…
In the final post in this series, I’ll cover how I go about preparing my finished theme for release on ThemeJam. Stay tuned…
I’m running a unique promotion for this month over on ThemeJam. Buy any WordPress theme, get 1 hour of free private consultation.
The idea came to me while reading Rework last night. I was up to the chapter that talks about promotion during the early days of your company. Their advice is to use your lack of “big-ness” to your advantage. The fact that your audience is small right now means you’re free to try out different ideas, mess things up and fix them before your brand hits the mainstream.
So this got me thinking.
Since ThemeJam hasn’t reached overwhelming sales numbers (yet), I can take this opportunity to offer a personal touch to the customers who do purchase products from my new company. By offering 1-to-1 consultation sessions with my customers, I’ll be able to meet and interact with them on a personal level. That means offering assistance, support, expertise, bouncing around ideas, and most importantly, answering any questions they have for me… about anything!
By reaching out to my customers on this level, I hope to build real trust with them, repeat business, and maybe develop some new friends as well. Ultimately this should result in encouraging customers to personally recommend ThemeJam to their contacts who use WordPress. I’ve had success growing my freelance business through personal referrals and I aim to build this type of organic growth with ThemeJam.
The advantage of being the small guy
The big WordPress theme companies (many of which I admire) wouldn’t be able to do something like this. Well, they might, but they’d need to use a lot more resources, personel and time to offer 1-on-1 sessions with their customers.
Since my business is still small, I’m able to devote the time to a promotion like this. And I hope it exceeds expectations and fills up my schedule. I’m hungry! I’m ready to win over the trust of WordPress users, one customer at a time. That’s what being the small guy is all about.
Scaling your business
So the concept of developing a scalable business can work both ways. When folks talk about “scaling”, they’re usually referring to the idea of putting systems in place to let the business run itself and grow and grow and grow.
But don’t sleep on the flipside to the concept of scaling. Every business starts out small. Look for ways to take advantage of your small size. Most of the time, you’ll things that your larger competitors won’t be able to match.
One of the interesting things about web design is that everyone has their own way of doing things. Sure, there are industry standards for quality and practice, but the road to achieving that final product is always executed differently depending on who you ask.
In this new series of posts, I’d like to share my personal process for designing a WordPress theme. I’ll take you from initial concept, through the final testing stage and presentation on themejam.com. This series is split into three parts:
When working for clients, I usually need to actively seek out that inspiration based on what the client wants and needs. On the other hand, when designing themes as products for ThemeJam, the inspiration can come from anywhere, and through a variety of channels. This was one of the things that drew me into this business.
The spark might come from my daily web browsing, which might include glancing over the portfolios of other designers that I respect. It might come from something I saw on Twitter. Or one of the many design blogs I subscribe to.
Design inspiration might not come from the web at all. My latest kick has been to actively seek inspiration for web designs by flipping through print magazines. There are a ton of beautiful and unique layouts to be found in the pages of magazines these days, with a huge variety in style. Wired magazine would be my favorites as of late.
Inspiration might also come from television or the movies. Ever since I was a little kid, I’ve been fascinated with the opening credits in movies. The combination of intro music, typography, and visuals is always fascinating to watch. It’s all about setting the tone and feel for the movie, often without relying on plot and dialogue, but by pure texture and tone. I don’t think I realized it when I a little kid, but I think that opening credits in films was my first instance appreciation of typography design/application.
Television can be another source of inspiration. Have you noticed that with today’s HD programming, the graphics built into television shows are designed like user interfaces? Take a look at the news tickers, info captions, and split screens when watching the 24 hour news networks. Or notice the way they break down tons of different stats, timers, and informational tidbits while watching a sporting event on TV. Lots of details to dig through. My latest theme, MistyFlip, was originally inspired when watching the X-Games on ESPN.
Developing a concept
After something sparks my interest and provides inspiration for a new design, I work to develop it into a concept. I’ll actively seek additional pieces of inspiration based on that first thing. For example, after watching the X-Games I saught out various examples of design in the world of extreme sports (snowboarding, skateboarding, BMX, etc.). I knew I wanted to design a theme that could work for a site or blog in this industry. So I clicked through various sites such as burton.com, seahwhite.com, elementskateboards.com and others. Then I went out and picked up a copy of Transworld Snowboarding Magazine. This was what really got the juices flowing.
Flipping through the pages of that magazine, I was able to craft some core ideas about how I want the typography to interact with photos and content. I drew some inspiration from the way apparel is designed in the extreme-sports industry and developed some ideas for textures and highlights throughout the theme.
At this stage, I also try and decide what type of theme this is going to be. Will it be a personal blog layout? A news/magazine theme? A theme with portfolio functionality? Or a hybrid of these and other theme types? I’m basically trying to merge the creative ideas with some concept of structure, usability, and ultimately what the customers of ThemeJam will find most useful.
Sketching
I probably sketch on paper less often than I should. Many designers always begin with a pencil and paper before hitting Photoshop. I’d say that I do this about 50% of the time. If the concept is a really unique one, I’ll craft those ideas using my sketch pad. I use pencils and grid paper to do this. It usually involves 3-4 takes before it really takes form. What I’m drawing are the main elements of the page – navigation bars, image boxes, chunks of copy, and maybe a few detailed elements like how the slider buttons might work, or gallery thumbnail layouts.
The process of sketching is actually fairly new for me. I’ve always been more comfortable designing with the mouse and computer screen. But about a year ago, I made the conscious decision become better at sketching my ideas on paper before firing up Photoshop. The biggest tip I’ve found is to draw each line slowly. At first I felt I needed to scribble things down extremely fast (not really sure why). But I’ve found that if I slowly draw each line I end up with a much clearer picture and the design will take a more defined direction.
Design in Photoshop
The bulk of the design phase is spent in Photoshop, creating layers, text blocks, images, textures, effects, filters, etc. etc. etc.
I always start with a blank grid template. I have several of these saved on my computer. Some are based on the 12 and 16 column 960 grid system. Others I created myself, including a 5 column and 8 column grid. These grid templates basically consist a series of columns and rows, framed with guides. This makes the process of creating balanced layouts quick and much more efficient.
I tend to place all of the page elements using a temporary colors and fonts. By temporary, I mean choosing quick go-to options like Arial or Georgia and a pallette of black/white/gray and red for highlights. I feel it’s more important to lay down the overall structure before perfecting the details.
Next I spend time carefully making typography decisions. This is when I pick out fonts, sizes, spacing, weights, etc. It’s a process of finding balance and prioritizing content in a tasteful, systematic way. These days I spend more time on this than ever because the choice of fonts to use on the web has greatly expanded thanks to tools like Cufon and TypeKit.
Finally, it’s time to set the first color scheme (by “first”, I mean the version I’ll use as the screenshot for the purchase page, thumbnail image, etc.). For this, I often scroll through Colour Lovers. There are so many awesome user-submitted palettes here. I usually pick one and make a few modifications to it.
Once the first color scheme is all set, it’s time to find a few more to offer various options. On some themes, I duplicate the PSD and apply the alternate color scheme across all elements (background, text, links, headers, etc.). On others, I’ll apply the alternate colors later on in the CSS, not worrying about creating a PSD version.
Moving on…
After several rounds of tweaks and perfecting, the design phase is nearly complete. It’s time to move onto the coding phase, which is the topic of the next post this series. Stay tuned…
Today, nearly two months after it’s launch, I’d like to reflect on some of the early developments for my new WordPress themes business. I’ll start by addressing some of those expectations I had posted about prior to launch:
Increased client work? Not so much…
This comes as somewhat of a surprise to me. I had expected to draw at least a few inquiries for custom wordpress design/dev work from customers or followers of ThemeJam. Although it’s still early, it seems that hasn’t happened, at least not directly. I can only assume that the folks who shop for premium WordPress themes come from one of two camps:
They are developers themselves, looking for a nice theme to base their own customizations on.
They are end-users, looking to quality WP themes as an alternative to hiring a web designer.
I’m happy to serve both of these customer-types and interested to see things move forward on this front.
Customer Support, not a huge burden (at least not yet)
Granted, this is likely due to the fact that my customer base is still very small. However, definitely to my surprise is the fact that a pretty low percentage, around 5% of paying customers have required customer support.
I think a few things factor into this:
I went above and beyond in writing documentation and providing detailed instructions built into the themes. I think (hope) it’s pretty hard to get confused with how the theme options work.
Prior to purchase, I make it extremely clear what’s included. I provide full functioning theme demos, plus screenshots of the expanded theme options panel. A few themes even have video walk-throughs.
For those customers that did require support, I’ve been receiving positive feedback on my responsiveness and willingness to help (even for the free theme, which I don’t officially support). I take this as a good sign, which I hope will lead to referral business, the same way it did for my freelance work.
Marketing. Still much to learn.
The marketing effort has been pretty up and down since launch. I started off with somewhat of a push, and have since pulled back to focus more on expanding my catalog. There’s no doubt that more traffic leads to more sales. Though I’m still working to develop the best strategy for building a strong customer base.
Clearly, the field for premium WordPress themes is a super-competitive one. Even since the launch of ThemeJam, I’ve seen so many new guys pop up, some of which show a lot of promise. I plan to figure out ways to differentiate ThemeJam both in our product offering and the way it’s marketed. More to come on this front…
If I had to start from scratch?
I’d start with a much simpler approach. I should have scaled down the planning phase. I should have aimed to launch sooner than I did, with a simpler themejam.com website. I think I stressed too much on perfecting the site as well as the themes before pulling the trigger on launch.
I’m currently reading Rework, which advises:
“It’s better to launch with half a product than a half-assed product”
Not that ThemeJam is half-assed in any way (quite the contrary). It’s just that I probably spent way too many work hours prior to launch than I could have.
Having said that, I don’t regret any of it because the whole process really pushed me to sharpen my skills both as a designer and WordPress developer. I feel more confident than ever in these areas and I’m continuously driven to improve on upcoming theme releases.
If you’ve been following my tweets, you may have noticed that last week I launched an overhaul of the CasJam Media site (my freelance web design business / portfolio).
Today I’d like to go over a few of the goals I set out to achieve in this redesign:
Simplify and trim the fat
I wanted (needed) to simplify the site on a number of fronts.
First and foremost, I wanted to scale down the overall site navigation and limit the total number of pages. The new site is a total of six pages including the home page. That’s down from 10+ with several sub-pages. The new top navigation directs the user to the four most commonly sought after things in any web design portfolio site:
About - Who/what is this company?
Services – Do they offer what I need?
Projects – Let’s see some of their work.
Contact – Time to take action and get in touch.
Simplified maintenance
I also needed to simplify things behind the scenes as well. My last site, despite being run on WordPress, took way too much time for me update each project. I used to cut several images, different sizes, and make long write-ups for each project. Then I’d manually swap in different project images and links for the home page slider. After a while, I stopped updating my portfolio, simply because I didn’t have the time to do all that.
The new site utilizes WordPress 2.9+ post thumbnails, which makes handling images much easier. Project thumbnails dynamically load on the home page and elsewhere, making for less repetitive updating. I also slimmed down the project descriptions (supported by the redesigned layout). It’s much easier for me to quickly update the site as new projects launch.
Simplified content
Catching on to the overall theme now? Overall simplicity was the biggest goal and that went for the site content as well.
First, I decided to do away with the outdated blog on casjam.com. I stopped writing in it months ago, and I knew that I’d never have the time to continue contributing quality content. I plan to focus my blogging efforts here on briancasel.com and guest blogging elsewhere. CasJam.com is now strictly my portfolio and freelance business site.
I also refreshed almost all of the copy for the About and Services pages. Before, I used to list and describe in detail every service remotely related to the realm of web design. That included design, development, marketing, consultation, copywriting, etc. etc. etc. Of course, all of these things go into a freelance web worker’s job description. But I decided on a different approach for this time around.
I boiled all of my services into a 3 categories: WordPress, E-Commerce, and “Everything Else”. For the last year or so, all my projects have been focused around WP or E-Commerce so I wanted to stress the specialization in these areas. The “Everything Else” portion serves to fill in the areas in between, such as email marketing, consultation, etc. Overall, I’m happy with the way all of this info fits nicely onto one page of the site.
Promote the Portfolio
The new site brings the portfolio straight to the forefront. Right on the home page, we have a slider which features 18 projects. This is what most visitors come to see, so it’s right there in front of you as you enter the site.
I must say I’ve been gaining a lot of confidence in my skills as a designer. Before, whether I realized it or not, I seemed to have been tucking my portfolio away in the interior of the site, leaving it in the shadow of lots of copy and bloat. Now, I feel much more comfortable and ready show my recent design work – especially my theme design work for ThemeJam – and I think this redesign reflects that.
What do you think?
I’d love to get some feedback about any aspect of the redesign. Also, if you guys have any questions about how I did things, don’t hesitate to ask. I’m considering a few posts covering the technical aspects of the site, if the interest is there.
