As mentioned before, I am not a natural designer, and my previous design attempts resulted in physical illness for anyone unfortunate enough to view them. This is not an ideal state of affairs when one wants to sell to the general public.
Luckily, there are a few methods you can use to stop yourself from visually poisoning potential customers. By far the easiest is to outright cheap and buy a theme. Still, one can’t help but worry: what will I get after handing over my money?
There are loads of great themes for SaaS apps out there: just take a look at the Freemium SaaS I HTML Theme and its counterpart here – instant greatness for those without the talent or, perhaps, the time.
So, I’ve paid for Agencia, downloaded the theme, let’s take a look at what I got:
Help Section is simple enough: it contains a help file that explains how to best use the theme:
HTML-Files contains just that, the raw HTML files that you can use in your web app’s front-end:
Photoshop-Files contains lots of PSD files that you can edit using Photoshop to do clever designer stuff that I don’t really understand, or alternatively bits that you can send to a friend who you can ask to alter the logo for you:
PHP-Files is a bit more exciting! The theme author has been really helpful and split up the various design bits (header, footer, main content etc.) into separate PHP files. This should make it a lot easier to plug the theme into your app’s templates:
Finally, we have Screenshots, containing lots of pretty pictures of the theme. Useful if you want to send the rough idea of what your app’s marketing pages will look like:
Let’s dive into some of the basic HTML. I hope this shows how simple it can be to copy-and-paste in the design bits.
Here’s the header:
And here’s the footer:
So far so good, what about a live, useful example? This is the “Welcome to TweetingMachine” section from TweetingMachine’s homepage:
Now let’s take a look at the theme for the tool itself:
Starting with the directory listing, the author only includes documentation and the HTML, but that’s no bad thing, we have everything we need:
The help directory contains the documentation:
From there, we can continue as we did from the Agencia theme, starting with the header:
And then the footer:
Once you have set those up in your themes, the rest is down to you. To give you an example, here are the default notification boxes provided by the theme:
Again, if you know basic HTML you are going to love how simple it is to display them:
How did Tom integrate these themes?
I was genuinely surprised at how little time it took to integrate the new themes and replace my existing design nightmare. I started off by using separate css and image directories for the marketing pages and the tool itself. This meant doing a few find-and-replaces in the CSS, but nothing major; maybe 20 minutes of work.
Next, I extracted the HTML for the headers and footers, and created templates for both sites. That way, I only needed to have one file per page, and that file only contained the minimum HTML necessary; you shouldn’t be putting a header and footer in every file you create.
Menus came next; I wrote a little bit of PHP that would highlight the current page’s link in each menu. The themes’ designs took care of the rest, yay!
And finally came the fun part, integrating the tool itself. This again took a surprisingly small amount of time, by and large consisting of adding CSS classes to tables, using P tags correctly, and swearing when my stupidity got in the way and I started copy-and-pasting the same chunk of code five times over.
This has been a really quick and rough guide to a couple of themes, but others that I have integrated appear to hold to the same basic structure. If you have any questions, please get in touch in the comments below.
I’m getting married next week, and after that until the 9th of June I will be out of contact whilst enjoying my honeymoon. While I will eventually respond to any emails, it might take me a while