Web designers have taken to blogging platforms as a foundation for their portfolio websites. It has always bothered me since, as a web designer, I believe in user-centered design. Blogging systems are not ideal for showcasing a portfolio, as it’s coming at the project from the perspective of “what’s easy to build and how can we fit what we want into it?”

I think a lot of designers feel overwhelmed by Drupal, because of all the capability and power it has. But Drupal is capable of not just managing newspapers and portals – Drupal can easily and efficiently handle small-time operations, as well.

I knew I needed to redesign my own website, www.headlinercreative.com, and I was determined to use Drupal. I approached the project like any client’s website, starting from the very beginning: figuring out the goals and purpose of the website, figuring out what content I wanted to display and the best way to display it. I wanted something that would be easy for me to use and update, and that would be intuitive for visitors to view my work and participate in blog discussions. I knew that whatever I came up with, Drupal would handle it superbly.

The Home Page

The primary navigation uses CSS image replacement to use images instead of text for the links. I have seen many Drupal sites actually insert image tags into the nav to make it look good, but this is not good practice for accessibility and search engines.

The home page starts off with a greeting to newcomers - which was placed an a new region I created for this theme - introducing myself and succinctly explaining my design philosophy. Then things start to get fun!

When a visitor clicks to "work with me" right after the greeting, the contact form elegantly glides into view. The contact form is the standard configurable contact form built into Drupal, set to display in a block at the top of every page (hidden, by default, and made to appear into view via a simple jQuery script).

To the right of the home page greeting, there is a random image from my portfolio, and a link to view the entire portfolio. Portfolio entries are a custom content type and displayed using a views block. Below that, there is a blog feed, which is only set to display the most recent article. Using the “Submitted by” module, I was able to customize the look. A small block to the right of the blog is teaser biography copy, leading visitors to the “About Me” page.

Custom themes for the different regions and blocks are utilized throughout.

The Portfolio

I created two custom content types for the portfolio – a Portfolio Entry, and Featured Project. Portfolio entries are simple images which link to Lightbox views of larger images, with title and description. Featured projects have complete write-ups with up to three screen shots/images attached. A custom block with a jQuery carousel at the top of the page highlights featured projects. Each portfolio entry and featured project has at least 3 ImageCache settings per image, to display it in the various locations on the site. I also needed to use Content Template to make a more customized layout of the featured projects pages.

The Blog

The blog is fairly straightforward. I did some customization in terms of appearance, using “Submitted by” module again, ajax comments, and Mollom for spam protection. I also set up taxonomy navigation for easy browsing. Since I wanted to create a small illustration for each blog posting, I created a cck imagefield to hold the image, and used ImageCache to size it properly. PathAuto and URL Alter give me SEO- and people-friendly links to content pages, and other modules work in the background to help deliver an easy and enjoyable user experience.

My goal was to create a pleasing site where the platform is not apparent and is completely irrelevant to the end-user. The website works as it should, and is not jammed into an ineffectual-but-easy-to-use blogging system. There are so many case studies of gigantic and complicated websites, and this project is a demonstration on how Drupal can be easy and efficient even for small, but specialized uses.

Drupal isn’t just for mega-corporations! Drupal is for you!

Some of the Important Modules I Used

1. Views 2 - Used for creating the home page portfolio feed, and portfolio page
2. CCK - Created custom fields for portfolio and featured projects content types
3. ImageField - Used add images to portfolio and featured projects content types
4. ImageCache - Resized images to various sizes depending on the view being used
5. Advanced Blog - allowed a custom blog title in place of "[user]'s Blog"
6. Submitted By - allowed custom display of the "submitted by" information
7. Wysiwyg API - Used for installing TinyMC editor
8. Image Assist - Allows images to be inserted into WYSIWYG editor
9. AJAX Comments - Fancies up the comment form using AJAX
10. Mollum - Protects again spam
11. Content Templates - Allowed editing of layout and content in the $content variable
12. Lightbox2 - Created popup windows for portfolio images
13. URL Alter - Allows the creation of custom URLs
14. PathAuto - Automates the creation of custom URLs to make more user- and seo-friendly

Drupal version: Drupal 6.x