Blog Design Blog

What Everybody Ought to Know About Making Changes Count

Vinh Le — Mon, 30 Mar 2009 18:49:16 +0000

People who rate themselves as intelligent have a 47 percent higher need for change in their professional world. They regularly see possibilities and opportunities around them. (1)

Change is great, we should always be trying to make little improvements in not just our blogs, but everything in our lives. As always though too much of a good thing can be a very bad thing, especially in the case when changes are made just for the sake of change. Often times these types of changes are made purely out of boredom and not exactly with the purpose of making it better.

Change made just for the purpose of making a change in order to make things more interesting is not always a bad idea either. You might come across something that really works that you never would had normally tried. Nether less in order to make your changes count it is important to keep a few things in mind when making them.

Make sure the change will actually do what you want

It sounds silly to even bring it up, after all why would you even bother in the first place with a change unless you actually thought it would do what you want? The problem is that sometimes when we are making changes, we are actually only tinkering around in the shadow of a much bigger problem that we cannot see because we are so focused on little problems. This phenomenon is often referred to as tunnel vision.

For blogs, it is like working on making changes on your sidebar to improve your RSS subscribers count, when the bigger problem is how you are marketing your blog. You could have the most awesome sidebar ever, usability - check, design - check, content - check, but no visitors besides a few people who got lost looking for something else.

Ask yourself, if the change you are going to make really going to solve the underlying problem? If it isn’t, then don’t do it. Make changes that count and prioritize them. There are always more things to do in our lives than we have time to do.

Measure where you currently are

The reason it is important to measure where you currently are is in order to have a starting point that you can measure against after you have made the change in order to see if the change is effective. If you make a change, but have no way of keeping track of if the change actually did anything, then you really have no idea if the change was for better or worse.

For blogs, the equivalent could be measuring your current RSS subscribers, average page views, or even the number of times visitors click on a certain link. That link could be your services page or something else that is vital for the success of your blog.

Whatever change you are making, pick a measurement that is meaningful for you or at the very least a measurement that will indicate whether or not you are actually progressing. Measuring how many hits you get doesn’t really help you that much if all that is important to you is how many people actually contact you. Don’t get me wrong, it is still a helpful measurement, but focus on that numbers that really matter for you. Ask yourself, what has to happen for the change to be considered a success for you?

Measure your progress weekly

You could measure everyday, but that is just going to drive you insane no matter what you are doing. Depending on the changes you are making, it might even be better to measure bi-weekly or even monthly. Daily measurements will just have you riding on an emotional roller coaster no matter what changes you are trying to make.

When I was trying to lose weight, I use to drive myself nuts weighing myself everyday. I would feel happy if it went down, but if it went up or didn’t change I would be grumpy for the rest of the day. It was very unnecessary considering that it is normal to fluctuate up to four pounds in one day. Now, I measure weekly, but I take it with a grain of salt as I find biweekly measurements to paint a better overall picture as to what is happening.

In blogs, you have the same situation where the number of RSS subscribers will fluctuate everyday. Just because that change in your layout or that new article on X topic didn’t give you immediate results doesn’t mean it isn’t working. Stick with the change you made and keep track of your progress.

Reassess the change that you made

After you have got enough measurements it is a simple matter of deciding whether or not the change that you made was effective in solving your particular problem. If it worked out well, keep working in that direction.

If it didn’t work as well as you thought it would, figure out what went wrong. Ask yourself as many questions as it takes to figure it out. Did you make the wrong change? Was it successful but it solved the wrong problem? Did you use the wrong measurement? Or perhaps did you not give it enough time to actually see a change? Or did you not have enough information to make the change?

Conclusion

In the end, the whole process of change is really an experiment that you conduct in order to see if what you changed actually is for the better or worse. Experiment, make changes that count, and prioritize them. There are always more things to do in our lives than we have time to do.

Also remember to write down what works and what doesn’t. There is an odd phenomenon where people sometimes stop doing what works and keep doing what doesn’t work. It is more common than you think.

1. Whatley, A. 1998. “Gifted Women and Teaching: A Compatible Choice?” Roper Review 21:117-24

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Making a blog design visually interesting (2) – Adding in the details Making a blog design visually interesting (1) - Getting...
Making a blog design visually interesting (1) - Getting started Creating visually interesting blog designs is an art. And as...
10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no...

3 Things to Remember When Designing a Blog Footer

Vinh Le — Tue, 24 Mar 2009 14:43:55 +0000

Photo by LA Wad*

Introduction

This is a guest post by Skellie from http://www.skelliewag.org. Check out her blog for articles on how to use blogs as platforms for profitable online businesses and a great reputation.

Blog footers have traditionally been neglected by designers, usually home only to the obligatory copyright line. Times are-a-changin’ though. Creative footers have become one of the hottest trends in web design, and blog footers are no exception.

It’s not hard to see why. A visitor who reaches the bottom of a web page and finds themselves without anymore content left to browse is at the point where they are most likely to wander away. Blog footers help capture and maintain the interest of the visitor who thinks they’ve seen everything. But they have to be done well. Here are three key things to remember when designing a blog footer.

1. Attention decreases from top to bottom

When a user visits a website, the first thing they see is the top area: the header, the top of the sidebar, and usually some of the content. This is the highest attention area of any design. As the user travels down the page, they need to be kept interested. The likelihood of boredom or distraction increases as the user travels downwards through the design.

They might see a blog post they want to read, or a link they want to follow. They might just decide that the blog isn’t for them. Because of this, most visitors to a blog will never make it to your footer. This means that if there is something you want every visitor to see–whether it’s your navigational menu or the icon for your RSS feed –it should go in the highest attention area of your site: the top area.

2. Your footer is not a navigation bar

Following on from section 1, you should not put ‘must use’ elements of the design in its footer unless they also appear in a high attention area. For example, if your ‘Contact’ page is only accessible through your footer–one of the most common usability errors you’ll see in modern web design–you’re drastically increasing the chances that someone who wants to contact you will lose patience trying to do so. They may never think to look in that area and simply won’t see the link. This can lead to missed opportunities and frustration for blog readers.

Putting a ‘Contact’ page link in your footer is fine, however, when you’ve linked it again in a high attention area. Having navigation at both the top and bottom of your blog will improve its usability, since putting links at the bottom of your page makes sense–once a reader has reached the bottom, they’ll probably want to explore another part of your blog.

3. Keep it interesting!

Blog footers are a great opportunity to surprise and delight those who find them. For years the website footer almost had to be boring. At most, you could expect to find copyright information and a contact link. The nether regions of a blog were to be avoided.

Now, designers are beginning to appreciate the opportunity to go against expectations. I’ve seen blog footers featuring funny quotes, interesting links, portfolio items, illustrations and top posts. These are the best kind of blog footers because they keep users entertained at a key point when they would be most likely to navigate away from a site. Don’t use a blog’s footer as a place for basic features like navigation. Instead, do something interesting and novel that will keep visitors interested!

Conclusion

As a designer, the best way to develop your skill with blog footers is to bury yourself in examples that work. Here are a few great places to start!

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Designing a better blog In order to redesign my blog, over the past few...
How to Design a Better Blog and Make More Money Why is Your Blog Design Important to Your Blog's...
How to Blog Design Style Guide Introduction When designing blogs I noticed there are a...

The Secret to a Great Blog Redesign

Vinh Le — Fri, 31 Oct 2008 02:22:39 +0000

Photo by Melisande*

Introduction

The secret is that you don’t have to hire an expensive blog designer to have a great blog redesign. While it certainly helps and makes the process much easier if you had one to work with, it would still be your responsibility in order to set the overall guidelines for the blog redesign. You need to have a direction when working towards a redesign of your blog. Without any direction you will just end up with a prettier blog (hopefully), which is fun, but does not guarantee that it will make your blog any better.

A great blog redesign starts with a plan. In order to put together a plan for your redesign, you must first reassess your goals, then figure out how well your blog is meeting your goals, and finally asking yourself whether the current design is helping your blog achieve your goals.

Let your goals guide your redesign

If you have ever tried to redesign your blog or anything for that matter, you have probably found your progress halted to a stop by little details such as does this blue or that green look better? This happens when you don’t have goals to guide your overall efforts. Little details will bog you down and slow your progress and even sidetrack you completely from the actual purpose of your redesign. The importance of the answer to whether that blue or green looks better pales in comparison to the answer for the question of whether this change will help you make more money, get more subscribers, or increase page views.

Making visual changes just for the sake of change itself will result in a prettier blog, but that does not necessarily mean a better blog. You can actually make it worst if your redesign is not built with your goals in mind. You can’t hit a target you cannot see.

Just like social media and SEO, your blog design is a tool, a means to an end and not the end in itself. Reassess your goals and allow them to guide your decisions when redesigning your blog. The following are some great resources to help you get started on figuring out your goals and reassessing your current ones:

List of resources

How well is your blog meeting your goals?

This is not about whether or not your current blog design is helping you achieve your goals, because that is the next step. This is about whether or not your current blog is where you want it to be. Is it giving you the exposure that you want? Is it getting you more clients and leads? Are you building a bigger network in which to spread your ideas around?

The answers to these questions will help you determine the goals for your blog redesign. This is different from the goals for your blog as this focuses solely on what you want the blog redesign to be able to accomplish in the end as a result of the blog redesign and nothing else. Increase page views? Get more subscribers? Decrease bounce rate? Increase discussions? Get more leads/clients?

List of resources

Is your blog design helping you achieve your goals?

In order to figure out whether your blog design is helping you or not, you must really take a second look at your blog design. After that, take another 3-4 looks, seriously. As humans our brains are programmed in such a way that information that doesn’t change much, often just gets ignored completely by our mind even if we see them everyday. This is why we can do something everyday and not notice something until someone points it out to us or for some reason we were forced to pay attention to it. So when was the last time you really took a look at the design of your sidebar, footer, headlines, or comments?

If you are like most people, it was probably a long time ago. And who can blame you, as bloggers we get caught up with writing the next best article, promoting the crap out of it in social media outlets, and figuring out other methods to achieve our goals that we end up overlooking our own blog design. We no longer see the widgets we stuffed into the sidebar at the last minute, the links that no one ever clicks on in the footer, or that hideous rss button in the corner. Everything becomes a blur and your blog design suffers because it certainly doesn’t get better on its own.

So how do you figure out whether or not a blog design is helping you achieve your goals? It is pretty simple, as you go through your blog design keep in mind that any visual element that is not helping you achieve your goals is hurting it.

Conclusion

In the end, you should have a much better plan and direction for your blog redesign. Whether you take this to a blog designer or do it yourself does not matter as the end blog redesign will be that much better now that you invested time into a solid plan. If you are doing it yourself, then the next article is for you. It will focus on how to approach the redesign process after you got a plan.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

The Secret of Great Blog Designs What is the purpose of a blog design? There are...
47 Must See Great Blog Designs This is a snippet of what is inside the blog...
10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no...

37 Ways to Design the Comments Form

Vinh Le — Thu, 16 Oct 2008 17:49:10 +0000

If you are a regular reader here, you know that I put a lot of emphasis on paying attention to blog design elements that usually don’t get much attention at all like comment designs. The comments form is another one of the blog design elements that usually ends up getting rushed at the end. There really is no right or wrong way to design a comments form as long as you pay attention to basic usability guidelines. The following are 37 ways other blog designers have designed their comments form:

1. 404 User Experience Design

2. Adii

3. Renaissance

4. Avalonstar

5. Bartelme

6. Carlos Leopoldo

7. coda.coza

8. Creattica Daily

9. CSSAddict

10. Mancub

11. Darren Hoyt

12. Design Disease

13. Design Intellection

14. Edmerritt

15. Elitist Snob

16. Elliot Jay Stocks

17. greg-wood.co.uk

18. High Resolution

19. ifoh designs

20. Jesus Rodriguez Velasco

21. KISSmetrics

22. Kulturbanause

23. La Privata Repubblica

24. lotus from the mud

25. Lucy Blackmore

26. MonsieurLam

27. Natalie Jost

28. Noupe

29. Oaktree Creative

30. Ordered List

31. pixelgraphix

32. Playground Blues

33. Chris Shiflett

34. Smashing Magazine

35. Tim Kadlec

36. Wilson Miner

37. Yanko Design

Conclusion

Now go make your comments form that much better or sexier. I know I need to and that is why I am currently taking a second look at my own blog design. A redesign is coming in the future, along with an article about the whole redesign process.

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

5 Simple Ways to Make Your Blog Design POP In "The Secret of Great Blog Designs," I talked about...
5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...
30 More Must See Comment Designs for Blog Designers I am fascinated by the details in a blog design...

Designredux Free WordPress Theme Updated to Version 0.2

Vinh Le — Tue, 14 Oct 2008 15:27:51 +0000

3 weeks after the release of version 0.1, I have finally added all the finishing touches for version 0.2 of Designredux, and it is still free. The live demo has been updated with the latest version for your viewing pleasure. Visually there has only been minor changes to the overall design. They were just little tweaks here and there to improve the look. A few odd bugs were fixed as well.

Most of the changes though are in the back end. Most notably the addition of a custom admin panel, custom pages, and it is now widget-ready. The following are the list of changes made.

Custom Admin Panel

Most of the work was done here. And most of the work means a lot of work. In order to maximize the use of the WordPress theme in version 0.1, it required you to go into the code and make some changes. With the creation of the custom admin panel, that is no longer necessary.

Navigation

In version 0.1, the navigation on top of the theme displayed all the categories as links. This was obviously going to be a problem when there are too many categories or you don’t want to display every single category there. In order to fix that, I created an admin panel for the navigation so you can now pick which category you want displayed. You can pick as many or as little as you want.

Bottom right of the footer

This area required the edit of the about_text.txt file in order to make changes to its content in version 0.1. Now you can just change it from the admin panel and you can also change the title for that area.

Feedburner

Efforts have been made in this area to make it easier to add your feedburner account and activate subscribe by email without having to edit the code yourself. If you don’t have a feedburner account, it will just default to WordPress’s rss feed.

Google Adsense

Easy integration of Google adsense is now available for the sidebar and post’s footer. All you have to do is paste the code in the admin panel. I also designed it so the integration of google adsense will look nice. But it does require that you set your Google adsense to use #EEEEEE as the background and border color or else it will look sloppy You don’t have to, but your efforts will be rewarded. Check out the demo to see what I mean.

Google Analytics

Just paste google analytics code into the admin panel and you are done. No need to edit.

Documentation

Added a section to explain everything in the settings below the admin panel.

Custom Pages

Version 0.1 had no custom pages so these were added to cover the basic types of pages found on blogs.

Search.php

In the absence of a search.php file, WordPress uses the index.php to decide how to display the results. Not the best idea so I created the search.php so that the search results look nicer.

Page.php

Again WordPress used the index.php to decide how things looked when pages were displayed when page.php is missing. Now regular pages look much better.

404.php

The page you get when someone gets lost on your blog.

Archives.php

The archives page needs to be activated by creating a page in WordPress, you can call this page anything you want, a good name is Archives. Then go to the page templates section of the page and choose “Archives” in the drop down menu. That’s all you have to do.

Conclusion

A lot of work has already been done on this theme, but there are more coming. More tutorials will continue to roll out soon on how to take this theme to the next level. If you have any requests or ideas, please feel free to leave a comment, send an email, or tweet me on twitter about it.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...
How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...

How to Design for Ads in Blog Design

Vinh Le — Fri, 10 Oct 2008 14:06:02 +0000

Introduction

Anyone who has been reading blogs for than a few days will notice that there are two common types of ads in blogs. Those two types are Google adsense, which is essentially a bunch of text with links and banner ad blocks, which often comes in the size of 125 x 125. Then there are three places it often gets placed, the sidebar, inside of a post, or at the bottom of a post.

Advertisements are a nice way of making money with blogs, but where it often goes wrong is the implementation of these ads into blog designs. Most blogs tend to just stick the advertisements right into the blog design without a second thought. This often results in making the blogs distracting, ugly, and less usable. But this does not have to be the case, there are many ways of integrating ads into blog designs without making it worst.

There is pretty much nothing you can do about the design of the ads themselves, besides rejecting the advertisers, which will only end up hurting your earning potential. Therefore the only thing you can do is to ensure that the integration of the ads into your blog design is done well.

1. Give the ads their own real estate

By creating separate real estate for the ads, it makes it clear that they are separate from the actual content of the site itself. This makes it easier for your readers to navigate and use your blog.

An easy way of doing this is to group the ads into a separate container or area of the blog and styling them different from the rest of the blog. Noupe did this in the above example by making the background color for the ads different. You could also try creating a thick but subtle border around the ads.

2. Label the ads as ads

Why bother labeling ads? Because it makes it easy for the reader to know that they are ads at a quick glance. Also by labeling the ads as ads, this decreases the likelihood that the readers will confuse the ads as actual content of your blog.

Ads in the sidebars usually don’t need labels because the sidebar is already separate from the content, but the labels are still helpful. Ads inside of posts should always be labeled as ads, because it is more likely that the reader will confuse them with actual content and get distracted.

An easy way of labeling ads inside of posts is by creating tabs that say “Advertisement” as WebDesignerWall has done above. Simple and to the point, it doesn’t need to be fancy at all.

3. Design for content over ads

In any blog design, there is a hierarchy of elements with varying levels of importance. In general, it is a bad idea to make it so that advertisements appear to have a greater level of importance over your actual content. When you make ads appear more important in your design, it shows the reader how little you value your own content. If it seems like you don’t value your own content and just want to make some quick money, your credibility will drop. Along with your credibility, it decreases the chance that the reader will actually read through all of your content because the ads will be distracting.

Basically what I am saying is that anytime the ads are too distracting or taking way too much attention away from your actual content, then you are designing with ads over content in mind. Ads are often already jumping off the page, there is no need to add to that. Macalicious does a great job of designing with content over ads in mind with their blog design.

Conclusion

As you can see from the above examples, advertisements don’t have to be ugly or distracting. Now that you don’t have any more excuses, make those ads pretty!

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

How to Blog Design Style Guide Introduction When designing blogs I noticed there are a...
Five Blog Design Mistakes that Make You Look Dumb Blog design rules are not set in stone by...
Making a blog design visually interesting (2) – Adding in the details Making a blog design visually interesting (1) - Getting...

How to Disassemble a Free WordPress Theme Part 2

Vinh Le — Wed, 08 Oct 2008 12:08:34 +0000

In this article, I am going to go over the rest of the files in the Designredux WordPress theme before we go on to adding extra features, scripts, and custom pages to the theme. Check out How to Disassemble a Free WordPress Theme Part 1 if you missed it.

The files that this article is covering are comments.php, single.php, functions.php, and style.css.

Comments.php

The comments contains everything required for the comments to function. This includes the comments itself, the comments form, and various checks that do different things depending on the settings set in WordPress.

1. Some pre-flight checks

if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))

 die ('Please do not load this page directly. Thanks!');

Checks to see if the comments.php is loaded directly into the browser. If it is being directly loaded, it will stop loading and display the message within the die() function. Comments don’t work outside of the WordPress Loop so it would be pointless to load it directly.

if (!empty($post->post_password)) { // if there's a password

 if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie

                This post is password protected. Enter the password to view comments.

Checks to see if a password is set for the post. If a password is set, it will stop the post from being displayed and instead display an input box where you can enter a password in order to see the post.

	

 	

                

 		//fun stuff inside foreach loop

Checks to see if there are comments before it begins the process of churning out all the comments. Then it sets $comment_index = ‘1′ in order to be used later for displaying the comment’s number. Only after all that does it begins the foreach loop which will go through every comment one by one and do everything inside the loop.

2. Inside the comment’s foreach loop





        //fun stuff

The first line gets what type of comment it is. There are three types of comments you can get. The three being regular comments, trackbacks, and pings. The reason for checking this is to separate the comments from the trackbacks and pings so it can be organized better. After getting the type, it checks to see if it is a regular comment. If it is a regular comment, then it does all the fun stuff after that. But if it is not a regular comment, it just sets $trackback to true, which tells us that there are trackbacks/pings in this post.

The first line checks to see if the commenter is an author by checking to see if its user id is equal to 1. If it is then it adds the class “comments_author” to the

tag so it can be styled differently from the other comments. The second line checks to see if the comment’s number for that comment is odd, if it is then it will add a class of “odd” so it can be styled differently from the even comments for easier reading. just adds the id for the comment.

The printf() function is used to format the comment’s number for display. The format in this case being defined by “%03d”, which just means it has to be outputted as 3 digits and if it isn’t already in 3 digits format then add leading zeros until you get 3 digits. That is why it comes out as 001 and 002 instead of 1 and 2. $comment_index++ just adds one more to the index so the next one will be 2, 3, 4, etc.

comment_approved == '0') : ?>

 Your comment is awaiting moderation.

The first line checks to see if you have set comments to be approved before displaying in the settings of WordPress. If you have it set to be approved first, then it will just give a message to the commenter that it is awaiting moderation.

3. Trackbacks and pings

	Trackbacks

The first line checks to see if there are any trackbacks or pings. If there is, then it will display them by using a foreach loop again. This is pretty straightforward after having gone through the comment’s foreach loop. This time you just display a link to the trackback/ping if they are not regular comments.

4. If there are no comments



        comment_status) : ?>

 

 	Comments are closed.

If there are no comments for this post, it will do what is after the and before . The second line pretty much just checks to see the status of the comments. If the comments are open, but there are no comments it doesn’t do anything. But if the comments are closed it will say so.

5. Pre-flight checks before displaying the comments form

comment_status) : ?>

 

 	You must be logged in to post a comment.

Before we can display the comments form, we have to check if the comments are open or not and that is what the first line does. Now if it is open, but the settings in WordPress is set so that only registered users can comment then it will force you to login if you haven’t already done so. If all the conditions are satisfied, the conditions being comments are open and you are logged in if required to do so, then the comments form will be displayed.

6. Comments form

Sets the action of the form to the wp-comments-post.php file, which will process the form.

Logged in as . Logout »

Checks to see if you are logged in. If you are logged in, it will tell you so and also give you an option to log out if you want to.

Name

checks to see if the settings in WordPress is set so that it requires the user to fill out their name and e-mail. If it does require it, then it will display * next to the field. fills in the user’s name if they are registered, but if they are not, it just leaves it empty.

ID); ?>

The do_action(’comment_form’, $post->ID) function is a hook for plugins, similar to wp_head() in the header. So don’t go deleting this or comment plugins won’t work.

Single.php

The single.php is used to display single posts. In this theme it is identical to index.php, except for a couple of things. For one, the number of comments are no longer displayed in the top right. And secondly, the comments.php is called on this page.

1. Comments.php

calls the comments.php file and spits it out. That’s it.

Functions.php

The functions.php file is used to hold all the custom functions outside of what WordPress offers that you plan to use in your theme. In this theme, it just contains the WP-PageNavi plugin, which is used in the theme for easier pagination.

Style.css

The style.css file is what WordPress expects to be your main stylesheet for your theme. It also contains nifty information about the theme that WordPress uses to display. Breaking down the style.css file is out of the scope of this series.

1. General information about the theme

/*

Theme Name: designredux

Theme URI: http://www.blogdesignblog.com/themes/

Description: A simple sweet blue/silver theme designed by blogdesignblog.com

Tags: Blue, fixed width, widgets, two columns, silver

Author: Vinh Le

Author URI: http://www.blogdesignblog.com

Version: 0.1

.

This theme is distributed under the Creative Commons Attribution-Noncommercial 3.0 Unported License.

Basically you can do whatever you want with it as long as you credit me with a link and

use it for non-commercial purposes. A link/credit is already integrated on the bottom of the

footer, you can remove it, but only if you put it somewhere else on the page.

.

*/

This is pretty self-explanatory. It is just basic information about the theme.

2. Color Scheme

/* `Color Scheme

----------------------------------------------------------------------------------------------------*//*

 Blue : #6f9fbd

 Text: #42423d

 Black: #464646

 Deep Black: #272727

 Silver: #eeeeee

 Pink: #ec81c0

*/

This is usually not required, but I thought it would make life easier for people who want to customize the theme.

Conclusion

This concludes the second part of this article. Now that we are done disassembling the WordPress theme, we can actually start the really fun part, which is modifying the theme to do what we want. This includes creating custom pages, scripts, and plugins. If there is something specific that you would like to see added to the theme, just leave a comment and I will cover it in a future article.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...
Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...

How to Disassemble a Free WordPress Theme Part 1

Vinh Le — Tue, 30 Sep 2008 11:49:13 +0000

Most articles on Wordpress themes focus on building a WordPress theme from the view point of a developer. This series of articles will instead be focused on breaking down an existing free WordPress theme and will pay particular attention to the design of the theme throughout the series. After breaking down everything, this series will focus on adding more features and improving the design of the WordPress theme. For example, topics that will be covered are creating and integrating a variety of plugins, scripts, and redesigning parts of the theme to make it even better.

The free WordPress theme that we will be disassembling is Designredux WordPress theme

I will be going over the header.php, sidebar.php, footer.php, and index.php files in this part and will cover the rest in the second part of this article.

Header.php

The header contains exactly what you think, everything on top. Basically this includes general information about the document type, the title, links to external scripts, and the navigations located in the top part of the WordPress Theme.

1. General information about the page

This tells the browser what type of page it is and how to render it. It is very unlikely that you will ever have to change it.

2. Title



 <?php wp_title();

 if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; }

 if (is_archive()) { ?> archive<?php }

 elseif (is_search()) { ?> Search for <?php echo $s; }

 if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?>

 <?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>

The title part is slightly a little more complicated here than usual. What it does is it checks to see what the current page it has been loaded on is. Based on what the page it is, it will display different titles. But it will always include the blog’s name and description that is set in the settings of WordPress.

3. External scripts

The first external script called is the reset.css, which does exactly what it says and resets all the elements of the html to a base level in order to take care of the inconsistencies between how browsers render CSS/XHTML. For more information on reset.css, check out Meyerweb.

The second external script called is style.css, which is what your main css stylesheet needs to be named or else WordPress will get pissed. The url of which has its own special php call as you can see.

The following code is used to get the url of where your theme is located so you can link to the scripts, css, and other files you have in your theme.

For more cool stuff you can grab from the bloginfo() function, check out the Wordpress codex on bloginfo.

4. Internet explorer love

This part of the header is where we show some love for internet explorer by paying closer attention to all of its beautiful little quirks. If the page detects that the browser is internet explorer 6 or less, then it will call a iefix.css to fix some css issues and unitpngfix.js to fix the issue with transparent png.

The logo uses a transparent png so that it displays nicely over the gradient background in the header. Without the fix, it looks terrible. The fix is provided by the awesome guys at Unit Interactive Labs.

The second if clause just adds a small css tweak for internet explorer 7 so that it looks just as pretty as it would in other browsers. For more information on css fixes for browser inconsistencies, check out Position is Everything.

5. Wordpress plugin

This allows plugins that need to output data into the tags to be able to do so. So don’t delete it.

6. Category Navigation

The wp_list_categories() function with the parameters of ‘hide_empty=0&title_li=&depth=1′ provides a list of all the categories (first-level only), shows even empty categories, and doesn’t output a title. To see what else you can do with wp_list_categories(), check out the Wordpress Codex on wp_list_categories.

7. Logo

The get_settings(’home’) function provides the link to the index of the blog and bloginfo(’name’) grabs the name of the blog. While the text gets indented off to the side anyways, it is important to have it there for SEO.

8. Page Navigation

The if clause inside of

tags changes the class depending on what type of page you are currently on. The current page gets assigned a class of “current_page_item” for styling purposes. The wp_list_pages() function follows the same convention and will also assign the class name of “current_page_item” if it is the current page.

The wp_list_pages() function with the parameter of ’sort_column=id&depth=1&title_li=’ displays in a list all pages (first-level only), sorted by id, and doesn’t output a title.

Sidebar.php

The sidebar contains several other methods of navigating the blog. It contains the search form, list of popular articles, and buttons for subscribing to your feed either by RSS or Email.

1. Subscribe buttons



 Subscribe to the feed

 

 	

 		

 			Subscribe by RSS

The bloginfo(’rss2_url’) function provides the link to the rss2 feed.

The second part is commented out with because you will need a plugin to be able to allow readers to subscribe by email or a link to a feedburner’s email page. There is no point in showing it unless you want to use it. Just delete the comments and put the link in to activate it.

2. Popular posts



 Popular posts

The function query_posts() with the parameter of ‘category_name=Popular&showposts=5′ shows the latest 5 posts from the category ‘Popular’. The while() function loops through the results until there are no more posts and displays the link and title of each post.

For more detailed information on query_posts() function and other cool things you can do with it, check out Vandelay’s article on Category Hacks for Wordpress Theme Designers and the trusty Wordpress Codex.

3. Search form



 Search

This is the basic search form. When someone submits a search, WordPress detects that action and displays the results according to search.php. If no search.php exists it will use index.php to display it. The wp_specialchars() function just strips out all the special characters before submitting the search query.

Footer

The footer in this theme displays the latest 5 posts and a little about section as well as some additional copy at the end.

1. Recent Posts



 Recent posts

The get_posts() function with the parameter of ‘numberposts=5′ returns the latest 5 posts. It then loops through a foreach loop and for each post it calls another function setup_postdata(), which gives us access to more than the title and link of the post. In this case, we need the comments number as well.

The comments_number() function displays the number of comments for that particular post. The first parameter decides what to display when there are no comments. The second parameter decides what to display when there is only one comment. The third parameter decides what to display when there are more than one comment.

The other functions are basic template tags used to grab the date and title of the post, which you can find more about at Wordpress Codex on template tags. For more information on get_posts() function, check out the Wordpress Codex on get_posts().

2. About section



 About

The include() function grabs the file passed to the function and displays everything that is in there. The TEMPLATEPATH is just the path to where your theme is located. In order to change what is displayed, just open about_text.txt and edit it as you please.

3. Copy information

©

The date() function with the parameter of ‘Y’ just grabs the current year formatted as XXXX. The function _e() is for translating the text into different localization, if one doesn’t exist, it just displays what is inside the single quotes.

For more information about what you can grab from date() check out the php.net documentation on date(). If you are interested in the _e() function and other translation tools check out the Wordpress Codex on translating.

Index.php

Index.php is the basic way of displaying a page, it is used when there are no other better page templates to use. It also serves as the home page.

1. Header

Grabs the header.php file and spits it out there.

2. The Wordpress Loop

Well that is just the beginning of the loop. The if clause checks if there are any posts, if there are then it will loop through them and display them according to how it is arranged inside the loop.

If there are no posts then it will just go to the following code:

Not Found

Sorry, but you are looking for something that isn't here.

At this point, it just displays what is after the and before the when there are no posts. You can put anything you want in there to let the reader know there are no posts.

3. Inside the Wordpress Loop

	

 	



 		

 		

 		

 	



 		Posted by  in 

 	

 

Read more'); ?>

The the_time() function with the parameter of ‘F j, Y’ grabs the date of the post and formats it to display the full textual representation of the month, followed by the day of the month without leading zeros, then a comma, and finally the year in the format of XXXX. For more cool ways you can display the date, check out php.net’s extensive documentation on it.

The the_author_link() grabs the name of the author and wraps it with a link to the author’s website. There are many other ways you can display the author’s name and change where it links to at Wordpress codex on template tags.

The the_category() function with the parameter of ‘, ‘ displays a link to each category separated by a comma and space that the post is assigned to in WordPress. More on the_category() function at Wordpress codex on the_category.

Finally, the the_content() function displays the actual post. When you use the tag, the post will be cut off and display what is inside the single quotes at the end of the post wrapped in a link to the full article.

4. Page Navigation

This checks if there is a function called wp_pagenavi and then calls it if there is. WP-PageNavi is a plugin that makes pages much easier to organize. I modified this plugin a bit and inserted it into functions.php so that it doesn’t require any installation.

5. Sidebar and Footer

These last two functions do exactly what they sound like they do, they grab the sidebar.php and footer.php and spits them out right there.

Conclusion

This concludes the first part of this article. The next part of this article will cover the single.php, comments.php, and the rest of the theme. Check out the links below to help familiarize yourself more with WordPress functions/template tags.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...

Designredux 0.1 Free Wordpress Theme Released

Vinh Le — Fri, 26 Sep 2008 15:58:46 +0000

Name: Designredux (Don’t you just love my theme names)

Version: 0.1

Platform: Wordpress (Possibly other platforms if there are enough requests)

Live Demo: Designredux live demo

Download: Designredux 0.1 zip

A few notes

Yes, this version is really 0.1 because this theme was designed with the intention of being in continual development as a project for this blog. Basically what that means is that this theme is intended to be used as a part of a series of tutorials on coding, designing, and redesigning. By the time it hits 1.0, it will be loaded with new features and of course a redesign as it is reassesed as time goes on.

The next series of articles will focus on how this theme was built from scratch. Then after that, future articles will focus on adding more features and improving the design of the theme. If you have anything you would like me to cover in particular, feel free to drop me a message or comment.

Subscribe today by RSS for free and get more tips on improving your blog design. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...

30 More Must See Comment Designs for Blog Designers

Vinh Le — Wed, 24 Sep 2008 17:42:49 +0000

I am fascinated by the details in a blog design and comment designs are no exceptions. The comments are really the only real form of interaction between readers and bloggers within the blog, yet many blog designers continue to throw together comment designs without giving it much thought. This list continues from the other comment design list to show 30 more blogs where the blog designer puts more attention and care to the little details of their comment design and it is certainly worth it. Take a look for yourself at these comment designs.

1. 404uxd

2. antiphrasis

3. Avalonstar

4. Blog Design Studio

5. Carlos Leopoldo

6. Challies

7. Chilligavva

8. coda.coza

9. Creative Curio

10. cssaddict

11. Design Disease

12. Design Intellection

13. Design Snack

14. DesignWorkPlan

15. Elliot Jay Stocks

16. Ecstatic Media

17. Freelenz

18. greg-wood.co.uk

19. Jeff Sarmiento

20. Kulturbanause

21. MacRabbit

22. Monsieurlam

23. Particletree

24. RIKCAT

25. Simone Maranzana

26. Natalie Jost

27. The Swell Guys

28. Twitter

29. Wilson Miner

30. Zinaz

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

30 Must See Comment Designs for Web Designers Comment design is an art. Comment design is often overlooked...
The Secret of Great Blog Designs What is the purpose of a blog design? There are...
37 Ways to Design the Comments Form If you are a regular reader here, you know that...

10 Reasons Why Your Blog Design Will Never Be Done

Vinh Le — Wed, 17 Sep 2008 17:48:18 +0000

“You are either progressing or regressing. There is no such thing as standing still” (1)

Introduction

A blog design in it’s simplest form is an interface between the user and the data on the blog. It is the job of the blog design to make it as easy as possible for the user to be able to tell if the blog contains data that the user might be interested in. And if it does then it needs to be able to display it in a way that makes it easy for the user to be able to consume that data. That will never change.

Everything else about blogs do change though. Blogs exist in a fast-paced environment where not only are changes fast, but news of them are just as fast if not faster. Blog designs need to be able to change along with the blogs in order to meet any new needs or goals that appear. A blog design will never be done simply because blogs will never stop evolving. What makes sense one moment won’t necessarily hold true the next moment.

1. The environment changes all the time.

The environment I am referring to is everything that relates directly or indirectly to the blog design, including the blogosphere, technology, widgets, plugins, etc. These elements of the environment change all the time so it is important to reassess if the blog design meets it’s goals whatever that may be for that particular blog the best way it can be. For example, new technology could make accomplishing certain goals easier so it is important to continually reassess the blog design by asking yourself how you can improve on your blog design.

2. Just because it was true five minutes ago, doesn’t mean it will be true tomorrow

Just as the environment changes all the time, the decisions we make on our blog design might work well one moment based on the current situation. But since situations changes all the time as well, it doesn’t necessarily mean it will continue to work later on. So just because you have been doing something a certain way for a long time does not mean it is still the best method later on.

3. You change as time goes on

You get better, experience new things, learn new skills, and so what you can do for your blog design changes. Therefore it is important to reassess what else you can do for your blog design that you might not have been able to do before because of lack of knowledge or experience.

4. What seemed like a great idea at one moment, might not be later

Tables used to be a great idea for layouts and we all know how GREAT that was. It has thankfully died out for the most part. Trends come and go, reassess your blog design periodically so you are not the last person to know when a trend has gone because it has been proven to suck.

5. New research can render parts of your blog design old

Guys in white lab coats spend a great part of their lives in cages to give us valuable research on various topics, such as usability, accessibility, psychology, perception, and other cool things. In order to not waste their sacrifices and make your blog designs better, it is important to listen when they talk. Occasionally new research could change a commonly established practice to not be as great as it was thought to be or new ideas that replaces old ones.

6. You are human

As humans we might like a blog design for the first few months, but after a period of time we just get sick of it. How long it takes for a person to reach that point differs from person to person, but inevitably we get sick of staring at the same old blog design and we want to redesign it. (It takes me about 2 weeks) On the upside, it allows us to make more radical changes instead of just small ones.

7. What we need the blog to do changes

At the beginning, a blog design might be created just for the purpose of blogging, but over time the needs of the blogger might change. For example, a blogger might decide that he/she wants to make money off the blog, but advertisement blocks were never taken into consideration for the first design. While ads could be forced into the old design, it is much better to redesign it to fulfill the blog’s new needs.

8. Pink is no longer your favorite color

It happens, your tastes change and for a lot of people the blog represents their personality. So you might deem it is important enough for your blog design to make changes to match your new-found favorite color or anything else you feel is important to reflect about your personality.

9. Readers change

Imagine this, your blog suddenly goes from the cozy 300 readers that you are used to and blows up to 1,000 readers. That doesn’t mean that you get more of the same users, it could mean that you got new users that are nothing like your old users and they may have different needs that you need to adjust your blog design for.

10. There is no such thing as perfection

But you can get pretty damn close by continually working on your blog design to make it better.

Conclusion

In the end, blog design trends come and go, but the basics will always remain important for a great blog design. But that doesn’t stop the fact that small improvements over time result in big improvements. Never stop trying to improve your blog design and reassessing it to make sure it is the best you can make it.

References

1. “Pocket Sponsor: 24/7 Back to the Basics, Support for Addiction Recovery” By Shelly Marshall (p 16)

2. Picture is by marcelgermain

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Why You Need to Become a Renaissance Blog Designer The Renaissance was a "great period of revival of...
Blog design + Psychology = Food for thought If I can only use one word to describe my...
5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...

Why You Need to Become a Renaissance Blog Designer

Vinh Le — Sun, 14 Sep 2008 00:13:22 +0000

The Renaissance was a “great period of revival of classical-based art and learning in Europe that began 14c.,” and it also means “rebirth” in French. (1)

So what does the Renaissance have to do with blog design anyways? I’m not suggesting we need to have some sort of grand movement within blog design, but what I am suggesting is that we take a look at blog design from different points of perception that we never considered to do before. Most blog designers have their roots from web design and while web design and blog design share a lot of commonalities, there are still quite a few different aspects that present blog designers with different problems, questions, and goals for their blog designs.

The same tools and techniques used to solve problems in web design can not always be applied to blog design in a seam less transition. Sometimes you might get lucky and it will work great, other times you might get disappointing results. That is why it is important to approach blog design in a different manner and why it is even more important to become a Renaissance Blog Designer.

So what is a Renaissance Blog Designer?

A Renaissance Blog Designer to me means a person who not only understands the graphic design side of how to select a color, type, and layout for a blog design, but a person who understands more than what is required to do the minimum of his profession. While it is certainly possible to get by on these skills only and leave the other aspects of the blog design to other people, it will limit the overall picture that you can see.

A Renaissance Blog Designer needs not only to understand how graphic design relates to blog design, but he/she also needs to understand the greater overall picture of how the blog design affects everything else. For example, how usability affects the blog design, how to design for better usability, and how to use this knowledge about usability to better achieve the goals of the blog design. There is no reason to stop at usability though, he/she should move to accessibility, and even more into the back end of blog design. No, the back end does not refer to CSS/XHTML, don’t get me wrong it is certainly important to know though. But when I refer to back end what I am talking about is Javascript/Ajax, PHP, MySQL, etc.

Most blog designers have no clue how PHP or MySQL works even though their blogs run on blog software that relies on them to function. While the separation of front and back end was designed this way so that themes could be easily created, I think there is a lot of benefit in understanding how it works. It opens up new possible creative solutions outside of what has already been done. And while there are plugins to add Javascript/Ajax capabilities to blogs, its not always guaranteed to work or do exactly what you want. These technology are just more tools that can help you create a better blog design.

The Renaissance Blog Designer is not merely just a person who understands the front and back end of a blog design, but a person who constantly seeks to improve themselves in order to improve their skills. There are direct methods of improving these skills by learning something new, then practicing it, and then doing it. But there are also indirect methods that are also quite surprisingly important such as exploring different types of arts outside of web and blog design, such as water painting. There is no guarantee that these indirect methods will improve your blog design skills directly in the future, but they will open your mind and let you see your blog design in a different light. Or at the very least it will give you a nice break so you can think more clearly.

Sidenote: Update about me

For the last few months, I have been working on several different projects where my involvement was a lot bigger than I anticipated. A lot of the work I did was on back end development, which is not my forte. But it was what the project required so I had to learn a lot of new skills and get more in depth with programming languages than I had previously been. That basically meant quality time with books, google, and my mentor trying to fix bugs and coming up with different solutions.

While working on these projects I was also able to work with some more cutting-edge technology, such as Google Web Toolkit and Grails. This and my increasing use of Php, Java, Ajax, Mysql has improved my skills and confidence in this area.The best thing is that the experience and knowledge I have gained in these areas allow me to have a bigger overall picture of blog design than I had before.

I am excited and can’t wait to apply my new knowledge to blog design to see how it can be improved. Look forward to more articles that connect the front and back end of blog design in the future!

Conclusion

The most important idea of the Renaissance Blog Designer is a person who constantly seeks to improve their skills in order to make a better blog design. In essence, everyone who reads this blog is a Renaissance Blog Designer. That then brings us to the next article, which will be called “10 Reasons Why Your Blog Design Will Never Be Done”

References

1. Online Etymology Dictionary

2. Photo by Soller Photo

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no...
Blog design + Psychology = Food for thought If I can only use one word to describe my...
How to Create a Blog Design from Scratch? I often get asked this question by people who have...

What Everybody Ought to Know About Usability and Web Design

Vinh Le — Thu, 08 May 2008 18:19:26 +0000

Even people who have no idea about usability feel the need to write articles about it to tell other people what they themselves should be doing. Usability has become a hot topic and everyone wants a piece of it by writing their own list of guidelines. Most of which end up just repeating what the other guy said. Yet even with the endless amount of articles on usability, there are still a lot of web designs that overlook easy ways to improve the usability of their design.

While there are many worthwhile guidelines to follow about usability, it really boils down to only two rule of thumbs. Those two are to make it easy to read and make it easy to find stuff. No matter what you do with your design, as long as you follow those two rule of thumbs then your design will be usable. Don’t stop there though and be satisfied. Take it to the next step and make it as aesthetic as possible and make it better all while still making sure your design follows the two guidelines.

Make it easy to read

1. Keep distractions to a minimal. This is especially important in the content area as that is where your readers will spend most of their time when they are on your blog. But that doesn’t mean you should neglect taking out anything in other areas that doesn’t really serve a purpose in your blog design as well.

2. Build a hierarchy that establishes a flow where there is less emphasis as it goes down in the list. For example, headings should pop more than links and bold texts. The sidebar should be capable of attracting attention, but not too much that it overpowers the content. You get the idea.

3. Keep the design of each area consistent. This lets the reader know that they are reading information that are closely related to each other due to their similarity. This also lets people block off different areas in their mind that they don’t need at the moment so they can focus on reading a specific section without their eyes wandering around trying to figure where a specific area begins or ends.

Make it easy to find stuff

1. Identify what people are looking for or what you want them to find. Then make it ridiculously easy to find if it is that important to you or them. Don’t just have one pathway/entry for a reader to be able to find it. Make multiple pathways/entries to it so if they miss one there are other ways for them to find the important stuff.

For example, if getting more subscribers is important to you then make a rss button that pops, ask people to sign up at the bottom of a post and make a cool design so people will see it, and create a special subscribe page.

2. Take away anything unimportant and be ruthless about it. So what makes something important or unimportant anyways? In blog design, if you take away something and it decreases your blog’s ability to achieve your goal whatever that may be, then that something would be pretty important.

But if you take it out and it doesn’t hurt your blog’s performance, then by all means rip the sucker out. It will improve your blog design by decreasing the amount of unimportant stuff that can get in the way of a reader who should be looking at your most important stuff.

3. Label everything or at least make it clear what they are looking at. Don’t assume that people will be able to tell what they are looking at or that they will draw the same conclusion as you. A thousand people can look at the same thing and come up with different descriptions of what they saw so save them the trouble and just tell them what it is.

Conclusion

Don’t stop at following these two guidelines and being satisfied. Take your blog design to the next level by making it better.

References

1. First photo from Andre flickr.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...
The Secret of Great Blog Designs What is the purpose of a blog design? There are...
How to Design for Ads in Blog Design Introduction Anyone who has been reading blogs for than...

5 Ways to Make Your Blog Design Unforgettable

Vinh Le — Thu, 24 Apr 2008 01:46:39 +0000

Introduction

A big problem with blogs these days is that a lot of them look pretty much like each other so it is hard to tell them apart and worst, it makes them easy to forget. While the quality of your content will have a large effect on whether or not your material was worth remembering, the blog design will either make or break the user’s experience when they are reading your content.

In a previous article in the blog design 101 series, the importance of the peak-end rule was established. The peak-end rule being how a person codes their experience in a memory by taking the most intense feeling during that experience and combining it with the experience felt at the end. In this article, I will take it a step further and show you how to use the peak-end rule to your advantage.

In a study testing usability and the peak-end rule, they found out that a single experience of a particularly pleasant design feature will leave a stronger impression than several experiences of a feature that is less pleasant. (1) What this means for blog design is that if you only have time to do one thing very good or a bunch of things so-so, opt for that one thing. So that it sticks out in the mind of the user.

5 Ways to make your blog design unforgettable

1. Break the “norm”

Breaking the norm means taking something that is generally done in your area and doing something that breaks out of it. An example of this would be taking a color scheme that often gets used in your area and using something totally different. This makes people take notice.

2. Pay attention to overlooked areas

Common overlooked areas that have a large effect on a user’s experience are comment designs and posts’ footer designs. Pay special attention to these and give it more time than usual in order to really bring it out and make it worth talking about.

3. Increase the functionality of your blog design

Blog design is not just a piece of artwork to hang up and admire, but of course there are some you can certainly hang up. A blog design is more of an interface between the reader and the content you have on your blog. An easy way of making your blog design more functional is to add a script or plugin that makes your blog design better. And if you make one that really meets a need of your readers, then it will be noticeable and most of all memorable to the user as you took the extra step.

4. Take one design feature and run with it

First of all, you must bring your overall blog design to at least a basic level of standard. What is a basic level of standard? Make sure it is usable and easy to use. After that, start taking the most important blog design elements and take it as far as you can. Explore the edges of that blog design element. Make it as aesthetically appealing as you can, as easy to use as possible, or as simple as possible. Get creative with this, there are an endless amount of things you can do to make it better.

5. Unique blog design

A unique blog design tailored to your specific needs, message, and audience goes a long way in setting yourself apart from others in a great way. Not only does it speak professionalism, but it also shows your commitment to your blog when you spend that much time or money on it.

Conclusion

Remember, don’t do something different just for the sake of being different. Focus on differentiating your blog design in a positive way. This will make your blog design unforgettable.

References

1. Pleasure and pain: perceptual bias and its implications for software engineering by Guilford, S, Rugg, G., Scott, N Software, IEEE Volume 19, Issue 3 p. 63-69

2. First photo from J.A.L.E.X. and second photo from tanakawho on flickr.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

5 Simple Ways to Make Your Blog Design POP In "The Secret of Great Blog Designs," I talked about...
37 Ways to Design the Comments Form If you are a regular reader here, you know that...
The Secret of Great Blog Designs What is the purpose of a blog design? There are...

Landing page, Twitter, Stumbleupon, and an Update

Vinh Le — Fri, 18 Apr 2008 09:35:01 +0000

The main reason for this post is because I created a landing page that organizes all the articles I have written for the “Creating a Blog Design from Scratch” Series outside of the blog’s software. I choose to do this, because I don’t believe a page or post listing all the articles would be as effective as creating a custom page. I think it came out really nice and makes it easy to access all the articles for the series on one page to refer to.

Other than that, I have made changes to the sidebar for the seventh time. The previous one was clean, but slightly lackluster. I pretty much just added some color and made a new RSS button. I also added my twitter and stumbleupon profiles to the sidebar for easier access. People were finding my profile by searching for it so this will make it easier. Go ahead and add me.

Note: I put follow on in the comments because I like to be nice, but please do not abuse it and try to use keywords as your name. If you do not have a name, I will give you one.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

How to Find the Best Resources using Stumbleupon Anyone who has spent any amount of time on the...
Redesigning a blog - Improving the sidebar (2) Redesigning a blog - Improving the sidebar Part 1...
Which Blog Software Do You Use and Updates I just wanted to make some comments on the direction...

How to Blog Design Style Guide

Vinh Le — Wed, 16 Apr 2008 02:01:31 +0000

Introduction

When designing blogs I noticed there are a few different design elements that I have to take into account every time. I have broken these different design elements into nine different parts. The more attention you give to each part, the better your overall blog design will be.

Header
Content Area
Primary Navigation
Secondary Navigation
Headlines
Comments
Post’s Footer
Footer
Advertisements

1. Header

The header is the first thing most visitors see when they come to your blog and it is also one of the most important. It is important for branding and making your blog stand out apart from the millions of other blogs. It is important that the header be unique so that is is memorable. This is why headers are usually given the most attention to in blog design, even by people who don’t do anything else with their blog design.

Lots of different types of headers work, but no matter what style you design your header in it is important to make your header design POP.

Examples of great blog headers:

1. Octwelve

Octwelve is a good example of using a cute character in the header to make it very distinct from other blogs. It also does a good job of quickly telling you what the blog is about in the header.

2. Cult foo

I like how Cultfoo’s header just breaks the boundaries of rounded corners and rectangles. This creates a very distinct and appealing header for a blog.

3. Darkmotion

I am a big fan of darkmotion’s style as you can tell if you have read my other posts. And one of its strong points is its very cool header design. It is just so playful and really draws me in.

How to make your header design great for your blog:

1. The first element in a blog design that I like to design is the header, because I feel that it sets the tone for the rest of the blog design. So I recommend to decide on what message you want to convey, title, and taglines before getting to work in photoshop. This will prevent a lot of headaches and changes down the road.

2. While there are many different ways you can design a header for you blog, it is important to remember to prioritize the communication of the purpose of your blog above everything else. A reader needs to be informed as quick as possible as to what the purpose of your blog is.

3. Get creative and don’t be afraid to try different things until you find a header design that works for your blog. This is generally the first thing people see when they come to your blog so make it memorable.

2. Content Area

The content area is where your readers will spend most of their time when they are on your blog. It is important to make sure that this area is easy to read and have minimal distractions. It is also important to create a well established hierarchy where the different elements of your design gets less emphasis as your go down.

Examples of great content area:

1. Simplebits

Simplebits’ content design is easy to read and the links pop just enough to be noticed, but not too much to be distracting. It has a very soft look to it.

2. We Love WP

One of the biggest problems with dark designs is that it is hard to read, but when done right it can work very well. WeLoveWP uses a soft light brown that doesn’t contrast too much with the dark background so it is easy to read.

3. We Break Stuff

I like the combination of color and dotted underlines for the links used here.

How to design a great content area:

1. Build a hierarchy that establishes a flow where there is less emphasis as it goes down in the list. For example, headings should pop more than links and bold texts.

2. Keep the design of the content consistent. This lets the reader know that they are reading information that are closely related to each other due to their similarity.

3. When styling links, make sure that they pop out enough to call attention to it, but not so much that it is distracting when reading.

3. Primary Navigation

The primary navigation is the set of links that lead to different areas of your blog. This is usually placed on the top near the header, but it doesn’t need to be. It is good practice to place it near the header though, because that is where most users will expect them and look for them.

Examples of great primary navigation:

1. A list apart

A List Apart is one of the best examples of good primary navigation design on the top.

2. Mindtwitch

Mindtwitch is a good example of using texture to make the primary navigation pop out more.

3. Jogger

Jogger’s primary navigation is simple and easy to do, but it serves its purpose and has been integrated into the design just as well.

How to design a great primary navigation:

1. Keep the amount of primary navigation links low. There is no hard number for the max amount of primary navigation links, but I would recommend under 6 or 7.

2. Primary navigation links should be reserved for major areas of your blog that you want the reader to have access to on every single page of your blog. If they don’t need it on every page, consider putting the link in your secondary navigation area.

3. Examples of common primary navigation links are contact and about. What your specific primary navigation links would be depends on how you structure your blog and what you want people to pay attention to.

4. Secondary Navigation

The secondary navigation is the set of links that lead to different sections of your blog. This usually comes in the form of some sidebar. Secondary navigation is important because it gives your readers easy access to other parts of your blog that the primary navigation does not cover.

Good links to put in your secondary navigation are popular posts, links to series pages, and other items of interest that you want your readers to have quick access to from anywhere.

Examples of great secondary navigation designs:

1. Elitistsnob

I like how each section in the sidebar is given its own clear area so it is easy to read and find what you are looking for.

2. Mancub

I like how the sidebar just seems to slide out from the content and is clearly separated from the content.

3. Designdisease

Design Disease uses shades of orange here in order separate the different sections of the sidebar very well.

How to design a great secondary navigation for your blog:

1. Just as with the primary navigation, only include necessary links and do not fill it with random links for no reason.

2. Divide the secondary navigation into different clear areas for different types of links. This will help keep the secondary navigation organized and easy to use.

3. Do not clutter your secondary navigation with unnecessary widgets that doesn’t really help the reader find what they are looking for. That calendar might look cool, but it doesn’t really help anyone.

5. Headlines

The purpose of headlines is to draw your readers in and make them want to read the rest of your blog’s post. The best way to do this is by making your headlines pop out. This can be done in a variety of ways so get creative.

Examples of great headline designs on blogs:

1. Henry Jones

Henry Jones’ blog is an example of a very simple headline design yet it does what it is suppose to do and that is to draw the user’s attention to it. Henry also uses cute icons to draw the user’s attention to the date and comments.

2. I Love Typography

This is a great example of what you can do with pretty much the font and color to make a creative and interesting headline for a blog.

3. Blogsolid

Blogsolid if an example of using an interesting design near the headline to draw the user’s attention towards the headline.

How to make your headlines pop.

1. An easy way of doing this is by making the color for your headlines different from your body text.

2. You can also use a font that is different from your content. The most common way of dong this is to use a serif font for your headlines and a non-serif font for the rest of your content.

3. Size. While size might seem like a given, I still see people who change the size of their headlines only a little bigger than their content, which makes it hard to tell if it is a headline.

4. A pretty popular way of making your headlines pop is by making the date of the post stand out. This blog uses this technique.

6. Comments

Comments are where the discussion of your posts take place and it is important to design this area in a way that it promotes communication. You can do this by making it easy to tell different comments apart, adding numbers so it is easy to refer to other comments, make the author’s comments different enough so that it sticks out and is easy to scan when a user scrolls down the comments.

Examples of great comment designs:

1. Chris Shiflett

Chris’ comment design is very simple and easy to read. It separates the comment from the author’s information into different sections that makes it easy to glance at for information.

2. Darkmotion

I like the separation of author’s information and content here into different blocks. It makes it really feel like a conversation with each other.

3. Blog Design Blog

I am including my comment design, because a lot of people said they like it. What do you know, I like it too! I went through dozens of variations before I settled on this one and I used the following guidelines when designing it.

How to design a great comment design:

1. Make it easy for a reader to see that each comment is separate from each other. An easy and common way of doing this is by alternating the colors for the comments. You could just as easily separate comments by putting it into clearly separate areas of real estate.

2. Design the author comments so they pop out more than regular comments, but not so much that it doesn’t look like it is part of the discussion. Small changes in color or design can do this well.

3. Separate miscellaneous information like name, date, and number from the actual comment itself. It makes it easier to quickly scan a discussion and if they want to they can read the misc. information if they want to.

7. Post’s footer

The post’s footer element refers to the area at the end of a post and before the comments section. A post’s footer often gets neglected so much it is ridiculous. It is a very valuable area of real estate on your blog design as it gives you a chance to direct your readers attention to other important articles on your blog after they have read a post.

People spend hours perfecting other elements of their blog design, but when it comes to the footer of the post they just stick in one of the default safe designs. But is it really safe when it sucks?

Examples of great footer designs for posts:

1. Freelanceswitch

I really like Collis’ blog designs. They are really sharp, clean, and a very close attention to details. The footer for Freelanceswitch’s post does a real good job of separating the content from the extra information provided in the footer.

2. PSDTuts

This is another one of Collis’ blog designs. This one focuses the user’s attention to different places the reader can vote for or bookmark the content if they like it. I really like the attention he gave to it and how the next section uses a different background color to separate it from each other.

3. Standards for Life

I really like the clean feel of Standards of Life’s footer for its posts. The alternating colors for the similar posts is a nice touch as well as the design of the foot notes. (foot notes not shown in screenshot)

How to design great footers for the posts of your blog:

1. Give the footer of the post a clear area separate from the content. This lets the reader know that it is not part of the content and it also helps it pop out more. You can do this by using a different background color.

2. Decide what you want in the post’s footer before beginning the design of it. This will help cut out unnecessary garbage and make the design process more smooth.

3. One of the best content to put in the post’s footer is links to related posts. This makes it easy for your reader to find other interesting posts on your blog.

8. Footer

Footers are interesting in that most people don’t really use it and just stick a copyright on the bottom with some basic links. But they are a great way to add more secondary navigation to your blog without overflowing your sidebar.

When people arrive at your footer, they would have just finished reading your article and maybe some comments. At this point it is good to provide secondary navigation that can lead them to other great articles you have on your blog.

Great secondary navigation links would be to your popular posts, other great posts, and recent posts. You could also stick a small about section or more contact information if one of your goals is to have them contact you.

Examples of great footer designs on blogs:

1. Designshack

I like how Designshack uses its footer as its main secondary navigation and doesn’t use a sidebar.

2. Web Designer Wall

I like the attention to detail that Nick spent on his footer. It looks like he spent the same amount of time as he did on his header and the result is amazing.

3. Chris Shiflett

This is a good example of a clean and simple footer that does what it suppose to do very well.

How to design a great footer for your blog design:

1. Design the footer so that is contrasts with your regular content. This will let users know that they have reached your footer and makes it pop out to them.

2. Only include links you think people who have read your article would like to see. Avoid miscellaneous information that doesn’t really help the user at this point like recent comments.

3. Keep it simple and don’t go crazy with the design. Focus on making it useful and usable.

9. Advertisements

More and more blogs are using advertisements on their blog so it has become an important element to design for. An ad placed with no thought to the blog design sticks out pretty badly and will make your blog design look terrible. You also have to be careful with the placement of your ads so that it doesn’t overpower the content.

If users are too distracted by your ads, then they won’t be able to read your content. So while you might get money for the click, they are less likely to come back to your blog. You should prioritize your content over your ads at all times, but if you design and place the ads right then you will still be able to make money while retaining your readers.

Examples of great ad designs on blogs:

1. Copyblogger

Copyblogger uses the standard 6 125 x 125 ads as well as a bigger one on top. They are clearly labeled as sponsors and before you even see the ads you see their tagline, which shows how much they prioritize their content over their ads.

2. Webdesignerwall

Webdesignerwall uses not only the standard ads, but has one inside the blog content. It is clearly labeled and designed in a way so people can tell it is not a part of the content easily.

3. Problogger

Problogger uses a small banner on top of the standard ads next to its logo really well. It does not overpower the logo or content at all.

How to design for ads?

1. If you are going to have ads on your blog, then you must take this into account as early as possible in your design. Preferably during the pencil and paper stage of the design. This gives you the most flexibility in changing your blog design so that ads fit seamlessly in it.

2. The most popular methods of advertisements on blogs are google’s adsense and 125 x 125 banner ads. Google’s adsense is a lot more flexible since they come in various dimensions so find one that works for you. 125 x 125 ads are less flexible, but they are usually placed in the sidebar next to each other in a block of six ads.

3. After you figure out the ads you want to use on your blog, go find examples of it and copy n’ paste them into your mock up. This will help you figure out how it works in your design and allows you to make quick changes until it is how you want them.

4. Remember when designing your blog design to make the ads noticeable, but not overpowering the content. The sidebar is generally the best place to put them. The worst place to put them is where they can be mistaken as actual navigation links.

Google has an ad that is just a bunch of links and I have confused them more than once as navigation links. Labeling the ads as sponsors helps with this problem.

Bonus Resources for Designing Your Blog

Footnote

1. Pool picture found from Clayfeet’s stumbleupon page

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

3 Things to Remember When Designing a Blog Footer Photo by LA Wad* Introduction This is a guest...
5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...
Five Blog Design Mistakes that Make You Look Dumb Blog design rules are not set in stone by...

A Little Known Way to Improve Your Blog Design

Vinh Le — Fri, 11 Apr 2008 13:47:51 +0000

Sometimes I find myself staring at a blog design for long periods of time, but I still can’t figure out how to make it better. This use to frustrate me to no end, because I believe that a design is never finished and you can always make it better.

Now it doesn’t really bother me anymore. My new problem is I can’t stop thinking about how I can make a design better even though I just made changes to it a little while before. What I did was I applied a technique I picked up a while ago, but never thought of using it in web design. The technique is very simple in itself, but what it does is it takes the problem and changes how you look at it. Just this simple change can make ideas on how you can improve your blog design pour out of your head.

So what is the technique? It’s simple. Just ask yourself this question “How can I make this worst?” This question is much easier to ask then “How can I make it better?” because chances are you have already exhausted all the options that came to your head already asking that. Here is an example of it in practice:

How can I make my sidebar worst?

I could make it harder to scan. I could make it harder to find things. I could bunch all the sections together. I could use a color scheme that doesn’t emphasize the important parts.

If you take all this and work backwards you will get the things you can focus on in order to make your sidebar better. For example, you could make it easier to scan, make it easier to find things, split the sections up better, and use a color scheme that emphasizes the important parts of the sidebar.

Just take this question and apply it to areas you want to improve in your blog design in order to get ideas going. If you have any good tips to think of ways to improve a blog design, feel free to write a comment.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

How to Design a Better Blog and Make More Money Why is Your Blog Design Important to Your Blog's...
Redesigning a blog - Improving the sidebar (2) Redesigning a blog - Improving the sidebar Part 1...
Redesigning a blog - Improving the sidebar (1) It is my belief that no design is ever complete,...

Which Blog Software Do You Use and Updates

Vinh Le — Wed, 09 Apr 2008 01:55:32 +0000

I just wanted to make some comments on the direction of this blog and get some feedback so give me some.

What is happening now

I have been working on a really big article that will help wrap up the “Creating a Blog Design from Scratch” series. After that I will organize it so that there is a page that will link to each article so that it’s easy to find everything. Plus, I am going to redesign the sidebar again for the seventh time.

Once that is done, I will start finishing up the “Blog Design 101″series. I know some people have been waiting for the next article on that series so I just wanted to let you know I haven’t forgotten about it.

Future plans

In the future, I want to start touching on the coding side of blog design so this poll is to see which blog software most people are using. I will be covering WordPress for sure, but I want to see if it is worthwhile to cover anything else. Only pick the blogs that you are interested in reading an article about. If you have any other topics you would like me to cover, feel free to leave a comment or send me an email.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

Landing page, Twitter, Stumbleupon, and an Update The main reason for this post is because I created...
Blog Design Gallery Launched I just want to make a quick post about the...
Header redesigned with more visual interest I spent last night working on the header design for...

30 Must See Comment Designs for Web Designers

Vinh Le — Mon, 07 Apr 2008 09:08:10 +0000

Comment design is an art. Comment design is often overlooked by a lot of web designers when they are designing their blog. It tends to be one of the last things a web designer works on and because of that it suffers. This list shows 30 blogs where the web designer didn’t just throw together the same old comment design and put extra effort into their comment design to make it fit with their blog design.

1. alwaysBETA

2. AudetteMedia

3. Baekdal

4. Bartelme

5. Blog Design Blog

6. Dale Anthony

7. Darkmotion

8. Elitist Snob

9. exhero

10. Freelanceswitch

11. the Geniant blog

12. ifoh designs

13. Intype

14. Larissa Meek

15. Mancub

16. Mike Davidson

17. Mostly Lisa

18. Nimbupani

19. Oaktree Creative

20. Ordered List

21. Rob Goodlatte

22. Shaun Inman

23. Chris Shiflett

24. Jonathan Snook

25. Squawk

26. Standards for Life

27. Stopdesign

28. SuperfluousBanter

29. Thomas Finley

30. Tutorial9

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

30 More Must See Comment Designs for Blog Designers I am fascinated by the details in a blog design...
47 Must See Great Blog Designs This is a snippet of what is inside the blog...
25 Must Buy, Borrow, or Steal Books for Web Designers When I get passionate about a topic, I tend to...

47 Must See Great Blog Designs

Vinh Le — Thu, 03 Apr 2008 04:14:37 +0000

This is a snippet of what is inside the blog design gallery here and what is to come. In the future, the gallery will feature not only more great blog designs, but blog design elements as well. Enjoy!

1. 5Thirtyone

2. 31Three

3. aiAlex

4. AndyKnight

5. Art Culture

6. Artypapers

7. Ashwebstudio

8. Astheria

9. Bart-Jan Verhoef

10. Blogsolid

11. Blogspots.de

12. Brian Jeremy

13. Charisma18

14. Cult-foo

15. Darkmotion

16. David Hellmann

17. Design Disease

18. Design Reviver

19. Design View

20. Elitist Snob

21. Elliot Jay Stocks

22. Freelanceswitch

23. I Am Neato

24. If istanbul

25. Jeffcroft

26. Kineda

27. Logo Design Love

28. Matthew Inman

29. Mezzoblue

30. Mitch’s World

31. Mutado

32. NorthxEast

33. Oaktreecreative

34. Pearsonified

35. Photo Matt

36. Ploink!Brothers

37. Refreshing Content

38. Simplebits

39. Blog.SpoonGraphics

40. sr28

41. Standards for Life

42. TJMapes

43. Toggle

44. VigetLabs

45. WebDesignerWall

46. We Love WP

47. Widgeo

Subscribe today by RSS for free and get more great blog designs and tips. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Hire me!

Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.

The Secret of Great Blog Designs What is the purpose of a blog design? There are...
30 Must See Comment Designs for Web Designers Comment design is an art. Comment design is often overlooked...
30 More Must See Comment Designs for Blog Designers I am fascinated by the details in a blog design...

Blog Design Blog

What Everybody Ought to Know About Making Changes Count

Make sure the change will actually do what you want

Measure where you currently are

Measure your progress weekly

Reassess the change that you made

Conclusion

Hire me!

3 Things to Remember When Designing a Blog Footer

Introduction

1. Attention decreases from top to bottom

2. Your footer is not a navigation bar

3. Keep it interesting!

Conclusion

Hire me!

The Secret to a Great Blog Redesign

Introduction

Let your goals guide your redesign

List of resources

How well is your blog meeting your goals?

List of resources

Is your blog design helping you achieve your goals?

Conclusion

Hire me!

37 Ways to Design the Comments Form

Conclusion

Hire me!

Designredux Free WordPress Theme Updated to Version 0.2

Custom Admin Panel

Navigation

Bottom right of the footer

Feedburner

Google Adsense

Google Analytics

Documentation

Custom Pages

Search.php

Page.php

404.php

Archives.php

Conclusion

Hire me!

How to Design for Ads in Blog Design

Introduction

1. Give the ads their own real estate

2. Label the ads as ads

3. Design for content over ads

Conclusion

Further Reading

References

Hire me!

How to Disassemble a Free WordPress Theme Part 2

Comments.php

1. Some pre-flight checks

2. Inside the comment’s foreach loop

3. Trackbacks and pings

Trackbacks

4. If there are no comments

5. Pre-flight checks before displaying the comments form

6. Comments form

Single.php

1. Comments.php

Functions.php

Style.css

1. General information about the theme

2. Color Scheme

Conclusion

Further Reading

References

Hire me!

How to Disassemble a Free WordPress Theme Part 1

Header.php

1. General information about the page

2. Title

3. External scripts

4. Internet explorer love

5. Wordpress plugin

6. Category Navigation

7. Logo

8. Page Navigation