Wednesday, November 4, 2009

50 Beautiful and Creative Blog Designs

Beautiful and Creative Blog Designs

Jason Gray Music
Jason Gray’s blog was initially WordPress-based, but it now has a beautiful and original Flash appearance that we just couldn’t pass up.
Jason-gray in 50 Beautiful and Creative Blog Designs
The Pixel Blog
This exquisite blog belongs to a Web design and marketing company called The Pixel. Amazing graphics in the header and footer, along with a giant tree (the branches of which separate the posts), make this design pure eye-candy.
Pixel-blog in 50 Beautiful and Creative Blog Designs
Sushi & Robots
Sushi & Robots is the journal and portfolio of Jina Bolton, a San Francisco-based designer, developer and author. If you’re looking for creative inspiration, this website is definitely a master class.
Sushi in 50 Beautiful and Creative Blog Designs
WorkAwesome
The neat desktop-themed design of WorkAwesome’s blog is definitely worth your attention.
Workawesome in 50 Beautiful and Creative Blog Designs
Onebyfour in 50 Beautiful and Creative Blog Designs
Jason in 50 Beautiful and Creative Blog Designs
Curtis in 50 Beautiful and Creative Blog Designs
30 in 50 Beautiful and Creative Blog Designs
Tyler in 50 Beautiful and Creative Blog Designs
31three in 50 Beautiful and Creative Blog Designs
Abduzeedo
Abduzeedo, which is bookmarked by every Web design fan, was recently redesigned. The highlights are considerably enhanced usability and unique post teasers.
Abduzeedo in 50 Beautiful and Creative Blog Designs
IA in 50 Beautiful and Creative Blog Designs
Hoyt in 50 Beautiful and Creative Blog Designs
Point & Anchor
It’s all about the lines here. Point & Anchor’s blog design is quite engaging.
Point- 038 -anchor in 50 Beautiful and Creative Blog Designs
Trent Walton
Neatly combining a few uncomplicated code hooks, the founder of Paravel Web design agency, Trent Walton, has created an original, attractive blog. The presentation of each individual post and the overall layout of the blog are remarkable indeed.
TW in 50 Beautiful and Creative Blog Designs
Tumble in 50 Beautiful and Creative Blog Designs
Fudge
The website of digital studio Fudge is currently under construction. Still, the way it has designed its latest news log is worth mentioning here. Photoshop interface imitating design is a neat idea. Plus, the navigation is a treat for the eye.
Fudge in 50 Beautiful and Creative Blog Designs
Uxbooth in 50 Beautiful and Creative Blog Designs
Daustralala in 50 Beautiful and Creative Blog Designs
Design Intellection
This simple yet admirable blog design is achieved using HTML 5 markup. The dotted typography for post numbers is a nice touch.
Design-intellection in 50 Beautiful and Creative Blog Designs
Biggest Apple
The pure style of Biggest Apple’s website features a gorgeous sketch in the header and some pretty icons all around.
The-biggest-apple in 50 Beautiful and Creative Blog Designs
Arbol in 50 Beautiful and Creative Blog Designs
Hellium in 50 Beautiful and Creative Blog Designs
Argee in 50 Beautiful and Creative Blog Designs
Strip in 50 Beautiful and Creative Blog Designs
Boulton in 50 Beautiful and Creative Blog Designs
Working-library in 50 Beautiful and Creative Blog Designs
LaMalla.cl (Chile)
This amazing blog belongs to a small community of creative people, a space to share links to inspirational info from all over the globe. A grayscale geometrical background and cool jQuery effects make our exploration of this website a really enjoyable experience.
Lamalla in 50 Beautiful and Creative Blog Designs
Contrast
A clean style, nifty typography and hover effects make for a great blog design. Excellent work by Contrast, a Web apps development crew from Ireland.
Contrast in 50 Beautiful and Creative Blog Designs
Demain J’arrête (France)
This classy comic strip is available in French only, but the blog’s design won’t leave you cold.
Demain-jarette in 50 Beautiful and Creative Blog Designs
Fran Fernández
The blog of Spanish singer Fran Fernández features an expressive and slightly careless-looking graphic design, which reflects the passion of the musician best.
Fran-fernandez in 50 Beautiful and Creative Blog Designs
Stéréosuper (France)
Stéréosuper is a successful duo of creative folks working in the field of multimedia. Boris and Jean-Francois are keen on karate: perhaps this explains the imaginative fighting characters in their design. The dark color scheme and hatched elements are quite appealing, too.
Stereo-super in 50 Beautiful and Creative Blog Designs
Music City Unsigned
This cute blog belongs to the Nashville community of emerging artists. Although it is Flash-based, you won’t have any problems with accessibility or navigation here.
Music-city in 50 Beautiful and Creative Blog Designs
Tal & Acacia
Unpretentious beauty: this is how we would describe this design. Pastel-themed graphics give it a special flavor.
Tal 038 Acacia in 50 Beautiful and Creative Blog Designs
Denis Chandler’s Blog (Another Blog About Stuff)
The style of this blog is fairly conventional, but look at the header! This bit of spice elevates the otherwise formal design, bringing in some splash.
Hello in 50 Beautiful and Creative Blog Designs
Mulletized
This blog of Cape Town Web designer Brendon Grobler features an offbeat layout and great use of typography. This is what Brendon says about his blog redesign: “I tried to create something less “bloggy” and more graphic, focusing strongly on typography (which is one of my great design loves) and imagery.” The result is impressive, wouldn’t you agree?
Mulletized in 50 Beautiful and Creative Blog Designs
M1K3 
This blog (belonging to UI designer and developer Michael Dick) is an example of an excellent dark design.
Mk3 in 50 Beautiful and Creative Blog Designs
Mark Forrester
This awesome blog-styled website is a creative outlet for Mark Forrester, a “half-baked” (his words) English/South African freelance designer and entrepreneur. The journal is easy and pleasant to navigate, and the cartoon illustrations in the header and footer are incredible. (They were designed by Cape Town-based illustrator and cartoonist Alex Latimer).
Forrester in 50 Beautiful and Creative Blog Designs
Jord & Chan
This nice duo-themed layout presents two strips of content on the same page, a very original idea. The smooth background texture adds more charm to the design.
Jord 038 Chan in 50 Beautiful and Creative Blog Designs
Cog’Nition
This blog has a lovely surprise: you can change the design’s theme, choosing from two amusing cartoon-style backgrounds.
Cognition in 50 Beautiful and Creative Blog Designs
JonahL
Jonah Levine’s blog follows simplicity and a pure style. An attractive dark design, and a good use of lines.
JonahL in 50 Beautiful and Creative Blog Designs
Marcel Müller blog
Marcel Müller’s blog has a stylish, corporate look. Another good example of precise, minimalist design.
Muller in 50 Beautiful and Creative Blog Designs
TrippingWords
This really is something striking. Everything here, from the header to the footer, is extraordinary and hyper-creative.
Tripping-words in 50 Beautiful and Creative Blog Designs
Swish-life in 50 Beautiful and Creative Blog Designs
Meson-projekt in 50 Beautiful and Creative Blog Designs
Design-critique in 50 Beautiful and Creative Blog Designs
Manuel in 50 Beautiful and Creative Blog Designs

Saturday, September 12, 2009

Best of Best WordPress 404 Error Page Designs

1. WPBeginner

WPBeginner's 404 Page

2. Catalyst Studios

Catalyst Studio's 404 Page

3. Jamie Huskisson

Jamie Huskisson's 404 Page

4. 45royale Inc.

45royale 404 Page

5. Carsonified

Carsonified 404 Page

6. CSS Tricks

CSS Tricks 404 Page

7. Techkultura

Techkultura 404 Page

8. Inspiration Bit

Inspiration Bit 404 Page

9. Catswhocode

Catswhocode 404 Page

10. Ba.pe

Bape 404 Page

11. Cut and Taste

Cut and Taste 404 Page

12. CSS Remix

CSS Remix 404 Page

13. Ateaseweb

Ateaseweb 404 Page

14. Koller Media

Kollermedia 404 Page

15. Expansion Broadcast

Expansion Broadcast 404 Page

16. Function

Function 404 Page

17. Retard Zone

Retard Zone 404 Page

18. Kidmondo

Kidmondo 404 Page

19. Devlounge

Devlounge 404 Page

20. Chris Jennings

Chris Jennings 404 Page

Best Practices and Lessons You Should Learn from these

In the above showcase you probably saw some 404 pages that were very creative, whereas others that were just weird but memorable, and some that were simple yet elegant and usable. When creating a 404 page you need to remember to combine all three elements: creativity, usability, and the ability to leave a lasting impression.
When creating our 404 page, we actually looked at a lot of these above to get inspiration and combine the best elements from these into one. Most of the time, when people land on the 404 page, they are frustrated. So you need to assist them in finding what they are trying to reach, but in the most creative way possible.
A good structure that you can follow is:
  • Creative Image
  • List of Popular Posts
  • List of Recent Posts
  • List of Archives
  • Search Bar
  • Offer more help by giving contact options
Now you do not need to have all of them, but you should certainly have more than two of these options in your 404 page.
Analyzing our 404 page, some people say we do not have a search bar. We have our search bar in the sidebar, so there is no reason to display it twice. We are displaying archive by month, by category, and we are displaying the popular tags. Ofcourse the creative image is to make it all look friendly rather than dull.
Now we understand that not everyone is a great artist and cannot come up with some of the illustrations and cartoons above, but you can see the Devlounge example or Function’s example above to see how simplicity can also work. Devlounge has a very organized 404 page, no image, no nothing, but it is very organized and helpful. Function has a simple icon and other resources, but nothing super graphic.
When creating your own 404 page, keep that in mind.

How to Create a 404 Page in WordPress

In your WordPress theme directory there is a file called 404.php, if you don’t have that file then you might want to create one. You can add any HTML in that file to fit your needs. But it is recommended that you use the default parameters, so the page looks like it is part of the design.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Now wrap around the styling HTML around it. If you want you can even copy your page.php content in 404.php and just remove the content area and add your customized tags.
Here are some of the tags that you can use:
Display Archive by Months:
<?php wp_get_archives('type=monthly'); ?>
This code will display archive by months, but it will list all months. So it might become a mess if you have a blog that is three years old. To learn how to limit the count of months displayed check out the tutorial.
Display list of Categories
<?php wp_list_cats(); ?>
This code will list all categories on your blog. Ofcoures you can style them however using list tags or others.
Display Most used Tags
<?php wp_tag_cloud('smallest=8&largest=12&unit=pt&number=30&format=list&order=RAND'); ?>
This will show the most used tags like how we have on our 404 page.
Display Recent Posts
<?php get_archives('postbypost', '17', 'custom', '<li>', '</li>'); ?>
There are more codes that you can use, you will just have to search the documentation and find it. If you have a specific question feel free to ask us at anytime.

Further Sources:

These lists has a lot more 404 examples. We only featured the WordPress ones.
404 Error Pages Reloaded
More 404 Pages
60 Creative 404 Page Designs

LinkWithin

Blog Widget by LinkWithin