“Narrowing down your design preferences”
CSS Zen Garden
Sometimes a tricky process during a website design or redesign project is to figure out what kind of a general look and feel the client wants for the new site. Asking a client to “just go find some sites you like and send me the links” is a bit like asking “just go find some stars in the sky you like and point them out to me.”
Introducing an old favorite of mine: CSS Zen Garden. It’s great when a client can visit this site and send back links to two or three designs that feel right for the project we’re working on together. The CSS Zen Garden is also a superb place to demonstrate how form and content can be separated from one another. A properly built website will have the ability to change form at a later date with a minimum penalty, i.e. having to rebuild content.
Flash Site for GCI
Working from Illustrator mockups (graphic design by avantgarde) this 100% Flash site was built with gorgeous full-screen portfolios, custom text and photo scrolling classes and efficient loading / pre-loading behaviors.
www.gci-sf.com
GCI is a succesful San Francisco based commercial contracting / construction management firm.
“What makes a great newsletter?”
Click to see the whole newsletter
Here’s an example of a really super email newsletter. Even if you’re not a Yogi, it should be clear that this newsletter offers real value to its readers.
Here’s what makes it so great:
- It’s not too long: You don’t have to set aside a special time in the day to read the whole thing. It’s distraction friendly.
- The marketing ‘call-to-action‘ — the teaching schedule — is nicely separated out in the sidebar and highly visible, and it doesn’t overwhelm the newsletter with self-promotional material.
- The introduction is personal and friendly and is relevant to the intended audience.
- The cooking recipe at the bottom gives the newsletter real value. This is giving something away for free, and it’s a great incentive to keep visitors subscribed to the newsletter.
- The overall layout is easy on the eyes, and has a good balance of text to images.
Prototyping for PayPal
I really enjoy doing rapid prototyping, and from a business perspective there’s no better way to figure out how to bring a new product to market. This month, AnswerLab (San Francisco) hired me to produce web prototypes to test a new financial product for PayPal.
Here’s how this type of study works:
- Figure out what different messages or images you think might help to sell your product
- Produce a prototype (fake) website that simulates purchasing that product, with variations for each message or image you want to test
- Send users to test out each variant of the website
- Conduct statistical analysis of users’ browsing behaviors to figure out which variation produced the best results
“Agile design and just getting it out there”
This morning, a friend and client of mine emailed me regarding the work we’re doing to get his new website built:
I interest myself in how the structure of our site will influence our behavior … As the website design develops, so does my clarity. It’s obvious to me that “site review and evaluation” will be an opportunity for us to reflect on our goals … I mean that the site is, for me, kind of like a biofeedback device that informs me about myself and helps me develop my goals. At least that’s how it feels at this stage in the process.
This is a great reflection on how the actual process of making a website helps to make more concrete the actual project or work that the website is supposed to communicate. This kind of thinking caused a seismic shift in the philosophy of webdesign and web programming a couple of years ago. It’s called “agile design” and I think it’s fascinating.
The basic idea behind agile design is that you minimize the amount of forethought and planning on paper, and instead take advantage of technologies that let you easily update the website once someone has actually clicked through the Real Thing.
Before agile development we said to our clients: “Get it right on paper, or else we’ll bill you astronomical fees for change-orders.” Now we say: “Let’s just get the basic sketch online, play with it, and then keep tweaking things until it feels right.”
This is one of the reasons I build a lot of sites for my clients using WordPress. It means that we can change our minds about lots of things — even the fundamental look and feel — without having to build everything over again from scratch.
Being With Dying
Today we launched this simple elegant website to promote Upaya’s enormously important “Being With Dying” training program:
www.BeingWithDying.org
“The professional Training Program in Contemplative End-of-Life Care has long been dedicated to fostering a revolution in care of the dying. This unique program provides clinicians with essential tools for taking care of dying people with skill and compassion, as well as sustaining resilience and dedication as they serve others.”
Ottmar Liebert’s Redesign
The last time I did a complete redesign for platinum-selling flamenco guitarist Ottmar Liebert was in 1995. By 2008, he was ready for something new and fresh, something that pushed the envelope while staying rooted with his zen-sensibility for elegant, clean, functional design.
The jewel of this redesign is a environmentally sensitive home page which, if left alone for 10 minutes, gets devoured by weeds, vines, bugs…
This fairly huge project included:
- SEO-friendly flash
- A wordpress diary that goes back 12 years
- A record label
- An MP3 downloads shopping cart.
http://ottmarliebert.com
Wedding Photography Blog Redesign
http://henshallphoto.com
This was a super-basic blog redesign for a friend and former colleague of mine. The assignment was to create a look and feel that kept his existing branding requirements (color pallette, logo) while making a new frame for his blog that would provide an elegant relief for large animated photo slideshows and sparse text.
Beauty Through Balance
www.BeautyThroughBalance.com was designed and built for Shannon Plummer, the sole proprietor of a holistic health and beauty business in Santa Fe. Her new site was built using WordPress so that Shannon could easily update the site on her own. For example, she uses WordPress to add the health tip of the month. Visitors and customers can sign up for Shannon’s mailing list which automatically emails the content each tip of the month as it’s published.
http://beautythroughbalance.com
“I had the most wonderful experience working with Canton. He made designing my website fun and very easy. From our very first meeting, the entire process was quick, and understandable. During our work together, he taught me how to manage my website on my own which is so important for my small business.
Canton is such a great mix of many different qualities; he’s very technical, a great designer, easy to talk with and a wonderful teacher of his craft. I highly recommend his expertise to anyone!”
– Shannon Plummer, DOM
Redesign for The Greenlining Institute
greenlining.org
I’m very pleased to announce the redesign and redeployment of greenlining.org.
Associate Director Orson Aguilar at Greenlining hired me to make a brand new website, following a look and feel sketched out by their designer. They needed a customized content management system that would make it easy for them to update their news, videos, publications, and policy initiatives. Everything needed to be database-driven, from the home page to the staff list to the news area.
Highlights
- Videos are automatically embedded and synchronized with content uploaded to YouTube™
- Images and all other content on the website can be edited using a web browser. No need to photoshop images to scale or crop them, no need to create PDF previews. It’s all done on the fly.
- PDFs, videos, and news articles are all tagged with the policy initiatives they relate to, so the policy pages stay fresh and up-to date whenever new content is added.
- Seamless integration with PHPList for the ability to send email newsletters to 1000’s of subscribers.
About the Client
The Greenlining Institute’s mission is to empower communities of color and other disadvantaged groups through multi-ethnic economic and leadership development, civil rights and anti-redlining activities. They’ve made financial institutions like the Bank of America and Wells Fargo commit to investing over $900 billion (over 10 years) to help the communities they serve.
New Donations System for Upaya.org
The Challenge: The Upaya Institute relies on donations to support a variety of projects, and using PayPal for donations has turned out to be expensive and difficult to track. Upaya needs to be able quickly manage and prioritize a list of funds, and make it easier for donors to make contributions.
The Solution: We decided to replace Upaya’s PayPal donation button with a dynamic funds editor that deposits donations straight into a bank account. Donors can specify what funds they want to support, and Upaya’s accountant can easily see what donations have been made each day. Try it out on upaya.org.
This is a 3.5 minute tour of the public side of this system (for making donations) and the administrative side (for managing donation campaigns and retrieving results.)
Ottmar’s “Scent of Light”
Long-time client and friend Ottmar Liebert just released a beautiful new album of guitar music. It hits stores next week, but the music can be previewed and downloaded as of today from the ListeningLounge — a custom-built mp3 store I set up for him a couple of years ago.
Each of these ten instrumentals draws a picture, and each picture tells a story. It’s music as a smell that triggers unexpected memories. India, 1978… Granada, 1992… each track has a strong atmosphere of time and place, like the journal of an itinerant poet or painter.
Back At The Ranch Cowboy Boots
Click to Zoom
This design was for a vendor of high-end cowboy boots in Santa Fe, New Mexico. Each of the 100+ boots was professionally photographed from five different angles so visitors could thoroughly explore each item in the collection.
You can see how the design looked when it launched in 2006 in the video below.
This design job was commissioned and later implemented (and updated) by the folks at studio x.
« Previous Page