The web is an ephemeral medium, subject to trends and whims; art directors and design by committee; browser-based compromise and accessibility assessments. Excellence on the web is subjective, elusive, and fickle. But you’d like to think that you do good work. Every project comes with concessions but your latest project is usually your best. You take screen shots for your portfolio, maybe enter it into some contests or showcases, and you promote it any way you can. But inevitably you have to hand that design off to the client, or a developer, or another designer who may not share your vision. And that’s when the heart-break sets in. Lately I’ve had several sites butchered by the clumsy hands of zealous, would-be designers. It makes me envy my friends in the print design field who’s work is preserved at the peak of its freshness like a beetle in amber.

Some of my designs stay alive, just as I designed them for many years. Some, just for a few months. Sometimes the designs degrade over time due to client access, improper training, or just a lack of attention. You try to account for that degradation in your design by applying character limits, styling markup elements, or offering style guides. But it’s inevitable. Then some day someone comes along and institutes a sweeping change. You just hope it’s for the better.

Picture yourself as a parent. You work hard to raise the perfect child and before you know it, they’ve left the house, fallen in with a bad crowd and they’re smoking crack! (Breathe.)

But what happens when the major change is detrimental to your original design, or to the client’s brand? Picture yourself as a parent. You work hard to raise the perfect child and before you know it, they’ve left the house, fallen in with a bad crowd and they’re smoking crack! (Breathe.) How do you tell people that you had nothing to do with it without sounding like a snob? Or, worse yet, what if the client asks for your opinion? I’m not the type to bash people’s work unless it’s unnecessarily awful. By that I mean, you had a perfectly good site but you trashed it just because you felt like it. (Breathe.) It’s natural to get upset about it. In fact it’s healthy. It shows that you care about your work. But it’s also unprofessional to let it get you down.

Remember: It’s not your fault

Don’t forget that people always want to put their mark on things. Even if your design was better that the new one, it doesn’t matter. If someone decides to make a change, you can’t stop them. So have a good cry, keep your chin up, and move on with your career.

Stay Fresh

One thing you can do is keep your portfolio fresh. Make sure your portfolio home page always reflects your latest and/or best work. Be proud of your  latest accomplishments and don’t hang on too tightly to previous success. I used to have a creative director who would walk into every pitch with the same 3-5 case studies of projects he had done over 10 years before. This is a bad habit. The work looks dated and it makes you look as though you haven’t done anything good in a while. PURGE! No one’s gonna look through your old work, and if they do, chances are it does not accurately reflect the way your current status as a designer. If you must include old work, perhaps add a conspicuous date to it, or better yet, section it off in a “vintage” or “classic” area where old designs can be put out to pasture.

Go ahead and tell users that this version is no longer active. But feel free to archive a static version of the site to show.

Stay Honest

If you must show out-dated work, don’t beat around the bush. Feel free to tell users when a site has become inactive. I like to show the date of completion for a project and if my design is no longer live, I say so. If it’s a small site or a Flash site, I may even archive my version on my website for display only. However, be careful not to detract from the current site’s SEO by stripping meta data, alt tags, and any live links to the site.

Put Your Best Foot Forward

Push your latest work. I find it useful to have a “featured work” area that showcases my latest and/or greatest work over my other work. Items in my general portfolio are listed by vertical market, while most other pages showcase items I feel represent where I am at this moment. And that’s important because people want to quickly understand what distinguishes you from other artists. Make sure you lead with the right impression.

But the best thing you can do is keep working. Keep doing your best work on each project. You will ultimately be defined by your latest work so make sure that your next design is always your best.

http://www.raisingmomny.com

With so many resources out there for taking care of a baby, it’s about time someone stood up for the mother. Raising Mom is a New York-based organization that helps new moms cope with their new adventure and teaches them helpful techniques. They offer classes and seminars while the site offers articles and blogs to create an empathetic and supportive community around motherhood. Check it out!

While I did the concept design and template/CSS production, additional props go to Integra Strategic for project management and overall development.

If there’s one thing that this economy has taught us, it’s that only true substance survives. To offer value as an independent designer, it seems that you have to have more than a keen aesthetic and lust for typography. You have to acquire skills that go beyond what one might learn in a design class. Experience becomes a key asset as you gain a wealth of subtle extra-credit vernacular. Of course there’s no substitute for specialized skills, so recognize where your limits are and be honest with yourself and your clients. However, it’s possible that you possess a high-level understanding of peripheral concepts that can help you AND your customers produce better creative to get through these tough times.

So here are 10 basic ways you can add value as a designer and ultimately make more money.

1. Project Management
   The number one reason companies hire freelancers is because their perception is that agencies charge extra for “overhead”. To some extent, they’re right. Clients are on the lookout for “smoke and mirrors” techniques like brainstorming sessions, formal presentations, and “process”. Is this unnecessary? NO. But clients have to worry about the bottom line. So anything they perceive as fluff reflects poorly on agencies. As a freelancer, you’re responsible for the creative process. So it’s up to you to determine how much buildup a project requires.

   Get in the habit of creating a detailed statement of work that accounts for all your anticipated hours and costs. Once agreed upon, this document can save you time later when the inevitable scope-creep occurs. It’s also your responsibility to manage the client’s expectations and hold them to their responsibilities so be sure to end each conversation with a “next steps” discussion. Make sure the client understands what’s supposed to happen next and what’s expected of them. Then, not only do you maintain your professional credibility, but you’re in charge of the project timeline.

   Another client perception is that agencies also have an inherent bureaucracy designed to protect the “fragile” talent. Account executives often have to run interference for designers and developers, creating lots of perceived hoopla around seemingly simple tasks. Your willingness to address things quickly and without ego or fanfare can go a long way toward establishing a solid relationship. However, don’t be afraid to tell them what your schedule is really like. Although the client should feel that they are a top priority, it’s ok to let them know that they’re not your only priority. This establishes boundaries in a respectful way.

2. Copy Writing
   So many small projects have no budget for copy-writing. And while you may not add a line-item in your proposal for it, you know damn well that there will be a moment when you have a small bit of Greek copy occupying space on the page. Why not take a stab at filling that in? I can’t tell you how many times my copy ended up making the final cut. Sometimes I’ll even put sarcastic copy in as a joke to call attention to the fact that they need to address it. Clients don’t often realize what a value that is, but in many cases it can keep a project on schedule.

   Another fine point is that you NEED take responsibility for navigation and calls to action. No page should ever have a “submit” button. Put yourself in the place of your users and understand what their mental process is. Then let that dictate what a button should say. By giving the user more specific language, you will entice them more and set up a proper expectation for the next step. This establishes trust between you and the user. But it also can increase the conversion of the site. Which leads me to…

3. Sales
   You’re not a sales guy. You probably don’t do business on the golf course or expense fancy dinners. But you CAN make your design more-sales oriented. Don’t kid yourself. The moment you became a commercial designer is the moment you became a marketer —gulp— a sales guy. If your love of design doesn’t translate to conversion you’re in the wrong business. You can make a huge impact with your design. It seems like a lot more articles are popping up lately about designing for conversion. And they’re right. By developing your visual acuity, you already know how to lead someone’s eye. Now take that skill and apply it to one specific point on every page. Figure out what the client’s key selling point is and drive all support content to promoting that one goal.
4. Photography
   You’re a designer, which means you probably took some photography courses in school. You’re working on a great design but you don’t want the site to be full of bland stock photography. Yet the client can’t afford pricey photo shoots with “real” photographers. Here’s an opportunity to be resourceful and profitable by offering to take photos yourself! Again, be honest about your limits but be confident that you can do a good job. I mean, they can always replace your images in “phase II” right? Identify the client’s photography needs before beginning work and offer to add that service as a line item. Or if the need isn’t realized until later in the project, the client may be frustrated by the prospect of paying too much. You have a golden opportunity to add recognizable value. Not only are you offering to take take pictures, but you’re able to create the exact aesthetic your vision calls for. Plus you’re offering to do all photo editing AND giving them exclusive rights to all high-resolution originals. That’s huge!
5. Site Architecture
   Clients often have no idea how large their site is. A typical scenario includes clients guestimating that their site is “only 6 pages” when in fact it’s 6 major sections with sub-nav and multiple utility pages. Learn to recognize the overall scope of a project early and be willing to spend a little bit of time outlining the site map as part of the bidding process. This will help you assess the size of the project, but it will also help the client visualize the amount of effort you’ll be undergoing. This small step can act as a springboard for a discussion on functionality and a quantitative device for additional usability or navigational concerns.
6. Usability
   As an interactive designer, you’re automatically a usability expert, right? Well no, it’s not that simple. But it’s the assumption of the client. So make sure you spend a lot of time observing trends and usability enhancements you can make on your designs. This is the primary difference between a print designer (for example) and a web designer. It’s not enough to make something look nice. Study the nuances of well-designed interfaces. Are your buttons’ hit states big enough? Is the next step obvious and are they in the right place? Are the links named appropriately? Can you add title tags to act as tool tips? Usability and accessibility are words that are thrown around a lot but they can’t be stressed enough.
7. Development
   Dammit Jim, I’m a designer not a programmer! But does that mean you can’t learn new tricks? In my opinion, designers shouldn’t design web sites if they don’t at least have a basic HTML background to understand the implications of their decisions. But if you have that basic understanding, why not improve on it? I prefer to work with developers whenever possible to handle all the heavy-lifting on the back end. But I often find them to be very grateful when I hand off detailed HTML templates and well-constructed CSS frameworks. The designer in me wants to maintain the aesthetic control over the design as deeply into the process as possible. But the Developer in me wants to make sure that things are built just so, with proper semantic markup and clean CSS, minimizing div/span usage and acheiving a nice balance between progressive enhancement and graceful degredation. What’s more is that the marketer in me wants to be sure that the precedent is set that alt tags and title tags are used appropriately, and that the copy supports the client’s SEO goals.
8. SEO (Search Engine Optimization)
   SEO is a science and an art. There’s a fickle relationship between content and search engines because search engines use complicated algorithms that are always evolving. But the one constant is that if you write clean code with lots of useful copy, and update frequently, search engines will respect you. Aside from the traditional meta content (which is still important even if it’s not the first thing search engines look at), you have a responsibility to your client to understand how your code and design will affect their visibility on the web. So consider the little things. Before handing off a coded template, make sure all your images have alt tags. and make sure all your links have title tags that reinforce key words while supporting the expectation set by the link display text. And of course make sure you’re using divs instead of tables wherever possible. I was a relatively late adaptor to the anti-table movement, but it has made my work more effective and ultimately more marketable. And while you should again, be honest about your expertise (or lack thereof) in regards to SEO, you should be familiar with the basics. If you’re just learning the basics and are handing off .PSD’s to a developer, follow up with them by styudying how they built out your design.
9. SEM (Search Engine Marketing)
   One good way to extend your relationship with a client is to offer to research ways to get them more business. Emphasize that the site itself can only guarantee a small percentage of conversion among unique visitors. But those numbers will increase as the site gains visibility. So although a well-built site may gain organic search traffic, a well marketed site can increase the site’s overall efficacy. You may want to research places within your clients’ industry where banner ads (which of course you’d design) are appropriate. Or you could define keywords on which to base a cost-per-click campaign. Maybe Facebook is a good medium for micro-targeted ads supporting your new site. Or perhaps your client needs a shove towards Twitter or suggest they submit the new site to industry blogs or awards sites for extra traffic. You can also become an ambassador for your clients. It seems obvious, but by promoting your work, you’re also promoting your client. So become an official PR spokesperson and refer people you know to them. You may also want to suggest email marketing. This is a huge can of worms but even a small site can have a basic HTML template (which of course you’d design) to promote the site to a list of core users identified by the client or perhaps accumulated through the site. All of these ideas can help your client gain market share while creating potential for extra work for you after the site has launched.
10. Maintenance
    One of the first questions I ask when starting a project is “what happens after launch?” I can’t build a CMS, but I have friends who can and if I’m gonna need their help, I want to know. I need to know who will be making edits, how often they’re making edits and how they plan on making edits. If i can team up with a developer who offers a CMS, that’s great. But every project is different. I like to empower the client to do their own edits if possible. If I build a Flash site, I like to hand over text or XML files allowing the client to edit certain content objects. But be sure to set the proper expectation about maintenance before beginning work. Your client may not plan on updating until the next redesign. Or they may want to edit anything, any time. Maybe you’d like to sign on to do all the maintenance? If so, it’s important to establish how much maintenance there will be per month and how much that will cost. Maybe you can get a monthly retainer or work for a reduced hourly rate? Maybe it’s not worth your time at all, and you’d rather hand them the keys by training the client on the system you’ve built. Or perhaps you’d rather hand off the minor edits to a junior designer who needs the work. Just be sure to establish all that up front.

I reluctantly joined Facebook about 3 years ago, while researching for a social network application I was designing. But like the rest of the world, I’ve become part of the inane fabric of white noise on the social internet. Overall, I think FB is a brilliantly designed application with tons of usability revelations. And throughout my Facebook tenure there have been several small redesigns and re-alignments that have mostly improved the usability of the site. However, the most recent redesign has unleashed a virtual sh*tstorm of criticism among FB users. Commentary ranged from the less sophisticated “where’s my stuff?” to more subtle arguments like “You took away the verb in my status. How am I supposed to fill it out now?”

In fairness, the most fundamental change to the interface is that they expanded the fixed-width of the design to embrace a higher minimum width target for their audience. I can appreciate the desire to do that but I also recognize that it poses certain real estate challenges they’ve had to overcome. But here are a few observations.

Some finer points of UI interest in the new Facebook redesign that represent a shift in philosophy. In green are the point I feel are improvements and in red are the points I'm not happy about for usability reasons or personal annoyance.

The good.

1. “What’s on your mind?” FUNCTIONALITY – FB has integrated a tabbed system allowing users to update their status or add links, photos, video etc. This helps centralize the initiation of these functions which were seen as scattered and unintuitive before. The selection process is slick, animated and super intuitive.
2. Live feed preferences – Each item in your live feed has preference options allowing you to hide updates from certain users, or hide updates from certain annoying applications. However, I’m not aware of any setting that hides ALL application announcements. I’ve taken to hiding updates from certain users who either update too much or who’s updates are not relevant to my life.
3. The footer – This is one of the best improvements I’ve seen in Facebook and it came from a previous re-design. The additional chat functionality and easy access to applications are a huge improvement. What’s more, the footer’s fixed position helps its accessibility, which is perfect for a utility bar like this.
4. Left column applications – Facebook’s newly expanded width has afforded them to reserve this column exclusively for applications that were previously stored on the right. The expandable list keeps the column clean and forces the user to prioritize those apps which they use the most.

The Bad.

1. “What’s on your mind?” APPROACH – This may be my number one complaint with the new Facebook. You may recall the “status” window used to be a permanent fixture atop your FB home page as well as your profile page. It started with your name in large bold letters, followed by the simple (but editable) helping verb “is” initiating the predicate of a sentance waiting to be completed. It’s a simple change that has destroyed the consistency of users’ status updates. It can be argued that that lack of structure encourages creativity, but I would argue that it has actually decreased users’ motivation to update. It could be the pressure of originating a complete thought without guidance, but I hope not. I think the simpler explanation is that the page no longer begins with one’s name, which exonerates the user from any accountability to update their present status. I know I’m getting obscure here but I can guarantee you the people at Facebook went into much greater detail before making this decision.
2. Left column spareness – I love white space. But the truncated list of applications in the left column leaves a missed opportunity for other important bits of content to be displayed above the fold. This white space also exposes the ragged left edge of the center content. This center column used to be much tighter and cleaner in the old, narrower design because, well, it had to be. Anyway, birthday reminders or notifications would be great examples of things that would occupy this space beautifully because they are short and tightly formatted.
3. Suggestions (formerly “PEOPLE you may know”) – Suggestions used to only consist of users who had two or more mutual friends with you. If there was no one who fit that criteria (sad) The list would be empty. Now, not only does the criteria for users seem to be less strict, but the list also includes pages and groups your friends to which your friends lay claim. That’s frustrating for me but I can get over it because they also allow you to cancel a listing if it’s not in fact relevant to you. It then replaces the  listing with a new one served almost at random. However, by the very nature of the process of elimination the new listing is inherently less relevant and asinine than the previous. I call this “Suggestion Whack-a-Mole” where you hammer down one undesirable result in favor of a less desirable result. Anyone else find this  frustrating?
4. Highlights – Highlights seems to celebrate the most annoying aspects from my live feed by listing them in a more graphic way. In this snapshot alone, I’m seeing announcements that my friends like flipflops, love handles, some stupid nightclub in Miami, and a number of pointless applications I will never want to use. I’d much prefer to be able to customize this box to show only photos and videos (or media interactions perhaps) by my friends.
5. Birthday Reminders – Facebook birthday reminders are a long-overdue and mindless method of fulfilling the social obligation of acknowledging an insignificant acquaintance’s birthday with the least possible effort. This is the perfect tool for me. However, it’s new location beneath the fold and BELOW the aforementioned sea of mind-numbing trivialities is problematic. By the time I’ve scrolled that far down the page, I’ve already seen 10-20 insipid announcements about idiotic applications and quizes and have moved on to questioning why I’m spending any time at all on Facebook. So by the time I see an “important” birthday reminder, the juvenile triteness of Facebook has already washed over me and my attention span has failed. I’d much rather see these reminders listed above the highlights box or over in the left column.

Anyway, I know this is a long and silly rant. I still very much like certain aspects of Facebook and I guess you have to take the good with the bad. Facebook does offer a clean and sophisticated interface with many usability merits from which to draw UI design inspiration. It’s a great social platform where design snobs like me can appreciate user-generated content on the same level as the unwashed, techno-peasant masses. And that’s what the web is all about.

Preface: The following demo yielded results that basically didn’t work in IE. Although a better man may be able to figure this out, I was not able to dedicate any more time to the subject. So unless you’re ok with that, or can help me get past it, you may want to save yourself some time.

I was recently asked by a client to simply “take that right column content and stick it UNDER the left”. Sounds simple enough, right? But what if you don’t have access to the table? What if all you had were styles you could manipulate to simulate a new row? Well damn. Sucks to be you.

1: Here’s the table structure we’re stuck with. One row. Two cells.

Traditional layout of a 2-column table row

But what the client wanted was for the right hand column to be moved below the left hand column without editing the table. (For the sake of argument you can assume there were classes defined in the TD’s allowing us to have some CSS access.)

This is usually the place where I say “I’ll see what I can do”, knowing there’s nothing I can do. But I spent some time experimenting and the result was a solution that worked just fine…except in IE. Great. Things like this make me want to become a print designer.

2. So here’s my admittedly not very elegant solution.

Manipulated row where second TD falls inline UNDER the first in the same Table Row.

I started with some styling of the table cells setting up the parental structure necessary to position the divs nested in each cell.
Table cell one:
<td style="position:relative; height:200px;" id="div-for-td1">
#div-for-td1 { width:960px; position:absolute; left:0px; top:0px; display:block; padding:0; margin:0; }

Table cell two:
<td style="position:relative; height:500px; overflow:scroll; margin-top:-200px;" id="div-for-td2">
#div-for-td2 { height:390px; width:620px; float:left; position:absolute; left:0px; top:210px; }

Basically that’s it. I’ve used the td styling to set up the relative positions, heights and behaviors, while the div id selector dictates the actual position and size.

A few things to note:
First: The second cell holds content of an undetermined height. However because the container is floated it loses its hasLayout property (see: On having Layout), which means that the markup of the page does not respect the  height of the div and the content below it will overlap show through this div. Obnoxious, right? Second: And since a simple clear style or clearfix (see clearfix) didn’t work, i had to limit the table cell’s height and cap the content with an overflow:hidden;
also because I’m basically tricking the browser into ignoring the markup of the table, I had to use the specified height from the first cell as a negative margin in the second cell. Otherwise the browser would apply the height from the first cell to the second as you may expect, creating a 200px gap above the content.

Again, I’m not saying this was impossible. But having spent a fair amount of time on it, I’d say your best bet is to keep it simple and avoid this technique.

Say hello to EnergyCircle.com, a new online resource for home energy efficiency. Streamline the performance of your house and save some serious money while your at it with Energy Circle’s blogs, articles, instructional videos, and a wide variety of products for each room of your house. Check it out »

Additional props go to David Puelle of Portland, Maine for branding and art direction, while development credits go to Integra Strategic of Portland, Maine.

Check this out: http://www.homedepot.com

Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

There are a lot of negative things I could say about HomeDepot.com, like the unintuitive architecture etc. But instead I’d like to mention a VERY minor detail that I think 99% of designers would never think of. Let’s face it, the entire Home Depot experience, virtual or otherwise, is overwhelming. Take a look at the quicklinks on the left hand side of the site. They’re there to give you smarter access to the high-demand product areas of their daunting product selection.The type size hierarchy is gorgeous, the color variance ads a nicely priortized foil to the signature orange they could be over-doing (but they’re not), and the almost retro usage of the link underline is unmistakably usable.

But here is where I totally geek out. Notice how each category of links has two lines. Now, notice how the first line always ends with a comma. Why is that, you ask? Well whoever designed this menu (props) took the time to add a simple attribute to the links in this definition list to disallow the links from wrapping onto a new line. Essentially, this CSS author added the following attribute to the definition data type selector:

dd a { white-space:nowrap; }

This allows each line to end with a complete link. Why would anyone bother doing this? This is the usability quivalent of a print-designer manually setting type to clean up any awkwayd hyphenation. To put it another way, consider the user’s mentality when viewing this list. Am I looking for “Toilets, Tubs & Whirlpools?” or do I just want “Toilets?” Well, without this attribute, “Tubs &” would probably reside on the first line potentially causing confusion about where the which link is which and where each ends. I know I’m making to much of this, but I’d love to think that someday, someone might spaz over my attention to detail like I’m geeking out over this right now.

You’re probably aware of the anti-comic sans movement among designers and assorted type snobs (see ban comic sans). But while we’re hating on god-awful typefaces designed for Microsoft (notice a trend here?) let’s toss Trebuchet into the mix. Despite gaining popularity in the “aren’t I cheeky?” blog era of the web for its universal availablity (see: ubiquitous mediocrity), Trebuchet MS is contributing to dumbing down interactive type design.

• Trebuchet’s clumsy weights allow little room for elegance.
• Its awkward, schizophrenic features (“g”, “l”, “&”, “$”, “?”) distract the eye’s natural rhythm and decrease readability.
• Drastically inconsistent x-heights (“A” vs. “x”) establish jarring vertical agreements.
• The ampersands (“&”) is a ligature of a bad “E” and a stumpy “t”. That’s just savage.
• You can’t just throw in a half slab-serif whenever you feel like it (“i”, “j”). Were you raised in a barn?

While I’m all for experimentation and destinguishing yourself from the competition, this font has been abused in recent years. And while I may have been able to overlook its childish qualities in small doses, the time has come for someone to stand up against type that sucks. I simply can’t overlook it anymore. And I urge you to write your congressman and/or local web designer to reclaim our dignity and stop abusing this heinous face.

Being that so much of our industry is perception turned reality, I’ve decided to start a professional blog. My wife, Sarah and I will keep posting to our personal adventure blog, but this will be a place for me to expound on my ideals as an interactive designer. You may see some subjective commentary, jaded criticism, or blatant self-promotion here, but isn’t that what it’s all about?

Here, you’ll be able to read about many aspects of interactive design like layout, typography, usability, user interface, design trends, CSS, Flash, Photoshop, social media, new apps, link-sharing, and most importantly, respect to quality work around the internet.