Anyone who has spent any amount of time on the internet will quickly come to the realization that it is full of spam, people wanting to sell you something, and just downright bad information. In all that junk though, there are gold nuggets of information that can help you become better or solve a problem you have. In order for you to separate the best resources from the bad ones, you would have to get waist deep into that stuff to sort it out. Or you could just rely on lists.

The problem with relying on lists

Read the rest of this entry »

I spent 4 hours this morning trying to move the blog over to it’s own domain. Let’s just say there was a lot of interesting problems this morning involving redirecting the old domain to this one. Other than that I discovered that telling the world you made a photoshop tutorial was a lot more difficult than I thought it would be. Almost every site required a registration in order to submit a tutorial, which involved a lot of forms to fill out.

The good news is that with the new shiny domain name, I have decided that I am focusing this whole blog on just blog designs and anything that relates to it. I have a lot of topics, series, and experiments that I want to cover so it will definitely be interesting . I am so excited about this blog that I have to pretty much stop myself from posting too much or I would be posting 4-5 times a day.

Please update your feeds so they grab it from this site and not the old one.

Technorati Profile

 It is my belief that no design is ever complete, it is even more true with blog designs. I believe that it is a continual process of improvement that we must invest our energy into, especially if our desire is to maximize the return we get on a blog design. Therefore I have started this series on redesigning a blog, it is aimed at showing you how to improve your blog further.

In this series, I will be using my blog as an example so you can get a better understanding of the process. When I had designed this blog a few months ago, I felt it was quite good then. Now I return and ask the hard questions about the design in order to get a more accurate understanding of how I can improve it. The focus for today will be the sidebar.

1. Is this sidebar serving it’s purpose?

The purpose of a sidebar in a blog is to give users an easy way of getting access to your other posts. It is important then that the sidebar makes it easy to navigate, compelling to click, and relevant.

2. Are people actually using the sidebar?

You can have an awesome looking sidebar, but if no one is using it then you just lost potential long term visitors. In order to track if they are using the sidebar, you must set up analytics to track if they are clicking on it and get an idea of the path a general user takes to get to content. If the data you get tells you that there is a high amount of people that visit and then leave, that is a good indicator the sidebar is not being used. That or your content sucks.

3. Is the sidebar useful?

Does it help visitors achieve their goal more easily? All visitors have some sort of goal when they visit your website so does the sidebar help the typical user get to it or does it actually hinder them? Remember, visitors often times don’t use the front door on the internet so they might visit a page that doesn’t help them, but you might have another article that does. If the sidebar cannot help the user find it, then its not useful and there goes another one.

4. What is wrong with the sidebar?

Be honest, no sidebar is perfect. Since we are bias due to our attachment with the design. The easiest way to answer this question is by having someone else tell you, who actually had to use it. Any comments or e-mails you received about it in the past would be useful. In the absence of any feedback from your visitors you can just ask someone to try and use it. Give them a likely goal someone visiting your website would have and ask them to think out loud. Write down everything they say, you will be amazed by the things you didn’t see before.

5. How can you improve the sidebar further?

After you have answered all the other questions and gathered the data, this is where you sit down and stare at your sidebar until your eyes hurt in order to figure out how to make it better. Then take a short break, come back, and stare at it again.

Conclusion

In the next part of this series, I will go over how I improved my sidebar, the problems that I discovered, the answers I came up with, and the solutions that I used. The sidebar I have right now is the improved version, I have a screen shot of the old one that I will use for comparison.

Redesigning a blog - Improving the sidebar Part 2

I am writing this tutorial in part to see how it will be received by the community in order to decide if I should make more advance ones in the future. Feedback would be helpful for that.

This is a simple clean header design that can be used for any type of website, but I will add some things that are probably more appropriate for blogs as I continue along in the series. I will assume a very basic level of familiarity with photoshop or any image editing program.

1. Open a new document in photoshop and create a 900 x 200 document at 72 dpi, use transparency for the background.

2. Make a new layer. Select the rounded rectangle tool and set radius to 20 px / anti-alias to on. Draw the header to the size you need it at. I used guidelines at 50 px and 850 px to draw a 800px wide header.

3. Double click on the thumbnail of the header you just drew and set a gradient overlay with a stroke and outer glow according to the values in the screen shots.

4. Next we work on the menu. Create a new layer. Then select the rectangle marque and draw in the bar.

5. Double click on the thumbnail of the rectangle you just drew. Apply a gradient overlay using the values in the screen shot.

6. Create a new layer. Select the line tool, set it to 1 px and turn anti-alias off. Zoom in, pick a darker color than the gradient, and draw in this line to separate the menu buttons.

7. Add a layer mask to this layer. Select the gradient fill tool and use the radial. Like shown.

8. Duplicate layer by hitting ctrl-J on windows and command-J on mac. Select the move tool and hit the right directional button to move it over one pixel. Set this layer to a lighter color.

9. Merge the two layers and duplicate as necessary to create the rest.

10. The next parts are just mostly details. Select your favorite font and fill in the menu bars. I used a slight drop shadow to give the words some depth. As shown here.

Conclusion

In order to give it more visual interest and just increase it’s overall coolness factor, I added in text to serve as a logo with a slogan. I also created a section for a picture in order to make it more easily customizable for different personalities. You can pretty much add anything there, I would suggest a picture of yourself or something you are interested in to give it some more flair.

Finally in order to give the header a greater emphasis, I used a dark background with a texture over it to give it some more depth. Adding a gradient would also work very well to put more emphasis on the header even more. I also included the psd file at the bottom so you can tinker around and play with it. Feel free to share it, but please link back to me, thanks.

I will be writing up a series of tutorials for blog designs. Subscribe today and get updated when new articles are posted.

Creating visually interesting blog designs is an art. And as far as creating art goes, it can be both a very frustrating and rewarding experience. Staring at an empty white canvas can be intimidating, especially if you don’t know where to start or you don’t have any inspiration. At this point, it is very tempting to do nothing and procrastinate. Then weeks will go by and nothing happens. It sucks, but that blog design isn’t going to create itself. If you are reading this, then that means you are at least motivated since that takes effort. I mean if you were mindlessly surfing youtube like some probably are right now (I know I have in the past) you won’t be any closer to getting that awesome blog design done.

I don’t like the idea of waiting for inspiration to hit me, because it is unreliable. So most of my suggestions will be things you can do right away. Here are some ways I found very helpful in getting started in no particular order.

1. Set a predetermined amount of time aside.

Set aside something like 2 hours to work on the blog design. In those two hours, you are not allowed to do anything, but design, think about designing, and design. Ok, I will allow one bathroom break. That is it though.

2. Clean your work area (Yes, that includes your computer programs)

Put away anything that does not relate to design. My general rule of thumb is if I don’t need it to design, hide it. A clean work area allows you to think more clearly and focus longer.

3. Go over your goals.

Why are you designing a blog? Or why are you redesigning a blog? I find it helpful to take my goals and start working backwards. Say your goal is to design a blog that reflects your personality more. First, figure out what your personality feels like. The best blog designs can evoke emotion, badly designed blogs evoke an uneasy feeling in the stomach. After you figure out the feeling you are going for, go through some ideas that will bring about those emotions. Then design away until you can show someone your blog design and they tell you “That is so you!”

4. Start on paper and pencil

Keep it very simple here. Just draw in where you want the major elements to be. This is where you decide if you want a right or left side bar, a big or small header, a fat or thin footer, and other elements. Try a few sketches until you find something you like. Then go to your drawing program and make the sketch come to life by drawing in the basic shapes and adding filler text. Don’t sweat this process, anything can be changed later.

5. Work somewhere different.

If you are really having a lot of problems getting started despite trying the other methods then this will probably help you the most. You don’t have to move across town, though the more different the area, the better. If you usually work in your bedroom, try moving to the kitchen or living room. If you can though, try your local coffee shop or library at least once and see how it feels. I personally find it easy to start on things at the library since everyone else is working as well so there is nothing else to do, but work.