The Complete Guide To Setting Up Your Webseries Webpage, Part 3: Design and Designers
Other parts of this series : The Complete Guide to Setting Up Your Webseries Webpage
Hello and welcome to the third part in our series on creating your webseries’ webpage. (Yes, it’s a series on a webpage about making a webpage for a series. Meta, huh?)
This week, we’ll be looking at the final aspects of your website: setting up a design that will achieve the goals we set out in the first article, looking at customisations to Wordpress and Thesis that will let us do that, discussing whether to hire a designer (and how to get best value from them), and talking about how to tweak and develop your site so that it looks like it was professionally designed.
This article’s going to be going into a bit more depth than the other articles, and will be a bit more hands-on - however, it should still be skimmable.
How To Choose A Design
I’ve already written an article about this, which I’d heartily recommend reading if you get a chance. In summary, using lessons from the porn industry (which spends a lot of time and money figuring out the best way to design a site to attract visitors), I’d recommend a site with a trailer for either the entire show or the latest episode (depending on if your show is serialised) prominently visible when you arrive on the site, other episodes below that using pictures rather than text to “sell” them, a strong call to action next to the trailer at the top inviting your visitors to either subscribe or watch the full episode, a compelling description of the episode below that, and not much else on the front page.
Common tropes for a web series I wouldn’t recommend would include:
News page as the front page. New visitors can’t easily use your news, which is often full of production updates and similar things, to figure out what your show is about, and it means you’re not showcasing your best content up front.
Full episode on the front page Full episodes don’t contain the very best bits of your show, right up front. Sell your visitors on watching your show.
No textual information on the show. With no info on what they’re about to watch, many viewers won’t even click on your trailer, or won’t stay long. It’s all about persuasion.
No easy access to a subscription medium (email or RSS dedicated to the show). Twitter is great, but unless your twitter feed is very, very focussed, you’re risking losing readers who don’t like your other, non “new episode” twitters. Also, there’s a lot of noise on that channel. Go with a subscription medium, ideally push (email) and keep it clear of anything except episode updates.
For the rest of this article, I’m going to be working to produce something on the Divine Bitches mold (see the article above). So, we’ll be looking at a single column layout with a navigation menu below the logo, a teaser trailer below that, and then other episodes below that. If you don’t have a strong idea of what you want to do with your website design, I’d recommend that as a good basic approach.
Here’s the site that I set up as a test for this article: http://kamikazecookery.nfshost.com/ . It’s far from perfect yet, but it’s a good basic starting point, about where I’d expect to get to after the basic design setup I discuss below. I’ll discuss what you’d do to improve it in “So How Do I Make It Slicker?”, below.
Do You Need To Hire A Designer?
Do you need to hire a designer? Is that the only way to get a really great design?
Well, it depends on how great you want to go. A top designer will be able to produce something far nicer - and far more functional - than you’d be able to manage. People like the guys from Men With Pens (I’ve not worked with them, but I hear they have a fantastic rep) will create you an incredible design - but you’ll pay for it. Men With Pens’ design options start from $5k. Other equally good designers are a bit cheaper, but realistically you won’t come out with much change from $2k.
Now, don’t get me wrong - if you can possibly afford that, go for it. (I’m seriously considering hiring someone of that sort of status for Guerilla Showrunner right now - although it may come down to a choice between that and a new mocap suit for Strange Company). It’ll make you look a hell of a lot more credible, it will actually boost views, subscribers and business in general - Dave Navarro says his business nearly doubled after he forked out for a really slick design - and it’ll make your crew feel great into the bargain.
If you can’t - it’s worth checking out outsourcing sites, but you’ll have to put the time in to find a designer with a style that you really like. 99 Designs and Elance.com are both worth looking at. However, even here, you’ll pay more than you’d expect for a really awesome design, probably in the $1k range.
So surely it’s worth looking for some hungry student or dubious third-world outsourcer? No, not really. If you’re a reasonably visual person and you’re willing to put some time in, you’ll do a better job of coming up with a design that suits your website from the building blocks of Thesis and Wordpress than J. Random Designer will. I’ve tried hiring people on price for visual work a few times, and it’s rarely a good idea.
Sometimes, if you really search, and you know what you want, you can find a great designer who’s just starting out, and get a bargain. But it’s far from guaranteed. Overall, if you can’t pay at least reasonably well, well, and you have some or any skill, you’re better doing it yourself.
How To Customise Wordpress To Meet Your Needs
This is where Thesis, the custom theme I recommended in the last article, really starts to shine. You could use a free Wordpress theme if you like, but you’ll end up having to heavily customise it at the code level, and some features will be tricky to implement - I believe! I’ve never tried it, and I’d have to learn quite a bit about Wordpress theme design before I did.
In general, about 80% of the tweaks we need to make can be done within Thesis’ main interface. A few of the more cunning bits will need to use custom CSS and in one case custom code, through Thesis’ “custom” section.
However, don’t be too scared by this - in 90% of the cases below, I found out what I needed to do to tweak my design by Googling “Thesis” and whatever customisation I wanted, like “Nav menu below logo”, and then simply followed the instructions that Google threw at me!
Initial Thesis Tweaks
First up, don’t forget to set your site’s title under “Site Options -> Home Page SEO”. Make sure that any keywords that people might use to find your site (“Scientific Cookery”, “Geek cooking” and similar combinations in Kamikaze Cookery’s case) are in your header, but don’t make it sound unnatural. I went for “Kamikaze Cookery - Geeks cook. With Science.”. Fill out the Meta Description too - that’s what people will see in search results for your main site.
Now, under Design Options, there are a few tweaks we need to make. Set your Columns first. Single-column layouts seem to be becoming the standard for web series, and are what the Divine Bitches site uses - in general, I’d recommend them because they present the viewer with the least visual clutter and allow you to draw the eye as easily as possible.
Width should be around 900px these days, although you can change it if you have a specific reason to.
Under “Features and Teasers”, set the number of Features to either 1 or 2 - 1 if you’re running a show where people can jump in at any point, 2 if your show is arced or there might be other reasons you’d prefer a new viewer to start at a specific episode.
The “Features” are the episodes that we’ll have showcased at the top of the page, with a trailer and a description. If we’ve got two features, we’re going to showcase two episodes on the front page - the first or best entry episode, and also the latest one, thus ensuring that both returning and new visitors can easily find what they’re looking for.
Under “Posts”, set “Display Post Excerpts”. That allows us to show a teaser for a video on the front page and the actual video on a seperate page.
Set “Feature Box” to “Do Not Use Feature Box” - it’s not a feature we need.
That’s about all we need to do for now.
Populating your show
Now, we need some content before we can start customising. Use your show’s existing episodes if you already have them - otherwise, just grab some random YouTube videos in approximately the format you expect to show (Widescreen if you’re widescreen, roughly the same style or content, etc). Obviously, you’ll have to replace those with real content before you go live, but you can use random videos to make sure your design works.
You’ll also need some** thumbnail images** from the episodes - grab them from the videos using the image editor of your choice (Pause video, Print Screen, and crop out the image).
And you’ll need at least one** trailer** for the show - either use one you’ve got already or grab a random video, either one of yours or a completely random one. You should probably cut a trailer anyway if you haven’t got one!
Now, here’s where it gets a bit tricky. You’ll want the main body of your post to JUST contain the video you’re wanting to show - use the YouTube (or whatever site you’re hosting your vids on) embed code for now, with the width set to 40 px less than the width of your site, although later on you can substitute tracking code to let you get detailed stats from your videos at a later date (or now if you feel ambitious).
IN the “Excerpt” box further down the Wordpress page, add the following code:
<div>EMBED CODE<div style="float: right; padding-left: 10px; width: 380px"><h2><a href="LINK TO POST">View full episode</a></h2>
<b>EPISODE TITLE</b>
Length: EPISODE LENGTH
EPISODE DESCRIPTION</div></div>
Replace EPISODE TITLE, EPISODE LENGTH and EPISODE DESCRIPTION with the specific elements of your episode, of course. LINK TO POST should be replaced with the link to the current post - get it from the top of the Wordpress post page. EMBED CODE should be the embed code or tracking code for your trailer for the episode (or series), set to about 480 width if you’re using a 900 page width.
Finally, upload your thumbnail image using the upload tools at the top of the Wordpress Post page. Copy the address for the Medium size image (it’ll be obvious when you do it), and paste that into “Thumbnail Image”, about half-way down.
Repeat this process for every episode you have, or for 3 or 4 sample episodes if you’re just using test footage for now.
Once you’ve done that, take a look at your front page - it’ll look a bit of a mess, but the site will be starting to come together.
Tweaking The Design
This is where things start to get a bit personal. At this point, you’ll want to start playing around with and tweaking the various design options in Thesis and generally trying to make your site look as nice as possible.
Here are some suggestions for things I did to make my test site look nicer, and some tricks to make Thesis do things that aren’t initially obvious.
Fix Your Excerpts Initially, the most obvious thing about your page will be the ugly, ugly videos below the main one, cluttering up the page. Fortunately, this is easy to fix. Go to the Custom File Editor, and at the bottom of Custom.css, add
.custom .format_teaser .excerpt {display : none}Now, go to Design Options -> Teaser Display Options, and uncheck everything except “Post Excerpt” and “Post Title”. You can drag-and-drop those two to change the order they’re in. Reload the page, and you’ll just have lovely, lovely thumbnails.Add a logo. Pretty easy, this one - resize or otherwise edit your logo (you could add whitespace using Photoshop or another editing package to make it the same width as your page if you don’t want it centered) to the width of your site, then upload it through Thesis’ “Header Image” function. Now change Design Options -> Header to not show your site title or tagline as text.
Add a nice border This is a nifty effect - in Design Options -> Fonts, Colors and More -> Body (And Content Area), select “Add a cool shadow effect to your layout”. Does exactly what it says!
Put the navigation menu below the header image For a site design like this, you’ll almost always want the menu below the logo as a way to break the page up a bit (unless you’ve included a break in the logo image itself). There’s no menu option to do this in Thesis, but it’s simple to do with custom code.Go to “Custom File Editor”, and select “Custom_Functions.php”. You’ll be presented with a text document - where it says “add your code here”, or words to that effect, add
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); add_action('thesis_hook_after_header', 'thesis_nav_menu');That’s it - your menu will now be below your logo.Hide unnecessary bits on featured posts You don’t need or want to show “Author”, number of comments (unless it’s huge), date, or various other things on your post. Go to Design Options -> Byline and uncheck all the options you don’t want - I’ve unchecked them all. Then go to Tagging, and deselect “Show Tags on Index and Archive Pages”.
Make your menu bar a solid colour I wanted a solid block of colour for my menu bar. Fortunately, this is really easy - in Custom.css in the Custom File Editor, simply add
.custom .menu {background-color: rgb(255, 102, 0)}
So, after all that, you should have something a bit like http://kamikazecookery.nfshost.com/ - not super-slick, but certainly usable.
So How Do I Make It Slicker?
After you’ve done all that and fiddled about for a while, you’ve probably got something that looks clean and acceptable, but certainly not as slick as the Divine Bitches site or anything like it.
Unless you have some serious hidden talent, you’re never going to get to the level of the slickest of the slick - after all, the top sites on the Internet are designed by people who spend their lives doing very little but obsessing on website design. I know a few of those guys, and they’re better than I’m ever going to be.
However, you don’t need to be in that top 0.1%, and as I discussed above, you probably can’t afford to be either. If you’re not in a situation where you can drop a couple of thousand bucks on your website, you can make a remarkably pretty and functional site up yourself just by taking the design you already have - which is already probably better than most non-professional efforts - and spending a day or so tweaking.
Here are a few tips for improving your design by yourself:
Get LOTS of feedback, and not just feedback from people you know. Certainly, ask for critiques and things you could do better from your friends, and from Facebook friends, and so on - but also put it out there in the harsh light of day. Ask for a crit on Web Series Network, or on IndieTalk, or on the forums for the tools you use. Find web design forums and - HUMBLY - ask for suggestions. Maybe even post somewhere like Hacker News or Reddit and ask for feedback there - it’ll be pretty harsh, but there are some very smart people out there, and often you only need one tip - “Reduce the font size”, “Put a gradient on the background” - to massively improve your site.
Play around Particularly if you’re new to webdesign, don’t be afraid to play. It’s reasonably hard to break your site permanently - try different colour schemes. Try changing border sizes. Mess around.
Read Books My number one tip for most things - read a book. Find a book on web design and read it. You’ll probably find half a dozen ideas - try them as you go. This is a great way to build up a skill too - although it ain’t fast. This is a good, free place to start.
Add some shots from the show One great way to spruce up a website is to use some graphics - and you’ve already got a great source of graphics in your show! Try using them as spacers - use a line of tiny thumbnails from the show - as background images - blurred a bit and spread out - or even use graphical elements from your titles for edges and corners. It’s amazing what you can do with a bit of time with Photoshop and some great images from the show.
Pay a great designer to do as much as you can afford You’re better off getting something from a great designer than everything from a below-average one. Find the designer you’d really like to have design your site - look at their portfolio and past work - and then ask them if they’d be willing to give you some suggestions for improving your site design, or a full critique, or even an image-based mockup you could work from. Negotiate! See what they can do for you.
I’ve never hired a designer for any of my series’ sites. At the end of the day, even if your site isn’t perfect or beautiful, if it lets people find your series and watch it, it’s doing the job you need it to do.
Next Week: Stress-Testing, Continuous Improvement, and More
Well, the good news is, if you’ve followed through that, you’re basically done! You’ve got a site, it’s perfectly capable of serving your series up to your audience, and it looks at least reasonably appealing and professional.
There are a few more things that you can and probably should do. Next week we’ll have the final, slightly shorter part of the series, where I discuss checking if your site can handle all the traffic it might suddenly get - including anything up to a mention on a site like Digg or Reddit - and how to improve things if it can’t. I’ll also discuss continuous improvement, testing, and how to keep making your site steadily better as your series grows.
But for now - you’ve got a site, or at least you know enough to make one. Woohoo!
What to do next:
_If you had any trouble with any parts of this article, or if you’ve got questions or suggestions on designing your series’ website, post them in the Comments below! _
_And if you felt you got some value out of this article, please hit the Retweet button below to share it with more people it could help! _
Read more ā