[Design tips] – 5 simple steps to quickly design cool blogs

category : Design

Nearly everybody is writing blogs these days, from actors, authors and comedians, to everyday people such as kids, your friends, or even your mother. However, most people do not have the know-how to create decent looking blogs, so I want to introduce to you some tips so that any of you can easily design cool-looking blogs!

Check it out!

Blog design is necessary

The format of blog designs are usually set, and once you have completed the design of the top page and article pages, the blog system creates category pages and archive pages for you in no time, reducing the burden of having to design sites right from scratch.

The main focus of blogs is not design but contents so it is not necessary to say that if you are going to spend time on a blog then it is best to spend it increasing contents.
Because of this, it is also easy understand how default templates have no taste, and that many people want to differentiate their blogs from others.
However, I also understand the feeling of [non-web designers] who do not have much experience in web designing, and so have little confidence that they can make cool looking designs by themselves.

So for those people, I have decided to introduce some speed blog design techniques that I keep in mind when designing blogs.
Incidentally, I am not a web designer. I have never done web designing for a living. However, ever if you are not a web designer, if you know the right techniques anybody can create cool blog designs.

Preparation: Firstly, polish up your sense

So, do you have sense? Design sense, clothes sense, etc.

Whether you have sense or not, it doesn’t matter as I have introduced some websites to help you brush up your sense.
I browse through countless sites everyday looking for useful information for SPGRA, and one thing I have noticed is just how many people out there have really great sense.
Firstly, what do you find cool, what genre, colour, shape gives you that special feeling? If you find a site that gives you inspiration, try telling the world about it.


A fashion and photograph site that introduces a variety of cool articles. The designs and introduced articles are both cool.


A site that carefully selects and introduces designs posted from around the world. The English version of SPGRA also often posts here. Just being posted here can increase your page views by several thousand.


A site that introduces posted designs mainly about architecture and interior.


Lost At E Minor
This is a favourite of mine.
It introduces various cool items.
The blog design of SPGRA was created with inspiration from this blog. Some parts have changed now, but you can probably feel the similarities in the layered titles in images and the layout structure.


Along with its own products, this site introduces super cool graphics. Cool graphics are also used in the design of the blog. Great sense!


With a site concept very similar to that of SPGRA, this blog introduces cool items from information obtained from around the world.
This blog and Fubiz also often use SPGRA as inspiration.


A blog that introduces cool gadget related items. You can find many cool items to entice the men out there.


A site that introduces cool photographs from fashion magazines from around the world. It really is a cool site, but as there is a lot of skin-exposure, you should probably avoid viewing this one at work.

So, did that help you improve your sense?
Web designing really is quite a deep field.
So, let’s get down to actually designing a blog.

Step 1: Deciding the key colour

Firstly, let’s decide the key colour. If your blog is visited by a certain type of reader, then pick a main colour that they would prefer.
If you are not sure, then try picking a colour that you like.
The most important things is matching with the key colour and colour combining.
OK, so have you decided on the colour? I decided on [Grey] as the key colour.
So, let’s move onto combining colours.
Depending on how colours are combined, the impression of a blog can change greatly.

As long as the balancing of colours is good, it doesn’t matter that much if many colours are used, but it does make things a little more difficult.


The Cool Hunter
This site is also cool. The navigation menu to the left becomes colourful when you hover over it.

For example, in the Cool Hunter blog above, the navigation menu changes into a rainbow, and so the number of colours increases dramatically, but the cool black base is still maintained.

However, if you are a beginner, this is one point to avoid for a little while as it is easy to get it wrong.
It is safest to keep the number of colours in the used template to a maximum of 5.
The problem is not the number of colours, but the combination of colours.
It’s a waste of time just waiting, so let’s have somebody with sense teach us.


A [Social co-ordinate site] where you can post your most loved colour combinations.

Please try selecting the name of the colour you previously chose, from the Hues section of the Palettes search page of the site above.
You can use it to find many fabulous colour combinations.

There’s a humungous amount available so just keep flicking through the pages until you find one you like.
I like the colour combination below.

Color by COLOURlovers

Simple, isn’t it. Somebody with sense did the colour co-ordinating for us.

Step 2: Deciding the layout

Once the colour combination has been decided, it is time to decide the layout.
A common layout for blogs is the 2 column, 1 header and footer pattern, but even with this there is time wasted pondering, so let’s get some inspiration from cool blogs. There is no need to check small details.
Just feel what layouts are used for blogs you find easy to read.


We Love WP
A cool blog design gallery created using WordPress. A great find even if you do not use WordPress.


Blog Design Heroes
A design gallery that introduces a number of blogs. The site is categorized by blog service.


1st Web Designer
One article[55 Really Creative And Unique Blog Design Showcase: Inspiration] from a blog introducing Web design tips.


The important thing here is analyzing each part.
Even if the design is fixed, if you break it down the layout should be very simple.
Break it down into the main sections; header, footer, contents section, navigation menu, and then break those down into logos, article images, article contents, social links, recent entries, popular entries, adverts.

For example,



If you break down the above you get the layout below.

Click to enlarge

Web designers may start from a wire frame or from scratch and build it up from there, but for us beginners, let’s start by imitating the layout of cool blogs.

This is a way to quickly make cool blogs.
Were you able to break down the layout?

Step 3: Reflecting the colour combination in the layout

Next, let’s try combining the colours in the broken down layout.
Please try out many different patterns until you find one that you like.
White to light-grey light achromatic colours match well with any colour, so as long as these colours do not spoil the image you are trying to create, you can try combining these colours with the main colours you chose.
It is best to use the combination colour that stands out the most for the main and link text.
Combining all this together created the page below.

Click to enlarge

Step 4: Logo creation

The most important identity on a blog is the logo.
Logos can be used for Favicons and Twitter, and should be created to be the same wherever it is used.
However, actually creating a logo is quite difficult.
So, what I recommend is the [use cool fonts] method.
It could be enough to just play around with the initial letter to create a logo mark.
Please search use a font database like below to search for cool fonts.
Just remember to check first whether the one you like is royalty free or not.


Font Squirrel
A font site with a database of only commercially usable fonts. There is no need to worry about licenses when searching.


A user-friendly database that lets you check whether a font that takes your fancy is commercially usable or not by just aligning the cursor.


For example, if we take the blog title as SPGRA Hogehoge Diary,
using the selected font, colour and logo, it turns out like below.


Step 5: Designing by each part

Now the layout has been decided, let’s move on to creating the finer details until you feel satisfied.
Adjust the borders, and try inserting different background images.
The knack of creating this is the same as always. Take knowledge from cool sites.
Let’s have another look at a cool blog list.
This time we will look at each part in detail. Try and feel whether the blog navigation menu is cool, the footer is cool, etc.
There are sites with niche contents and site where you search by part. If you feel the previously introduced blogs are not enough, then please check out the sites below.


Smiley Cat – Element of Design
A site for searching for headers, footers, comment forms, and other cool designs by the part you are looking for.


50 Excellent Blog Footer Designs. Full of cool blog footers.


Once you have come up with an idea, take images from materials to meet that idea.
Make sure this time round as well to checker whether they can be used commercially or not. Materials can be found in the sites of charismatic bloggers.

Incidentally, I do recommend Adobe Fireworks as a paid image processing software for people having problems, but if you are looking for something that is free, how about trying out the popular paint software PictBear
Looking for materials takes some time so I have finished with creating the SPGRA Hogehoge diary by adding a simple border.
Have a look at the finished design below.

Click to enlarge

Last of all, get through the coding

In reality, I do have to design article pages, but nothing more than attaching comment forms, so the basics are just as before.
If the blog service you are using provides a template, one shortcut is to apply the closest possible template to the layout you selected, and then start the coding.
The main point to remember when coding from scratch is to separate the code by each block and enclose them.
Start by enclosing the main elements in groups, and once you have enclosed them in <p></p> tags you are finished.
You can find information about coding in articles written by web developers at our company in this blog.
Please check out the other articles.

Summary: You can create professional designs in no time if you learn from the best

The example I showed today took me around 2 hours to create.
However, what took up the most of that time was creating the dummy article contents.
When a non-designer attempts to create the parts from scratch, it can easily take 2 or so hours to create just one part, and even after fitting it into the page the feeling can often be one of awkwardness.
In contrast to that, if you use the designs of people with sense as a reference, you can create similarly great blogs with a lot less trouble. This is definitely the method I recommend for non-designers.
Once you have made something that you like the look of, all you have left to do is to fill in the finer details of content updates.
With this, you should be able to create that one special blog that you want to show to everybody.

If you can provide a blog with a feeling of attachment, the page views will probably increase naturally.
So for all of those charismatic bloggers out there, I really hope that this article has helped you in creating some amazing blogs.
If it does, once you have finished creating your blog, please introduce this article(any of our other articles/pages also welcome) on your blog.
Don’t forget SPGRA!

Thank you.


Share This Article!