Strake ?

I’m excited to announce that I have launched a redesign of my business/portfolio site Black Ant Media. I started in on a redesign about a year ago and never finished it. They say if you’re too busy to update your own site, that’s a good thing. But when you’re in the business of selling your supposed expert services, not having any work to view is an embarrassment.

I had been wanting to play with MooTools for a while now, so I took the opportunity to use it on this redesign. I came away from the experience feeling like PHP is to jQuery (everyone structures their code differently) as Rails is to MooTools (established OO patterns that pretty much everyone follows). The MooTools Fx classes offer some of the smoothest animations I’ve come across. There is still much I want to learn about this framework, but I’m really impressed so far.

I’m using the lightweight (no database) Stacey CMS for the portfolio. Since this is a single-page site, I decided to load all of the project information dynamically from Stacey using AJAX calls and fetching JSON data.

I had a fun time working on the contact form as well. For WebKit browsers, the form flips around when you submit it turning your message into an envelope that gets dropped into a slot. On the server side, I use Akismet to check for spam submissions. Please send me a message if you’d like to try it out.

I few other buzzwords I incorporated: HTML5, Sass, TypeKit, Modernizr, hCard microformat, and parallax background scrolling.

I still have a bunch of cleanup/refactoring to do and I need to make a mobile version, but I’m really pleased with how it has turned out so far.

Oh, and all of the code lives in public Github repo if you want to check it out. Hit me up on Twitter with any questions or feedback.

My all-time favorite web design shop, Cuban Council, has rolled out a beautiful redesign for their company site. As usual, their attention to detail is outstanding.

Animated contact form for my WIP site redesign. Using Mootools for form validation and animation (plus Webkit transforms for the flip). Typekit for fonts. View at normal resolution on LoveDSGN.

amotion:

Designed the new Kickstarter mega-footer! There’s a special easter egg too: click the scissors and see!

A video placeholder card for a front page redesign. I used Dave Shea’s old Simulacrum post for the photographic effect.

I rarely buy web design books (preferring to absorb tips and techniques online), but my credit card comes out when Andy Clarke publishes something. Hardboiled Web Design looks like another work of art with minimal nonsense.

I’m a bit of a Rdio junkie these days [1], and I enjoy following Rdio designer Adam Polselli’s work on Dribbble. Yesterday he posted some cool concepts for an update to the search UI and the above is a rebound I made on his idea.

[1] If you used to rock a mullet, you might enjoy my Ultimate Hair Band Rockathon Rdio playlist. If you still rock a mullet, I have no idea what you might enjoy.

Blizzard’s clever 404 page.

Kicking myself for never thinking of this. Brilliant form design by Sean McBride.

A few months ago, Relevance decided to shut down their continuous integration app, Run Code Run. I was bummed because I was having a great time with some redesign concepts that never got to see the light of day. This one was a comp showing the various build states (no projects, all successful, failures) in a widget integrated into the nav bar.

Jason Santa Maria’s essay on the web designer’s current toolbox and what an ideal design application would look like. The idea of using WebKit as the core seems like a smart concept.

A Flickr set of themed MailChimp login screens.

Bounce is a nice site design feedback tool from ZURB. It seems to be a lite version of their fuller-featured Notable app. I’d nominate Bounce for having one of the most creative wait-while-we-process-your-request visuals.

Inspired by the recent Responsive Web Design ALA article, Jon Hicks builds a brilliant fluid site design for his blog. The structure dynamically switches between a one, two, three, or four column layout depending on browser width.