Adriana Abascal - Non-Traditional Custom WordPress Theme

This site presented two main challenges. The first was from a design perspective: we wanted to have this assemblage and a kind of “real-world”, personal feel to the site, but we also needed to make sure that the site felt glamorous and refined… this is, after all, a site for a woman who graced the pages of Vogue. We walked that fine line by using clean, modern fonts and sleek, real-world items and textures. The second challenge was from a functionality standpoint: we needed to build a very non-traditional theme for use with WordPress. They needed to be able to manage their own pictures and elements from the background, we needed floating sub-navigation and erratically-placed divs, and the whole system needed to be multilingual. Fortunately, I had great help from Chris Lohman and the excellent qTranslate plugin. In the end, we were able to sort it all out and they’ve got a very untraditional site that they can manage with basically no knowledge of HTML whatsoever!

MojoYogurt.com - Adobe Site of the Day: June 16th, 2009

Mojo Yogurt is a really fun brand. Their positive, upbeat, playful identity demanded an online presence that embodied all those things. At the same time, they have a good deal of important information that they need to make quickly and easily-accessible for users. So we needed to come up with a solution that pushed the limits of fun and playfulness without sacrificing usability.

Blind Society gave me a set of gorgeous site designs and we discussed what all we could do as far as activity on the site. We really wanted to push it, so we ended up with all sorts of fun do-dads on the site: flying UFOs, a scrolling background, cars with heart-shaped exhaust, drips on the subnavigation, hot-air balloons with flags that ripple in the breeze, highly active animations inside the pages, moving clouds, and so on. Try coming back to the site before 9:00am in the morning or after 9:00pm in the evening — the background changes based on time of day. Even with all this, I did a lot of balancing to make sure that there was not too much going on at any one time to ensure that the user’s CPU didn’t get overloaded.

At the same time, we implemented some solid code behind the scenes to make the site really effective for users: I used SWFAddress for deep-linking on the site and Google Maps’ Flash API for the restaurant finder. I built a whole set of custom classes to handle all the form processing on the site. The nutrition area is XML-driven so it’s very easy for Mojo to update the nutritional information of their ice creams. I used WordPress for their blog (with a nice custom skin that is W3C-compliant ) and then customized their RSS feed so that Flash could pull the newsfeed and media gallery directly from WordPress. I added some Flash shared objects so that users who kill the music and/or sound won’t have to do it every time they visit the site (the site remembers your preferences). At the end of the day, the site has a TON of stuff going on but it never gets difficult to use, for both the Mojo Yogurt company AND their clients.

Response to the site has been great. Traffic is up, user feedback is great, and we received the Adobe Site of the Day Award on June 16th!

ISIS Training Custom WordPress Site

To begin, I went through a full creative discovery phase with Patricia where we examined her business, her personality, her goals, her key messages, and more to determine what content her site needed and how it should be presented. I then hooked Patricia up with Ward Swan, one of the best writers I know (and a close personal friend). They hammered out the site copy together. Once that was locked, we went through a design phase, locked the design, and built her site.

I built Patricia’s site using the WordPress platform. I recommended this platform for a number of reasons:

• SEO was important for Patricia, so whatever platform we used, we had to use something which was search engine friendly to begin with and could easily be tuned for any future SEO campaigns she might undertake.
• She was interested in blogging. I told Patricia that consistent blogging was one of the most effective ways to search engine ranking fast. Plus, her knowledge and training-oriented nature made her a natural for blogging. If you’re going to blog, you can’t beat WordPress.
• She needed to be able to manage the site herself. It didn’t make sense for Patricia to have to talk to a web developer every time she made a change to the site – she needed a platform that she could handle herself.
• The site had to be expandable. Patricia’s business is growing and changing all the time. She will be rolling out new products in the future and expanding her services. It was crucial that she had a platform that could change along with her.
• The site had to be economical. A completely custom content management system would have been prohibitively expensive, not to mention totally unnecessary. It made good economical sense to use a platform that is extremely solid, has a huge support structure, and is entirely free.

For all these reasons and more, WordPress made the most sense to use as a CMS for her site. The technical integration was a snap and all I did was develop a nice custom theme for her.

The design presented an interesting challenge: the site needed to feel professional and corporation-friendly, but it also needed to reflect Patricia’s more free-spirited nature. It also needed to be bold and to stand out from all the other corporate training websites out there. The design we settled on uses bold, sans-serif typography set in clean, static boxes to ground the site and provide a solid, corporate foundation. Then we used some bright, organic colors along with a unique, textured background to reflect Patricia’s more unconventional personality. We also did some fun CSS where the main site content scrolls while the navigation stays static. The end result is a site that is corporate yet unconventional, professional yet creative.

Patricia was very happy with the site and she got a lot of compliments. It’s also nice that she’s showing up as #1 on Google’s listings for “isis training” (despite numerous competitors) and now shows up on a number of her content keywords, all without doing any concentrated SEO.

Sequoia Financial Home Page

Sequoia Financial approached Tridian with a challenge: how to make a collections agency (which has very strong connotations and associations for consumers) seem new, warm, and friendly? What’s more, how do you do that without undermining the integrity and strength that people expect from collections agencies? This design reflects my take on it. I tried to emphasize the sequoia tree’s associations with strength and grandeur while calming everything down with friendly greens and “friendlier” typography. Another thing: Sequoia specifically requested doing something unusual with their main navigations, which is how I ended up using it to bisect the content area of the page. Personally, I like how it forms a “pillar” in the middle without getting in the way of the content to the right and the left of it.

Beach Bums home page comp

The excellent people over at Tridian approached me to tackle a site design for their client, Beach Bums Boardshops. Beach Bums is a surf & skate apparel company which was looking to completely update their online presence. Tridian supplied me with the wireframes and the basic site requirements, and I came up with a design which referenced their more laid-back, surfer roots while still retaining some high-impact colors and layout.

My friends at K2 brought me a very interesting project: National Geographic needed a viral application for the Dog Whisperer site. They wanted a tool that would allow users to rate a number off different criteria they prefer or dislike in dogs and then have the tool pick the top three dogs the user would like.

I designed the application to be very clean and easy-to-use with only a few images intended to showcase happy people and their dogs. The tool itself allows users to rate 18 criteria on a scale of 1 to 6, then takes all those responses, and runs it through a custom algorithm that then yields the top three results based on their preferences.

Fun note: The chocolate lab on the first page is my dog, Jack

UPDATE: This site won the 2008 OMMA Award for Best Contest/Promotion/Sweepstakes Web Site!

For Roxy’s new summer campaign, they wanted a fun website that captured the Roxy brand identity, encouraged young women to follow their dreams, and gave site visitors the ability to submit videos in order to win a grant in order to go after their dreams. The design was easy: they already had a strongly-established identity for the campaign, so I simply explored ways to leverage their existing assets to create a very fun, active environment.

One thing I wanted to do was to create a sense of depth and seamless transitions between the site sections while keeping enough visual cues so that users knew when they had left one section and entered another. I did this by setting up a number of elements in the background (the clouds, the swirls, etc.) that are consistent from each page but shift in space and change color.

Technically, the site presented an interesting challenge. Roxy did not want to host the videos on their servers, so we needed to have a Flash site that could interact with YouTube’s API and pull videos from their servers onto the FYH site. I figured out the Flash side and then partnered with the excellent developers at Webtrix to create the CMS which gives Roxy a simple way to add, edit, and delete videos.

Incidentally, I was integrating the site using the YouTube ActionScript 2.0 Player API which at the time was only a couple weeks old. As a result, I had everything working fine except for unloading a previously-loaded video. I was banging my head against the wall for hours until I finally discovered an undocumented (at the time) function — destroy. So for all you people integrating YouTube into your Flash site, remember that destroy is your friend

Like all of THQ’s projects, they needed a site that was easy-to-update and could support multiple languages. Belay Development did the design and I built the site, once again driving all the site content via easy-to-update XML files. Screenshots, buddy icons, avatars, videos — everything could be edited, modified, and translated according to all the different countries’ needs.

Company of Heroes Home Page

For the latest in THQ’s Company of Heroes franchise, we wanted to capture the World War II feel while still supporting THQ’s need for multilingual, update-on-the-fly sites. Belay Development handled the design while I built the site so that all the content on the site can be quickly and easily updated through XML files.

I also got a chance to do some fun behind-the-scenes Flash stuff that the average user would not notice: For underage visitors the Flash creates site cookie which blocks them from entering the site. In the screenshots section, THQ has a standard thumbnail size that they use across all their properties. However, this section was not designed to use this standard size, so I needed a way to load the standard-sized image and shrink it to the new size. That sounds easy enough, but this site needed to be Flash 8 AS2-compatible, which means that when you resize dynamically-loaded images, the images look jagged and artifact-ridden. I did a modification of Kaourantin’s loadBitmapSmoothed function and so now all the images in the gallery look smooth as silk and THQ doesn’t need to do any photo editing.

Site audio is always a challenge — playing music outright can get old very quickly. I wanted something which captured the ambience without being overbearing. I loved the sound of artillery going off in the background — it immersed me in the “Band of Brothers” type of world that CoH captured so well. However, the human ear picks up on patterns very quickly. So I built a function that randomly selects one of a couple artillery sounds and plays them at random times. The end result is a very realistic-feeling, ambient sound track which isn’t overbearing. Personally, I like to just sit there and listen to the background sound — I find it kind of soothing, like thunder in the distance. I hope that doesn’t make you think I’m too twisted…

Chrome Home Page

Chrome is a high-end editorial boutique in Santa Monica. Every month they do tons of music videos, commercials, title sequences, and more. Given the fast-paced nature of the commercial world, they needed to showcase the latest and greatest their editors were putting out in the best way possible. As a result, they needed a website that reflected their high-end identity while still being chimp-simple to update.

I met with Chrome and fell in love with their minimalist style (you can imagine their sweet industrial-chic offices in Santa Monica). While designing the site, I kept the text and decoration extremely simple. The editors at Chrome are fantastic artists and photographers as well, so I built the site so that each background for each page on the site features the gorgeous photography from the editors.

From a Flash standpoint, every page and every aspect of the site is controlled by simple XML files. Using an every-day text editor, Chrome’s content manager can quickly and easily update the site to feature editors’ new commercials, clients, and awards. They can even update the background images to feature new photography.

Chrome also needed a robust client approval extranet where they could create projects, upload a variety of content, and view the content in a secure online environment. I set them up with Belay Development who built them just that.