1stwebdesigner

Posted by ryan | Posted on 17:07

Posted: 13 Jul 2010 02:00 PM PDT

In our first installment in the Tumblr series, we took a look at what Tumblr actually is, and what it does. The article finished off by showing 4 fantastic custom themes that have been created by some awesome designers for use on their Tumblr blogs. In this instalment, I want to show you 20 fantastic free Tumblr themes that will get you started on your Tumblr blog. Then I’m going to show you 20 fantastic premium Tumblr themes, for those of you that want that quality feel to your Tumblr blog, but with little effort from yourself! Here goes…

Free

From the beginning, Tumblr has had a fantastic library of free themes; it’s site says there are over 400 indexed. Here are 10 that stand out to me as being fantastic quality for free themes.

1. Easy Reader 2

Link | Demo

A typographic beautiful mix of grey, red and white.

2.101

Link | Demo

A pastel colored sexy left aligned theme.

3. Postage

Link | Demo

Beautiful imagery taking the persona of letter postage!

4. Godlike Bliss

Link | Demo

A twitter inspired theme that’s up there in the clouds.

5. bbxtumblr

Link | Demo

Fantastic css3 typography coupled with stunning icons.

6. Doodling in Class

Link | Demo

Perfect for scribbling down notes here and there.

7. Screenshot

Link | Demo

Show of your latest work with this screenshot gallery theme.

8. TumbleDesk

Link | Demo

Bring the readers to your desk with this theme.

9. Photoboard

Link | Demo

Content is displayed on cards, with beautiful enhancements such as flipping for details!

10. Panda Classics Recycled

Link | Demo

Keep it cool with this panda theme!

11. Nine of Mine

Link | Demo

Sheer simplicity. Let your content shine.

12. 1000 Suns

Link | Demo

A single column with simple styles.

13. Paper Walls

Link | Demo

Let this paper styled theme make your blog look the professional deal.

14. Rockstar

Link | Demo

Classy, colourful and bright. Attract attention to your blog!

15. Fluid

Link | Demo

A proper Tumblr favourite. You’ll see this beauty a lot which says a lot about its quality.

16. ColorBars

Link | Demo

Nothing classy, just a fantastic, fluid layout.

17. Stationary

Link | Demo

With a fantastic paper border, this theme offers brilliant typography.

18. Photog

Link | Demo

Designed to give one post your attention at a time. A great concept.

19. Organ

Link | Demo

Likely the most original Tumblr theme ever. You’ve seen nothing until you’ve tried it.

20. Cavalcade

Link | Demo

Fantastic use of greys with subtle tints, and eye pleasing combinations.

Premium

A few months ago, Tumblr introduces something that web designers had started doing external to the Tumblr themes library; premium themes. Here are 10 from around the internet that caught my eye.

1. Photofolio - $49

Link | Demo

Keep it sexy with this shimmering folio theme that just shouts out to you.

2. Sonic – $49

Link | Demo

Give your band a fantastic blog with this theme.

3. Postcards – $19

Link | Demo

Playing on the postcard persona again, but this time, much more classy.

4. Generate – $19

Link | Demo

Here’s a clean, sleek blog theme from Woothemes.

5. HashTwo – $15

Link

A fresh, contemporary theme from OboxDesign.

6. Stratocaster – $17

Link | Demo

IvorPadilla makes grey cool with this fantastic theme.

7. Helvetica – $12

Link | Demo

This theme is for people that love Helvetica!

8. Vintage Scrapbook – $14

Link | Demo

Vintage Scrapbook is a whimsical, highly detailed theme inspired by the colours, styles, and textures found in old documents

9. Rank & File – $49

Link | Demo

Three columns of simple beauty.

10. Well Liked – $9

Link | Demo

Sleek and classy, this’ll kickstart your Tumblr experience.

11. Scribble – $9

Link | Demo

Show of your site with this sketch style theme.

12. Ribbon Section – $15

Link | Demo

Fantastic implementation of ribbons. With different color schemes, this feels premium!

13. Splatter – $19

Link | Demo

A single column, subtle grunge layout that mixes aqua and pink splendidly.

14. Micro Inkdrop – $15

Link | Demo

The demo starts with a fantastic image slider, and the beauty doesn’t stop there.

15. Micro Depth – $15

Link | Demo

A colourful and vibrant theme for you to make an impact on your readers.

16. Tumbl News – $14

Link | Demo

A theme aimed more at providing news than small time blogging.

17. Nuance – $14

Link | Demo

Nuance provides an original grid view to different Tumblr posts.

18. Crisps – $12

Link | Demo

Yet another single column layout, but this time, with an added slide out sidebar!

19. Simplefolio – $49

Link | Demo

Simplefolio shows what can really be achieved with Tumblr, turning it from a Tumbleblog into a full portfolio complete with pages!

20. Solaris – $9

Link | Demo

Taking minimalism to a whole new level of beauty.

Further Thoughts

So now we’ve learnt what Tumblr does, in terms of micro blogging, and how it works, and we’ve seen what can be achieved through its theme system. The next installment in the series will teach you how to code your own psd to a fully fledged Tumblr theme! Keep your eyes out for it, and apologies for the wait.

If you have seen any fantastic free and premium Tumblr themes that you think are worth a mention, hit them up in the comments. We love to hear what you think, and like =)

Tips and Inspiration on Creating a Great Website Footer

Posted: 13 Jul 2010 03:00 AM PDT

As most of us know, there are three important parts of a website’s design: the header, the content, and the footer. None of these should be ignored when creating a web design. Sadly it happens in most cases, and many web designers ignore the footer design. Over time the footer evolved from just a line of text with the copyright, legal notice, or navigation into a mini repeated area which is filled with navigation, comments, recent posts, copyright, etc.

In this post, not only are we giving you samples of website footers for your inspiration, but also guiding you 5 important steps to remember whenever you are designing the footer.

1. Decide On Repeated Content

Be very selective in choosing the content you want to place in the footer. It depends on your need, what your website is about, or what content you want people to re-read in your footer. If you have a blog website, magazine type of website or similar it could be your recent posts, featured posts (in lines with no image thumbnail), recent comments, or social media links. For artists, designers or companies it could be their services, portfolios (in small thumbnails), testimonials, contact form or recent tweets.

2. Add Logo(s) If Necessary

People nowadays are really concerned about feeling safe and secure when they visit websites and want to make sure that they are browsing the right sites. For e-commerce websites, it will be a great idea to place some logos such as Verified Merchant, Verisign Secure, McAfee Secure, or others. And if you have partnership, sponsors or even awards recognition, why not placing their logos on your footer as well? This will help you get respect from your website visitors.

3. Add The Interesting Point(s)

Say good bye to the old boring website footer. You have done a great job with the header and content (body) of your web design, now it’s time to spice up the footer. A few interesting things you could add can be icons, illustrations or just about anything fun. Though, remember to match them with the website layout or the website concept and try not to add many icons.

4. Space Things Out

Now that you have everything you need for the website footer, let’s add some space between the sections. Although it might not have as much content as you have in the body content, it is always better to have them spread out rather than looking so packed in.

5. Do Not Forget Your Copyright Line

Don’t let all the content in the footer fool you. It doesn’t matter how much stuff you put as content or how many logos/portfolios you have on your website footer, you still have to put your copyright line somewhere. Be creative, it doesn’t have to be at the bottom all the time.

Now let’s take a look at some other website footer designs for your inspiration.