HOW TO: Build a More Beautiful Blog
This series is supported by Webdesigner Depot, a popular web design blog covering tutorials, design trends, blogging and inspirational posts. You can visit WDD at webdesignerdepot.com and follow WDD on Twitter @designerdepot.
Whether you're blogging for business or pleasure, now is the time to take your little corner of the web to the next level. Social media makes your blog more visible and valuable than ever, and the amount of resources available to beautify and streamline your blog is enormous, and ever growing.
The best part is, you don't have to be a designer or a programmer to create a great looking blog, but you should know where to find the right resources, and how to align your blog's design with its purpose.
Learn Some HTML
We all wish the web was 100% drag and drop, but we're not quite there yet. You can get away with pushing the knobs and levers on the back-end for a while, but you may never get your blog to look exactly how you envision it without knowing a little bit of HTML.
A basic understanding of the web's nuts and bolts will allow you to make custom design tweaks, fix template problems, and format your posts more precisely. Rest assured, there's no need to sign up for classes. Everything you need to know about the web is right here on the web.
A great place to start is W3Schools, a site that provides great free tutorials on web development. The HTML tutorial covers exactly the core basics you should know. While you won't need to code your new blog design from the ground up, understanding how tags, text formatting, and embedding work will be extremely valuable when you want to start customizing the pre-built boxes and widgets on your site.
Blog customization is an experimental, learn-by-doing process. With a little bit of coding knowledge, a wealth of options will be open to you. If there's something you'd like to achieve, or something that's not quite working in your template, a Google Search can be your best friend. Chances are, someone else has had the same problem, and posted an answer or code snippet on the web that you can use.
Find the Right Template
The world of blog design has come of age, and the web is bursting with beautiful, free design resources that are easy to plug right into your platform of choice. There's no need to settle for simple color scheme changes or built-in layouts. Brilliant designers are sharing their custom-built templates on the web in droves.
Here are a few resources that you can browse in your search for the perfect design. Not sure which platform to set up your blog on? Hopefully some of the designs cataloged on these sites will inspire you in one direction or another.
Wordpress
Free WordPress Themes
Blogger
Tumblr
Posterous
Note that Tumblr themes are also compatible with Posterous.
Layout
Shopping for your template can be a lot of fun, but as you start narrowing down your top choices, it's time to ask yourself: What is the purpose of my blog, and how can the design facilitate it?
Think about utility and user experience when choosing your layout.
Will you be embedding lots of YouTube videos or large graphic elements in your posts? Then perhaps a one or two column template, with lots of horizontal space, is your best bet.
Are you planning to display a lot of content side by side, with links to other posts and advertising? Consider a three column template.
The key to good blog design is to strike a balance between content and clutter. You want to present yourself artfully, without being distracting.
One Column
Simple and straightforward, a one column blog is all about the posts, with no sidebars or other distractions. If the most important content on your blog is always at the very top, a one column layout might be a great choice.
Terminal Flashback (Tumblr)
Two Column
The blogging standard these days, two column layouts leave plenty of real estate for your content, but also a lot for sidebars full of links, contact info, and other information your readers might find useful.
Three Column
Use three columns if you plan to spread lots of content, links, and ads out onto your page. But, be wary of clutter. Be sure to choose a three column layout with ample spacing and breathing room for content.
Outside the Box
For something a little more interesting, break out of the column mold and consider some unique layouts like these.
Be a Layout Sleuth
Have you stumbled upon a blog design that you've absolutely fallen in love with? It's possibly a template that you might be able to use for your own blog. If so, there are a few ways to figure out where it came from, and how to get it.
Many templates are free under a Creative Commons license, and as such, include a link back to the source or designer. Scroll to the very bottom of the blog's home page and look for a template attribution. There you may find the name of the theme, a link where to find it, and the platform on which the blog is hosted (WordPress, Blogger, etc.).
If there's no attribution on the page itself, a little detective work can help. On the blog's home page, use your browser to view the source code. There may be clues, including the blog platform, attribution notes about the template, and possibly a URL where you can find it. Use the "Find" function (Control + F in Windows, Apple + F on a Mac) to search for key words likeTheme, Template, Tumblr, or WordPress to find any clues in the code.
Of course not all templates are free. Some are custom built, or purchased from designers, and won't necessarily have attributions.
Make It Your Own
Now that you've implemented your beautiful new blog template, it looks exactly like the 3,000 other users who have downloaded the same one.
Use your blog's back-end bells and whistles, in combination with your new HTML knowledge, to add your own brand to the design. The first thing you can do is add a simple logo or moniker in the header of your blog.
Find the box, widget, or code at the top of your blog that contains the template graphic, and replace it with your own. Be sure to keep the size and shape of the image consistent with the template to avoid layout issues. The key to making it 'fit' into your new design is to use complimentary colors and fonts.
Sample the color(s) from your new design and input it into Color Scheme Designer 3, a great tool that will generate complimentary and tertiary colors you can use for headers and additional graphic elements.
If you're not a designer, simple is better. Let your new template do the talking, and keep your header image clean and basic. Looking for a great logo font to express your blog's content? Check out 1001 Free Fonts and FontSquirrel for some great looking freebies.
For the Non-Designer: Go Minimalist
If you're not design-minded, but in the market for a slick looking blog that you can manage aesthetically, think simple. Minimalist themes often use neutral colors, clean layouts, and lots of white space, making them ideal for easy customization.
Don't fret over color schemes and texture cohesion. Simply pop your logo into a good minimalist theme and let the white space speak for itself. Check out these examples.
Need More Inspiration?
The blogosphere is jam packed with extraordinary designs — clever, functional, and just plain gorgeous. Even if you're already set with your own new layout, it's always fun to just kick back and enjoy the creative work of others. Here are some more designs that may get your ideas and creativity churning.
App Boy
Paul Giacherio
Have any more tips on building a more beautiful blog? Be sure to share them in the comments below.
Series supported by Web Designer Depot
Webdesigner Depot is one of the most popular web design blogs in the world. It covers tutorials, design trends, blogging as well as inspirational posts. It's run by Walter Apai, a web designer from Vancouver, Canada. The blog is a great resource for both beginners and advanced designers looking to expand and improve their knowledge. The site is visited by Fortune 500 companies and is used as a reference by many design schools. Visited by almost 2 million readers per month, WDD is a prime resource for both graphic and web designers.
