Creating Navigation Tabs

Beautify your Blog

The next lesson on Erin's Beautify your Blog series is 5. Navigation Tabs. I've been thinking for a while about adding more pages to my blogs. Of course, it's important that the tabs link to related and interesting pages. To that end, I've been noticing what types of additional pages bloggers have on their sites. Here are some of the additional pages that are often found on quilting blogs:

• Quilting Tips or Tutorials;
• Link to their e-Shop, patterns for sale, etc.;
• Linking Parties (that they created or participated in); 
• Quilts and Projects (either in-process or finished);
• Quilt-Alongs (that they created or participated in);
• Speaking,Teaching and Events (especially if they are professionals);
• About Me;
• Quilt Gallery or Finished Projects (photos of finished quilts) (some divided by year); and
• Helpful Hints (theirs or links to other resources).

Here are some neat ideas about other possible pages:

• UFO Management; 
• Events that they are attending;
• Annual Plans (usually UFOs and UFO Challenges);
• Quilt Journal (links to all of the blogs related to a finished quilt);
• Ideas for future quilts (lists, links, pictures, sketches, etc.);
• Interesting Resources (on the internet, books, etc.) about design, FMQ; 
• Quilting Bloggers around the world;
• Specific interest pages such as techniques, products like journal covers or purses, original designs, etc.; and
• Specific Projects or a series, etc. (that they created or participated in).

I've been doing some research on the design blogs out there. Many are created by professional designers who have companies, so it's difficult to use them as examples of the types of pages I might want to add to my design blog. I guess the real issue is what is the purpose of the blog. For me, it's about recording my learning journey in design, be it for web, blog, e-learning or anything else. As I keep looking at design blogs, I'll be able to get a better sense of what I will want for the Design blog. I'm slowly making my way though the Top 100 Design Blogs To Follow by Ciera Design.

Technically you don't want to create and publish navigation tabs if they don't link to anything....that's why I started this process in the test site. I'll be creating potential navigation tabs and showing them off in this post, but will only upload them on my "real" site as I create actual pages to link to.

Erin suggested that when creating navigation tabs, that the image for the navigation tab should be about 50px high or less.  I did create a button using the image above but when I went to post it on Photobucket, it didn't let me download just one photo, but rather, it downloaded my entire folder. I was not impressed. It may have been my fault, but after that, I wasn't in the mood to keep at it. Maybe one day when I have more patience, I'll try again.

So, I did what everyone does....I Googled it! I found a web site that said that I can use a gadget for my navigation bar. That sounded good to me. When I searched the gadgets, it wasn't really obvious, but here it is. It worked really well and was fairly easy to install. Now, I just have to figure out what I want to place in my navigation bar.

What I learned:

• It's not a good idea to play with new apps when I'm impatient! On the other hand, it did lead me to find an alternative to creating my own navigation tab. 
• I know that I at least want to link my two blogs together. I'll be able to do this and still keep their design distinct.
• I don't really need an "about me" section, but like Erin said, it is easy to create.

Working on a Header

Weeks 3 and 4 of Beautify your Blog is about the header. I'm looking forward to these because so far I'm not really impressed with the backgrounds that I've chosen. I know that once I create a header that I like, that I will probably have to use a more neutral background.

Here are a few things that Erin suggests:

• If you've adjusted the width of your blog, then you'll want a header that is roughly 1000px wide. The height of the header should be about a third of the width, so in this case, 300px or so.
• Use only a couple of fonts and match your background colours.

I ended up making a large number of headers. I love making these. I've been using PowerPoint to make my own images for years. It's simple to put images together and then add text. One thing that I've learned is that it's best to do this within a coloured box, even if that colour is white. Unless I'm going to use just one background image, the first thing I do is create a white rectangle with a thin border. I then add my images and text boxes. Once I'm done, I save the entire group as a JPEG image. After the image is saved, it's easy to place it where you need it, and then, if you don't like something, to go back into PowerPoint to make changes. That's why I always save my PowerPoint file - you never know when you'll have to go back and make changes.

Here are some of the headers I've tried out on the Test site.

Header with two large images and centered name

In my header I've used a number of images. This example contains two larger images, one of them within a round frame. The blog name is large and in the middle, and as Erin suggested, it contains two fonts and two colours that fit with the background.

Header with round images and smaller name

In this example, I used a number of images within round frames. The blog name is smaller and located under the smaller images.

Header with images in square frames

This header is similar to the above example but the images are within a square frame with rounded borders. There are less of them and they are slightly larger.

You will notice that the background is different. I tried taking a picture of fabric and using these as background. This was my favourite one, but I'm not sure that it's required if I have an interesting header.

Header for Learning & Design Blog

I wanted to try something totally different for my Learning & Design blog. (You may have noticed that the other images are for the Quilting & Learning blog.)

Header with different fonts

This is a similar header with  different fonts and a different background colour. I found the design, Stitches, on the Starsunflower Studio site that Erin suggested. The design is by Jan Kopriva.

Header with an overall image

I've just added a different header for the Learning & Design blog. It took a while to get it right because it turns out that even if you make the background the correct size (970px), when you open it up in PowerPoint, the size will change.

The image is Winter Leaves, designed by Nathalie Ouederni from France. I found the image on the Smashing Magazine website, as part of their Desktop Wallpaper Calenders: January 2015 series. Isn't it great? If you go to Nathalie's site, you can download wallpaper from this image.

What I learned:

• If you want to put writing within your image, you have to have a uniform section to write in, otherwise you'll only see the writing in some sections and not others.
• Details such as font, font size and the frames around images can make a lot of difference.
• Bringing an image into PowerPoint changes its size!
• Working with a width of over 1000px makes aligning images much more difficult within a post. I ended up going back to 970px.
• Getting the same colour background for my test site and this site was very difficult. It turns out that if you want to change the background colour to something specific, you should go to the "Advanced" setting/ "Backgrounds" and then change the "Outer Background".
• The hard part is choosing! Should I keep making new headings or just choose one?  

If you have any preferences, please let me know!