Adam Rudd

Going Indie? How to make a killer app website

This is a write up on how I went about making a website for my iPhone application, MorningReport.
Creating a web site is number one priority for any indie developer. It is where your customers will come, where your clients will refer others to, and where press will visit when everyone realises that your product is so awesometastic that everyone should know about it :)

Make a list

Lists are the most powerful, awesome tools ever, because they’ll clearly tell you what to get done. That’s it – no fluff, no tangents… just item one, item two, item three.
Sometimes I get cocky and wing it for a little while, but I’m never as effective as when there are clear tasks in front of me to get done, especially when it’s on paper.

So, the first thing I did to get this vague website idea bashed out: Make a list!

1. Find sites for existing apps I liked
2. Break down features
3. Emulate

Bam! Three succinct points, ready to be started.
It’s not rocket science, but it sure saved a hell of a lot of time by starting with sites I know work. Referencing works because it’s how we learn anything. Just look at how you learned how to swim, or ride a bike. You start off by watching and getting information from examples and people who know what they’re doing, then you suck all that information up and build from it.

N.B. My ego wasn’t too happy about using another site for a mockup; the best advice I can give you if you’re thinking along those lines right now is: Go get some awesome chocolate, and start looking for reference the second you finish this article.
Like one of those ‘always right’ friends who tend to go silent whenever proven wrong, your ego will shut it’s trap as the website progresses. Yeah, that’s right ego, ya jerk.

Research

Researching a few great iPhone sites allowed me to narrow down the search to a couple of final layouts. Give it a quick google – there are a ton of great examples out there! Here’s what stuck me:

Tweetdeck

The Voxel Agents

birdfeed

As you can see, there’s a pretty consistent theme going here. Lots of iPhone images with feature text. Unique, bright themes which instantly set the tone. Social media tags and easy links to buy the app.

The homepage for Train Conductor( by the Voxel Agents) struck me as a great looking site for MorningReport. Here’s why:

1. It flows well – You get the idea of the project the second you reach the page. That header looks swish, and gets right to the point. It’s a rockin app about conducting trains, and it’s available now.
2. It’s executed with WordPress – Because I use wordpress, and I’m essentially a one-man army for this project. This means I need something which is easy to maintain, at least, for the time being. The layout screams wordpress, which tells me it’s simple to set up from a technical stance. Hooray!
3. It worked for them – Train Conductor did pretty damn well for an indie-startup’s first big-hitter project. Proof that a design is effective to your customers trounces all fancy-pants design ideas you may have, at least for the time being.
4. I like it. I’ll be staring at this for a LONG time (using it for blogging, networking and posting news releases), so it has to be something that appeals to my tastes. If I don’t, there’s a pretty strong chance that tens of hours will be spent in Photoshop trying to fix it – and that is time that could be spent on activities that build the brand.

Break the site down

So, now the layout was settled, it was time to break the site down to work out which features needed to be implemented for MorningReport’s site.

This step is important because it allows me to identify why the site works. Once this recipe is worked out, you’ll have a foundation for all of the original content you want to add.
Here are my findings:

• A Sexy header/banner
• Easily visible purchase link
• A YouTube video without scrolling down, with everything you need to know about the app
• The application’s selling points/features, laid out in a dot format style
• Press feedback.
• Screenshots
• Twitter & social media integration

Create a mockup

With these features in mind, I took to messing about with the design in Photoshop to suit MorningReport.

Don’t be afraid to move items around to play with flow. This is the best time to get contrary, or impulsive, since an entire design change can take less than an hour. Go nuts, but keep the features in :)

Here’s the paintover:

Find a WordPress theme that suits your mockup

Once happy with the design, I started looking at steps to take the mockup from an image to a functional website.
To do this, I needed a WordPress theme which looked roughly like the layout I had, for as cheap as possible (ideally free) that could be moulded without much web-coding.
Off to google searching for “free WordPress themes”.

In the top 3, I found exactly what I needed: http://www.freewpthemes.net/
Take your time to trawl through as many pages as it takes for you to find something that sort of fits. Keeping ‘contenders’ in tabs by middle clicking layouts which interest you makes the process nice and simple to review. Just close the tabs that don’t make the cut and in a few passes you’ll have the top 3 to choose from.

Narrowing down the pages which looked similar to the Voxel Agents’ layout took a good 2-3 hours of browsing and testing. Finally, I settled on earthlingtwo, since the author has permitted personal and commercial use under Creative Commons 3.0.
The Earthlingtwo theme was downloaded and installed on my Dreamhost server so I could have a look around to make sure it functioned the way I expected. Make sure you do this, particularly if you’re looking at using a theme which isn’t so popular. Each theme will have a slightly different flow to it, and It’s SUPER important that it does most of what you want your final site to do.
Having the theme on my server let me explore how it all worked on the FTP side too. Although most of the editing for your theme can be done in WordPress’ inbuilt editor, I suggest getting familiar with how the theme deals with images, how the divs are laid out and all that

For this process, I HIGHLY RECOMMEND using the Web Developer toolbar for Firefox. It allows you to outline how the divs are structured, where the anchors are, and (best of all!) what they’re named.
That’s about as far as I’m going to go on about the nuances of web development and WordPress integration. The main goal here is that you know the theme you’re about to modify before you modify it. If you’re looking for more information, check out YouTube.

Port your mockup

Once you know the ins-and outs of the theme, you can get back into Photoshop to make alterations to the mockup so it suits the theme you’ve chosen. Being a visual thinker, I found these mockups extremely helpful to keep myself on target. Don’t be afraid of re-arranging sections of the original mockup to suit the theme. That’s okay!

As you can see, mine changed a bit at this stage too.

Implement

As I started implementing & modifying the earthlingtwo theme to suit the mockup, I began making small design changes where things just didn’t work as well as planned. Features that sounded rad initially weren’t as pretty or easy to use as they might be, and I was in Photoshop every so often to work out a solution. BUT Because of the foundations, working on this sort of stuff is also low risk because it works (yay!).

Here you can see the introduction of the speech bubble for feeds. This came about mostly because the twitter area I’d created just sucked. As I said, don’t be afraid to ditch stuff which doesn’t work!

That’s it! Keep iterating as you see fit (or don’t if you’ve achieved what you needed!). Since the initial implementation, the site has changed very little, and has served quite well as a page to introduce people to what MorningReport does.
Here’s what the site looks like as I finish this article:

If you are looking at making the jump to website notoriety, I hope this has helped reduce the burden of getting things started. Creating a space for yourself in this big, wide interweb is a fantastic way to make connections and get yourself known. You won’t regret it, I promise you!

So don’t be afraid. Jump in!

Cheers,
Adam Rudd