Posts tagged web design
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.

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.

Posted on January 21, 2011 · 17 notes
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.

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.

Posted on January 4, 2011 · 23 notes

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.

Posted on November 22, 2010 · 29 notes
amotion:

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

amotion:

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

Posted on November 11, 2010 · 22 notes
A video placeholder card for a front page redesign. I used Dave Shea’s old Simulacrum post for the photographic effect.

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

Posted on October 30, 2010 · 5 notes
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 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.

Posted on October 19, 2010 · 15 notes
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.

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.

Posted on October 14, 2010 · 12 notes
Blizzard’s clever 404 page.
Posted on October 5, 2010 · 8 notes
Kicking myself for never thinking of this. Brilliant form design by Sean McBride.

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

Posted on October 1, 2010 · 18 notes
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.

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.

Posted on August 5, 2010 · 5 notes
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.

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.

Posted on July 26, 2010 · 10 notes
A Flickr set of themed MailChimp login screens.

A Flickr set of themed MailChimp login screens.

Posted on July 19, 2010 · 12 notes
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.

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.

Posted on June 24, 2010 · 8 notes
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.

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.

Posted on June 23, 2010 · 3 notes