A New Look

The Redesign of aheram.com

After four weeks and more than a hun­dred hours por­ing over code, read­ing var­i­ous doc­u­men­ta­tion, nav­i­gat­ing help forums, edit­ing con­tent, and mak­ing a lot of mis­takes along the way, the web­site project that is aheram.com is finally complete.

My website’s old design was some­thing I was proud of. It was clean, it was read­able, and it did what I intended it to do. The only prob­lem was that it was com­pletely sta­tic. I attempted to rec­tify that by uti­liz­ing MagpieRSS to parse feeds from my blogs onto my sta­tic index.htm to cre­ate an appear­ance of dynamic con­tent. But beyond that, it lacked the func­tion­al­ity that I needed.

Then there is the small prob­lem called my exist­ing main blog, Aheram Takes On…. It was hosted on Blogger and it was visu­ally very dif­fer­ent from the web­site. While I am quite proud of the design, the blog being hosted on Blogger made it very dif­fi­cult to inte­grate it with my main website.

A pro­posed redesign of aheram.com.

Earlier this year, I cre­ated a draft of a design that is an homage to the orig­i­nal Aheram Takes On… tem­plate. I was really excited about it up until I tested to see how it will look like with text and some pho­tog­ra­phy. It was a dis­as­ter. The design’s very strength makes it a poor com­pan­ion to text and pho­tog­ra­phy. Though, only occu­py­ing the header and the footer, it became a dis­trac­tion. It will be a chal­lenge to make my exist­ing con­tent fit the design and if I am going to do that, I am already head­ing the wrong direction.

Inspiration

It was Felicia Day’s web­site that finally jump­started me into redesign­ing my web­site. Unlike other famous celebri­ties’ web­sites, hers made sense. It was clean, it was pro­fes­sional, and it was easy to find what­ever it is you want to find out about her. A lot of her ideas, I had adopted, par­tic­u­larly the styling of the main page, the projects page, and the press page. While I adopted some of her really great ideas, the code that built it, how­ever, was entirely my creation.

It was also what con­vinced me to switch to WordPress. I did not real­ize I could style tem­plates accord­ing to the cat­e­gory a con­tent belongs to. That func­tion­al­ity makes it more than a blog­ging plat­form. Through clever cod­ing and styling and cat­e­gory exclu­sion, I can make WordPress into a full-fledged CMS. I started read­ing more into it and became more con­vinced at how pow­er­ful WordPress is. At this point, I knew noth­ing about PHP. That, how­ever, did not dis­cour­age me.

Drafts and Notes

Several sheets of drafts and notes.

Most of every­thing I do first man­i­fests itself inside the pages of my var­i­ous note­books as tiny notes, doo­dles, or rough sketches. Sketches helps me con­cep­tu­al­ize a lay­out idea. I would draw and redraw an idea over and over until I am sat­is­fied with it. Lists help me pri­or­i­tize. They rep­re­sent goals that must be met in order to con­tinue to the next chal­lenge. Without my var­i­ous lists, I would end up dis­or­ga­nized. Worse, I might end up pur­su­ing a piece of code that has ten­u­ous rela­tion to get­ting my web­site up and run­ning. I like novel pieces of code. It is just unfor­tu­nate that very few them are actu­ally useful.

Tools

The web­site is cre­ated with Espresso 1.0.1 on a Mac Book, pow­ered by WordPress, hosted by Dreamhost, and tested exten­sively on Firefox with the Web Developer plugin.

WordPress plu­g­ins used:

1. Akismet
2. Archives for a category
3. Contact Form 7
4. FD Feedburner Plugin
5. Get Recent Comments
6. Head META Description
7. Simply Exclude
8. Ultimate Noindex Nofollow Tool
9. Google SiteMap

Typography

There are only three fonts used in this web­site: Base02 for the logo, Georgia for block­quote ele­ments, and Trebuchet MS for every­thing else. For great typog­ra­phy ideas, I looked to I Love Typography for inspi­ra­tion. I adopted their use of bylines, faint bot­tom bor­der, and ample use of space. My main focus was read­abil­ity. I want the text to stand out on its own and for the right rea­sons. I have also started to use the head­ing tags for their intended pur­poses, though, more for a struc­turally sound doc­u­ment than for search-engine optimization.