Art & Copy is another great documentary about the design industry (in this case advertising). We’re loving the attention and exposure our profession has been getting lately with other documentaries such as Objectified and Helvetica. Here is the trailer and a synopsis:

ART & COPY is a powerful new film about advertising and inspiration. Directed by Doug Pray (SURFWISE, SCRATCH, HYPE!), it reveals the work and wisdom of some of the most influential advertising creatives of our time — people who’ve profoundly impacted our culture, yet are virtually unknown outside their industry. Exploding forth from advertising’s “creative revolution” of the 1960s, these artists and writers all brought a surprisingly rebellious spirit to their work in a business more often associated with mediocrity or manipulation. George Lois, Mary Wells, Dan Wieden, Lee Clow, Hal Riney and others featured in ART & COPY were responsible for “Just Do It,” “I Love NY,” “Where’s the Beef?,” “Got Milk,” “Think Different,” and many other brilliant campaigns including everything from cars to presidents. They managed to grab the attention of millions and truly move them. Visually interwoven with their stories, TV satellites are launched, billboards are erected, and the social and cultural impact of their ads are brought to light in this dynamic exploration of art, commerce, and human emotion.

Here in San Diego we don’t get to see many clouds. So when we recently had some “bad” weather I took the camera and headed for the beach to capture our shores from a different perspective.

And for all you photography nerds (me included), here is all the equipment used:

• Camera: Canon EOS 5D
• Primary Lens: Canon TS-E 24mm 3.5L
• Secondary Lens: Canon 70-200m 4L
• Tripod: Induro Carbon 8x
• Tripod head: Manfoto 3265

LA JOLLA

+ Click image to enlarge +

+ Click image to enlarge +

ENCINITAS

+ Click image to enlarge +

+ Click image to enlarge +

+ Click image to enlarge +

+ Click image to enlarge +

+ Click image to enlarge +

+ Click image to enlarge +

+ Click image to enlarge +

La Jolla

We have received great feedback about our website, along with many emails asking us how it was built, if it use a CMS, and what tools we used.

What better way to answer these questions than with a blog post (a long one I might add). We’ll be taking a look at the processes used, how we approached the site, the selection of coding language, and other details we contemplated, such as the history of the older sites.

If you’re not interested in the details of how our business was born and its evolution, you can click here and skip to the new site development.

History

The Alonso Creative website has been evolving for some time: it started as a flash portfolio 7 years ago. Why flash? Because it offered the best solutions for image slideshow management and for delivering the optimum interactive experience. This was before the javascript frameworks era.

In version one I showcased only my work, with all the information on one page, and a small contact form that slides from the top (an idea we still continue to use and has yielded good results).

+ Click image to enlarge +

Visit v.1 of our website.

This site was live for 4 years, and I always had great feedback from clients and the design community, where it was featured in many galleries.

From the beginning the idea was clear: create a simple interface where the content was the most important asset. We wanted to apply the KISS approach (Keep It Simple Stupid) and be more of a gallery than a showcase of trendiness or baroque design.

When I relocated to San Diego in the summer of 2007 it was my goal to turn Alonso Creative from a freelance venture to a solid business, based on a creative collaboration model with the client as a central partner.

By doing so we needed to re-evaluate our web approach, and get a new site up ASAP to start doing business development.

SEO as a strategy

When planning the new site we wanted a site that would be fast to develop, and would take into consideration new emerging technologies, accessibility and SEO. We migrated away from a full flash approach, using flash only as content delivery, and used XHTML, CSS and Javascript.

+ Click image to enlarge +

Visit v.2 of our website.

This version of the site got really good traction. It achieved a more established presence and better SEO rankings, putting us on the map in San Diego. This happened due to three reasons; A) Most studios where still using flash, B) Semantic coding and structure gets you a long way when doing organic SEO and, C) The site was submitted and featured in several online showcases, generating a good injection of links and traffic to the site.

This is great, right? No. While it achieved a strategic goal, it went against our principals: we were focusing more on visuals for the sake of coolness than on functionality. We even went as far as to hide the navigation tools in sliding panels. What where we thinking!? We broke our own rules in order to rush the project and we did not think it through, like we do for our clients.

Another point we missed is that we didn’t have a clear message of our philosophy, our services, and what made us different from the competition. This had to change. A year after it launched, we started planning v3.

Coding tools:

• Dreamweaver CS3
• CSSedit
• Dreamweaver Spry Javascript Framework for sliding panels
• Lightbox 2.0 for image overlays
• Adobe Photoshop CS3

Who said a trilogy is no good?

It was time to really represent who we were: our philosophy, and our client-centered approach. We took a look at the past sites and asked ourselves what made us different and what drives our business. And so we created the top 10 reasons why Alonso Creative should be your creative partner.

This gave us a solid foundation of the core concept of the site: a client oriented site where their needs came first and where the work is showcased and explained, making every piece a mini case study, all within an elegant, easy to navigate interface with attention to the details.

We started by applying our process: defining our objectives, doing research, concept, and exploring. This enabled our design and code to be clear and easy to execute.

We created sketched wireframes of every scenario, figured out any animated interactions, and researched the best technology to achieve our goals. This gave us a great insight as to what was going to work and what was not before we even thought of code.

+ Click image to enlarge +

We were ready. We had all the pieces in place and we collaborated with a writer to polish our message. Design and build started.

Our goal? To take the site to a new level: to increase the quality of code, standards based design, and implementation with validation and SEO as main drivers, along with smart templates for easy growth and updates. We looked at our analytics to decipher key content, visitors’ screen resolutions, keywords, etc.

Design

Messaging and the portfolio were to be the core of the site. The idea was to create a clean interface where we could differentiate types of content by using typography, design elements, and color.

For typography in titles, we selected the type we use in our identity materials: Whitney and Gotham from Hoefler & Frere-Jones. For body copy, we used Lucida Grande for the Mac and Helvetica for the PC.

To highlight different types of contents and create a visual language, we used a thick side border for each group of elements. This also helped to break the horizontal nature of the site.

To give a natural, human touch, we used the wood texture (that comes from one of our furniture design projects). This gave the site some continuity from the previous design, and also provided a softness to contrast with the sterile and minimal design.

Tools for the design:

• Adobe Photoshop CS3
• Adobe Illustrator CS3
• 960 Grid System

Development

As mentioned before we wanted to create a clean, friendly, and easy to update site. We debated whether to use a CMS or not. We decided not to use a CMS due to 2 main reasons: A) we wanted to try and learn new things and, B) we wanted flexibility to evolve the site fast, experiment ,and fine tune it to the maximum (which we still do).

We used PHP to handle smart templates and navigation, as well as to update repeating content and to handle forms. We are using CSS2 and XHTML 1.0 transitional for structure and visuals.

We chose MooTools for the Javascript framework. We feel it’s one of the best and most underestimated frameworks on the web. It provides easy and fast code writing and silk smooth animations. We used it for the sub-navigation, quick contact panel, and for the forms.

To implement the typography on a standards based manner we used sIFR. No images where used for main typography.

To deliver images we decided to use flash and the SlideShowPro component. We used it so we could deliver images, video and audio from a single file and reutilize this and update it via XML. We customized the navigation for the slides and used ActionScript 3. For embedding the flash we used swfObject 2.

Tools used for development:

• Panic Coda
• MacRabbit CSSedit 2
• PHP 5
• Mootools 1.2
• Adobe Flash CS3
• SlideShowPro
• Adobe Photoshop CS3
• MAMP (to run a local web server for development)
• Apple Motion
• sIFR

Success

It took eight months to get it right. We feel we created a site that we are proud off and rounds up our approach to our clients, our design and our work philosophy.
The site has gotten great feedback from peers and has been showcased in the most recognized web design galleries around the world (Google “Alonso Creative”). Most importantly though, it has gotten great feedback from our clients, existing and new, and has generated good business and a good reputation for our company.

Our best advice?

• Be true to your principles and core
• Research, research, research!
• Don’t follow design trends just for the sake of it
• Don’t get discouraged by errors, learn from them
• Design with strategy and your audience in mind
• Don’t design for the now, design for the future as you’ll get so busy you won’t be able to update your site very often
• And most importantly: Love what you do!

The final product

You can visit our site here: Alonso Creative: next generation brands

Resources

• Adobe Creative Suite
• Panic Coda
• CSSedit
• SlideShowPro
• MAMP
• W3C
• PHP
• sIFR
• Mootools
• 960 Grid System

Questions? Please leave a comment.

Animator David OReilly just directed U2’s latest music video for the song “I’ll Go Crazy If I Don’t Go Crazy Tonight”.

Quite an amazing and simple animation. I love how he expresses all the emotions the characters go through with such simple resources. He was also involved in doing animations for the movie Son Of Rambow and other groundbreaking work. You can check out more of his work at his Vimeo profile and on his website.

Staring at the sea.

Solana Beach, CA. July 2009

© Jose Alonso. These images are copyrighted and CAN NOT be used without written authorization.

We are saddened to learn of the death of the pioneer architectural photographer Julius Shulman.

You can learn more here:

• USC Exhibition
• Metropolis
• KCET
• Wikipedia

© Julius Shulman.

We have started work on the Ceres website and have completed the product shots.

When the project is completed we will be posting a series on the design process. Here is a sneak peak!

Coldplay is coming to San Diego this Thursday, July 16th!

I’ve always admired this band, even before they became so famous. I remember the first time I heard them; it was the Brothers & Sisters song. What has attracted me throughout the years is the band’s honesty and simplicity. They have stayed true to their roots and musical style, evolving and giving nice surprises with each album.

Their latest album, Viva la Vida, offers a nice surprise to me. While keeping their core sound, with each new album they look for ways of enhancing it and experimenting without going to the extremes (like U2 has done with some of their albums, do you recall Zooropa).

I don’t know if this happens to you too, but Coldplay albums always grow on me, the first time I hear them I’m not impressed, but as I listen to them and start discovering new rhythms and nice musical treats, I learn to appreciate them ever more. There are many similarities between Coldplay and U2. Viva la Vida is produced by the master of production; Brian Eno, and you can definitely hear the atmospheric sounds characteristic of Mr. Eno. And as with U2, I tend to enjoy their live performances even more than their studio albums.

Be sure to check out their new and FREE live album, it can be downloaded from their website: Left Right Left Right Left. A must have for true Coldplay fans, and did I say it was free? See you at the concert.

Recently we completed a project for one of our clients, Piper & Heath Travel. In the process of creating this project we got to know a lot about Africa and its great people and resources.

In the wake of President Obama’s visit to Africa, mega rockstar/activist Bono steps up to the plate and uses this opportunity to push his Africa agenda and bring more attention to this continent and the multiple issues affecting it.

This not only marks Obama’s first visit to the southern part of the continent; it also marks the first visit to the continent by an african-american president.

I find really engaging how Bono recognizes all the progress some countries have obtained and how he focuses on the people and the culture of this rich continent.

He also touches on one of the most interesting points to me: how, through a government’s effort and the right mix of politics and activism, all glued by a new branding campaign, change can happen. This shows the importance of the role design is playing in our modern world and I’m really excited about the possibilities this brings for us not only as designers, but most importantly as communicators and story tellers.

Another thing I would like to point out, is that the Obama campaign (whether you like his policies or not) did a lot to bring design to a first plane as a great tool to inspire people. He was able to identify a generation and create a crafted message, which all politicians now follow. He demonstrated how a movement can motivate people throughout the globe and spread the much needed help our world needs in these times.

A video from One, the organization that came out of the wish Bono made as winner of the TED prize.

Read the full NYTimes.com article here.

Sun goes down in San Marcos Piazza.

Venice, Italy. September 2004

© Jose Alonso. These images are copyrighted and CAN NOT be used without written authorization.

If you’re into design and architecture you must pretty much know who the Eameses are. If not, you can go here MoMA and here Wikipedia to learn more.

Since architecture school I’ve always identified with their simple yet refined innovative style, and the flexibility of their practice, from architecture to furniture design to film.

My favorite quote, and the one I have identified my personal design philosophy on the most is:

“The details are not the details. They make the design.” – Charles Eames

So when I saw this TED video with some rare footage, presented by their grandson Eames Demetrios I got really excited to see their personalities and thinking through motion. Hope you enjoy it as much as I did.

Found on the TED website here.

Via Core77.

“As time evolved so did the means of artistically replicating reality, from cave drawings…to engraving, to painting, to photography, and to its (thus far) most convincing form, cinema. In the task of duplicating reality cinema has surpassed all other forms of representation.” – From “André Bazin Revisited” – Donato Totaro

If you haven’t seen WALL•E rent it or pop-it into your DVD and skip to chapter 32, and you’ll see this:

One of the most beautiful credit sequences I’ve ever seen. The Art of the Title Sequence has posted an interview with the creators of this beautiful piece of motion: Jim Capobianco & Alex Woo. A must read.

I found it to be a pleasant surprise that at the end of a 3D movie they chose to show traditional 2D animation. How they tell the history of art with some key artist styles is exquisite and very well executed.

WALL·E + Jim Capobianco & Alex Woo interview

What are your favorite title sequences?

Man and elephant

Udaipur, India. Summer 2000

© Jose Alonso. These images are copyrighted and CAN NOT be used without written authorization.

Last year I attended the Dwell on Design conference in Los Angeles. It was a really interesting experience to see how they connected great design with innovative and sustainable ideas.

But that is a subject for another post. In this post I would like to share one of the other reasons for my trip: to photograph the Disney Concert Hall by Frank Gehry. While I was there I also stopped by the Getty Museum by one of my other favorite architects, Richard Meier.

Here are some of the shots I was able to create. And for all you photography nerds (me included), here is all the equipment used:

• Camera: Canon EOS 5D
• Primary Lens: Canon TS-E 24mm 3.5L
• Secondary Lens: Canon 70-200m 4L
• Tripod: Induro Carbon 8x
• Tripod head: Manfoto 3265

I really love the TS-E, the tilt & shift movements give great creative freedom and vertical composition. What setup do you use for architectural photography?

Disney Concert Hall

The Disney concert hall is an amazing building. You can love or hate Gehry’s architecture, but one thing is certain: it is unique. This is the first building of his that I’ve visited and I was expecting a much different experience.

I started by parking in the building to test and see how the structure relates to the form. Test one passed with flying colors. When entering the atrium from the parking deck, it was a pleasant experience: rich red colors, wood panels and glass in perfect rhythm and union playing almost like music. I also was relieved when I didn’t see Mickey Mouse.

The volumes on the exterior are not pure sculpture, they serve a purpose in guiding the visitor into a central focal point delimiting the main volume, and a secondary volume to the north for special events. There is a break in the flow from the curves on it’s main corner opposite from the Opera building that shows a clear path to the entrance. Overall, the fluidity of the volumes gives the building a really light feeling in comparison to the Opera building next to it.

In the back of the building there is a really pleasant terrace overlooking downtown LA.

There is a really good documentary (available on Netflix): Sketches of Frank Gehry directed by Sydney Pollack. I recommend it if you like his architecture.

© Jose Alonso. These images are copyrighted and CAN NOT be used without written authorization.

Next in the series: The Getty Center.

As designers and branding specialists, we can learn a lot from this series. Branding is story telling: it is assembling messages and stories into a coherent tale with a payback.

I’m a huge fan of This American Life (more the radio show than the TV one) and recently found this interview from current_tv where Ira discusses story telling. A must see.

My father was an architect and car aficionado. My mother studied interior design. Me, I got a degree in architecture, designed custom built furniture and founded a graphic and web design studio. Design is in my blood and I can’t get enough of it.

Objectified is the new film by Gary Hustwit. I was first introduced to Gary Hustwit through his documentary of the typeface Helvetica. I became a fan of the film not because I like the typeface personally, but because of the story behind it. The film narrates how one of the most well-known typefaces was born through the need to express a whole design philosophy that has influenced design for many decades.

I recommend you go to one of the screenings of Objectified. You’ll be able to see interviews with the greatest industrial designers of our time, including Jonathan Ive from Apple and a rare view at Apple’s R&D facility (I can hardly wait).

If you live in San Diego, there will be a screening and a question session with Mr. Hustwit on July 10th. Here is all the information:

Friday, July 10th, 7pm
Museum of Contemporary Art
700 Prospect Street
La Jolla, CA 92037
Post-film Q&A with Gary Hustwit

You can get tickets online here!

Welcome to our blog. We love everything design; any kind of design. Here you’ll find an insiders look at our work and the world of design, our inspirations, critiques and more.

This is also our lab. We want the design to be organic and reflect our moods and explorations in design and code, always evolving.

We hope you enjoy this blog and let us know what you think!

About Jose Alonso

Jose began his career as an architectural designer, creative director and founder of a graphic communications company in Mexico City, where he was raised, completed his education and designed his own line of furniture.

With his architectural training and over 10 years of experience, Jose offers clients a unique eye for design and craftsmanship, enabling him to develop distinctive print, multimedia and environmental design solutions for clients across a broad spectrum of industries and business segments. His style is suggestive of a very clean, modernist approach, while his work ethic and approach to solutions development is straightforward and unpretentious.

Fluent in both English and Spanish, Jose can work with clients in the development of targeted creative marketing communications programs for both English and Spanish speaking audiences. Jose’s bilingual and bicultural background has proven essential when working with international and domestic clients.

After working in the agency world, Jose founded Alonso Creative as a hub for creativity and collaboration, where individuals and groups of creatives from many fields come together under one work and design philosophy to provide our clients the best creative solutions.