Pinwheelstars.com design process
This summer I signed up for an account at NearlyFreeSpeech.net. I figured I didn’t really need all the features usual web hosting providers had to offer (cPanel, Fantastico, etc.) and I never actually use up all the space so, in a way, I’d be wasting a couple of dollars a month had I signed up. With NFS, I pay for the space I actually use. I didn’t understand how things worked at first but their FAQ was very helpful. In a nutshell, their services are perfect for me. :)
First thing I did was to manually install Wordpress since I wanted to use CMS for my portfolio/blog and I also wanted to learn how to create WP themes. I had gotten as far as making a child theme based on the Thematic framework and understood the basic elements of a Wordpress theme but when it came to really customizing the theme the way I wanted it to look, I realized it was going to take me longer to learn and I needed to really read the Codex to fully understand how Wordpress worked.
So I put off learning Wordpress (for now) and opted for an easier Content Management System to learn. I discovered Indexhibit which was much easier to learn and customize. By the time the site was almost complete, I just wanted to do the exact same thing I did before: hand-code a one-page portfolio.
So I did.
There are a lot of useful resources and showcases of one-page portfolios so it was easy to get inspired. I wouldn’t say all the effort I put into learning to different CMS was all a waste since I was able to use a few of the things I learned in this process. First thing I did was to design a mockup using the 960 Grid System in Photoshop of how I wanted my portfolio to look, something I picked up from tutorials on how to create WP themes from scratch. I discovered this really beautiful Serif font, Cleopatra, from Fontex.org, and decided to use it for headings. I’m still in my white/gray/somewhere-between-darkpink-and-darkred color phase (see my Twitter) so I chose that color scheme.
I was done with the mockup in under an hour. It was the coding part that took a lot of time. You know those “A-HA!” moments when something is wrong and then you suddenly find the solution? I had a few of those. My sidebar was on the side, it was below the main content. I spent a good 15 minutes (or more?) just figuring out WHY? Only to find out that the sum of their width, margins, and paddings didn’t add up to 940… “A-HA!”
Everything was easier from then on. Choosing which projects to feature took me a while, though. I also used Slimbox2 instead of Lightbox this time for the image viewer. The site was ready to go live the same day I started doing it but I wanted to put my resume (in PDF, with colors and fancy shmancy) in it as well. So I spent the next day working on my resume with InDesign.
And then finally, FINALLY! It was done. And now it’s up for anyone’s viewing pleasure. :)
