Saturday, April 20, 2013

Spring Header Cleaning and Blog Design Tips

Every once in a while I get a hankerin' to change the design of the blog a bit. The header is the perfect place. So, without further ado, say hello to the new Thomas Elementary Art header. Hello! (That's the blog header responding. No, it's not weird for a blog header to be talking back.) Other than having an underlying art theme, I really don't design my headers to have too much relevance to my school or what is going on in my room. I'll create something simply because I think it's amusing. I don't think I'm completely satisfied with it yet, but it's close enough to post. 

My Thoughts on Classroom Blog Design:
I like to keep the basic design of the blog pretty clean and as easy to read as possible. I regularly see blogs that are poorly designed and difficult to read. Here are a few tips from me to keep your blog lookin' spiffy! Feel free to print them out and tape them to your favorite shirt. 
  •  Your student's artwork should be the star of the show.
  • A blog is meant to convey information to the viewer. It should be easy to read.
  • Try to avoid busy or overly chromatic backgrounds that distract from your content. 
  • Use value to your advantage. If you put red type on a blue background, your viewers may go cross-eyed. Scintillation should remain on black light posters. 
  • Use a legible typeface. Don't ever use Comic Sans. It won't ever be cute. 
  • Customize! I hate pulling work off the internet to use as a header. Show off your mad skills (skillz?) and create your own. I use one of the provided blogger templates as a general starting place for this blog, then I customize the wheels off of it using some easily available HTML. A custom header can give your blog an entirely different feel. I make my blog headers in Photoshop.
  • Make navigation easy.
  • Animated GIFs stopped being cool in 1997.
Here is what the old header looked like. That beady eye was starting to creep me out.


Hope Hunter Knight said...

Looks great. I am frustrated with my header because I hand painted it and took a photo and it won't stretch across all the way. I am not very skilled at that part. So you made your whole header digitally, no pen on paper?

Zach Stoller said...

If you go into the design settings for your blog and click on advanced settings, you can find out exactly how wide your blog is. Mine is 1200 pixels. I just set up a photoshop document that is exactly that wide. If you set up a document in any program to the correct width, you should be able to make your header fit properly. Blogger doesn't necessitate a specific height for headers.

I did my header entirely digitally, but sketched it out on paper first. I scanned in the drawing then used a Wacom tablet to help with the digital painting. Good luck! If you have any specific questions, just let me know.

Mr. E said...

I know I've talked about this with you in the past, but what if you don't have photoshop?

Hope Hunter Knight said...

thanks so much for that tip... it sounds doable because it didn't make my mind wander halfway through as most technology instruction does - ha! i will certainly remember this.

Zach Stoller said...

Mr. E- Are you working on a Mac or a PC? I know that both programs have some rudimentary layout properties. Essentially, you could just experiment with various document sizes and upload them to see how they fit your blog. Like I told Hope, you can go into your blog's advanced settings and find out exactly how wide your blog is.

Screen resolution for all websites is 72 dots per inch (DPI). If the program you're using doesn't allow you to set document size by pixel, you can just do a little math. My blog is 1200 pixels wide. I can divide that by 72 and find a document width of 16.66666 inches.

As far as coming up with content for your header, it is always possible to draw or paint something, then photograph it before uploading it to the computer. You could then add text and save it as a JPEG file. There are also a few decent image manipulation programs out there for free. I just have the advantage of having a professional designer for a wife and owning all of the professional level design programs.

Please let me know if I can help you with more specific questions!