Tudo sobre wordpress

9 Things You Can’t Forget When Designing a Blog

Posted in Sem categoria by Marcelo Leandro Faria on 14 de setembro de 2009

9 Things You Can’t Forget When Designing a Blog

Designing a blog can be quite a daunting task, to be sure. To-do lists alone for could fill pages if you were to include all the minor details that accompany the project. Which is why most designers shy away from logging that in-depth of a laundry list of items, indispensable and not so much, to get done by the launch date of the blog. Which is also why some of these little things that would make the latter pages of the list, more often than not, get overlooked. Never fear, that is why we are here!

It is an easy thing to do when so much is on your plate, to let one or two of the smaller details silently slip through the cracks, remaining hidden in the dark crevasses in the backs of our minds. And though this checklist may not be as long as I exaggerated such a comprehensive to-do list would be, this is a list of nine very important details that many blog designers overlook. These are often thought of as so minor that it makes little to no difference in the overall design of your blog. However, these features can serve to top things off, design wise, and act as some simple finishing touches that step up your blog’s presentation, and thereby, its presence.

1. Favicon

How important can a tiny 16×16 pixel square be? Well, I guess the true answer to that, would be relatively based on how important your branding is to you. Favicons not only take your branding a step further in solidifying it, but they also make for easily recognizable bookmarks for your readers. And any steps that you can take to improve your reader’s experience is always a worthwhile time investment that will pay off in the end. It may be one small step for you, but it will be one giant leap for your blog.

Resources

It’s very simple to add a favicon to your website.

Step 1 – Create the favicon and name it favicon.ico. Below are a couple of resources to help you.

Favicon from Pics

Favicon from Pics

Quickly create favicons from images or your Twitter icon.

Create a Favicon in Photoshop

How to Create a Favicon in Photoshop

A tutorial on how to create a favicon in Photoshop and save it as an .ico file.

Step 2 – Upload favicon.ico to your root directory

Step 3 – Add the following line of code between the head tags of your header file.

  1. <link rel=“shortcut icon” href=http://www.yoursite.com/favicon.ico>

Inspiration

Favicon

Favicons Episode 8 – Smashing Magazine has an 8 part series featuring some of the best favicons from around the web. The other 7 parts are also listed in the post.

2. Subtle use of gradients, textures, shadows & single pixel lines

…Oh my! That is a bit of a list in and of itself, but it is better seen as a number of available options at the blog designer’s disposal to enhance their work. These small details give a design depth and keep things from looking flat and boring. You want your design to be pleasing to the eye, to appeal to your readers and entice new ones to check out your site. If the site looks dull and drab, then more times than not, people may judge the content and bloggers to be the same. Make the right first impression through your design with these subtle inclusions, and you will not be sorry that you took the extra time.

Resources

Just Creative Design

How To Make Your Next Website Design Pop

Loads of great tips on those subtle visuals that will polish your design.

Gradients

A Gradient Tutorial

Some great tips on the proper use of gradients and some common problems new designers have.

Texture Lovers

Texture Lovers

A large collection of textures from around the web that are free for commercial use.

Lost & Taken

Lost & Taken

A blog dedicated to providing high quality free textures to the design community.

Inspiration

3. Icons

Coming in third on the list (though to be fair, they are not listed in any kind of order of importance, because they are all important), focuses on you finding or making the right set of icons to fluidly fit into your design. There are literally thousands of icon sets that have been graciously given to the community, so give this search the time it needs to be thorough. Or again, create a set of custom icons to complement your theme. You want these elements to mix seamlessly with your site, so as to not detract from your flow and design. Also make sure to use link icons to let people know what kind of link they are following. Again, this is just a matter of courtesy to your readers.

Resources

Lost & Taken

Add Progressive Icons to Your Site Using :after pseudo-element

A tutorial that teaches you how to add icons to the links on your site.

Smashing Magazine Icons

How To Use Icons To Support Content In Web Design

A great and in depth tutorial on how you can use icons to enhance your web designs.

Icon Finder

Icon Finder

An icon search engine including over 100k icons and 186 icon sets.

Instant Shift

75 Free Useful Icon Sets for Web Designers and Developers

A varied collection of both free and premium icon sets.

Inspiration

4. Whitespace

This is one I have had to struggle with myself, but you can learn from my shortcomings without succumbing to them yourself. Do not fall into the same trap I fell into, feeling that just because you have empty space it has to be filled with something, anything…it didn’t matter if it served the design or not, the whitespace had to go. Through growing as a designer, and strict bi-weekly aversion therapy sessions, I was able to break free from my bad design stranglehold and see the light. Keeping whitespace makes your blog look clean and not overly cluttered, not to mention it really aids in making the content stand out.

Resources

A List Apart Whitespace

Whitespace

A List Apart’s look at the importance of using whitespace in web design.

Web Design Tuts

Using White Space Effectively In Web Design

A how to on effectively using white space complete with some excellent examples.

Inspiration

5. Alignment

I understand that out of the box thinking which often leads to a lot of innovative design techniques, so I do not want to cramp anyone’s style, or more so their alignment, with this next topic. Alignment can be very important for your site, simply because of the symmetrical feel and flow it can provide to your design. It is a scientifically argued point, that people respond favorably to symmetry and through use of a grid, you can ensure that your elements are all in line, so to speak, and are visually stimulating to a majority of the masses who will be interacting with your blog. By all means, buck the system if you want, but my advice would be to use a grid for initially laying out your blog design then, if necessary, break the grid.

Resources

The Grid System

The Grid System

The ultimate resource in grid systems.

The 960 Grid

960 Grid System

The official site of the 960 grid system. Downloadtemplates and the CSS framework here.

Fuel Your Creativity

Grid Based Design Toolbox

Pretty much any link you could think of on grid based designs.

Inspiration

6. Typography

What is a blog without words? Other than a non-descriptive gallery with no context, protext, or any kind of text. Kidding, but seriously, making sure that the typography you have chosen for your blog is eye catching, is definitely one to consider, that some designers overlook. Like with most media, your headlines have to stand out and grab reader’s attention to draw them in. A blog is no different. You may think that what it says is all you need worry with, but you would be wrong. Making sure that the fonts used are clear and readable are beyond a must, they are…something that is beyond a must. If either your headlines or your body type are not clear, people are not going to stick around long trying to decipher your typography.

Resources

Web Designer Depot

10 Web Typography Rules Every Designer Should Know

The title says it all!

I Love Typography

A Guide To Web Typography

I Love Typography’s guide discussing contrast, size, hierarchy and space.

NetTuts

6 Ways To Improve Your Web Typography

A must read article for anyone who wants to improve their web typography.

Inspiration

7. Emphasis

This is another area where I know better than I perform, but I am working on it, and that is placing emphasis throughout the posts and site to make the blog a bit more user friendly as well. With so much going on in your posts and your blog, it is easy for a reader to become overwhelmed, or simply not have the time to fully concentrate, and so the user merely skims them both looking for something to catch their eye. Make sure that you take this into consideration and bold important information for users to make it stand out for them. Also, be sure to have your links highlighted in a complimentary color to make sure they do not get overlooked by the busy reader, as well. Once again, it is always beneficial to your blog to take the extra steps that improve the users overall experience, and this is one of them.

Resources

Emphasis

Emphasis in Web Design:
How to Make Things Stand Out

A look at all the different elements you can use to add emphasis to your design.

Web Style Guide

Web Style Guide 3rd edition: Emphasis

An article specifically focusing on how to add emphasis to your typography.

Inspiration

8. Styling Lists & Blockquotes

One of the main focuses of your blog will be the posts you put up, so make sure you do not undercut your site by under-styling your content. You want to demonstrate pride in your work as you present it to your audience, and one way to easily achieve this is through your style-sheet. Having well styled lists and blockquotes can do a lot to not only enhance the look of your posts, but if you have guest authors it opens up the format for their posts a bit. Having a limited style-sheet may effectively tie the hands of your guest writers who do not like having their posts presentation seeming bland and unsophisticated. So they opt to leave out elements that would normally give the post a bit more presentational punch and pizazz.

Resources

Taming Lists

CSS Design: Taming Lists

A tutorial that teaches you how to style lists in pretty much any way you can imagine.

Listamatic

Listamatic

Listamatic shows the power of CSS when applied to one simple list. A great resource if you quickly need to figure out how to do a particlular list style.

Styling Blockquotes

Six Ways To Style Blockquotes

Six different ways to style blockquotes including how-tos for each.

Styling Blockquotes with Images

Simple Double Quotes

How to style blockquotes using background images.

Inspiration

9. Separate Comments from Trackbacks

The final design detail that tends to get underestimated or under-valued that I want to talk about here, is the separation of comments from the article’s trackbacks. While it is understandable for you to want to not only recognize those who link to your work, but also to keep those links in the post for prominence and relevance, you have to keep in mind that it can be frustrating for a reader to have to sift through trackbacks mixed in with comments. Taking the time to distill the two elements apart from each other on your blog will help with the flow of readability, and once more show a dedication to the user friendliness of your site. As I said, it is nice to want to include these links kindly extended to your work, but that is generally not what the readers who comb through your comments are looking to read.

Resources

Separate Comments from Trackbacks

Separating Trackbacks from Comments

An extremely simple how-to.

Separate Comments from Trackbacks with jquery

Separating and Hiding Trackbacks with Jquery in WordPress 2.7

Useful if you want to either separate or hide trackbacks.

Inspiration

That’ll do it from this end

Well those are my nine suggested details that you need to keep a focus fixed on as you dive into your blog design so that they do not get left on the road of good intentions. What other major ‘minors’ do you hate to see forgotten?

FoxyCart AJAX Ecommerce

Rob Bowen

About the Author

Rob is the talented author and graphic designer, celebrated podcaster and poet, who is now the co-editor and imaginative co-contributor of Fuel Your Creativity. With a background working through most areas of the arts, Rob works from a creative wellspring that shows no signs of running dry.

Visit Rob’s Website

90 Comments Leave a Comment

  1. Web Design Australia September 11, 2009

    Thanks for sharing these helpful tips. In my opinion, blogs shouldn’t focus too much on the design and instead, put more effort on the content because that would be the main thing that would attract people. But don’t get me wrong, the design should also be put into consideration. Just like what Rob said above, balance is the key.

    • Rob September 14, 2009

      But this post is geared towards design elements, not content. The purpose of the post was more for say designers who are not actually going to be running the blog, therefore, they need only concern themselves with design elements, not content related ones.

      Oh, yeah, balance!

  2. Deftones September 11, 2009

    Thanks a lot for info about Icon Finder. It’s really hard sometimes to find icons for project.

  3. wien September 11, 2009

    very helpful, thanks

  4. Web SEO September 11, 2009

    I love the dirty look of the social media buttons on Colorburned. And I am checking out the resources you share on typography. Thanks for them.

  5. Susan September 12, 2009

    White Space! Huge one! Using it here: http://www.wififaith.com

    Great post!

  6. Kevin September 14, 2009

    Some really good tips here.
    Still, design is still a matter of taste. What might be beautiful for someone, might be ugly for someone else.

Posted in Sem categoria by Marcelo Leandro Faria on 14 de setembro de 2009
Vertical1238417 = false; ShowAdHereBanner1238417 = false; RepeatAll1238417 = false; NoFollowAll1238417 = false; BannerStyles1238417 = new Array( “a{display:block;height:40px;width:1000px;background:#000;margin:0 auto;font-family:Arial, sans-serif;}”, “img{border:0;}”, “a.adhere{color:#999;font-weight:bold;font-size:12px;border:1px solid #000;background:#111;text-align:center;}”, “a.adhere:hover{border:1px solid #000;background:#333;color:#fff;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1238417/1238417.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1238417.adblock {width:100%;display:block;} div#bsaz_1238417.adblock a{width:1000px;} div#bsaz_1238417.adblock a img{padding:0;} div#bsaz_1238417.adblock a em{font-style:normal;} div#bsaz_1238417.adblock a{display:block;height:40px;width:1000px;background:#000;margin:0 auto;font-family:Arial, sans-serif;} div#bsaz_1238417.adblock img{border:0;} div#bsaz_1238417.adblock a.adhere{color:#999;font-weight:bold;font-size:12px;border:1px solid #000;background:#111;text-align:center;} div#bsaz_1238417.adblock a.adhere:hover{border:1px solid #000;background:#333;color:#fff;} div#bsaz_1238417.adblock a.adhere{width:1000px;height:40px;line-height:320%;} html>body div#bsaz_1238417.adblock a.adhere{width:998px;height:38px;} div#bsaz_1238417.adblock img.s{height:0;width:0;}Site5 Web Hosting

9 Things You Can’t Forget When Designing a Blog

9 Things You Can’t Forget When Designing a Blog
Vertical1239659 = false; ShowAdHereBanner1239659 = false; RepeatAll1239659 = false; NoFollowAll1239659 = false; BannerStyles1239659 = new Array( “a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:20px 0px 0px 20px;text-align:center;text-decoration:none;overflow:hidden;}”, “img{border:0;clear:right;}”, “a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}”, “a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1239659/1239659.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1239659.adblock {width:100%;display:block;} div#bsaz_1239659.adblock a{width:300px;} div#bsaz_1239659.adblock a img{padding:0;} div#bsaz_1239659.adblock a em{font-style:normal;} div#bsaz_1239659.adblock a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:20px 0px 0px 20px;text-align:center;text-decoration:none;overflow:hidden;} div#bsaz_1239659.adblock img{border:0;clear:right;} div#bsaz_1239659.adblock a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;} div#bsaz_1239659.adblock a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsaz_1239659.adblock a.adhere{width:300px;height:250px;line-height:2000%;} html>body div#bsaz_1239659.adblock a.adhere{width:298px;height:248px;} div#bsaz_1239659.adblock img.s{height:0;width:0;}Website Templates

Designing a blog can be quite a daunting task, to be sure. To-do lists alone for could fill pages if you were to include all the minor details that accompany the project. Which is why most designers shy away from logging that in-depth of a laundry list of items, indispensable and not so much, to get done by the launch date of the blog. Which is also why some of these little things that would make the latter pages of the list, more often than not, get overlooked. Never fear, that is why we are here!

It is an easy thing to do when so much is on your plate, to let one or two of the smaller details silently slip through the cracks, remaining hidden in the dark crevasses in the backs of our minds. And though this checklist may not be as long as I exaggerated such a comprehensive to-do list would be, this is a list of nine very important details that many blog designers overlook. These are often thought of as so minor that it makes little to no difference in the overall design of your blog. However, these features can serve to top things off, design wise, and act as some simple finishing touches that step up your blog’s presentation, and thereby, its presence.

1. Favicon

How important can a tiny 16×16 pixel square be? Well, I guess the true answer to that, would be relatively based on how important your branding is to you. Favicons not only take your branding a step further in solidifying it, but they also make for easily recognizable bookmarks for your readers. And any steps that you can take to improve your reader’s experience is always a worthwhile time investment that will pay off in the end. It may be one small step for you, but it will be one giant leap for your blog.

Resources

It’s very simple to add a favicon to your website.

Step 1 – Create the favicon and name it favicon.ico. Below are a couple of resources to help you.

Favicon from Pics

Favicon from Pics

Quickly create favicons from images or your Twitter icon.

Create a Favicon in Photoshop

How to Create a Favicon in Photoshop

A tutorial on how to create a favicon in Photoshop and save it as an .ico file.

Step 2 – Upload favicon.ico to your root directory

Step 3 – Add the following line of code between the head tags of your header file.

  1. <link rel=“shortcut icon” href=http://www.yoursite.com/favicon.ico>  

Inspiration

Favicon

Favicons Episode 8 – Smashing Magazine has an 8 part series featuring some of the best favicons from around the web. The other 7 parts are also listed in the post.

2. Subtle use of gradients, textures, shadows & single pixel lines

…Oh my! That is a bit of a list in and of itself, but it is better seen as a number of available options at the blog designer’s disposal to enhance their work. These small details give a design depth and keep things from looking flat and boring. You want your design to be pleasing to the eye, to appeal to your readers and entice new ones to check out your site. If the site looks dull and drab, then more times than not, people may judge the content and bloggers to be the same. Make the right first impression through your design with these subtle inclusions, and you will not be sorry that you took the extra time.

Resources

Just Creative Design

How To Make Your Next Website Design Pop

Loads of great tips on those subtle visuals that will polish your design.

Gradients

A Gradient Tutorial

Some great tips on the proper use of gradients and some common problems new designers have.

Texture Lovers

Texture Lovers

A large collection of textures from around the web that are free for commercial use.

Lost & Taken

Lost & Taken

A blog dedicated to providing high quality free textures to the design community.

Inspiration

3. Icons

Coming in third on the list (though to be fair, they are not listed in any kind of order of importance, because they are all important), focuses on you finding or making the right set of icons to fluidly fit into your design. There are literally thousands of icon sets that have been graciously given to the community, so give this search the time it needs to be thorough. Or again, create a set of custom icons to complement your theme. You want these elements to mix seamlessly with your site, so as to not detract from your flow and design. Also make sure to use link icons to let people know what kind of link they are following. Again, this is just a matter of courtesy to your readers.

Resources

Lost & Taken

Add Progressive Icons to Your Site Using :after pseudo-element

A tutorial that teaches you how to add icons to the links on your site.

Smashing Magazine Icons

How To Use Icons To Support Content In Web Design

A great and in depth tutorial on how you can use icons to enhance your web designs.

Icon Finder

Icon Finder

An icon search engine including over 100k icons and 186 icon sets.

Instant Shift

75 Free Useful Icon Sets for Web Designers and Developers

A varied collection of both free and premium icon sets.

Inspiration

4. Whitespace

This is one I have had to struggle with myself, but you can learn from my shortcomings without succumbing to them yourself. Do not fall into the same trap I fell into, feeling that just because you have empty space it has to be filled with something, anything…it didn’t matter if it served the design or not, the whitespace had to go. Through growing as a designer, and strict bi-weekly aversion therapy sessions, I was able to break free from my bad design stranglehold and see the light. Keeping whitespace makes your blog look clean and not overly cluttered, not to mention it really aids in making the content stand out.

Resources

A List Apart Whitespace

Whitespace

A List Apart’s look at the importance of using whitespace in web design.

Web Design Tuts

Using White Space Effectively In Web Design

A how to on effectively using white space complete with some excellent examples.

Inspiration

5. Alignment

I understand that out of the box thinking which often leads to a lot of innovative design techniques, so I do not want to cramp anyone’s style, or more so their alignment, with this next topic. Alignment can be very important for your site, simply because of the symmetrical feel and flow it can provide to your design. It is a scientifically argued point, that people respond favorably to symmetry and through use of a grid, you can ensure that your elements are all in line, so to speak, and are visually stimulating to a majority of the masses who will be interacting with your blog. By all means, buck the system if you want, but my advice would be to use a grid for initially laying out your blog design then, if necessary, break the grid.

Resources

The Grid System

The Grid System

The ultimate resource in grid systems.

The 960 Grid

960 Grid System

The official site of the 960 grid system. Downloadtemplates and the CSS framework here.

Fuel Your Creativity

Grid Based Design Toolbox

Pretty much any link you could think of on grid based designs.

Inspiration

6. Typography

What is a blog without words? Other than a non-descriptive gallery with no context, protext, or any kind of text. Kidding, but seriously, making sure that the typography you have chosen for your blog is eye catching, is definitely one to consider, that some designers overlook. Like with most media, your headlines have to stand out and grab reader’s attention to draw them in. A blog is no different. You may think that what it says is all you need worry with, but you would be wrong. Making sure that the fonts used are clear and readable are beyond a must, they are…something that is beyond a must. If either your headlines or your body type are not clear, people are not going to stick around long trying to decipher your typography.

Resources

Web Designer Depot

10 Web Typography Rules Every Designer Should Know

The title says it all!

I Love Typography

A Guide To Web Typography

I Love Typography’s guide discussing contrast, size, hierarchy and space.

NetTuts

6 Ways To Improve Your Web Typography

A must read article for anyone who wants to improve their web typography.

Inspiration

7. Emphasis

This is another area where I know better than I perform, but I am working on it, and that is placing emphasis throughout the posts and site to make the blog a bit more user friendly as well. With so much going on in your posts and your blog, it is easy for a reader to become overwhelmed, or simply not have the time to fully concentrate, and so the user merely skims them both looking for something to catch their eye. Make sure that you take this into consideration and bold important information for users to make it stand out for them. Also, be sure to have your links highlighted in a complimentary color to make sure they do not get overlooked by the busy reader, as well. Once again, it is always beneficial to your blog to take the extra steps that improve the users overall experience, and this is one of them.

Resources

Emphasis

Emphasis in Web Design:
How to Make Things Stand Out

A look at all the different elements you can use to add emphasis to your design.

Web Style Guide

Web Style Guide 3rd edition: Emphasis

An article specifically focusing on how to add emphasis to your typography.

Inspiration

8. Styling Lists & Blockquotes

One of the main focuses of your blog will be the posts you put up, so make sure you do not undercut your site by under-styling your content. You want to demonstrate pride in your work as you present it to your audience, and one way to easily achieve this is through your style-sheet. Having well styled lists and blockquotes can do a lot to not only enhance the look of your posts, but if you have guest authors it opens up the format for their posts a bit. Having a limited style-sheet may effectively tie the hands of your guest writers who do not like having their posts presentation seeming bland and unsophisticated. So they opt to leave out elements that would normally give the post a bit more presentational punch and pizazz.

Resources

Taming Lists

CSS Design: Taming Lists

A tutorial that teaches you how to style lists in pretty much any way you can imagine.

Listamatic

Listamatic

Listamatic shows the power of CSS when applied to one simple list. A great resource if you quickly need to figure out how to do a particlular list style.

Styling Blockquotes

Six Ways To Style Blockquotes

Six different ways to style blockquotes including how-tos for each.

Styling Blockquotes with Images

Simple Double Quotes

How to style blockquotes using background images.

Inspiration

9. Separate Comments from Trackbacks

The final design detail that tends to get underestimated or under-valued that I want to talk about here, is the separation of comments from the article’s trackbacks. While it is understandable for you to want to not only recognize those who link to your work, but also to keep those links in the post for prominence and relevance, you have to keep in mind that it can be frustrating for a reader to have to sift through trackbacks mixed in with comments. Taking the time to distill the two elements apart from each other on your blog will help with the flow of readability, and once more show a dedication to the user friendliness of your site. As I said, it is nice to want to include these links kindly extended to your work, but that is generally not what the readers who comb through your comments are looking to read.

Resources

Separate Comments from Trackbacks

Separating Trackbacks from Comments

An extremely simple how-to.

Separate Comments from Trackbacks with jquery

Separating and Hiding Trackbacks with Jquery in WordPress 2.7

Useful if you want to either separate or hide trackbacks.

Inspiration

That’ll do it from this end

Well those are my nine suggested details that you need to keep a focus fixed on as you dive into your blog design so that they do not get left on the road of good intentions. What other major ‘minors’ do you hate to see forgotten?

tweetmeme_url = ‘http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/&#8217;; tweetmeme_source = ‘Tutorial9’; tweetmeme_service = ‘su.pr’; tweetmeme_service_api = “3156cf1ebf13326aa986f94718431731”; url_site = ‘http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/&#8217;; Stumble It! Add to Delicious Bookmarks
Vertical1234620 = false; ShowAdHereBanner1234620 = true; RepeatAll1234620 = false; NoFollowAll1234620 = false; BannerStyles1234620 = new Array( “a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}”, “img{border:0;clear:right;}”, “a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}”, “a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1234620/1234620.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1234620.adblock {width:100%;display:block;} div#bsaz_1234620.adblock a{width:600px;} div#bsaz_1234620.adblock a img{padding:0;} div#bsaz_1234620.adblock a em{font-style:normal;} div#bsaz_1234620.adblock a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;} div#bsaz_1234620.adblock img{border:0;clear:right;} div#bsaz_1234620.adblock a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;} div#bsaz_1234620.adblock a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsaz_1234620.adblock a.adhere{width:600px;height:100px;line-height:800%;} html>body div#bsaz_1234620.adblock a.adhere{width:598px;height:98px;} div#bsaz_1234620.adblock img.s{height:0;width:0;}FoxyCart AJAX Ecommerce

Rob Bowen

About the Author

Rob is the talented author and graphic designer, celebrated podcaster and poet, who is now the co-editor and imaginative co-contributor of Fuel Your Creativity. With a background working through most areas of the arts, Rob works from a creative wellspring that shows no signs of running dry.

Visit Rob’s Website

90 Comments Leave a Comment

  1. Web Design Australia September 11, 2009

    Thanks for sharing these helpful tips. In my opinion, blogs shouldn’t focus too much on the design and instead, put more effort on the content because that would be the main thing that would attract people. But don’t get me wrong, the design should also be put into consideration. Just like what Rob said above, balance is the key.

    • Rob September 14, 2009

      But this post is geared towards design elements, not content. The purpose of the post was more for say designers who are not actually going to be running the blog, therefore, they need only concern themselves with design elements, not content related ones.

      Oh, yeah, balance!

  2. Deftones September 11, 2009

    Thanks a lot for info about Icon Finder. It’s really hard sometimes to find icons for project.

  3. wien September 11, 2009

    very helpful, thanks

  4. Web SEO September 11, 2009

    I love the dirty look of the social media buttons on Colorburned. And I am checking out the resources you share on typography. Thanks for them.

  5. Susan September 12, 2009

    White Space! Huge one! Using it here: http://www.wififaith.com

    Great post!

  6. Kevin September 14, 2009

    Some really good tips here.
    Still, design is still a matter of taste. What might be beautiful for someone, might be ugly for someone else.

 Page 2 of 2 « 1  2 

Leave a Reply

Name (Required) Mail (Required, but not published) Website Comment

Want a Personal Avatar? Visit www.gravatar.com to get your own gravatar, a globally-recognized avatar.

PSD to HTML | Pixel Crayons Vertical1234667 = false; ShowAdHereBanner1234667 = true; RepeatAll1234667 = false; NoFollowAll1234667 = false; BannerStyles1234667 = new Array( “a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0px 0px 10px 10px;float:left;text-align:center;text-decoration:none;overflow:hidden;}”, “img{border:0;clear:right;}”, “a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}”, “a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1234667/1234667.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1234667.adblock {width:100%;display:block;} div#bsaz_1234667.adblock a{width:125px;} div#bsaz_1234667.adblock a img{padding:0;} div#bsaz_1234667.adblock a em{font-style:normal;} div#bsaz_1234667.adblock a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0px 0px 10px 10px;float:left;text-align:center;text-decoration:none;overflow:hidden;} div#bsaz_1234667.adblock img{border:0;clear:right;} div#bsaz_1234667.adblock a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;} div#bsaz_1234667.adblock a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsaz_1234667.adblock a.adhere{width:125px;height:125px;line-height:1000%;} html>body div#bsaz_1234667.adblock a.adhere{width:123px;height:123px;} div#bsaz_1234667.adblock img.s{height:0;width:0;}Website TemplatesPhotography BookPrivate label ecommerce & email marketing software for smart designersPSD to HTMLPSD to HTMLAwesome Web Templates!Premium WordPress Themes
Vertical1234619 = false; ShowAdHereBanner1234619 = true; RepeatAll1234619 = false; NoFollowAll1234619 = false; BannerStyles1234619 = new Array( “a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;float:left; margin:0 5px 10px 5px;text-align:center;text-decoration:none;overflow:hidden;}”, “img{border:0;clear:right;}”, “a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}”, “a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1234619/1234619.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1234619.adblock {width:100%;display:block;} div#bsaz_1234619.adblock a{width:20px;} div#bsaz_1234619.adblock a img{padding:0;} div#bsaz_1234619.adblock a em{font-style:normal;} div#bsaz_1234619.adblock a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;float:left; margin:0 5px 10px 5px;text-align:center;text-decoration:none;overflow:hidden;} div#bsaz_1234619.adblock img{border:0;clear:right;} div#bsaz_1234619.adblock a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;} div#bsaz_1234619.adblock a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsaz_1234619.adblock a.adhere{width:20px;height:20px;line-height:160%;} html>body div#bsaz_1234619.adblock a.adhere{width:18px;height:18px;} div#bsaz_1234619.adblock img.s{height:0;width:0;}Apple Reviews and Newsemail marketingGet-Index Your WebsiteTutorial Guide - Free tutorialsFree Hot Vectors - VectorsOnFire.comLogo Design Servicesshopping cart softwaresurvey softwareAdvertise Here

RSS & Email Subscriptions

Free Goodies. Delivered to You.

Subscribe to Tutorial9, and we’ll deliver you the newest freebies and tutorials for free.

Subscribe By Email Subscribe By RSS

With the help of these structured lessons, you’ll be a master of Photoshop in no time!

Visit the School of Photoshop

Write for Us

Write for Tutorial9

  • Do you want to get paid $150 for writing at Tutorial9?
  • Are you a talented Photoshopper, Blogger, or Photographer?
  • Want to help thousands of others by sharing your knowledge?

If so, we’re interested in you, and we’ll pay you. Find out how to write for Tutorial9.

Vertical1234658 = false; ShowAdHereBanner1234658 = true; RepeatAll1234658 = false; NoFollowAll1234658 = false; BannerStyles1234658 = new Array( “a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 0px 0px 0;text-align:center;text-decoration:none;overflow:hidden;}”, “img{border:0;clear:right;}”, “a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}”, “a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1234658/1234658.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1234658.adblock {width:100%;display:block;} div#bsaz_1234658.adblock a{width:300px;} div#bsaz_1234658.adblock a img{padding:0;} div#bsaz_1234658.adblock a em{font-style:normal;} div#bsaz_1234658.adblock a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 0px 0px 0;text-align:center;text-decoration:none;overflow:hidden;} div#bsaz_1234658.adblock img{border:0;clear:right;} div#bsaz_1234658.adblock a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;} div#bsaz_1234658.adblock a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsaz_1234658.adblock a.adhere{width:300px;height:250px;line-height:2000%;} html>body div#bsaz_1234658.adblock a.adhere{width:298px;height:248px;} div#bsaz_1234658.adblock img.s{height:0;width:0;}Free website

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.&#8221; : “http://www.&#8221;); document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”)); try { var pageTracker = _gat._getTracker(“UA-4045085-1”); pageTracker._trackPageview(); } catch(err) {} dp.SyntaxHighlighter.ClipboardSwf = ‘http://www.tutorial9.net/wp-content/plugins/syntaxhighlighter-plus/shlfiles/clipboard.swf&#8217;; dp.SyntaxHighlighter.HighlightAll(‘code’);

Olá, mundo!

Posted in Sem categoria by Marcelo Leandro Faria on 14 de setembro de 2009

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!