It seems like a typewriter blog theme on typepad make perfect sense. I did a version of this in the past but I am trying to get a bit more detailed.
My design idea for the blog is a typed paper sitting on a desk. Iv'e been trying to get warmer tones out this last website build for a client and I think that carried over to this idea. I wanted to keep our red, black and white Kamatoy Media Group and Jugglemail theme but give it a warm retro typewriter feeling. Here are the elements I used to create to piece this blog theme together. It is a work in progress...
Element #1: Special Elite Font
The font. I ended up choosing the "Special Elite" Google Font by Astigmatic, Principal Design that mimics the Smith Corona Special Elite Number NR6 and the Remington Noiseless typewriter models according to the Google Font website. Which can be found here. https://fonts.google.com/specimen/Special+Elite
I really think the effect of this font on top of the paper backdrop really works well. I want add some white out or a coffee stain.
Using CSS in Typepad is a little tricky but not too bad. I used the customized template with adding the CSS. I could have really gone deep with it and played with the HTML but for now, this worked.
Element #2: Paper Post Background
I chose a paper background from Envato. I had to play with a texture that was not too distracting. As close to white as possible. In case the image doesn't load. The color behind the image is white or near white.
I am a true believer of white backgrounds especially for email marketing. Image backgrounds on email is never a good idea.So typically in order for us to continue the style guide from website to email on the Jugglemail (our project) platform I typically choose white.
Element #3: Desktop Backdrop
I also went with an an Envato wood backdrop for now. After playing with a few options, Ideally I need an image that is repeatable that has warmth without drawing attention away from the text. I uploaded this as 4000 px accross, the reason is that I found that the repeating image worked better on a 1920 screen. Above the fold with one scroll kept the theme. There are other wood options that I played with but this was the one that did the best job of being a background vs. a "Ooh look at that background." background.
I may go crazy at some point and try to overlay images on my hands on the sides of the blog as if they are sitting on the desk. If I can set it up so that my hands stay while the background moves. That would be cool.
Here is the code link for Typepad CSS. https://help.typepad.com/background_images.html
Element #4: The Banner
The banner is using another typewriter font from Adobe, Typeka Regular. I used the same paper backdrop and added a few lines on the blog to help break up the layout a bit. I had to incorporate the 3 ball mark, my name and additional text.
This typepad format is suggesting a 1000px- 1200px native accross. So I did 1000px. I included a little of my bio which I feel is always going to be confusing but that's one the reasons for the blog. To show the crazy diversity skill set. I ended up going flatter with the logo vs. shadowed. But I did throw in that Typewriter image to carry the retro theme through.
This is a work in progress and I am going to continue to tweak the code on this and also play with the layouts of blog posts, so that they fit.
This typewriter theme blog allows me to have a little fun since my other related sites should take a more traditional tone to them.
Please comment if you are doing something similar or found something similar. I did a cursory search and was surprised that nothing immediately came up. There was a cool typing effect blog theme though so that's cool.
Recent Comments