The “post-comp” era

A few days ago, I wrote about moving into the “post-comp” era in the web design process. I linked to a post by Brad Frost, and now Dan Mall has written a reply to that article.

As I mentioned in the comments, I think it’s an expectation problem. The typical workflow for web design projects is to send a client a “preview” of the site to approve before beginning development. This “preview” usually comes in the form of a comp that shows how a page might be laid out and often contains specific, pixel-perfect choices with typography, spacing, images, columns, and other very fine details. The problem is that this says to a client, “We’re now at a stage where we’re focusing on details.” It’s only natural that their feedback focuses on details.

…

A responsive design process is like a scandal. You’ve gotta pre-emptively control the conversation. If your client wants to have conversations like this, it likely means you didn’t do a good job of setting expectations.

As Dan points out, this expectations need to be set in the Sales process—at this point, the designer should be engaging with the potential customer and trying to establish the deliverables.

Rather than promising multiple rounds of page designs as some of the first design deliverables, we’re setting the expectation that the first things they’ll see are unstyled HTML to demonstrate content hierarchy and flexibility across various screen sizes and a few pieces of a visual style—works-in-progress and unrefined broad strokes, not polished visuals that call for critique at a fine detail level. That’s why I’ve grown to love element collages; they’re literal enough that your client can start to see a picture of things coming together but still enough of a work-in-progress that there’s no expecation that the site would actually look like this for everyone.

This is, in this age of multiple devices, simply not sustainable; in short, it creates false expectations for your customers.

To be fair, I don’t think we’re in a post-PSD era, but I do think we’re moving towards a post-“full-comp” era. I can’t envision a project where I don’t use Photoshop. Photoshop isn’t the problem. It’s a great tool. My favorite, actually. It’s the stigma that comes with presenting a full comp (I define “full comp” as an image of a website viewed on a desktop, typically around 960px wide). By default, presenting a full comp says to your client, “This is how everyone will see your site.” In our multi-device world, we’re quickly moving towards, “This is how some people will see your site,” but we’re not doing a great job of communicating that.

As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context. If you can get your client to believe in the sales process that you’ll do that for them, they won’t care what the site looks like.

This is precisely right. Of course, when you are in a company that has a Sales Team—rather than the salesman being, principally, you—then the first people that you have to convince is the Sales Team.

As I mentioned in my previous post on this subject, we have just started moving our first customers towards this process; however, we are feeling our way to a certain extent and not yet nailed down the outputs.

Yes, the projects on which we have deployed this process do seem to be going fairly well: however, we need to firm up the process very swiftly now—and then sell it to our Sales Team.

I am absolutely convinced that we are moving into a post-comp era and that it is going to lead to far more satisfying results for both designers and customers. However, it needs to be presented in the correct way, and both sides need to understand the deliverables. In short, expectations need to be sold, set and delivered.

I will continue to update you all on how it goes…

Reciprocity: give to get

Living in the world that we do—with its smartphones, transatlantic travel, ultra-high-def TVs and One Direction—it’s sometimes easy to forget that we are, at the most basic level, animals.

We have, over the course of human evolution (modern humans it’s generally agreed upon have been around for at least 200,000 years), carried with us various traits that helped our long gone ancestors to navigate and survive on this planet we call “home”.

In the modern world of communications these traits may seem of no real concern to us but the truth of the matter is that we still act and make decisions based on them.

The use of reciprocity, for example, can be a powerful tool to help create a reaction and a connection with your clients and customers. It can help build a deeper relationship, creating trust and loyalty.

At the most basic level, reciprocity is the exchange of something of value between two or more people. This doesn’t have to be as obvious as giving a present or receiving a birthday card: assistance, advice and contacts can equally be a form of reciprocity.

By and large we try to repay in kind what another person has given us; if we don’t, we usually have an overwhelming feeling of guilt—and there aren’t many people who enjoy that feeling. I know I don’t.

There are many theories as to where reciprocity comes from and why it’s a major influence over our lives and decision making. It has been theorised that it relies on a universally held belief of future obligation: if we give something of value away it won’t be lost forever but will be repaid to us in the future with something of equally valuable (or even more so). Humans for the most part will almost always strive to repay this “debt” even when the expectation of repayment is a vague one.

We can see reciprocity happening all the time in the online arena—take LinkedIn, for example. When we receive endorsements or recommendations from our clients or associates, most of us will respond in kind without being asked—we somehow feel compelled to do so.

When someone comments on one of our photos on Facebook, we will often comment back on one of theirs. Even if we don’t feel obligated, we would rather do this than not as it’s fundamental to our social success.

We can make use of this ancestral practice in a variety of ways.

  • Write free articles—not only will you be giving your readers knowledge for free but you’ll also be enhancing your position and credibility as an expert in the field in which you operate. The same can be said for coding. There are many developers who use reciprocity by giving away bits of code they have created: those who download the code feel obliged to either spread the word about the developer’s site, leave comments of thanks (usually praising the developer’s skills) or offering solutions or “bug fixes” for free.
  • Offer a free consultation—by giving away a bit of your knowledge and helping your potential clients/customers just a little it will instil the feeling that you’ve gone out of your way to help. It will enhance your reputation and increase the prospect of a more meaningful and prosperous relationship.
  • Compromise—by showing that you have the ability to compromise, your client will more than likely wish to reciprocate in kind, leading to a mutually beneficial outcome. This doesn’t mean that you have to become weak and go against your fundamental principles. Be strong, but always make room for compromise too.

It seems that even though we are moving full steam ahead into the future, there are certain traits that are ingrained in the collective human psyche. Don’t forget to use those traits—they’re effective, they work and they have done for at least the past 200,000 years.

Applications that I use

Having mentioned Sketch in my previous post, I thought that I would expand on the applications that I use in my workflows. And to start with, I need to expand on what those workflows actually are.

Which is tricky—because I do quite a number of varied jobs.

First, I do a considerable amount of management, both in my team and in the wider business. This is why my job title is the, slightly unwieldy, Creative and User Experience Manager (usually shortened to CrUX Manager).

Essentially, I lead the team that designs and builds our customers’ websites and intranets on our company’s content management platform (CMS). However, I also design the user interface (UI) and user experience (UX) for the CMS—plus I also design a lot of the new functionality too.

Occasionally, I give talks at events—both internal and external—about the web, CSS, Accessibility, and other related issues.

Because I know a lot about the web, our product and our customers, I have also spent a lot of time in customer pitches, Information Architecture (IA) workshops, and in discovery meetings for new software. In other words, I am heavily involved in a customer’s entire journeys with our company—and, in many cases, for determining the steps along that journey.

And, since I run the CrUX team, I am also responsible for recruitment to that team and, with the operations team, for managing resources on a day-to-day basis. And, of course, when we have a new starter, I am responsible for sorting out software and hardware—which means that I know how much we invest in our applications!

Which brings us back to where we began—the applications that I use to achieve all of this.

Graphic Design

For the moment, I find myself continually coming back to Photoshop—like a dog to its sick. I don’t really like Photoshop for design (and I loathe Illustrator) but it is familiar and thus relatively easy to dip into.

However, I am gradually weaning myself off Adobe’s products in favour of smaller, cheaper applications that are, in many ways, better for the job than Adobe’s bloated behemoth’s.

I have been playing about with Sketch (about £30) a lot, and I think it’s a wonderful application. It is very capable and, with every update (usually monthly), it becomes more capable and more stable. I am aiming to make it my primary design tool.

For non-vector based work, I have been getting into using Pixelmator (about £20) which is also an excellent (and cheap) photo-editing and design application.

Browsers

My browser of preference is Safari. Its Web Inspector tools are almost as capable as Chrome’s, and I find the browser faster and more reliable than Google’s offering.

However, I do test in all major browsers—including Internet Explorer 7, 8, 9 and 10. To achieve this on my Mac, I use VirtualBox (free) and the wonderful IEVMS script to automate the conversion of Microsoft’s supplied disk images to a format that VirtualBox can read.

Coding

A few years ago, I found myself, with a colleague, in a café with free Wi-Fi; up until that point, I had used Dreamweaver to code my work. However, my laptop was not equipped with my meatier applications and so—needing to do some coding and having read a good review of it—I downloaded Panic’s Coda.

And I have never seriously used another coding environment since (although I have also dabbled with MacRabbit’s Espresso—before they merged it with CSS Edit). I certainly never launched Dreamweaver ever again.

Coda was, essentially, my first foray into the sunlit uplands of indie Mac Developers. Up until that time, I had basically used Adobe applications and little else; for someone with this experience, the speed with which Coda launched and operated, as well as its feeling of lightness, were a revelation.

That independent developers are challenging Adobe in its core areas of photo-editing and vector design (this latter being an area that Adobe basically stole when it killed my beloved Freehand) is one of the very best things about the Mac platform right now.

I write in LESS and use the excellent CodeKit to process it, as well as for compressing images, and other useful things. Be sure to read CodeKit’s amusing release notes, by the way…

Finally, I started using CodePen a lot for experiments, reduced test cases, reference files, etc. I particularly like the fact that it compiles LESS on the fly. I haven’t had much time to continue playing with it recently, but that should change in the next few days.

Software Design

My role in this area is, essentially, to gather customer needs, to productise them, and write requirements specifications.

For this I use Apple’s Pages (£14) for the text and, for the workflows, Celestial Teapot’s very nice little diagramming application called, simply, Shapes (roughly £3!).

This latter app is—like most Mac indie apps—under active development and Celestial Teapot seem very good at taking feedback and incorporating it into releases.

Administration

For most other administrative tasks, I use Pages, Numbers and—for presentations and speaking engagements—Keynote.

When presenting, I use Apple’s Keynote Remote—running on my iPhone—to control the slides and display presenter notes (where necessary). In the absence of Wi-Fi (a rare thing these days) I carry a standard, hardware Apple Remote.

Miscellaneous

I do dabble with a few other apps, and I like to try out new applications quite often.

Wireframes

Where necessary, I use MockingBird for building up wireframes; it is simple, elegant and easy-to-use. The lack of development on it over the last couple of years has been disappointing, but it is still an excellent online application.

Animation

One app which has a great deal of potential is Tumult’s Hype. Using this application, you can build up complex animations using a timeline model, and Hype will then generate a file containing CSS3 animations (including complex matrices): even better, it will also generate the Javascript required to cater for older browsers.

Combine this with Modernizr and the built-in YepNopeJS, and you have a modern, compliant solution for creating complex animations.

Project Planning

Since I have taken over my current job role I don’t use OmniPlan as much, but I still find it useful for internal scheduling: it’s a fully-fledged project management application, with proper concepts of utilisation and efficiency.

Font Management

For font management, I still use the free version of Linotype FontExplorer X (which, whilst difficult to find now, has lasted me for years and years!), but I am starting to switch over to Bohemian Coding’s Font Case.

For web fonts, I use TypeKit (although, since Adobe has taken over, I am finding some issues with reliability. What a surprise) and, occasionally, Google Web Fonts.

And that’s about it. There are one or two applications that I play with, but the major ones are those listed above.

Do you have any favourite applications? Feel free to leave your preferences in the comments…

Subtle patterns

My team have a great habit of sending around things of interest, and so it was one of my colleagues who pointed me towards Meng To’s website.

Whilst the site is, indeed, a thing of beauty (as one would expect from a UI/UX designer), I was most interested to see that, on his blog, Meng was pushing Bohemian Coding‘s Sketch.

Sketch is a brilliant vector-drawing application—a replacement to Illustrator and much of what I use Photoshop for—that I have been moderately evangelical about at work. (This may or may not have something to do with my personal mission to eliminate Adobe’s over-priced, bloated software from my work-flows).

One of Meng’s posts is about how to get started with Sketch, and he links to a number of great resources—including icon sets and, usefully, a new-to-me website called Subtle Patterns.

Subtle Patterns does exactly what it says on the tin: it provides pages and pages of free subtle patterns for use in your designs. I have immediately book-marked it…

I will write more about Sketch at a later date, but I heartily recommend giving a trial.

A Link List Apart

A List Apart's new design, showing the massive text and the cut-off logo.

The new A List Apart home page, viewed at my browser’s full height. No, I haven’t scrolled down.

A List Apart have embarked on a redesign, and I have to say that I am not a fan. Let me very briefly lay out the reasons why:

  • the cut-off logo looks weird. Not cool—just weird. I keep checking whether my scrolling has gone haywire.
  • it has massive text. Why does it have massive text? Seriously, why would you want to force me to scroll more than I already have to? And yes, I do have a scroll-wheel at home; but no, I do not have one at work. And that applies to Zeldman’s site too.
  • the RSS Feed is now full of endless links to other endless resources. If I spent every hour of my day checking them, I would be unemployed.
  • part of the excellence of A List Apart was its carefully selected articles that did not clutter my RSS Reader with endless link lists of other people’s things to read. I thought that ALA’s principled stand against the constant barrage of information whoring was admirable—it showed a confidence in its format and writing. Now it is just another Daring Fireball or Shawn Blanc.
  • I wouldn’t mind lots of link lists to interesting articles if all of these massively profitable sites—like Daring Fireball and Shawn Blanc and, now, ALA—weren’t basically linking to the same stuff. (I know, because they are all in my Feed Reader.)
  • yes, I do know that I can modify my ALA Feed: but why should I have to…?

I don’t pretend to be the world’s most amazing designer—and, even if I did, you certainly wouldn’t know it from this largely unmodified template—but I rather think that ALA’s redesign is not an improvement.

And I really wish that people would stop trying to make money by piggy-backing off the time and effort that other people put in. I mean, I don’t always agree with them, but at least the denizens of Boagworld write their own material.

The increasing prevalence of blogs consisting of little more than daily link lists is a bit like having a bunch of friends who think that repeating Monty Python sketches word for word for an entire evening is either amusing or interesting.

Eventually, the tech internet is going to consist solely of link lists of link lists.

At which point, I shall pray for the Apocalypse.