If you’ve been on this blog before, you’ll notice that it looks quite different today! That’s because last weekend I decided to take a new route with my site. It’s a major move not only in design but also in development.

Before

To understand why I made the changes I did, let’s go over the “before”.

Design

my-home-page

antjanus-final-design-7

antjanus-final-design-8

original

I tried to be as minimalist with my design as possible. I started out with a perfect design in illustrator, coded it, and decided to work on it as time went by. Here are some major improvements I made during the usage of this design:

  • added blog thumbnails
  • added widget styling
  • added green buttons
  • new typography

I also solidified my color scheme: light blue and white. Anyways, it’s a pretty decent design but it lacks on:

  • congruity – many parts of the page seemed irrelevant
  • good sidebar styling – the sidebar disappears into the text because it’s not well separated
  • way too many damn shadows – around the images, under the logo etc.
  • no basic styling for many elements – including forms and such

I knew I needed to change the design to reflect a clear direction in the site. Right now, it looks like spaghetti, a mess of individual things that should link together (like lasagna).

Development

The entire theme was developed with cleanliness in mind and I got that down. So let me go over how the theme was built.

It’s based on a SASS fork of my wordpress framework called Tseczka. With that comes:

  • CSS framework which covers most elements and most styling. Typography and grid included
  • microformatted blog loops and DC spec

On top of that, I did a ton of custom coding for the site.

Here’s where my downfall comes from:

  • base framework is updated by me. Which means I barely ever get to it and only ever update when WordPress updates
  • base framework does not grow (again, my fault)
  • base framework does not have extra non-dev options (options controlled within WP) which means I have to manually edit source code file

Direction

My initial direction for my site was to create a working and living resume. Whenever I’d look for a job, I’d post my site as my top product and showcase not only my design and development abilities but also my continued growth of abilities. I wrote a blog post once specifically to get a job.

My direction changed several times, most of the time adjusting to my current life circumstances:

  • getting a job – a working CV with a portfolio and blog discussing new technology I know
  • business site – meant to convert visitors into development customers. It was meant to jumpstart my web development
  • professional blog – I cut out CTAs and business-related pages (services etc.)
  • personal blog – I cut out a lot of important information and started blogging less

My site could not keep up with all these changes and that was reflected in both design and the development of it

After

So how is my site different now? I took the advice of my friends, Forrst, Reddit, and other places. When I stumbled on Genesis and learned more about it, I decided to make it my weekend project to redo my entire site!

Design

new blog design with separated widgets and better styling

commenting system is no longer disqus. And includes trackbacks

home

mobile

The major redesign, obviously, has some holes but will be finished up soon. The first things to keep notice is that:

  • the design uses Foundation for some base styling as well as extra features (icon font, buttons etc.)
  • the design is more coherent. Things FIT together right.
  • the content/background differentiation make it easier to read

The design also did away with Disqus and other old features. The front-slider is not orbit-based rather than Cycle2.

Development

The site is running on a completely different framework now. I am currently using Genesis which gives me all its bells and whistles. Along with Foundation, the pair makes a strong combination. Here’s what I got out of it:

  • Framework that stays up to date and has great support. 
  • Ability to customize each layout easily and use Genesis’s hooks and plugins
  • Foundation base styling. Due to its modularity, I’m able to cut/paste parts of Foundation’s components as needed. Right now, for example, I don’t have any code for Foundation’s JS plugins except for Orbit which I’m using on the homepage.
  • Tree-like commenting system. I ditched Disqus in favor of an on-site solution. It also allows me to use Trackbacks!

So What Now?

Well, my site will always be improving and I’ll be adding stuff every day. If you check out my blogging through time article, you’ll see what I mean.

Critique?

I’d love to get some critique on how the site looks and performs! And if it was a good step in the right direction!