Zemalf.com » WordPress Themes

My Blog Design And WordPress Theme

Antti Kokkonen — Tue, 15 Sep 2009 14:07:13 +0000

As I wrote back in early August, I entered The Best WordPress Design of 2009 contest and I re-designed this blog during those days just in time when the contest opened.

The contest has been open for voting a couple of weeks now and over 500 votes have been recorded already.

Many blogs on the contest are modified versions of premium or free themes, which is great way to get a theme looking like you want without going through the trouble of designing a whole theme.

Crazy me decided that it would be cool to create my own theme and design it from the scratch, so that's exactly what I did, so the blog design is my own and I built the WordPress Theme from the ground up.

With that, now it's a good time to go back to the design process and tell you a bit why the blog looks like it looks...

Why I Wanted To Design My Own Theme?

First, I know PHP, I know programming, so I just wanted to see what's inside of a theme and what goes into designing one.

Second, I wanted to create something of my own.

Third, I wanted something truly unique and mine.

What Kind of WordPress Theme I Wanted To Make?

When I started designing this theme, I had these goals in mind:

Lightweight
Minimalistic design
Grid-based design
Fully customizable with CSS
Multiple Widget-zones

I wanted to use grid-based design to enable myself to control the actual layout via CSS, so I could change the layout as needed for different pages if needed. I wanted the theme to be efficient and lightweight to ensure reasonable loading times for the site.

And I wanted to make the site minimalistic, so things I wanted to highlight would pop up, without using actual pop-up, which I try to avoid like a plaque, both in my own sites and sites I visit.

A bit against the minimalistic and lightweight design goals, I wanted to include multiple widget zones, so I could experiment with little things without going and tweaking the theme every time I want to change something.

Oh, and I wanted to call the theme ZemalfZen, or ZZ.

If I ever ended up making the theme public, I could release a free version as ZZ.

And a premium version called "ZZ Top" and make some monnney!

Smart, Eh?

Always thinking ahead me.

Well maybe not, but I do love those Legs. Yeah, it's alright.

What Kind of WP Theme I Ended Up With?

Well, first of all, you're looking at it, so you be the judge of that.

I like the theme and the end result myself, but it's far from the goals I set for myself when I started.

Also, the theme is not as lightweight as I wanted and not as fast-loading as I'd like it to be.

It is grid-based and fully customizable with CSS and I know exactly what's in the theme, so it's easy for me to make any changes I want to it. And the multiple widget zones on the sidebar and footer have worked out perfectly and I've been able to test different things easily.

I also worked a feature into the theme that the sidebar is different for the front page than the other pages. This way I can include some links and lists on the front page, but leave them out from the other pages, like Top Commenter's list.

The great thing is that this is just the beginning and I can continue tweaking the theme to be even better and perhaps in the end I end up with the kind of design and WordPress theme I started out to make.

Even that I have added Tweetmeme and Digg buttons and other features in, I still feel that I'm in the version 0.1 or something...

At least I always have something to do when I have spare time like this :)

I'd probably be better off contentrating on more productive work, but tweaking and adding neat tricks with PHP is just so much fun that I wouldn't have it any other way.

Do You Like The Design? Can't Stand It? Call For Feedback!

The voting for the contest ended at the beginning of October 2009

As I mentioned at the beginning, my blog / design is a nominee in The Best WordPress Design 2009 contest, hosted by the lovely Keller Hawthorne at Fresheventure.com.

In case you like my blog design, my blog and appreciate the fact that this is a homebrew theme and design:

~~Visit the Best WordPress Design 2009 Contest Page~~ (contest for 2009 has ended)
Scroll towards the end of the page
Vote for "Zemalf" (That's me)

Voting for me on the contest is a great feedback on it's own, but I'd like to hear your thoughts too, so tell me what you think on the comments as well.

EDIT: Thanks for all who voted for me in the competition, I didn't win, or even close, but it was a great experience. Congratulations to all the winners and thanks to Keller once more for hosting such a great contest!

What do you like about the design? What do you don't like at all?

All feedback and questions are more than welcome, so I'll see you in the comments!

Original post from Zemalf's Website optimization blog:
My Blog Design And WordPress Theme

Here's more cool posts like if you liked this one:

Zemalf.com Gets New WP Theme and Design

Antti Kokkonen — Fri, 31 Jul 2009 18:30:05 +0000

My Shiny New Theme Design is Live!

I'm trying new things, I've been working on my blog design on a local-hosted WordPress for quite some time. It's been an interesting experiment and getting all things just right hasn't been an easy task. I wouldn't recommend wasting time on theme design unless that is exactly what you want to do and/or learn - what was the case for me. But anyway, not it's done and the new design is live for everyone to see..

Designing a WordPress Theme

Starting to build your own theme or design by yourself can eat days, weeks even. And professional designer gets the theme done a lot faster and ready-made theme gets the job done in anything between 15 minutes and couple of hours. However, I wanted my own design and I'm quite happy with it. It has some elements that not too many bloggers use and on the other hand, lot of familiar elements from many other blog designs and themes, including my old design.

By designing my own theme I know EXACTLY what's in it, and what's not in it (so I can add elements if needed). And by creating the theme myself I got it done exactly like I wanted - yes it took some time, but still, I didn't have to negotiate and swing drafts and versions back and forth with anyone else. One of the design choices I made was limiting colors, going with gray color scale..

Limiting Colors - Focusing Attention

I chose a gray theme on purpose. It enables effective use of colors to highlight things I want to highlight. So instead of the blog jumping on new readers face in all colors of the rainbow, I wanted to present a minimalistic, easy to read, design - with emphasis on typography, gray color scale (apart from highlighting) and some graphical elements.

My older theme was Sandbox variant with my own CSS, but now I built the whole theme from ground up, firstly for interest, secondly because I wanted to learn and thirdly to get it "just right" for me without the generic parts that many themes have (because a public theme has to work on any WordPress blog). The whole theme is pure CSS at the moment, as the whole theme is grid-based and the actual design and layout comes from CSS which I can easily change.

This design is a work in progress, even thou it's operational, so I'm looking to tweak the theme as needed to make it just right for me..

Feedback Time!

Tell me what you think, I'd really love to hear what you think about the new design?

And be honest here, I can take it :)

What you like, what you don't like about the design?

Original post from Zemalf's Website optimization blog:
Zemalf.com Gets New WP Theme and Design

Here's more cool posts like if you liked this one:

WordPress Theme Design – Copying, Stealing or Tribute?

Antti Kokkonen — Sat, 06 Jun 2009 21:54:21 +0000

I started building my own theme. I got it done and I've been tweaking it for some time now. I did the whole thing from ground down, taking the bits from various themes freely available, like Sandbox. I created the CSS from zero and I've been adding more settings while I've been adding more features to my design.

I was inspired by CSS Zen Garden, and the designers there accomplished using just CSS for the design. Another design principle was using no images on the theme itself. Thus, fast loading, very flexible theme.

First Version of "ZemalfZen" is Ready!

It's an early alpha or beta version right now, so no downloads for anyone just yet. At this stage, I'm not ready to publish the theme to the public, as I have to tweak and debug it first, but perhaps one day, if I see interest to the theme, I will put it out there.

Here's what the first version of "ZZ" looked like:

Zemalf Zen Green, the alpha version

Today I started putting the pieces together and I got a version done I'm quite happy about, after many hours of setting the CSS layout and coloring settings just right. It can be a pain to get those correctly, so I had to refactor the whole css-file, as it was a bit cluttered from all the tests I've been doing.

But when I got this done, I started wondering, is it cool to duplicate the designs of other blogs?

I don't mean stealing the whole design, theme, css and all. But taking inspiration and trying to duplicate the design at least to a degree. When I see a cool feature on another blog or nice design, I think if I could do something similar and would it fit to my theme and design.

As you'll notice the black/green design was heavily inspired by the blogs of these two gentleman who have affected my journey in many ways...

Inspirational Theme Design - fourhourworkweek.com

I've been reading Tim Ferriss' Blog for quite some time, and I loved the design from the day I landed on that blog. And I liked the colors. So it was clear to me from the start that I'd be doing something similar. I liked the picture at the top and the "focus-box" on the top right. As you can see now, I ended up with almost similar design, which is on another hand great, but on the other hand, not so unique. Kinda double edged sword I guess.

fourhourworkweek.com - The Blog of Tim Ferriss

Inspirational Theme Design - davidrisley.com

I've been also reading David Risley's blog for a some time already, and it was just today when it hit me, that the top part design is similar to Tim Ferriss' blog! I'm not 100% sure if there's same designer behind these designs or did one designer take the best features and looks from another. Anyway, I like the David's design too and it goes way deeper than just the top navigation and the "focus-box".

davidrisley.com - The Blog of David Risley

So it seems that Tim Ferriss, David Risley and me all like that nice green/black look. On the other hand, if I change couple of variables in my own design (CSS file mainly, my site will look completely different).

Theme Design Resources

Copying Stealing the Best

I think it's ok to copy the looks of another blog, but there's a thin line when something becomes stealing and or other kind of copyright issue. On the other hand, replicating and copying the best looks is a tribute to the original designer. The greatest honor in a way.

As I used many, many hours to tweak the design and getting it right, I sure didn't take the easy way out and go for out-of-the-box solutions, so I'm happy, as it is great to see your own accomplishment out there. Yes, I took inspiration from these two blogs, which seem very similar when you look at the screenshots. With my current design, I pay tribute and bow to these two guys, for what they have done and achieved, and to their blogs and designs (whoever designed those blogs did a great job!).

I'd also be interested in hearing what the blogosphere thinks about replicating design and features of another blog.. So feel free to share your thoughts and leave a comment. Feedback on my new design is greatly appreciated too.

Original post from Zemalf's Website optimization blog:
WordPress Theme Design – Copying, Stealing or Tribute?

Here's more cool posts like if you liked this one: