Andrew Gormley

It Started Small (That's What She Said)

I had been trying without much success to design a new site that I was happy to call my own for almost two years now. I made several attempts over that time, but I didn't like anything that I was producing. Little did I know that the most important thing was that I was practicing my craft regularly. During this time the quality of my own site suffered because I lost the motivation to update what, to me, was a subpar representation of my skill set. My portfolio languished and quickly fell out of date, which all of us in the internet services field know can happen in a matter of weeks, let alone a matter of months. I was caught in a pretty nasty loop of no-motivation-to-update equals no-freelance-work-because-I-didn't-update syndrome. Not sure if anyone else has experienced that, but it's not a place you want to find yourself.

I was fortunate enough to have a full time job throughout this period so the lack of freelance work wasn't a huge concern finnancially, though it was something of small detriment to my personal fulfillment: I love working directly with clients to help them create things. However, being employed gave me ample opportunities to continue refining my skills on projects much larger than my own in both the web and video realms. All hope was not lost.

Absorption vs Production

I'm a voracious reader on the internet, and if you're reading this sentence than chances are you are as well. I'm addicted to the sense of accomplishment you feel when you learn something new or when you've mastered a technique you've been practicing for a long time. The problem with this is that I spent far too much time absorbing knowledge and far too little time executing on it. Sure, I would incorporate elements of what I've learned wherever possible, but it's tough to convince a client on a tight budget the advantages of CSS3 animations with graceful jQuery fallbacks for Internet Explorer users at the cost of a few extra hours. The more I learned, the more I wanted to do and I slowly came to realize that client work isn't the ideal situation for a lot of these techniques; it needed to be something I could own. It needed to be mine.

A Small Spark

In between clearing my Instapaper queue in the evenings, I began identifying the shortcomings of my current site by addressing certain questions: why I wasn't updating, what I liked about it, what I didn't like about it, who my readers were, who I wanted my readers to be, and more. This is the list I came up with:

• I wasn't updating because I felt constricted by the Wordpress platform. While it was infiniftely extensible, I didn't like all of the work I needed to do to get to function the way I needed it to.
• I didn't have an easy way to feature recent video work or even combine my current video work into existing posts/pages.
• I didn't like anything about the site with the exception of the content I'd written.
• My readers were (presumably) tech savvy users of Firefox or Safari on an equal Windows/Mac split with an average resolution 1280x800. They spend a fair amount of time on the site, but the articles that do the best are the ones where I write reviews or post about website development.
• That group I listed above were the exact users I wanted... Just more of them.

You can see these ideas came to me well over a year ago after I read Cameron Moll's Good Designers Redesign, Great Designers Realign article on A List Apart. I started gathering and sharing data across these two posts: Realign Step 1 and Realign Step 2. Cameron's article really spoke to me as it got me thinking about taking a different approach. It got me asking "Why?" instead of "How?" and it turns out that was what I really needed to get started.

The more I learned, the more I wanted apply what I learned and I slowly came to realize that client work wasn't the ideal situation. I needed to own it. It needed to be mine.

I planned on publishing more steps in my site realignment process, but a majority of my notes were scribbled across multiple notebooks and scrap paper as they came to me throughout the day. Perhaps if there's enough interest I'll transcribe them all into an article, but the important thing is that I did all of this research and question-answering before I even touched Omnigraffle or Photoshop.

The First Step

The first thing I did that got me in design mode was the creation of a page that I used as sort of a digital resume just to start testing out design ideas. That page can be found here: Hey There!

I didn't actually send it to anybody, but just played around with custom fonts, copywriting, design tricks, and new developments I came across. I haven't touched it in a few months, but looking back I'm still pretty happy with it. At least happy enough to share it with all of you wonderful people.

I liked the textures and color combinations so much that I decided to run with them on the design of my new site. Like all projects of mine, it started simple with hand drawn wireframes. This was the first time I started a new project from scratch with an iPad 2 in tow, so I decided to give Penultimate a spin for some rough, hilarious mockups. I knew that I wanted huge opening text, a giant robot (for some reason), and unique areas for both portfolio work and recent blog posts. What I came up with is something you may have seen me post on Twitter a few weeks back:

Let me first say that I am absolutely addicted to Penultimate and after reading Marco's review of the Cosmonaut, I've ordered one of those bad boys to start the new year off right. It was liberating to create wireframes that were so utterly crude. Admittedly, I'd never provide a client with wireframes that looked like that, but without having to worry about how things are supposed to look, I was able to focus solely on what content I wanted and how I wanted it arranged. I have a whole Penultimate notebook full of sketches for various pages and components thereof. I was so happy with their lack of detail that I never sidestepped into OmniGraffle, which is (was?) my wireframing program of choice.

It Starts With a Pixel

At this point I opened up Photoshop and got to work. I had my color scheme in place from the resume and my crude wireframes for how I wanted things arranged so I set off.

I wanted this design to immediately wow people and draw them in to either check out my work or, preferrably, read my articles.

The first thing I needed was the thing I'm the worst at designing: a logo. I had seriously considered outsourcing this to someone far more awesome than I am, but I had to consider where I'd actually be using it:

• On my website
• On Basecamp (now Flow)
• On my client invoices

I don't have my logo on my business card and I didn't think it would be too detrimental if it were absent from Basecamp and my invoices. So I had to decide if it was important enough to have on my website. The answer was that so far I've never had a personal logo and wanted to give it a shot since I was trying all sorts of new things with this project. I have a personal affinity for typography-based logos and I decided that maybe I'd based it off my initials. Also, At the time I was also playing a lot of EchoChrome, so I was really into impossible shapes. All of this led me to a logo that looked like this:

Not bad, not great, but something to iterate on and iterate I did. I actually decided it would be a great idea to base the logo off of the primary body font of the site: Proxima Nova. I did that and was instantly pleased with the results. I also swapped the noise texture out for something a little more subtle and geometric that really gave it the edge I was looking for:

index.html

It goes without saying that on the internet a visitor's first impression is the one that sticks with them. I wanted this design to immediately wow people and draw them in to either check out my work or, preferrably, read my articles. Keeping with the the same theme as the logo and the resume page, I came up with this:

Despite really liking the look and flow of the resumé page, the color scheme didn't feel right on my new homepage. It was too angular, too dark, I didn't like the logo, and it had too much space in the wrong places. The only thing I liked about it was the bitchin' robot. Identifying these shortcomings was difficult since I didn't seem to notice them throughout the design process, but once I saw the finished mockup I just asked myself a simple question: "Is this a site I would visit on a regular basis?". The answer was no. It was back to the drawing board.

Finding Inspiration

It was a little after rejecting my own design that I decided to take a break and contribute some of what I've learned back to the community in the form of a screencast I sent to Nettuts: Responsive Web Design: A Visual Guide

The response from the community in the form of comments, tweets, Facebook likes, and emails was astounding and much more than I could have ever hoped to receive. It also brought about a renewed sense of inspiration. I realized that what I wanted out of my site was the same thing I crave in other sites: a clean reading experience and a distraction-free environment to learn. I knew all about reading experiences from my aforementioned perpetually-full Instapaper queue, and I've always felt compelled to help others learn and share in the technologies we surround ourselves in every day. Once again, I decided to break from traditions and try something completely new...

Designing in the Browser

This was, hands down, one of the best decisions I made when working on this site. It made so much sense to me when I read Meagan Fisher's article on it in 24ways. The first thing I wanted to do was start with the right CSS framework, one that was flexible and offered a great spring point. I narrowed my choices down to:

• Bootstrap by Twitter
• Foundation by ZURB

I had used Bootstrap before in two projects but ZURB was a newcomer with a great advantage: it was a responsive framework. At this point I had to make a decision whether I wanted to have a responsive design or a dedicated mobile experience because, let's face it, you can't ignore mobile in this day and age. In the end I decided to go with Bootstrap and have a dedicated mobile experience that I'll build post-launch (starting today, actually). I think responsive design is one of the best technologies to blossom in the past 12 months and certainly the best choice for certain circumstances, but I still have a few issues with it on larger-scale or image-heavy sites like I intended mine to be.

The message I got from a giant robot was that he was here to do some damage, but the message I got by seeing a caped crusader was quite the opposite.

The best part of designing in the browser is that you're simultaneously creating a wireframe and your final layout; the only thing that separates them is the presentation layer. If you were doing this for a client, it's also the easiest way for them to view a work in progress since you don't need to be sending them PDF files they potentially can't open or JPEG images they have no idea how to interact with: just give them a URL. An HTML wireframe is a living, breathing thing that can be changed with the greatest of ease and, best of all, can be filled with client (or your own) content as soon as you have it.

So the site you see before you began life in the browser and never left it. The visual touches you see were cretaed in Photoshop for established section sizes, though I tried to do as much with CSS3 effects that I could when it came to gradients, drops shadows, etcetera. My cut off point in terms of browser support leaves out Internet Explorer 6 and 7 with everything else being fair game.

I sacrificed that badass robot in exchange for an awesome superhero, which I feel like I can identify a bit more with. The message I got from a giant robot was that he was here to do some damage, but the message I got by seeing a caped crusader was quite the opposite. I lightened the whole site up because I personally don't like reading light text on a dark background for any extended period of time. On the other side of that coin I also don't like read dark text on a pure white background, either, so my compromise was a light gray background and dark gray text.

While I'm on the topic, throughout the course of the design, the readbility kept becoming more and more of a priority as I knew having this new system in place would empower me to write significantly more. I took care to choose a large typeface (Proxima Nova, for those paying attention) and sized my font using ems instead of pixels for better scaling. This measurement switch actually happened mid-project after I read Ethan Marcotte expertly explain the benefits on the Typekit blog. Designing in the browser made it simple to make this switch, just a few find-and-replaces later and I was scaling fonts like a pro.

At this point, I had the basic structure of four pages finished: the home page, the about page, the main articles page, and an individual article page. It looked great, but needed a kick. It was time once again to iterate.

Subtleties

The first thing I decided to do was bring the homepage to life. Initially the featured projects on the homepage were just supposed to be images that you click on without knowing about the project. I thought that was sexy and mysterious but as I used it, it actually became confusing and annoying. I decided to try my hand at CSS3 animations to slide title and project type information in and out on hover. Turns out I was overthinking it but thanks to the good folks at Stack Overflow, they helped me do it right. After I had the CSS3 version finished and working beautifully, I used a simple Modernizr YepNope test to load up jQuery equivalents if need be. The end result is much slicker and way more beautiful than a simple image would've been.

It's tough to convince a client on a tight budget the advantages of CSS3 animations with graceful jQuery fallbacks for Internet Explorer users at the cost of a few extra hours.

The other thing I wanted to do was work with some CSS3 keyframes to make the main call to action look like more organic. I was always fascinated with the sleep indicators on Macs and the level of details behind it, giving the appearance of breathing. My line of thinking was along the same lines, but I wanted the superhero imagery to appear a bit more epic and, it turns out, a subtle palette ping-pong was just the trick.

Other niceties across the site include CSS3 drop shadows not only for depth but also for letterpress effects, rounded corners on elements, rgba for transparency, gradients on buttons also for depth and clear hover states, and much more. All of these advanced features also degrade gracefully thanks to Modernizr tests.

How I Became an ExpressionEngineer

I really wanted out of the Wordpress ecosystem for this project. Not only because I wasn't particularly in love with it anymore but also because I felt like it was time to expand my horizons and learn something new. I looked into hosted services like LightCMS and Squarespace and decided I wanted to stay on my own server. I checked out Drupal, Joomla, Radiant, TextPattern, and ExpressionEngine. The only one that caught my attention was ExpressionEngine because it makes no assumptions about the type of content you're trying to enter. It was also the only one that cost money to actually use. I was reluctant at first but after seeing a lot of designer/developers I respect swear by it, I took the plunge and never looked back.

I read a ton of material on ExpressionEngine, including their own documentation (which is surprisingly detailed). I looked at Show-ee to determine design patterns and URL structures other developers were using. I read article after article on every site I could and finally started developing. I first needed to determine what kinds of content I wanted to deliver. I broke it down into four types, or channels for you ExpressionEngine folks:

• Articles — These are the most basic write-ups I do, like the article on iOS-ification or Final Cut Pro X.
• Reviews — These are the types of articles that I've always wanted to do right. I love reviewing software and hardware and wanted to do it right.
• Links — Some of my most frequented sites have a perfect mix of original articles mixed into a link list. See Daring Fireball and Marco.org for the best examples of this.
• Projects — Pretty self explanatory. This would be where I post my recent projects, regardless of whether they're design, development, video, or some mixture of the three.

I knew I was headed in the right direction every time I asked "Is this a site I would visit on a regular basis?" and the answer kept creeping closer to "Absolutely!"

ExpressionEngine wasn't perfect out of the box for me. I had to install quite a few extras to get things perfect, but I didn't mind paying for quality software. I have the following modules/fieldtypes/plugins installed on this installation of ExpressionEngine:

• Assets — The only major deficiency I've found in ExpressionEngine is the janky file browser/uploader. This Module compeltely remedies this problem and adds the "Assets" field type that I'm using all over the site.
• Freeform — This is in use on my contact page and works like a charm. It's almost too easy.
• P&T List — A small fieldtype that I looked for forever. I wanted an easy way to output unordered lists for ever-changing Pros and Cons in my reviews and this nails it.
• Wygwam — Hands down one of the best WYSIWYG editors out there. The tight integration with the aforemention Assets is really awesome, too.
• Allow EE Code — This allows a little bit of template trickery that I'm playing close to my chest.
• Gravatar — For commenters. I didn't want to have to deal with the server space required for people to upload and manage a profile image, so I looked to this existing solution.
• Twitter Timeline — Another one that was almost too easy to use and one that I'd gladly pay a few bucks for.

Each one of these add-ons allowed fine control over the content channel fields, which allowed me to craft a pretty amazing experience simply and easily. I was super particular about how I wanted my data structured (as little markup in the content as possible) and with a little digging and the help of the #eecms hashtag on Twitter, I found everything I needed.

The Site That I Want to Visit

Towards the end of the project it became clear that I designed a site for me, not for all of you (though I do hope you enjoy it). It's like my own little social network that enables me to go beyond 140 characters or outside of a privacy firewall and talk about or link to anything I want. I can finally post projects of any kind with the greatest of ease and read through an article without a thousand flashing ads trying to get my attention. It's easy to add an article to Instapaper and, for the time being, strike up a conversation in the form of responses to each article. The design and development of this site has opened my eyes to a lot of wonderful techniques; not only how to work with them, but why I should.