Part of that is being my own project manager. I don’t need to push back on, or translate, what someone else is communicating. My standard contract specifies a single point-of-contact for every organization, which leaves little room for communication breakdowns.

In the most recent contracts, I’ve included more specific guidelines on the design process which aim to be a little more firm about what I’d like to see in the client-designer relationship. The goal should be to ensure the client is invested in the process at every level.

Most of these issues will sound familiar because they are age-old. Most of them have improved over the years, but they rear their head often enough that I’ve decided to formalize them in my contract. If “design consulting” is part of how you market your skills, conveying your experiences with the client are a vital part of that.

From my new standard contract, “Appendix B: Tips for a Smooth Process”:

A great website is the result of solid communication and collaboration between designer and client. Throughout this project, you’ll be asked to give feedback on elements of your website design. To ensure the project stays on schedule and budget, we’ll need your help and expertise!

• Designate a Contact. Please designate a single point-of-contact within your organization to handle all communications regarding this project. It may be necessary to cc: other team members in emails, but Darren Hoyt LLC reserves the right to incorporate only feedback from the designated point-of-contact.

• Avoid Committee Decisions. Whenever possible, discourage your organization from using a committee to submit website feedback. Committee-based design decisions historically lead to confusion, contradiction, broken deadlines, higher costs and an overall compromised product that aspires to please everyone while never seeming to please anyone. Please don’t let this happen to your project!

  If group feedback is unavoidable:

  • Empower your designated point-of-contact to make final decisions on all design notes collected from the group
  • Loop everyone into feedback at the beginning of the project. Avoid waiting until the design is nearly completed to begin reviewing with a CEO, board member, committee, etc.

• Organize Content. As noted in Section 4 (“Client will provide Darren Hoyt with all necessary content within (1) week of beginning the project.”) , it’s very important that web content is defined and organized before the design phase can begin. This means submitting electronic versions of all assets: logo, branding elements, colors, typography and finalized copy writing. If any of those elements does not exist, Darren Hoyt LLC can recommend a branding/identity designer, copy writer or additional content strategist as needed.

• Let Content Drive Design. Many web designs have faltered in the past because designers were tasked with creating something whose core meaning was still undefined. As the author of web design standards says: “Content precedes design. Design in the absence of content is not design, it’s decoration.”

  In the early phase of your project, prepare to put visuals and aesthetics aside. Starting with the homepage, work with the designer to prioritize your messaging. Consider hierarchy. Hone your taglines and marketing text so they speak clearly to your audience. Define your most important calls-to-action. Your designer may recommend a wireframing phase. Determine the products or services that represent your organization best. Boil them down and work with the designer to integrate them into your homepage.

  Copywriting greatly influences design choices, so avoid placeholder lorem ipsum text whenever possible.

• Consider Industry Standards & Competing Websites. Every website should be a success story for both designer and client. That process begins with familiarizing yourself with the highest models of web design within your industry. During the discovery phase, it may help to collaborate with your designer to share URLs and screenshots to get more familiar with great website design looks and feels like in a way that’s relevant to your project.

• Put Audience Expectations Before Personal Taste. Your new website should meet the goals of your organization, but more pressingly, the needs of your audience. Begin to think in terms of personas. Put yourself in the shoes of someone who will be finding your site via Google search. Can the content be scanned and immediately understood? Are there certain interactions vital to holding your users’ attention? Are value propositions and conversion rates being considered?

  Collaborate with your designer to ensure core design elements like color and typography are based on overall user experience, not subjective personal preference.

• Brand Wisely. The question of how and where to incorporate branding on a website is one of the oldest tug-of-war decisions between client and designer. Traditional stopgap solutions—ex: ”make the logo bigger”—won’t do anything to improve user experience. It won’t help users find your website: they are already there. Once there, good content is what will drive their experience.

  Collaborate with your designer to integrate branding elements like color and typography in a way that complements that content. Users are more likely to complain about not being able to find what they want than complain about a small or less-prominent logo.

<?php edit_post_link(__('Edit','mytheme'), '', ''); ?>

The only problem is I don’t like displaying it inline with my content, especially if it breaks something. I’d rather see the layout exactly as a user sees it.

Lately, I’ve been fixed-positioning the link in a less obtrusive way, using the standard “post” icon as a link. Here’s what I see on the front end when I’m logged in:

Repositioned ‘edit’ link

It’s out of the way of the layout, but stays fixed when you scroll. It’s easy enough to implement. Just paste the edit_post_link function above anywhere within the Loop. Then use this CSS:

a.post-edit-link {
	background: url(../../../../wp-admin/images/menu.png) 119px -35px;
	text-indent: 100%;
	overflow: hidden;
	display: inline-block;
	text-indent: -99em;
	white-space: nowrap;
	height: 24px;
	width: 24px;
	position: fixed;
	top: 5px;
	left: 5px;
	}

Note: this only works if your stylesheet is in your theme’s root. If you use a subfolder like /css/ you would need to add an extra ../ to the background path.

Rich already summed up the new Readability very well, as did Anil Dash:

It’s been extremely gratifying to hear a roomful of coders and entrepreneurs talk passionately and at length about how important it is to them to support great writing, and great journalism. They speak honestly and sincerely about being on a mission, and about building a meaningful business that’s thoughtful about the way it does its work and the impact this product has on the web.

The design process itself was a three-month sprint. The core ideas of the “new” Readability were ironed out long ago, but many new ones crept in during the design process. Things moved so fast that wireframing went from impractical to impossible. There was no existing branding, but the primary guideline was to create something that spoke to the tradition of a calm, comfortable reading experience; a conservative idea with a radical payment plan that aspired to change how we fund online content. Wrapping that message in a restrained design was a big challenge.

In the early phase, my buddy Yaron Schoen came in on a freelance basis to pour the concrete: color palette, logo and style guide stuff. For supporting illustrations, we contracted a Brooklyn illustrator who digitized and “mastered” old public domain images to support the design. The project also introduced us to the talented Erin Kissane who brainstormed with us during the day while editing a new A List Apart book at night.

Today Mandy Brown from Typekit summed up what became the final product:

The new website sports Adobe Minion for a classy look. Subtle shifts in color, placement, and type size create a clear hierarchy, while the subdued color palette suggests a calm, quiet reading room.

When that phase wrapped, I took the building blocks and began laying out the homepage, reading lists and dashboards. As the development scope shifted, the design happened more in the browser than in Photoshop. There are pieces I’d still consider ‘first drafts’, but that is a lesson of working in a startup where the priority is to launch first and then iterate.

After a series of all-nighters, 10 of us gathered in the board room Monday night to begin final testing and deployment. We were coordinating with the NY Times article which published around 10:00pm. We went live to the public around 11:00pm and began immediately tracking questions, blog posts and tweets. Within 20 minutes, the launch was a Top Tweet on Twitter’s homepage. At 2:30am we finally we stumbled out of Arc90 and into the snowfall outside.

Since launch, sign-ups for both Publishers and Readers have been magnitudes greater what we’d predicted. We’re continuing a dialog with users to address any misconceptions and remind folks that the extensions and bookmarklets will always be free. What’s obvious is the desire for converting web content to an e-Reader format with TiVO-like features resonates with many people, especially as publishers struggle to find a model that suits readers and publishers equally. The “new” pay model has worked for generations: pay people directly for their talents in return for a great experience.

I’ve started a reading list here. If you like similar stuff, drop me a line on Twitter and send me yours. In upcoming months, we will have methods to share and recommend that content, so stay tuned.

Read more Readability press from this week:

• New York Times
• Ftrain
• Fast Company
• Lifehacker
• Anil Dash
• Giga Om
• MacWorld
• WebMonkey
• Typekit
• Forbes
• TechCrunch
• The Economist

Raise your hand if you never went to art school. For better or worse I jumped into interactive design without learning design fundamentals. Instead I worked backwards, self-educating intensely, even now.

Part of the trick is using the tools you’re born with: strong opinions and the desire to make decisions based on taste. Not just taste, but let’s call it snobbery (in the nicest sense). If you’re a snob about food, music or furniture, you might already be wired to design things or at least appreciate it when you see it.

But interactive design should enable the largest possible audience to accomplish and experience things easily. Visual design snobbishness has to be calibrated for the masses. We know that websites shouldn’t make us think. What I’ve realized now that machines have completely taken over my life is that websites must also have great social skills.

Simply being “usable” isn’t enough, no more than nice cars should be merely “driveable”. Ideally, a website should spark an interesting conversation the moment it loads. It should usher you from page to page, telling great stories along the way. It shouldn’t come on too shy or too strong. It should look sharp without looking vain. No gradients or noise filters can replace social skills, just like an expensive haircut can’t give someone a better personality.

As the digital world gets faster and more complicated, the more designers resist, forcing it to stay grounded and human-centered. More websites are attempting to be conversational lately, which is good, even if many are doing it the same way:

I don’t want to criticize what looks like trendiness here because I think it’s happening for a reason. Below the surface I honestly think there’s a desire to look users in the eye, shake their hand and make them remember you are (again the irony being that “Hi, I’m [x]” is now too common to be distinctive, but it’s a start.)

A rule of thumb in creative writing classes is “show, don’t tell”. If a writer is good enough at making overtures about the story and character, he won’t need to hit you over the head with what he’s trying to say. For this reason, a good sign-up form should never require instructions.

See what HuffDuffer did to make their form more conversational:

The support page at Sifter recently added some dynamic date info for a nice bit of human touch:

For the first 5 years of what I’d call the mainstream web (2000-2005), most sites lacked social skills. Plenty tried to be deliberately mysterious, and succeeded at that, even as they failed as websites. The narrative seems to finally be getting better.

I’ve come to think of it this way: when you’re out at a bar with a group of strangers, there will inevitably be one person in the room who tells the best stories. If you’re lucky, the person is also polite, they exhibit good taste and understand the dynamics of a conversation. People are attracted to that person magnetically for the rest of the evening. Our websites should be that person.

Today Geoff Fox tipped me off to something ironic: the website for Republican congressional candidate Daria Novak is using a WordPress theme I designed back in 2008 for Obama supporters.

What’s interesting is that soon after Geoff made the observation, Novak’s web team removed all references to Obama from the CSS and templates, even changing the name of the /theme/ directory.

Keep in mind, Novak is a candidate who previously said:

Obama is the most dangerous official in our history, in my opinion. He is a globalist, an elitist and appears to be trying to drag this great nation down until it resembles a third world country.

But to look at the bigger picture, should the theme out of context really matter? Geoff wrote:

I knew Ms Novak (or any Republican candidate) wouldn’t want to be associated with anything having anything to do with Barack Obama no matter how tenuous the connection…What she was using was well designed and suited her (and I assume approved by her)–it just made a positive reference to Obama.

Why does that mere fact make it bad?

Fair enough. No reason design elements from a Pro-Obama theme can’t reasonably be remixed for an anti-Obama candidate’s purposes. The result is invisible to most visitors, save for those like Geoff who peek at the source code.

But if the point is to remove yourself from any Obama associations, why not choose a different WordPress theme altogether? Why knowingly choose a widely-distributed theme that plenty of bloggers already associate with Obama?

As Geoff mentions, it shouldn’t matter necessarily—but evidently it did to Novak’s web team, who made extra efforts to cover it up.

Last month I was lucky to be drafted into Dribbble by a fellow designer. It’s a private beta site with a lot of buzz. It will eventually grow and go public which got me thinking about the ramifications.

If you haven’t heard about it, Dribbble is a community created last year by Dan Cederholm and Rich Thornett. Designers can upload and share 400×300 samples of whatever they’re working on, kind of a visual corollary to Twitter’s “What’s happening?” Just like Twitter, you can follow others’ updates, comment on their work, mark favorites, and view the whole thing in a stream:

Notes about Dribbble

• Uploads. There’s a basketball theme so it counts as a “shot” on goal every time you upload something. 20 shots per month are allowed. Most are “leaks” or sneak peeks of upcoming design projects. You can also make “rebounds” which are visual responses to others’ designs.
• Streams. You can filter shots according to People You Follow, Most Popular, or Everything at once. This means that no matter how big it gets, you still have control over what you see. But there are downsides too, discussed below.
• Quantity. There are currently about 1000 members.
• Quality. The quality of designs on Dribbble is very very high. Nearly everything in my stream makes me click to view the details. Most any shot gets favorited a handful of times. I’m currently following 70 designers, almost 10% of Dribbble’s whole user base.

  True, you can’t deduce much from 400px crops. You don’t have insight into the projects they’re for. Many things can look great out of context but still not serve their project well. But there’s something addictive about seeing the sheer variety of styles in all these designers. So in terms of quantity and quality, Dribbble has them both in spades.

• Discovery. Dribbble has also introduced me to designers who are seemingly unknown in the blogging and Twitter world. Yet looking deeper into their work, it’s better than nearly anything you’ll find from the A-list designers we all follow.
• Discussion. Because the crops are small and somewhat inconclusive, Dribbble isn’t always ideal for workshopping an idea. Discussion is about 95% compliments, which is great for designer self-esteem, but doesn’t do much for critical thinking or the mutual back-patting that folks like Tim Van Damme noticed has gone on way too long in our industry.

  At the same time, certain feedback from a few great designers can open your eyes. It recently gave me the confidence to try out a radically new masthead idea for a project, which got approved by the client, against the odds.

• Openness. There are currently no third-party services or APIs until beta testing is complete.
• Privacy. I spoke with Dan this week who mentioned the public Dribbble will be visible to the public, but membership is required for participation. Facebook-style privacy filtering is not yet in the cards.

Intimacy

Finding intimacy among groups of friends and colleagues online isn’t always about limited numbers. Sometimes it’s just a matter of finding the right people. But once you’ve found an intimate place, how long can it last?

At some point in 2008-2009 everyone I’ve met in my entire 35 years got a Facebook account. Instead of trusted recent friends, my circle expanded to acquaintances from high school. People who I never intended on re-establishing contact were now privy to my every silly status update. I got self-conscious and had to create filters so that certain people didn’t get certain updates. This idea of relationship-filtering will continue being an uncomfortable part of our lives as social media grows.

Currently, Dribbble feels pretty intimate. Among the nearly 1000 members, there are still clusters of friends that form little subgroups. Within your trusted circle, you can be yourself and post private/client work without worrying much about it.

This intimacy is important as many of us designers spend our time maintaining an airtight wall of professionalism on our personal/portfolio sites. We publish only the most pixel-perfect portfolio samples. We still use the royal “we” when describing the work done at our one-man design studios. The web allows us to contrive whatever identity we want for ourselves.

Dribbble is a nice escape. You can be loose and be yourself. It’s more personal. There is no veil of professionalism. Because it is private, people post wacky stuff they might not share otherwise. There is less noise, more focus. You don’t feel lost in the shuffle.

Currently only a select group can offer invites and “draft” others into Dribbble. But eventually there will be more. And then….

The Public Dribbble

Some questions that come to mind:

• Will the feeling of intimacy disappear when Dribbble expands?
• Will the signal-to-noise ratio suffer?
• Will users feel less private and start thinking twice about what they post, re: client work and privacy?
• Will users feel obligated or subconsciously guilted into following people who follow them, as with Twitter? Will their stream become diluted, and eventually, less useful? Will Dan need to build in relationship filtering, like with Facebook?

It’s natural to get protective over an online community when you sense it’s changing. Same with bands and companies and media sources—there’s an impression that once they get big, they start to suck. Sometimes it feels genuinely true. Sometimes it’s a myth that the magic has gone. Sometimes, it’s you yourself that has mentally moved on.

Back in 2002, the MetaFilter community experienced a popularity surge. Up to that point, MeFi conversations had a reputation for being meaty and substantial. Users were overwhelmingly a smart bunch. There were lots of in-jokes and meetups. The mods closed memberships for awhile. When they opened them again, charging $5 for a membership, there were surges of new members. In the next few years, the site went from 10,000 to 60,000. Loyal community members complained that the level of conversation had changed and too many newbs spoiled the experience.

On the surface, that sounds like a snobby and short-sighted reaction. Should communities perpetually expand to include everyone? What happens if they don’t?

I’m curious what would happen if Dribbble went the Metafilter route and “pre-qualified” many of their existing members while slowly allowing in additional members for a small price, reminding people with that $5 fee that what they’re getting is not Just Another Social Network. Metafilter’s successful model has done wonders for that site’s manageability. It would be a monetary reminder that Dribbble is not for spamming, causing trouble, and so on.

Merit Systems and The Open Web

Any follower of Dan Cederholm knows his reputation as a very nice guy and brilliant designer. I doubt anyone believes he envisions Dribbble as an ivory tower where elite designers interact without sharing with the greater public.

Granted, the only invites in Dribbble’s early days were given to the top designers in the industry. Judging from comments of non-members, there was a perception of exclusivity, though really this crowd was simply beta-testing. I sympathize with Dan trying to make this distinction clear to the general public.

In the real world, there are exclusive restaurants, prestigious universities, private clubs and other institutions that require money, merits or influence to even gain acceptance. No one is trying to hide it—exclusivity is the entire point. Those institutions seek small numbers of like-minded people to qualify based on stringent standards. Some charge them with elitism.

The web is a different animal. Many services and communities are free and don’t require application, unlike universities. Can you imagine YouTube telling you you couldn’t use their software because your father was not a YouTube user and, considering the poor quality of your videos, you just weren’t YouTube material? The internet in 2010 has such a strong philosophical undercurrent of populism and open access, the idea of “applying” to a website is unthinkable.

Many think forward progress depends on the philosophies of the Open Web. Namely, sites should aspire to be transparent, decentralized, hackable and accessible to all. These notions are so overwhelmingly supported by pundits, I sympathize with the pressure anyone feels to abide by them, especially when trying to keep a community small and retain its intimacy.

In order to be all-inclusive while maintaining quality, there need to be more faders, filters and switches to tune your web experience more finely, or people will abandon ship and go elsewhere.

Maintaining Control

Just to be clear, I don’t want to imply the sky is falling when sites like Dribbble go public. And I’m not saying it’s net loss for the design community if the quality control at Dribbble gets a little muddy and the site becomes hard to sift through and feels a little less special.

Also I don’t think anyone consciously wants to discourage new, young designers from participating. But it is tough to reckon masses of people joining just to join. Following others, not because they’re fans of their design, but in hopes of being followed—joining for all the wrong reasons.

Think of when you get a new Twitter follower. You view their profile and see they’re also following 35,000 other people. They are clearly not there to exchange information or make intimate relationships. They’re serial networkers. They want a microphone and a gigantic audience. When they follow others, it’s merely an overture for you to follow them back. Which I never do. I would hate to see this kind of mentality invade Dribbble.

I think I’m just having a reaction to the general loss of control. This is why tools like Readability get created. A more calm web experience. More raw content. Less compulsive networking and and “me-too!” commenting. Smaller tribes rather than one tidal wave of unfiltered humanity.

At the beginning of each new year, I do some navel-gazing about where I should be career-wise. I look over my portfolio and take note of things I could have done differently.

This year I designed for some new platforms (iPhone, Symfony) that interested me. I considered whether I should learn to design on platforms which don’t interest me to diversify my skills or surprise myself.

I also considered whether it was smarter to market myself as a designer of WordPress-based sites, specifically, or a jack-of-all trades open to anything. I thought about what clients like to see in a portfolio vs. what I wanted to show.

One question I wonder each year is this:

Is it more attractive when designers can…

a) design like a chameleon in any style or genre appropriate to the project, or
b) design over a period of years in a consistent, signature style

What designers out there qualify for each of these categories? Which marry the two effectively? I’d love to know what others think, from the perspective of both fellow designers and people who have been in a client’s position.

Decision to Reboot

Pro Theme started as a place to market and sell Mimbo Pro back in March 2008 and hadn’t changed much since. Until recently, Ben and I both worked full-time jobs and could only commit limited time toward nurturing the one theme, making frequent upgrades here and there.

When I went freelance earlier this year, we’d already begun to sketch out more product ideas so rebooting the entire site seemed inevitable. One realization I had soon after going freelance was that I wanted everything on the web with my name attached to it to be revisited. In this case, it meant putting paid work aside and carving out 4 weeks to design a new Pro Theme identity and work on infrastructure. In the process, I learned some things about pacing myself and learning to live with certain decisions.

Identity

Doing client projects for 10 years, it was very rare to design for a business with no identity. At the very least, there was a typeface the client favored or some hint of a color palette. With Pro Theme, we’d never considered identity much. With Ben’s blessing, I decided to start from scratch.

Like a lot of good showcase sites, I knew the layout should be muted, spacious, unobtrusive, and otherwise put the content (screenshots, marketing notes) at the forefront. Neither Ben or I favor the heavy-handed commercial approach. Rather than screaming for attention, I wanted the design to be distinctive above all.

I knew I wanted to avoid gradients or excess stock art or anything shiny, cartoony and trendy. I decided to try something that hinted at traditional definitions of design, more reminiscent of the industrial/architectural world. The motive was conveying an idea of sturdiness and meticulousness: a drawing compass, note paper, dashes and graph lines. The collage-style of the product images is meant to reinforce the handmade feeling.

Because the design elements are muted, I wanted the logotype to be strong. I’d already been looking for an excuse to use House Industries’ Neutraface and the Display Titling font had just the right punch. Mac users will notice Palatino used for headers and Myriad Pro for the body, which defaults to Georgia and Arial on Windows. Unfortunately, the difference in scale between Arial and Myriad Pro led to some difficulties in setting the navigation, and in retrospect, I would probably not use that font stack again.

Layout

As some people pointed out, the new Pro Theme feels like this site in some ways. This wasn’t intentional but is probably a good reflection of the overall design approach I’ve been leaning toward this year.

With both sites, my favorite challenge was designing unique layouts for interior pages. For a long time I felt like I was exhausting my energy on homepage mockups and not giving proper attention to interior page layouts. It’s especially easy to get lazy when using a CMS like WordPress that’s so commonly used for blogs in the traditional column/sidebar formula. Factor in a client’s time constraints, and it’s easy to toss together a text-heavy “About Us” page that no one remembers.

Breaking out of that formula requires more design hours, but for certain projects it’s worth it. If this was a 30-page site, designing unique layouts would not only be taxing, it would make the users’ experience too erratic. When sites grow to a certain size, rigid standards can be comforting. Predictable layouts help manage expectations and make users feel more in control.

With smaller sites, I feel like each page can have more personality. The “About Us” page was an opportunity to communicate our team more visually – we’re small, we’re on different continents, we have experience, etc. If the presentation is more memorable, hopefully the content will be too.

Another part of breaking out of that formula is creating content that works well within a more flowing, print-like layout. Again, this takes more time but prevents the site from an overly templated feel. It also allows things to be communicated visually that might get lost in a columnar, text-heavy layout.

Other sites that influenced me to think about content layout differently: Kai Brach’s personal site, 37 Signals, Inkd and Noded.biz.

Message

In previous versions, we hadn’t spent much time on our message. For this version I played with a few ideas, but ultimately what I wanted to convey was:

1. We’re a small company with very focused roles
2. We have comprehensive experience in making websites, not just themes or templates
3. We prefer the ‘small batch’, handmade model to the commerical, mass-produced approach

Merging these messages with the design elements was something I’d always done for clients, but rarely for my own purpose. Marketing text is clearly not my strong suit. Conveying Pro Theme’s approach and personality via design is something I’m much more comfortable with, which explains the lack of much text on the pages.

In retrospect, I would have liked to come up with better taglines for the homepage. One benefit of being small and not heavily-branded is that we can change those things later on without too dramatic an impact.

Content & Buildout

As far as interior page content, the biggest priority was making it obvious where to seek support and under what circumstances. The support page uses big, recognizable icons and walks the user visually across different tiers of support. FAQs were also rewritten and forum/helpdesk policy text was tightened up.

Until now I hadn’t had an excuse to play with ScreenFlow, but once the screencast tutorials were done, I realized how important it was to the experience. There is so much happening on the back end of Elemental, for example, it makes a huge difference to just watch someone else play with it.

Gravity Forms is another site that lets the video tour sell the product for them without needing to bombard anyone with bragging messages. I do wish my voiceovers didn’t betray a Southern accent and a sinus problem…Next time I hope to script them in a way that minimal voiceovers are necessary.

As far as buildout goes, it went smoothly using Gravy as a base. Given its size, the site didn’t require much WordPress voodoo, though I did use custom fields for the “More Products” module you see on certain pages. Each subpage of the /themes/ page was assigned a custom field for its tagline and screenshot and called like this:

<ul>
<?php
	global $post;
	$myposts = get_posts('exclude=' . $post->ID .'&post_parent=7&orderby=menu_order&post_type=page&numberposts=4');
	foreach($myposts as $post) : ?>
	<li>
	<a href="<?php the_permalink(); ?>">
        <img src="<?php bloginfo('template_url'); ?>/images/<?php echo get_post_meta($post->ID, thumbnail, true) ?>" alt="" />
        </a>
	<strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong>
	<em><?php echo get_post_meta($post->ID, tagline, true) ?></em>
	</li>
	<?php endforeach; ?>
</ul>

Here the get_posts function is saying: “Give me the last 4 titles, taglines and thumbnails from subpages of the “Themes” page (ID#7), but exclude the current page and put them all in a list.” The product carousel uses almost the same code.

Afterward

The toughest part of the redesign process was coming up with a metaphor (drawing compass, graph lines) that suited our personalities. In the past, that’s the kind of work I’ve often farmed out to print designers and identity specialists. Doing it all myself exhausted a lot of energy that I’d usually spend on heavier design polish, but for this project, that wasn’t appropriate anyway. There always small things I wish I’d done differently, but now that the identity issues are tightened up, making changes the near future should be smoother.

The iPhone’s smooth interactions can really spoil you. Even less-than-useful iPhone apps become addictive when they just feel satisfying to use.

The iPhone user controls are responsive, like tactile objects in your hand. The panels slide and the icons glow when you touch them. It gives the illusion of tighter control over the app. Subtleties in the UI keep users coming back, even if they don’t know why.

Switching to a touchscreen-less web browser, interactions feel stiff and unsatisfying. Clicking Amazon.com‘s “Cart” button is like throwing yourself against a brick wall. It doesn’t budge. It doesn’t light up or depress or change colors. It’s unsatisfying and subconsciously makes the site feel less accessible. The less responsive the interface, the less likely you are to explore it, potentially.

Button Behavior

Adding subtle interactions can be very easy, yet it’s commonly neglected. Campaign Monitor is one of the more beautiful and thorough sites out there, but the 2 biggest calls-to-action on the homepage were designed as big rounded buttons that don’t behave like big rounded buttons. Lack of response creates a feeling of distance been the user and the interface.

Simple behaviors like this…

…make me feel more encouraged to interact with the site.

The button now has distinct :hover and :active states so it depresses when clicked. Notice the text also bumps down 1 pixel and the text-shadow changes to give it a 2-dimensional feel. Now that CSS3 is gaining wider support, most of this styling and behavior can be done easily.

Building the Button

Campaign Monitor uses one big PNG for their button, but the following method (Safari 4+, Firefox 3.5+) is easier to build and more scalable.

The CSS looks like this:

a#testbutton, a#testbutton:visited {
display:block;
background: url(http://darrenhoyt.com/imagedump/simple_button.png) repeat-x;
width: 200px;
padding:10px 0;
text-align:center;
border:1px solid #608925;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
font-weight:bold;
text-transform:uppercase;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#FFF;
text-decoration: none;
opacity:.85;
}

a#testbutton:hover {
border-color:#49671d;
}

a#testbutton:active {
background-position:  0 -200px;
padding:11px 0 9px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

And the only HTML required is:

Find Out More

There is nothing revolutionary about an enhanced button, but subtleties make a difference. Look at the “You Had Me At Hello” button over at Nosotros HQ or consider 37signals’s “Yellow Fade” technique or MetaLab’s picker menu. The minor UI enhancements feel less abrupt, more approachable and more “live”.

(BTW, if you’re a real purist, you might even say a button isn’t the right element here anyway; a true button should process a form, not simply link to something. But that’s a discussion for another post.)

Animating the Button

But CSS can’t do it all. You’ll also notice there’s a bit of javascript on the button to fade the opacity in and out (full demo here). All it required was loading jQuery and another smaller script:

Again dead simple, but worth doing.

If fading opacity isn’t what you want, Chris Coyier and I started a discussion that resulted in a rewrite of his previous tutorial “Color Fading Menu with jQuery”. The newest demo can be seen here and uses a slide approach rather than a fade.

Better Navigation

Chris and I also discussed how to integrate these techniques with WordPress navigation like <php wp_list_pages(); ?>. Go check out his tutorial over at Digging Into WordPress.

This spring brought a few surprises which inspired the site redesign. The biggest was that my wife got into grad school in NYC so we’re currently scrambling to find an apartment and start new lives. It also means I’ll be taking the plunge and beginning a freelance design career.

Officially I’ll be making the switch in about a month. There are some cool WordPress opportunities in the pipeline so far, as well as some iPhone app stuff and potential startup work up in Manhattan. With a freelance schedule, I’ll also finally have time to dedicate to designing new products for the ProTheme store. After doing strictly service-based client work for 10 years, I’m plenty excited to be making my own decisions and working at my own pace.

In terms of other collaborations, I’m keeping an ear out. I would love to hook up with developers working on web-based apps and services that need some interface design love. I’ve always liked how Jesse Bennett-Chamberlain markets himself for this role: “Creative Services for the Design-Challenged Developer”. Get in touch if you think we’d be a good match.

Meanwhile if you live in New York, I look forward to seeing you at some WordPress meetups soon enough.