The previous design looked faddish and I stopped liking it almost instantly after it went live. Too blue, too bubbly, too a lot of things. For this design I wanted something that would stand up and look good awhile from now, not fall on its face and be dated in a month. But at the same time, I wanted to keep the elements of the previous design that I thought worked well, namely, the typography design for an individual article. The column width is the same, the fonts are the same, and the spacing is nearly the same, but the chrome around it is now cleaner and more subdued.
Up to about a week ago, a lot of things on the page animated into position; logos fading in, navigation sliding across, etc. After taking a hard look at it, I decided to remove the superfluous initial animations and take the experience down a notch into a more subdued feel. I love animation, and I really love CSS3 keyframe animation, but I don't want people to be distracted if they're here on my site to read an article, especially if they came here via a search engine. So, I took it all out.
One design concept I really liked about the previous site was that nearly every section of the site had its own feel with a slightly customized version of the main layout. I wanted to retain that same feeling with the redesign, so you'll notice that my portfolio, services page, about section and contact form all have a look that's unique compared to the other main sections. Personal sites can get rather tedious so I wanted to make sure visitors were greeted with a little bit more personality than they were expecting.
Services
I don't take on much client work, in fact, I haven't said "yes" to a project for a number of years until very recently. The reasons for this are numerous, but primarily it's a matter of time. I have a fun full-time job (that I don't plan on quitting) so outside of work if I'm using my computer I'm typically working on Design Then Code or various unfinished apps. However, outside projects can be fun if they're the right kind of project, so I'm taking a bit of a leap and plan to take on a few, small projects throughout the year. My new services page outlines the type of things I offer as well as my current hourly rate.
And Finally
As someone who doesn't blog as much as he should, I believe I'm contractually obligated to say that this redesign will make me want to write more. I hope that's the case, but please don't hold your breath!
And, oh yeah, there's a tweet button now at the bottom of all entries. I hear it's what the cool kids are doing.
Sorry folks: Beak, my fledgling, ever-unfinished Twitter app for the Mac and iPhone is dead and will never be worked on again. Why? Please let me explain.
Beak's Beginnings
The first line of Objective-C I ever wrote was for Beak. Starting out in the world of Mac development with a Twitter app is pretty ambitious and I learned a lot. I didn't know what delegates were until I started using MGTwitterEngine. I never knew how to build custom AppKit user interfaces either. I never opened Interface Builder before I started designing Beak's (underwhelming) Preferences window. In short, I cut my teeth on Beak and it shows. It was never really polished, nor did it represent any kind of best practices for Mac development; the main interface component is a WebView so that says a lot by itself. It was my learning tool, my first trek into Cocoa development.
Why I'm Done With It
I have a full-time job working on the web and Cocoa development is my evening & weekend passion. If I'm lucky I'll have a solid 2 hours at night to crank on some code, but many nights it's less than an hour, or no time at all. Building a fully-functional Twitter app is hard and it takes a lot of time. To build a nice offering in the market you have to implement the same 30 features as everyone else and then after that you can start to differentiate. Ever heard of a Twitter app without Favorites? Or Direct Messages? There are a bunch of things you absolutely need or else people complain. Heck, I still get a few emails a week about Beak not saving your password. (Hint: I didn't forget about that feature, I just didn't know how to store anything in the Keychain when I first wrote it.)
Besides lack of time, I broke the golden rule: I didn't build an app that filled my own needs. I don't use Beak. I never used Beak. I also never used Twitterrific or TweetieoranyotherMacTwitterapp. I use the Twitter website. Why? Because my primary usage of Twitter is for finding new links and I read those in a browser. I don't like being in a desktop Twitter app, clicking a link, being transferred to Safari, reading an article, then switching back to my timeline in a different application. It's just how I use Twitter. Everyone uses it differently, and I'm probably the oddball here, but that's just how it is. Perhaps if I made Beak a gigantic, full-screen application with a built-in web browser I would've used it.
My third reason is simply a lack of interest in long, time-sucking projects. Like I said before, I do Cocoa development on the side, as a hobby, and as such I like to be entertained and to feel motivated. Dragging along to build an app for months isn't exciting to me. I like tiny projects because they keep me excited and I can always see the light at the end of the tunnel. Digital Post was a nice, concise project. I spent about 40-50 hours of work to build the 1.0 version. I could envision the entire project in my head at all points, so I was always shooting for the finish line. These kinds of projects just fit me better and they keep me motivated, excited and pushing hard at all times. It seems like a simple concept but it's taken me years to understand what motivates me and what doesn't. Beak 1.0 for Mac and, recently, Beak 1.0 for iPhone were both so complex their launch loomed far in the distance, like a mirage I could never run fast enough to touch.
Lots Of UI, Not As Much Code
I'm a designer. More specifically, I'm a user interface engineer. I design software and then I implement these designs. The main reason I write software is to make my mockups clickable and real. I have 50+ PSDs of never-implemented Beak interfaces. I have dozens of NSView & UIView subclasses with prototyped custom interface components ready to be hooked up. My brain and mouse would rush ahead to knock out the user interface and UI code but then, time after time, I'd get sidetracked and bogged down by network code, error-handling, API issues, memory leaks, 45fps scrolling instead of 60fps, caching code written & rewritten, complex text layout problems, etc. I'm good at solving these problems but after spending night after night tweaking and rewriting non-UI code I'd just get burnt out and would ditch Xcode for Photoshop just to give the other side of my brain something to latch onto. Then, inevitably, I'd start designing the UI for the next big Beak feature and would get frustrated knowing that I still had the previous feature to finish before I could move on.
Thank You
Over 30,000 people have downloaded Beak since it first debuted, a number that's just incredible to me. Even with all its flaws I still get emails and Twitter replies from people who think it's fantastic. It sounds crazy, but Beak made people think of me as an app developer and no longer just a web designer. It completely revitalized my skill set and realigned my career trajectory. It taught me Objective-C and made it possible for me to build an iPad app that launched Day 1 of the iPad App Store. It opened my eyes to real, double-clickable (and single-tappable) software development that I had never experienced when working on the web. I owe Beak and everyone who ever downloaded Beak a sincere Thank You that cannot be expressed in hypertext. Honestly, thank you.
(To answer a question before it pops up, I have no plans to open source Beak, nor do I want to hand the project off to someone else to finish. It's a project too close to my heart to give away so it will simply die an elegant death on my hard drive and in the cloud where it sleeps at night.)
This site was first designed in early 2008, it was time to give it a fresh look.
Design
I went through a lot of revisions to this design, I think the header is on its 10th fully-polished and implemented version. The goal with this design was to present a more cohesive look and have a more traditional layout enabling me to have a real sidebar. It still has a desaturated blue as its base color but I'm using semi-transparent colors and borders for various sections to liven it up a bit. The font in the header is Bello Pro and the main logo was made in Photoshop, however the faint text that fades in around the logo is native HTML text set using Bello Pro using Typekit.
One trend I really like right now is having various sections of your site have a totally custom design so I thought it'd be neat to see what I could put together. If you check out the new About or Contact pages you'll see they have some custom design elements that don't exist anywhere else on the site. I don't have the time or desire to do custom designs for each blog entry like some other folks, but I am working on new Portfolio and Services pages that follow with this motif. Those will be coming soon.
Code
This site now uses HTML5, but what does that mean? Well, it means a lot of things, mainly that I'm now using brand new HTML5 semantic tags like header, section, article and footer to give better structure to the outline of this site. After reading dozens of articles on semantic structuring of tags, I'm fairly happy with how things are nested and the semantic goodness that lies within. The new tags in HTML5 are still very new so there's bound to be some shifting so if you have any thoughts on how I can improve the structuring of my HTML, please give me a shout.
I also have a brand new Twitter sidebar. This is different from the last one because it has a little profile box on the top and, more importantly, only shows my full tweets, not any replies. I reply to people all day long so showing those is dumb, I wanted a system to show the meat of my Twitter stream. Unfortunately, this is actually a bit tricky so I ended up creating a list with my Twitter username on it and then using a widget to display this list. The default widget comes prepackaged with a bunch of CSS so I had to jump through some hoops to restyle it. I've also added Twitter @anywhere hovercards to the site which adds profile information to usernames you mention. With a bit of hacking I got these to show up in the sidebar widget as well.
I tested the site in the latest versions of Safari and Firefox and it looks good, which is all I care about.
Ads
I'm now part of Fusion Ads! You'll see their beautiful ads atop the right column on many pages of the site. I've found some very cool sites and iPhone apps through Fusion Ads on other people's sites so I wanted to give them a try. I'm psyched that they've included me in their network, thanks guys!
What's Missing
I wanted to get this new design out as soon as I could and that meant cutting features for the 1.0 release. Right now, comments are disabled across the site (and pre-existing comments are not displayed). I'm reworking the commenting system and plan to integrate some Twitter API features so that you can "reply" to posts and some other neat things, so that will be coming back soon. Other missing things: my portfolio, a new services page, a nicer way to browse archives and redesigned Beak & Digital Post sub-sites. Those are all coming soon as well.
Thank You
I've been posting little screenshots and snippets of the site to Twitter and Dribbble for a few weeks and have gotten some great feedback. Thanks for taking the time out to give it a look and tell me what you think! If you've got any more feedback please don't hesitate to hit me up on Twitter (@flyosity) or via my contact page.
I never opened Interface Builder before I started designing Beak's (underwhelming) Preferences window. In short, I cut my teeth on Beak and it shows. It was never really polished, nor did it represent any kind of best practices for Mac development; the main interface component is a 