Archive for the ‘rants’ Category

Some recent mentions of Infobytes on Twitter

Well yesterday’s post about the plagiarizing of my design for the Squaw Valley website caused quite a stir. The evidence against Infobytes completely damning. And the ski industry has responded loudly and clearly that this kind of behavior is immoral and will not be tolerated.

Initially, I decided not to go public until I heard Brighton’s side of the story. As I suspected, they had offered Infobytes several examples of sites they liked, just for direction and inspiration. Infobytes, their digital agency then decided to poorly copy, rather than borrow and improve upon the original. I mean, why bother doing all that work?

Facebook comments on a re-post by Dave Amirault

Facebook comments on a re-post by Dave Amirault

Once I decided to share this experience, the outpouring of support from ski industry and design colleagues was swift and unanimous. I’ve received hundreds of @replies in support of the integrity of design and condemning plagiarism on the web. Meanwhile, the full social media wrath of sympathetic marketers and designers has been brought upon Infobytes. Their website traffic has most likely had a record spike, their inboxes are full of critical emails, and the owners LinkedIn profile was even published via Twitter. I almost feel bad about it. Almost. I  actually had to persuade some savvy users NOT to share and abuse her personal Twitter account. One follower even said he was submitting the story to major news outlets, which may be a bit of a stretch but it’s cool anyway.

The moral indignation designers and ski industry marketers feel comes from the understanding that we all work very hard with limited resources. People who choose to work in the ski industry live in remote corners of the world, work seven days a week and get paid a fraction of their worth. Why? Because they believe in a lifestyle that offers freedom, self-expression, and accessible rapture.

The Squaw site was actually turned around in about 2 months, beginning to end. This would not have been possible without the hard work of Nathan Kendall at Squaw Valley, Chris Petty in Park City and myself. Lots of long days and nights went into that site, as with any project. We even offered 4 original concepts initially, each one offering different functionality and inspired by the work of other designers, without copying. So for another designer to sell pass that work off upon an unsuspecting client (a direct competitor no less!) is appalling.

People who choose to work in the ski industry live in remote corners of the world, work seven days a week and get paid a fraction of their worth. Why? Because they believe in a lifestyle that offers freedom, self-expression, and accessible rapture.

I think the lesson here is pretty clear. Don’t steal design. Don’t pass off other people’s hard work as your own. And don’t fuck with people who choose to race down frozen mountains and jump of cliffs. Your weaknesses will be exposed.

Thanks to all my colleagues and friends for their support.

A tweet by Jeffrey Zeldman

Affirmation from my web design idol, Jeffrey Zeldman

Great comment from my accountant!

Great comment from my accountant!

Hackjob: My Work Gets Plagiarized!

My work was recently poached by the good folks at Infobytes in Salt Lake City. That’s the nicest way to say it. Their recent “design” for Brighton Resort is more than inspired by my 2010 design for Squaw Valley USA. It’s a blatant ripoff. If imitation is the highest form of flattery, then consider me highly flattered.

My 2010 design for Squaw Valley's website, next to the recently launched Brighton website.

My 2010 design for Squaw Valley's website, next to the recently launched Brighton website.

I’ve spoken to Brighton, and I believe them when they say they were completely unaware of any copying or wrong-doing. It seems they listed Squaw.com along with several other sites they liked to give Infobytes an idea of their tastes and functionality they liked. I ask for the same thing when starting a project, but I try to come back with something unique, and hopefully better. Instead, Infobytes downloaded the site, the CSS, the markup, the graphics and proceded to make small hackish adjustments accordingly. So I think the real victim here is Brighton, who spent their entire summer and lots of money on something that’s plagiarized.

Before I get into the particulars, let me admit that there are only so many ideas out there, and some overlap is bound to happen. As one friend pointed out to me, my Squaw design looks a lot like Apple.com so maybe I’m to blame as well. But the ski industry is a small, interconnected place where everyone knows each other and takes great pride in competition as well as camaraderie. So it was no surprise when many of my colleagues jumped all over this blatant forgery before I even had seen it. Slopefillers did a great job of documenting the similarities within hours of its launch, in their post Ski Resort Websites: 7 Before & Afters from 2011′s New Designs.

As Slopefillers showed you, the dimensions and graphic effects are completely derivative.

As Slopefillers showed you, the dimensions and graphic effects are completely derivative.

But to say that they’re similar is an understatement. With the exception of Infobytes’ hackish rendering, they’re cut from the same mould altogether.

  • The hero images are completely the same dimensions, although Infobytes hasn’t cropped them to center the subject within the allotted space. They’re also embedded as background images using the same class names as Squaw.com.
  • The hero images are also served using the same php script which was developed by Chris Petty specifically for Squaw.
  • The ghosted scenic images in the background are treated using the same layer blending modes, the same opacity, and the same gradient masks as mine.
  • The dimensional shadows in the footer are blurred and warped to the exact same specification, creating a lifted corner effect. That’s no accident!
  • The navigation bar has the same height, width, gradient, beveling treatment, dividers and type treatment. IN FACT, if you were to examine the code (at the time of this blog post) you’d even see that the navigation and headers all call for Futura Bold, which we embedded on Squaw.com using @font-face. Brighton doesn’t use Futura, but my code is still there.
  • The navigation menus use the same columnar structure, the same unordered list styling, the same background images dividing navigation from promotional content.
  • The content level pages use the same background image technique with the same fade-out heights and same opacity, the same content overlay design, and the same sidebar design although in reverse.

I could go on and on, but you get the idea.

I spoke to the designer responsible for this hack job at Infobytes and she had no idea what to say. I asked if she thought no one would notice. She said, well the client sent me a list of sites they liked and I just “took it from there”. I said I usually get a list of preferred sites from my clients too but I don’t copy them. It’s just to get a sense of their personal taste. By the end of the call, she said she’d change everything right away. I reminded her that that’s not her call and that she should consult with her client and own up to what she’d done. So THAT was a fun conversation.

Squaw is aware of the situation and they had the same reaction I did. IE: “WOW, that’s blatant!” But with their recent changes, they may have bigger fish to fry at the moment. The bottom line is that Brighton and Squaw will work this out amicably, without a doubt.

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.

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.

  • 1 Comment
  • Filed under: my stuff, rants
  • 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.
  • Comments Off
  • Filed under: rants
  • Ban Trebuchet

    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 MS

    • 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.

  • 2 Comments
  • Filed under: rants, typography