Showing posts with label blogspot website. Show all posts
Showing posts with label blogspot website. Show all posts

20 Mar 2012

Blogging part two: 10 Steps to Design


This is Part II of my blogging series, last week I gave you 20 basic blogging tips and today's post is about blog design, stay tuned for the last part next week on promotion. It can be a little daunting when you first set up you blog to decide on a look, especially if you've been reading blogs for a while.

1.Look at other blogs/websites;
This is a good place to start, go to your favourite sites, bookmark or make a pin board of the ones you feel work the best. Judge them on functionality and aesthetics, look at things like colour, layout, and what makes them unique. Finding what appeals to you is the first step in developing your own style. After all this is going to be your blog so you want it to represent you. You also need to figure out what your blog is for, is it crafts, technical, personal, or foodie? Knowing who your audience will be will help you direct the look of the site. The style needs to be appropriate to the topic; a technical one needs to be slick and professional, a craft blog should look textural and personal.

2.Keep your look Consistent:
If you are trying to brand yourself across multiple flat forms like facebook, etsy, blogspot make sure your aesthetic is the same for all your pages. People are visual creatures, and most readers will remember images more than a name. I read so many different blogs that I remember the banner and look of the site far more than the name. If you have your logo designed already make sure it's integral to the colour theme to your site.
In the past year I went through two big design overhauls on this site, to read about them go here and here.

3. Choosing a Template:
Since I'm working on blogspot that will be the focus of this discussion, but the ideas will still hold true for other platforms. Before you do anything you should choose your template. It's in your dashboard under 'template'. There will be an option to choose template, these are basic outlines, the colours and themes can be altered afterwards, so don't be put off by the palette. What you will be looking for is the way the tabs are laid out, are the corners rounded, are there floating transparent boxes? For this blog I used the second option on Picture Window.

4.Get Editing;
Now you can start getting rid of the ugly blogger preferences. Go down to 'backgrounds' and click the picture, this gives you the options to choose one of their images or to upload one of your own. It's nicer to get one of your own as it will make your site far more individual, I generated this polka dot one in Photoshop. You can also choose from endless free ones online like Shabby Blogs or Simply Fabulous (follow the sites instructions if it needs to be installed as a widget). After that go to 'adjust widths', this decides the proportions of your main window and your sidebar. I prefer a wide window as it looks less cluttered, but it's totally up to you. This is also related to 'layout' below, you need to decide if you want a three column or two column layout. Be careful not to have your site too fussy, this is why I go for a right aligned single sidebar, so that there are some gadgets but they don't over power my content. Work through the advanced section step by step picking your font's and colours, try to keep your palette consistent with your logo and background. click apply to blog to save all your changes.


5. Making your Banner;
Your banner should represent the ethos and content of your blog. Look at it like your etsy banner, or facebook cover page. People landing on your site will decide in a couple of seconds if they are going to stay, so try to make an impression. Depending on how wide you have set your width will have determined the size of your banner,to get the pixel size just go back into 'adjust width' in templates and note down the figure. Be careful not to make it too tall, people should still be able to see the top part of your first post before scrolling down. If you are handy with Photoshop spend some time playing around with some designs. I found a great site last week that is giving away free Photoshop templates designed to be Facebook cover images, but these would work perfectly . Alternatively you can use Picasa, Pixlr, or Picnik to edit a photo you have and add some text. I found these pretty free banners that you can add your own text to. Musings of a house wife has a great step by step guide, and for some cool fonts head over to Dafont. If you reach a dead end and aren't happy with what you have done you can pay someone to do it, there are loads of very reasonably priced designers on Etsy, here is one lovely one. When you have your image finished and saved as a jpg go to 'layout', near the top you will see 'header', click this and it will open a window. Click the option for instead of title and description and also tick the box shrink to fit, then save.

6.The Importance of Pages:
Pages are the tabs at the top used for things like 'about me' and 'contact'. It's good to keep all this very important information in an obvious place that is easy to find. It also helps to clear out some unnecessary info from your sidebar. Pages are how people will navigate through your side, so if you have a cookery blog it might be an idea to have an index of recipes here to make navigation easier, same being true for craft tutorials. Try to limit it to about /76 pages so that you can keep them in just one line. If it goes over this go back into template editor and alter the font size of your tabs/pages. Pages come under posts in your dashboard, this is where you can add new pages, either as text or direct links to other websites(be careful with this second option though as you don't want to send traffic away from your site). I only recently discovered that you can publish pages that are not visible on your tabs this is a great way to have information on your blog that you want to link to, but don't want to be visible initially.

7.Make Buttons;
Design some buttons to divide up the space in your sidebar, and to add to the consistent look of your site. I really don't like the appearance of Twitter and Facebook plugins so instead I designed my own buttons in Photoshop and loaded them as a picture gadget. Go to 'layout', 'add gadget', look for the picture option, then add your image making sure to add your Facebook link. I made similar buttons to break up the rest of the space using a links, categories, and Youtube button. Here is a good tutorial on designing your own.

8.Your URL:
Changing your URL isn't essential but I felt it was a very important step to get rid of the .blogspot in my address. This can now be done very easily on blogger and it only cost €10 a year, and don't worry you won't lose all your old fans and followers the traffic is redirected. Go to settings and basic, under blog address their should be add a custom domain. It's been a while since I did mine so I can't really remember, but  I do know it brings you through step by step.

9.Add a Favicon:
This is only a little touch but I feel like it takes you another step to being more professional and not just another Blogspot blog. A favicon is the tiny image that appears at the very top tab above the website address bar, Facebook have their 'F' and Blogger their orange 'B'. Go to layout and above header on the left you will see the favicon loading option. Chose something very simple as this is going to be tiny, I picked my sun and cloud logo.

10.Gadgets;
I know I've talked lots about cluttering up the sidebar, but you still need to have some stuff in their, you just need to decide what is important to you, and what is your order of preference. A search tool needs to be very near the top, it's the default place that people go if they are looking for something. If you are an Etsy seller it's important to have an Etsy Mini so people can see what you make at a glance, at the end of the day that's a large part of why you are blogging. It's also important to have an archive, it saves people trolling through 'older posts' options, and also gives a gauge of how regularly you post. Again these are all decisions you will have to make yourself, but don't worry if you are not happy with them you can just get rid of them later.

I hope these tips helped, if you have any more tips please add them in the comments section, I don't claim to know it all, so I'm sure I've missed loads!

Helpful Advanced Links:
Making an image based nav bar on blogger
How to make seamless wallpaper
Building a better blog


Pin It

12 Mar 2012

Spring Cleaning My Website

I had a bout of insomnia the other night and instead of driving myself insane tossing and turning I decided to get up at the crack of dawn and be super productive. Since my major blog overhaul a few months back I've been meaning to iron out a few wrinkles in the design, but it was something I never got around to. The wee hours of the morning seemed like stolen time and perfect for getting such a chore finally finished.

I started out this blog nearly 5 years ago on Blogspot and didn't really have a clue what I was doing. Part of me wishes that I had screen shots over the years to show you the evolution of the design. Last year I made big changes, trying to make the blog fit into a website format as much as possible, making a large amount of information easily accessible to readers. Things like the gallery and badges section continued to annoy me though. So it was a matter of rolling up my sleeves and getting stuck in.

First Banner

Second Banner

Newest Banner

After reading this article on Songbird on how to make a banner for your blog I decided that this was my first port of call. I was happy enough with my buttony banner for ages but when I recently designed a cover photo for my Facebook page I knew the the old one was quite short of the mark. Also lesson number one with marketing is to have your look consistent across the board, which is something I was failing miserable at. I opened the unflattened file for my cover photo and played around with the composition until I was happy with how it looked. I like the addition of the copy book paper for my blog tagline. I also wanted my banner to include a picture of me so that it was clear that this is a personal cottage industry blog. The Polaroids of my work also give people a snapshot of my style so they can quickly decide if it's something they are interested in. I feel this look represents my business far more than the generic buttons I had before. I know that when formerly had this image a my landing page of Facebook it increased my rate of new fans exponentially, so hopefully it will have the same effect on my blog.

I wanted to cut down on the amount of tabs that I had at the top, recently it had grown to two lines of tabs, which I felt was clunky and not aesthetically pleasing. I got rid of the Facebook tab and instead made a button for it on the side. I'm well used to making my own buttons, but if you need a hand Musings of a Housewife has a great tutorial. I prefer to make my own buttons for Facebook and twitter instead of a live feed as I really hate the look of them and they clutter up the sidebar; taking away from the overall design. I continued with the polka dot buttons for my sidebar, punctuating the space with these blocks of blue making it's easier to navigate. I also go rid of some of gimmicky gadgets from this section in an effort to clean it up a bit.

I also thinned out the number of tabs by joining my two 'shop' tabs into one, and linking to my Etsy shops through a collage of images. This has the added benefit of opening the shop in a new window rather than drawing people away from my website. I did the same thing with my gallery tabs. I now have one page from which my clothes, graphics and crafts galleries link. I made collages for these galleries in Photoshop using the same polka dot background, again trying to keep the design consistent.

I added images to my Categories page, so that it's nicer to read than just a plain list of text. Another page that I had a lot of trouble with in this area was Party Badges. It was a big long list of information that I found impossible to break up. But I discovered that you can publish hidden pages, allowing me to have live information which I can link to, but that isn't listed in the tabs at the top. This allows me to have separate badge, mirror, opener and magnet pages, effectively cleaning up that whole section. I linked the pages with images, so that the options are easily identifiable, and because they open in a new window people can flick between them easily to compare prices.

These changes took the bones of a day to get through, but I'm much happier with this tidier look. Earlier last year I wanted to invest a sizable amount of money into getting a website built for me, now I'm glad I was too broke to make this investment, with a fair bit of hard graft I've gotten quite near to what I wanted, but it was for free.

Pin It
Related Posts Plugin for WordPress, Blogger...