Rough Groove

estancabigas.com v.3: a major redesign of my portfolio site

I’ve made a major redesign of my portfolio site, estancabigas.com this week because I’ve wanted to introduce some changes into the layout and some features. The result, an ultraminimalist layout that saw fewer static html pages and the introduction of Wordpress to power some areas. The V2 design (version 2) was already simplistic but for the viewer, it involves more clicks just to cycle throught the photos. While I didn’t pursue a full flash based site, I instead simplified it.

The biggest visible change is how I present my photos. Keyword here is horizontal scrolling. Instead of making a flash based slideshow with thumbnails, I instead opted to present all photos in the series in one page. I don’t see this as a problem due to the prevalence of broadband in today’s internet. This will also limit user clicks just to go forward or back through the photos. In short, it’s much user friendly. On coding, it’s more easier for me.

After much procrastination, I’ve finally included a contact form so that it will be much more easier for those who would be interested to send me an email instead of opening their browser/mail client and keying in my email address, they can just type in their info and message and send it at the click of the submit button.

In the main page, I’ve included two introductory slideshows that automatically plays when the page is loaded. At least, it provides a welcome introduction and a little bit of sophistication (ehem, if you may please).

However, the most interesting part of this design lies under the hood: the integration of Wordpress to power some of the features and not necessarily for blogging! What led me to install this blogging platform was all because of the contact form. I really had difficulty (hmmm, more like feeling lazy I guess) of integrating those php mailer forms out there. I find it a hassle of configuring it and following all those convulted steps. Instead, I opted to integrate wordpress and used cforms II. I really find this plugin very versatile and useful and it just involved a little reconfiguration in the CSS to get the look I want.

With the contact form done, I was looking at adding a flash based slideshow in the main page. Unfortunately, I forgot how to code in Flash and just didn’t have the time to go through a tutorial that I remembered that I had NextGEN Gallery installed locally that can be used to address just what I wanted to do. And really, it’s so simple!

I’m also integrating a blog which will focus on the projects that I am/will be pursuing. As of now, the blog’s look is still very basic and will be fined tuned in the days to come. As with the previous redesign, this is a combination of HTML/CSS.

Bloody Mary Wordpress Theme

This three-column ad-friendly Wordpress theme was specifically designed for use by my friend’s new movie blog:

The View Room

The type of content demands that it be presented in such a way that is easy to navigate and, at the same time, readily viewable without giving too much detail. The widest column at the left is reserved for the posts. The middle, which contrasts in color is intended for the post categories while the right is for other uses like tag cloud, subscription form and ads to mention a few.

The design is innovative as it does away with the usual top-down display of entries in the index page but instead, resorted to a grid layout and employed custom fields to pull the movie poster as well as its rating. Each poster is clickable and will open the relevant entry. The number of posts can be manipulated by setting it within the index.php file and is independent of the Wordpress setting.

As much as possible, linear borders are not utilized, except in one instance where a light almost indiscernible line was used to divide the main content from the rest in the single.php file. Trackbacks are also separated from the comments to have a neater appearance.

Upon implementation, the major challenge of the blogger is the preparation of the poster image to be used in the index page. For a fact, movie posters are not in standard sizes and for the design to work, a fixed, in this case, 130×192 image pixel is needed for uniformity. Some are just wider than others.

Color is also a dominant aspect of the theme and I opted for an analogous palette.

I’m a novice when it comes to designing Wordpress themes and it is also my first time to do this kind of work. To give credit where credit is due, the design was based on two wonderful works: Michael Jubel’s Arthemia which is the basis of the underlying code especially the main page and Derek Punsalan’s The Unstandard where he implemented images to represent posts. Thanx guys for the inspiration!

Thinking about minimalistic designs and layouts

Lately, I’ve been somewhat obsessed with two things related to design: simplistic and minimalistic designs and those that deal with print, specifically newspaper or magazine layouts. Work that has lots of white or negative space be it on the web or print always catches my attention. That’s why I have implemented it in the new themes that I’ve used in this blog and in Binary Silver. I’m attracted to the clean look, the order and well organized space and elements.

When I get to be in Powerbooks or National Bookstore, After browsing the photography books, I always veer to the graphic design section. What always catches my eye are a series of books on best of newspaper designs. I’ve already seen three, one is in the above image. I’m more drawn to how the layout is done, the way text and images are balanced or placed and how the designer dealt with the typography.

Maybe this is related to an idea that have been at the back of my mind since last year. I’ve been mulling of doing sort of a magazine, even if these are in PDF. It started with making a portfolio of my photos that I can distribute but lately, I was thinking of basing it on the articles at my travel blog, langyaw.com. Why not? It would be interesting to do it but right now, I’m still looking on how to do it as well as how to execute the design and layout.