Blog

Smashing-magazine-advertisement in A Design Is Only As Deep As It Is UsableSpacer in A Design Is Only As Deep As It Is Usable
 in A Design Is Only As Deep As It Is Usable  in A Design Is Only As Deep As It Is Usable  in A Design Is Only As Deep As It Is Usable

There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.

In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Gradients, Drop-Shadows, Reflections, Oh My!

A lot of things could fall in the category of “beautiful” or “attractive” in the context of Web design. But a number of factors would make such beauty shallow. Is a website more attractive if it has tastefully placed drop-shadows, gradients or reflections? What if it has an eye-pleasing color scheme? What about big over-designed buttons? Could these be standards by which a design would be deemed beautiful?

If you’ve been keeping tabs on the Web design industry in the last five years, you’ve probably at some point visited one of the many CSS galleries. Visiting those inspirational showcases is great, and I’m sure we’ve all done it, but we need to be careful not to fall into the copycat syndrome, whereby we prettify our websites for no other reason than to make them CSS gallery-worthy.

Mint-screen in A Design Is Only As Deep As It Is Usable
Mint.com has everything a client could ask for in a “Web 2.0 design”. Does that mean it’s beautiful?

The designers, developers and content strategists who planned and executed many of the websites in those galleries did what they did because they felt it would truly benefit the user experience and their clients’ bottom line. The truly beautiful websites and apps in those showcases are not just visually beautiful; they’re usable, accessible and optimized to benefit both the user and website owner.

The Dribbble Syndrome

With the recent popularity of Dribbble, the copycat syndrome might be gaining momentum. On Dribbble, a designer reveals a sample of something they’re working on, and then the style of that small snippet starts spreading. The context and strategy underlying it are unknown, yet the style is still viewed as beautiful in and of itself. The designer may have taken hours, days or weeks to arrive at the decisions that informed the design, but now that it’s out in the wild, the snippet becomes nothing more than eye candy.

Dribbble-screen in A Design Is Only As Deep As It Is Usable
Dribbble shows out-of-context design shots. Is this a bad thing?

Of course, the intent of this article is not to blame those who share their designs on Dribbble, nor to blame those who review these designs and offer feedback. But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it.

The Style-Less Comparison

How do we measure beauty? If a website is difficult to use, then isn’t its beauty without purpose? Look at the comparison in the image shown below.

Nettuts-compare in A Design Is Only As Deep As It Is Usable
The Nettuts+ logo and navigation bar.

I think Nettuts+ is a very nicely designed website. But is the fancy navigation and logo section shown on top more usable than the plain blue and white version below it? Taken at face value, some might argue that the plain version is more usable (if only slightly) than the “beautiful” one.

Facebook-compare in A Design Is Only As Deep As It Is Usable
The Facebook home page.

While the Facebook home page shown on top might not appear the most beautiful design to many of us, it still contains attractive aesthetic elements (colors, gradient background, styled buttons, etc.). But when most of these minor elements are made plain, does it really affect the usability (of course, after you increase the color contrast for the form labels in the right upper corner)?

If prettiness is really as important as we think, then the current Facebook home page should perform much better than the plain alternative. How do we know, though, that the plain version wouldn’t outperform the adorned version?

What Makes A Design Usable?

I’m not about to make a case for bringing back blue links on a white background on every website. In fact, as I’ll explain, both Nettuts+ and Facebook may very well qualify as truly beautiful websites. The examples above were more illustrative, and not meant to criticize the designers who worked on them.

Rather, I’m encouraging designers to consider two things when adding “beautiful” enhancements to their designs.

  • Responsive and intuitive page elements,
  • Branding and consistency of theme.

Focusing on these two things will give every pixel in a design a purpose and will contribute to the website’s overall usability. Let’s consider both of these, with a few simple examples to illustrate their effectiveness.

Responsive and Intuitive Page Elements Make a Design Usable

If a design element makes a website feel more friendly or gives subtle hints as to what’s happening, then this adds to its usability. Look at the simple example below from Design Informer:

Di-search in A Design Is Only As Deep As It Is Usable

On the Design Informer website, hover over the search box in the top right, and you’ll notice it brightens up. This is not intrusive in any way, and it looks especially elegant in WebKit browsers, because the brightening animates with CSS3. The default look of the search box could be a bit brighter to improve the general usability of the site, but in this specific case the idea counts more than the execution.

This very simple effect conveys to the user that this is a usable element, and it makes the search box more inviting. It’s a ridiculously simple technique but has a very powerful effect.

But just because you can use an animated effect does not mean you should. If, as in the case of Design Informer, the effect makes the UI more intuitive and responsive, then it is justified. This statement by Stuart Thursby sums it up well:

If designers think that using HTML5 and CSS3 makes them a better designer just because they use them, then they’re sorely misguided.

Include an element only if it accomplishes some usability-related purpose. If the design is not made more usable by a particular technique (whether via CSS3, JavaScript or something else), then the designer should reconsider whether the extra code is worth the effort. Decoration only goes so far and often has an effect opposite to the one intended, so consider yours carefully before including it in your design.

Another example of an animation that enhances usability is found on Soh Tanaka’s new website. Look at the screenshot below from this post on his blog:

Soh-hover in A Design Is Only As Deep As It Is Usable

When you hover over any presentation of code on his website, you’ll notice that the block expands to the right (probably via jQuery, so it would work in every browser).

Again, a simple effect, but not just eye candy; it has a purpose. In tutorials, HTML code is often too long to fit in the highlighter, so the code either wraps or creates ugly scroll bars. Tanaka’s solution makes the code more inviting and readable, and it decreases the likelihood of wrapping or scroll bars.

So whether we’re talking about text links that change color on hover, buttons that move when clicked, AJAX that creates subtle yet intuitive effects, we can take a design beyond mere decoration in many ways and truly enhance its usability.

Branding Makes a Design Usable

If an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability. Properly planned and executed branding is not superficial or decorative. Carefully chosen colors and graphic elements create an inviting atmosphere that leads the user to make easy decisions and helps them interact with elements smoothly and intuitively.

Look at the screenshot below from 10k Apart:

10k-screen in A Design Is Only As Deep As It Is Usable

The laurel wreath in the background and the distinctive illustration immediately distinguish this website as belonging to A List Apart. Consistency in branding contributes to the usability of this ALA microsite and makes it feel inviting and familiar.

And then we have the beautiful and intuitive design for Launchlist:

Launch-branding in A Design Is Only As Deep As It Is Usable

This screenshot doesn’t do justice to the website’s look and feel; you’ll have to poke around to really experience it for yourself. The design might appear decorative and superficial at first glance, but it’s not. The elements work together to create a consistent and inviting atmosphere, extending the “launch” theme throughout with subtle animations.

Usable Doesn’t Have To Mean Ugly

My purpose here was not to tell designers to forget about slickness, sexiness and beauty. This should be obvious from the beautiful examples shown, which certainly qualify as both usable and attractive. No one expects owners of beautiful websites to suddenly drop their enhancements in favor of the Craigslist look just to make them more usable.

Rather, this post is just a reminder that eye candy is important, but it isn’t everything, and that for a design to be truly beautiful, it has to be functional, have purpose and contribute in some way to the website’s intuitiveness, usefulness and branding. All of these things contribute to the overall effect of a design.

Related Posts

  • In Defense of Eye Candy
    Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.
  • Looks Matter Because We All Have Feelings
    An article about the importance of aesthetics in web design.
  • Stop Designing Aesthetics, Start Designing Emotions
    Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions. A beautiful article on Web Designer Depot.
  • Stop Inspiration Hunting When Designing
    There is definitely a difference between looking at sites for research purposes when beginning a design versus looking at sites just to find some cool stuff you might be able to use. Nice article on Drawar.
  • Web Design? Screw Aesthetics
    “When I talk about design I try to do more than mention the aesthetic/visual aspect of it, but it seems people tend to focus on that aspect the most. Web design however adds many more elements to the elegant answer that we are so frantically searching for.” Another interesting article on Drawar.

(al)


© Louis Lazaris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

Smashing-magazine-advertisement in Balancing Inspiration and IndividualitySpacer in Balancing Inspiration and Individuality
 in Balancing Inspiration and Individuality  in Balancing Inspiration and Individuality  in Balancing Inspiration and Individuality

I love it when a good story is broken down so that even the simplest of minds can understand. I’m not the smartest, fastest or most creative person in the world, so I don’t like using a lot of big words or fancy jargon to try and impress you — but I’m learning every day, and that is what pushes me on. Let me cut the small talk and dive right in.

The Current State

When I look out on the hillside of design, all I see are copies of what great designers have done before us. The landscape has become so congested with cookie-cutter homes that seeing the real people living inside has become hard. It’s like watching that movie Pleasantville, in which everything is black and white and no one knows any better, and yet there are those pursuing something different, something original.

My hope is to inspire you to step away from the computer and open your eyes to the world around you. Expand your mind; think beyond the limits of the liquid crystals staring back at you.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Getting Started

The first step in any recovery process is to admit that there’s a problem. Once we’re comfortable admitting that we’ve been copying each other’s style, we can move on. The next step in this design detox, if you will, is to close the laptop, turn off the monitor, put down the iPhone and go find a pen or pencil and some paper. Not so fast with that Moleskine journal! It won’t help you. You understand that Apple and Adobe products don’t do the work for you, and neither will the Moleskine make you a better [fill in your profession]. Only with time, patience and practice will you begin to refine your skills.

Don’t worry if you think you can’t draw. I hear that a lot, and I wish people would remove the word “can’t” from their vocabulary. Maybe you’re not good at drawing people but are amazing at drawing monsters, or maybe you’re not good at drawing buildings but are excellent at sketching wireframes. Just because your drawings don’t look like those of people you admire does not mean your drawings are no good.

Live in the Moment

Time does not stop — shocker, I know. You can’t fight it. Rather, think of it as the Rolling Stones do: time is on my side. Realize that time will make you better. The get-rich-quick approach is a cheap substitute for an investment of time: it might work for a few people, but it never lasts. Save yourself the trouble and commit to the long-term effort. Better yet, take an art history class and learn how long it took the great artists to achieve success. You’ll find that some were not recognized until after they were dead.

Pioneers Of the New Frontier

So where do we turn for inspiration? I always look to artists in other media. I’ll mention a few who have set a high standard — one so high that it hasn’t been beat. Still, I believe you have what it takes to run faster, jump higher and think bigger.

Leonardo da Vinci

Leonardo Da Vinci in Balancing Inspiration and Individuality

Leonardo da Vinci was the original Renaissance Man. Not only was he an amazing painter, he was also an extraordinary mathematician, sculptor, anatomist and writer — and those were just a few of his occupations. His career, which left a legacy that is still unsurpassed, is characterized by a passion for discovery and creation. If for no other reason, da Vinci is an inspiration to us because of his fervent passion for learning.

M. C. Escher

Mc Escher in Balancing Inspiration and Individuality

Maurits Cornelis Escher is a great example to us because he pursued his passion and succeeded, even without a degree. M.C. Escher’s artwork — an excellent source of inspiration for modern design — has a great deal to do with mathematics, but he never had formal mathematical training. Those of us building the Web could learn a thing or two from Escher’s work on symmetry and patterns.

Norman Rockwell

Norman Rockwell in Balancing Inspiration and Individuality

Normal Rockwell defined a generation. His depictions of the American lifestyle in the early-20th century are iconic. If Rockwell were alive today, he would definitely be one of the all-stars posting stuff to Dribbble.

Closing Words

There’s nothing like the feeling of accomplishment that comes from doing something you didn’t think you could. Whether you want to build websites, paint a mural, design icons or draw characters, I encourage you to make time for practice and to get away from the computer at least an hour a day. Pick up a book, take a walk, call a friend — do whatever you can to take your mind off technology. In those moments when we quiet our minds, inspiration comes and we can just be ourselves.

P.S.

Just one last nugget before you leave: don’t let a lack of inspiration overwhelm you or make you feel like less of a person. I know from personal experience that drowning in inspiration makes me feel unsuccessful. And yet when we judge ourselves against our own work, we hinder our growth. We have to find a balance between being inspired and being true to ourselves. That’s what makes the journey so exciting.

(al)


© Kyle Steed for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Smashing-magazine-advertisement in The Future of the InternetSpacer in The Future of the Internet
 in The Future of the Internet  in The Future of the Internet  in The Future of the Internet

“In only a few short years, electronic computing systems have been invented and improved at a tremendous rate. But computers did not ‘just grow.’ They have evolved… They were born and they are being improved as a consequence of man’s ingenuity, his imagination… and his mathematics.” — 1958 IBM brochure

The Internet is a medium that is evolving at breakneck speed. It’s a wild organism of sweeping cultural change — one that leaves the carcasses of dead media forms in its sizeable wake. It’s transformative: it has transformed the vast globe into a ‘global village’ and it has drawn human communication away from print-based media and into a post-Gutenberg digital era. Right now, its perils are equal to its potential. The debate over ‘net neutrality’ is at a fever pitch. There is a tug-of-war going on between an ‘open web’ and a more governed form of the web (like the Apple-approved apps on the iPad/iPhone) that has more security but less freedom.

Brochure in The Future of the Internet

An illustration of a computer from a 1958 IBM promotional brochure titled ‘World of Numbers’

So what’s the next step in its evolution, and what’s the big picture? What does the Internet mean as an extension of human communication, of the human mind? And forget tomorrow — where will the web be in fifty years, or a hundred? Will the Internet help make the world look like something out of Blade Runner or Minority Report? Let’s just pray it doesn’t have anything to do with The Matrix sequels, because those movies really sucked.

This article will offer in-depth analysis of a range of subjects — from realistic expectations stemming from current trends to some more imaginative speculations on the distant future.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Security

“Death of the Open Web”?

Those words have an ominous ring for those of us who have a deep appreciation of the Internet as well as high hopes for its future. The phrase comes from the title of a recent New York Times article that struck a nerve with some readers. The article paints a disquieting picture of the web as a “haphazardly planned” digital city where “malware and spam have turned living conditions in many quarters unsafe and unsanitary.”

There is a growing sentiment that the open web is a fundamentally dangerous place. Recent waves of hacked WordPress sites revealed exploited PHP vulnerabilities and affected dozens of well-known designers and bloggers like Chris Pearson. The tools used by those with malicious intent evolve just as quickly as the rest of the web. It’s deeply saddening to hear that, according to Jonathan Zittrain, some web users have stooped so low as to set up ‘Captcha sweatshops’ where (very) low-paid people are employed to solve Captcha security technology for malicious purposes all day. This is the part where I weep for the inherent sadness of mankind.

“If we don’t do something about this,” says Jonathan Zittrain of the insecure web, “I see the end of much of the generative aspect of the technologies that we now take for granted.” Zittrain is a professor of Internet governance and regulation at Oxford University and the author of The Future of the Internet: and How to Stop It; watch his riveting Google Talk on these subjects.

Bill in The Future of the Internet

The Wild West: mainstream media’s favorite metaphor for today’s Internet

The result of the Internet’s vulnerability is a generation of Internet-centric products — like the iPad, the Tivo and the XBOX — that are not easily modified by anyone except their vendors and their approved partners. These products do not allow unapproved third-party code (such as the kind that could be used to install a virus) to run on them, and are therefore more reliable than some areas of the web. Increased security often means restricted or censored content — and even worse — limited freedoms that could impede the style of innovation that propels the evolution of the Internet, and therefore, our digital future.

The web of 2010 is a place where a 17 year-old high school student can have an idea for a website, program it in three days, and quickly turn it into a social networking craze used by millions (that student’s name is Andrey Ternovskiy and he invented Chatroulette). That’s innovation in a nutshell. It’s a charming story and a compelling use of the web’s creative freedoms. If the security risks of the Internet kill the ‘open web’ and turn your average web experience into one that is governed by Apple or another proprietary company, the Andrey Ternovskiys of the world may never get their chance to innovate.

Security Solutions

We champion innovation on the Internet and it’s going to require innovation to steer it in the right direction. Jonathan Zittrain says that he hopes we can come together on agreements for regulating the open web so that we don’t “feel that we have to lock down our technologies in order to save our future.”

According to Vint Cerf, vice president and Chief Internet Evangelist at Google, “I think we’re going to end up looking for international agreements – maybe even treaties of some kind – in which certain classes of behavior are uniformly considered inappropriate.”

Perhaps the future of the Internet involves social structures of web users who collaborate on solutions to online security issues. Perhaps companies like Google and Apple will team up with international governmental bodies to form an international online security council. Or maybe the innovative spirit of the web could mean that an independent, democratic group of digital security experts, designers, and programmers will form a grassroots-level organization that rises to prominence while fighting hackers, innovating on security technology, writing manifestos for online behavior, and setting an example through positive and supportive life online.

Many people are fighting to ensure your ability to have your voice heard online — so use that voice to participate in the debate, stay informed, and demand a positive future. Concerned netizens and Smashing readers: unite!

Freedom

Net Neutrality

Some believe that the fate of the Internet has been up for grabs ever since the federal government stopped enforcing ‘network neutrality’ rules in the mid-2000’s. In a nutshell, net neutrality means equality among the information that travels to your computer: everyone has the right to build a website that is just as public, affordable, and easily accessible as any other. However, some companies like phone and internet service providers are proposing ‘pay tiers’ (web service where you need to pay premium fees in order to allow visitors to access your site quickly). These tiers of web service could kill net neutrality by allowing those who can afford premium service (particularly large media companies who don’t like sharing their audience with your blog) greater access to consumers than the average web user.

The debate over net neutrality reached a boiling point when Google and Verizon announced a ‘joint policy proposal for an open Internet’ on August 9th, 2010. Despite the proposal’s call for a “new, enforceable prohibition against discriminatory practices” amongst online content, many criticized it, citing leniency and loopholes.

Net neutrality needs to be made law. If the Internet were to have a slow lane and a fast lane, your average web user could lose many of his or her freedoms and opportunities online, thereby shattering the core values that make the Internet so profoundly valuable to society. However, that’s just the tip of the iceberg for this thorny issue. To learn more, read the full proposal or watch the Bill Moyers episode ‘The Net @ Risk.’

The World into the Web

Browser-based Everything

Google is developing a variety of applications and programs that exist entirely within the browser. Their PAC-MAN game was a preview of what’s to come because it allowed in-browser play of a simple, lightweight video game that required no downloads and relied on pure HTML, CSS, and Javascript. At the company’s 2010 I/O conference, Google laid out its plans to develop “rich multimedia applications that operate within the browser” (according to this New York Times report on the conference). The company plans to sell in-browser web applications like photo editing software (imagine using a Photoshop equivalent entirely within the browser) that it will sell in a web applications store called the Chrome Web Store.

If our programs and applications are about to be folded into the browser, what will exist within the browser in ten years? Currency? Education? Consciousness? Personally, I’m hopeful that my browser will be able to produce piping hot cheeseburgers sometime soon.

The Internet as a Collective Consciousness

The Internet is a medium, and philosopher Marshall McLuhan believed that all media are extensions of the human senses. The engine of our collective creative efforts is the force that’s causing the web to evolve more rapidly than any biological organism ever has.

Buddha in The Future of the Internet

Transcendence is one of the great themes of human culture. Image of seated Buddha statue: The Metropolitan Museum of Art

The Internet is an extension of the collective human mind and it’s evolving into a medium of transcendence. By constructing a place where the collective human consciousness is both centralized in one location (on your computer) and globally accessible (for those with the means to reach or use a computer, that is), our human spirit is transcending the human body. Way back in 1964, McLuhan himself wondered, “might not our current translation of our entire lives into the spiritual form of information seem to make of the entire globe, and of the human family, a single consciousness?”

With the advent of trends including social media, ‘lifecasting,’ and ‘mindcasting,’ the Internet is being used as a real-time portal for the human consciousness. Perhaps those trends will be inverted by some web users of the future: instead of bringing offline life to the web (as so-called ‘lifecasters’ do when they stream live video of their attendance at an offline event), some web users will live their entire public lives online. Imagine a pop star who conducts her entire career online: every interview, live performance, music video or album release conducted solely through a browser window or mobile screen. Or a media theorist who exploited the platform of the web while discussing the theoretical ramifications of those actions. It’d be a great gimmick.

The Web into the World

The ‘Web of Things’

The ‘web of things’ or ‘Internet of things’ is a concept that will be a reality (at least in a rudimentary form) in the near future. The idea is that devices, appliances, and even your pets can all be tracked online. With Google Maps for iPhone, you can currently track your location on a digital map in relation to the streets and landmarks in your area. So it’s not hard to imagine a world where you can zoom in on your location and see detailed, 3D renderings of your surroundings: the cars on your block, the coffee machine in your kitchen, even Rover running around in your backyard! And it’s a good thing that you’re digitally tracking the location of poor Rover; he’s liable to hop the fence and make a run for it now that you’ve created a satellite computer out of everything you own (including his dog collar) by attaching a tracking device to it.

AT&T is betting big on the web of things. According to this Reuters article, the phone service provider is investing in tracking devices that could be installed in cars, on dog collars, and on the pallets used to move large shipments of products. The dog collar, for example, “could send text messages or emails to the owner of a pet when it strays outside a certain area, or the device could allow continuous tracking of the pet.”

Combine the concept of the ‘web of things’ with Second Life-style 3D imaging and you can imagine a web-based duplicate world — a virtual world that corresponds to the real one. But what are the implications of a world where every physical item has a corresponding digital existence online? Can we track the physical effects of climate change in the web of things? Will there be a digital avatar for every pelican carcass in the vicinity of the oil spill that’s devastating the Gulf of Mexico? It’s a tragic shame to develop a virtual world if we let the natural one go to waste in the meantime.

Interactive Landscapes

It has been said that today’s science fiction is tomorrow’s reality. Unfortunately, most good science fiction stories are cautionary tales set in dystopian nightmares.

Nbuilding2 in The Future of the Internet

QR codes on the façade of Japan’s N Building. Photo: Gizmodo

Simon Mainwaring reports on the N building in Japan, where “the whole building facade has been transformed into a real time dialogue between smart phones and what’s going on inside the store.” The exterior of the building is layered with QR codes (an alternate form of bar code) that can deliver real-time information to your phone. In Stephen Spielberg’s film Minority Report (adapted from a short story by mad genius Philip K. Dick), Gap ads came alive to hawk khakis to Tom Cruise. Looks like we’re about one step away from this scenario.

Mr. Mainwaring imagines a future with “billboards that watch you shop and make targeted suggestions based on your age, location and past buying habits,” and “stores will effectively be turned inside out as dialogue and personalized interaction with customers begins outside the store.”

The technology is cool, but it sounds like a pretty annoying future if you ask me. Who wants to be accosted by a holographic salesperson? The web grants us a great opportunity to use our collective voices to speak out on topics that matter to us. Because there are no regulations yet for much of this technology, it may be up to concerned citizens to make themselves heard if Internet-based technology is used in intrusive or abrasive ways.

The ‘Innerweb’

Cyborgs are among us already — humans whose physical abilities have been extended or altered by mechanical elements built into the body (people who live with pacemakers are one example). What will happen when the Internet becomes available on a device that is biologically installed in a human? What will the first internal user interfaces look like?

Here’s one speculation.

In the near future, we may be capable of installing the Internet directly into the user’s field of vision via a tiny computer chip implanted into the eye. Sound far-fetched? I doubt that it would sound far-fetched for Barbara Campbell, whose sight has been partially restored by a digital retinal implant (CNN reports on Barbara’s artificial retina).

Ms. Campbell was blind for many years until she had a small microchip surgically implanted in her eye. A rudimentary image of Ms.Campbell’s surroundings is transmitted to the device, which stimulates cells in her retina, in turn transmitting a signal to her brain. It’s a miracle that the development of a bionic eye has begun to help the blind see.

How else might doctors and scientists take advantage of the internal microchip? Perhaps the user’s vision will be augmented with an Internet-based interface with capabilities including geolocation or object identification. Imagine if technology like Google Goggles (a web-based application that identifies images from landmarks to book covers) was applied inside that interface. The act of seeing could not only be restored but augmented; a user might be capable of viewing a landscape while simultaneously identifying web-based information about it or even searching it for physical objects not visible to the naked eye. Apply the concept of augmented sight with the idea of the ‘web of things’ — an environment where physical objects have a corresponding presence on the web — and you can imagine a world where missing people are located, theft is dramatically reduced, the blind can see, and ‘seeing’ itself means something more than it used to.

If the web is an extension of our senses, it follows suit that the web may be capable of modifying those senses or even accelerating their evolution.

The Crown Jewels

“The next Bill Gates will be the deliverer of a highly technological solution to some of our climate change challenges.” — Lord Digby Jones of Birmingham

In preparation for this article, I considered a variety of wild ideas and fun speculations about the future. Could the Internet be used to solve the problem of climate change, generate tangible matter, or contact extraterrestrial life? Maybe those ideas sound like the stuff of imaginative fiction, but in a world where quantum teleportation has been achieved and researchers have created a living, synthetic cell, it almost seems as if the concept of science fiction is being eradicated while real technology brings our wildest fantasies to life. Here is the result of my most daring (absurd?) speculation.

Time Travel

Muybridge in The Future of the Internet

The functionality of the Internet relies on a linear series of events. Image: Eadweard Muybridge

I called on physics teacher Mark Stratil to answer my last burning question: could the Internet ever be capable of facilitating the development of time travel? Here’s Mark’s answer:

“The Internet is still based on computers, which make linear calculations. Right now, all computers are based on binary code, which is a series of yes and no questions. You can make something that’s incredibly complex with a series of yes and no questions, but it takes a certain amount of time. The Internet still has to go through those calculations and it still physically has to make one calculation that will lead to the next calculation that will lead to the next. So no matter how fast we can get our computers – they’re making billions of calculations, trillions of calculations per second – there’s still going to be some lag time. They’re still limited by time in that way. They still need some time to make that conversation or that calculation.

In that way, they’re kind of chained to time. Their whole existence is based on a linear sequence of things that happen. In order to create something else, something that goes outside of time, you would have to make it a non-linear system — something that that’s not based on a series of yes and no questions, because those have to be answered in a precise order. It would have to be some kind of system that was answering all the questions at once.

So Mark’s short answer to my fundamental question was basically that the Internet, in its current state, would not be capable of facilitating time travel. However, if the Internet was liberated from the linear structure of binary code and migrated onto an operating system that ‘answered all questions at once,’ then maybe it could have the potential to manipulate time or transcend the boundaries of time.

Sounds unlikely at this point, but one of the Internet’s greatest capabilities is the opportunity to share and develop ideas like these!

Conclusion

Responsible Evolution

Through technology, we hold the reins to our own evolution.

For the first time in history, it might be said that there are moral implications in the act of evolution. The Internet is an extension of our senses and our minds, and its progress is propelled by our own creative and intellectual efforts. The future of the Internet will be shaped by millions of choices and decisions by people from all walks of life. Designers and programmers like us have the advantage of technical skill and specialized knowledge. Given the increasing presence of the Internet in our lives, our choices can have deep reverberations in human society.

We’ll face small choices like what color to use for a button and larger choices like which platforms to endorse and which clients to support with our work. But the real questions form broad patterns behind every media trend and every mini technological revolution. Can we use technology to develop solutions to environmental problems — or will we abandon the natural world in favor of a digital one and the ‘web of things’? Have we fully considered what it means to merge biology and technology? And finally, do we really need a digital tracking device on our coffee machines?

What a thrilling time to be alive! Let’s proceed with great enthusiasm and a commitment to designing a future that is meaningful, peaceful, and staggeringly exciting.

Partial Bibliography

Related Posts

You may be interested in the following related posts:


© Dan Redding for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

Smashing-magazine-advertisement in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy?Spacer in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy?  in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy?  in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy?  in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy?
“The need is constant. The gratification is instant.” That’s from the American Red Cross, and it was copy that I plugged into a poster for a blood drive at a comics convention. Sitting beside an image of the sexy and well-endowed Vampirella, the words took on a different meaning. Oops! But I was struck by how these words are a perfect assessment of our society. We want it all, instantly and as cheap as possible. We are a Walmart culture. Fast and cheap have entered our every pore and changed our society, our lives and our livelihoods. Compounding our daily worries and pressures, we now fight to keep our industry professional and profitable. Clients want our blood for free, and the “hacks” are designing us out of existence. Most people blame the laptop and easy-to-use software. Many blame art schools for favoring quantity over quality. Can any of these be blamed merely for doing business? If someone who has no idea what they’re doing wants to purchase a computer and a slew of graphics software and call themselves a designer, then they’re in business. Beard in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy? All you need is a computer, software and beard and you are an ARTIST!.. Right? Should we call this “competing in the marketplace” or just “giving it away… and eroding respect for what we do in the process”? Every freelancer who has dared to provide an actual estimate for their work has heard in reply, “I can get it done cheaper.” And the client can. The job, which requires thousands to be done properly, can be delivered for hundreds, and its horridness would never be noticed by the client. They will not notice the lack of a return on their investment or the consumers avoiding their service or the people making sport of their new logo online. And if they do — which would likely happen after they’ve gone out of business for making all the wrong, cheap decisions — they will blame graphic designers. All of us. When a staff designer makes a blunder — even if only a perceived one — all designers need to have a watchful eye. We are the weird kids, the ones who drew pictures in math class while the kids who became marketing directors and account managers told on us. Yes, we need watching. If you ever wondered how the practice of presenting several ideas in a meeting gained such a foothold in our business, just imagine some of the incompetents in the Floogelbinders Guild in the 7th century who really screwed up and codified the practice… before their heads were chopped off and their limbs burned. Ah, the good ol’ days, when they really knew how to maintain professionalism.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

What Exactly Is A “Hack”?

Let’s take a look at dictionaries. Hack: noun.
  1. A horse used for riding or driving; a hackney.
  2. A worn-out horse for hire; a jade.
  3. One who undertakes unpleasant or distasteful tasks for money or reward; a hireling.
  4. A writer hired to produce routine or commercial writing.
  5. A carriage or hackney for hire.
  6. A taxicab.
Those who responded to my query in social media had great insights and varied opinions on what is a ‘hack’. Wrote one designer:
It is not as regulated as other professions, such as interior design and architecture or accounting for that matter. To call oneself a designer, there is no apprenticeship required, no test to pass, no certification to obtain. If you have access to the software, it’s open season.
One creative director wrote some very kind words:
I view hacks as part of the overall ecology of what drives business when it comes to design and branding. On the one hand, hack has a connotation as it relates to businesses that are starting up or struggling to survive or that simply don’t take design seriously — the kind of business-folk who just look for the lowest bidder. Then there are the sincerely talented designers who simply lack ambition, business savvy or both, and who do not get past five years in their careers. Either situation actually helps cultivate a wonderful ecology of design business, in my opinion.
Surprisingly, an editor-in-chief of a well-known news service responded with an outrageous number of typos and grammatical errors (corrected here):
Every industry has hacks, but most artists I have met (most, not all) really do strive to be original and to use their imaginations to come up with new ideas. Very few jaded ones will rehash old stuff or try to peddle work that is derivative. It is always “buyer beware” in this case. If the guy seems like a slick used-car salesman, find someone else with whom you can work. On the other hand, artists look out for people who don’t want to sign contracts, people who can’t tell good art from bad, people who can’t make up their minds after being presented with 20 different sketches, and people who will not pay an advance or a set-up fee.
A well-known writer, checking in as “misery-loves-company,” added:
There are hacks in every discipline. Try working as a professional writer. Anybody with a keyboard and the ability to type can claim this for a calling.
A gentleman with the title of “Business Development” added another view that creatives might not hear often:
I’ve thought about the definition of hack. It is conceivable that a person with no formal training or someone who did not do well in design school could rise to the top of their profession. They would have to be driven to succeed and committed to quality, I am sure. But there is no guaranteed correlation between the eliteness of one’s education and the quality of their current work.

Is “CrowdSourcing” and “Fixed-Price” Online Shops the Future?

I was once invited to witness what crowdsourcing could do. I guess I was being lined up for the next firing squad and lured by free pizza. I honestly thought I was attending a gathering of designers at a promotional advertising company. Mmmmm, nope! The owner described the projects, mostly logos, and showed what a source of 8 “designers” could design. Seems that was the unpaid part. The “best designer” would get paid for finishing the project, which might not be his/her logo but a mashup of every design the owner, who now also owned all of the unpaid designs, decided to create…because he was so creative. “That’s a win-win situation” he closed with. I could hear him from the supply room, where I was helping myself to my “out-of-court settlement” for having been dragged to this thing. HOW Magazine’s July issue has an article on crowdsourcing. Quotes from two authors on the subject in that article say:
Perhaps, as Debbie Millman writes, this trend does devalue our services. Perhaps, as David Baker observes, it weeds out the low-level clients we shouldn’t be working with, anyway. Is crowdsourcing really “stealing” work from professional designers — or has it simply replaced the quick-print guy and the executive assistants?
The editor adds:
One answer to that question may be: Let’s reinvent crowdsourcing so it works to the benefit, not the detriment, of both parties in the exchange. Maybe we could invent a way for a small group of designers, vetted for their expertise, to engage with a client, present their ideas, earn compensation for those ideas — and then the designer whose concept is chosen is further paid to fully develop and execute that idea. Talented creatives from all over the globe could participate in a project they would otherwise have no access to. Designers and clients have an opportunity to interact, so the solution isn’t derived in a vacuum (as is often the case with crowdsourcing). Clients can connect with a range of qualified creative thinkers to build their business. It doesn’t have to be cheap. Everyone gets paid. The client chooses the best solution.
Aside from other glaring mistakes in the article on business practices, the editor is quite obviously fond of glowing rainbows and unicorns. Every creatives’ guild or organization is against this practice because companies use it to their best advantage financially and people continue to provide work. Those attending this cult-fest of design suggested the same thing the HOW editor outlined, to the crowdsourcing person who called us to the ill-fated meeting. Pay MORE money for the same work? It wasn’t going to happen in non-unicorn world. HOW? How MUCH, is more like it. Gut in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy? “Mommy, I hate designer’s guts!” “Shut up and eat!” To their credit, they did mention the position of organizations, which they totally ignored when sprinkling pixie dust on the subject and presenting it to readers who want to know “HOW?”
Professional organizations must tread lightly in advocating against unpaid work, as AIGA discovered in the 1990s, when the Federal Trade Commission ruled that any statement or code of ethics that advised members not to work for free amounted to price-fixing. Its current position supports fair compensation for design work, and delineates between spec work (where a creative works for free in hopes of compensation) and unpaid work like pro-bono projects or internships (where services are willingly given away). The Graphic Artists Guild warns its members against competitions where the sponsoring organization retains all rights to all submissions, and helps creatives avoid unfavorable contracts.
Surprisingly, Forbes aired an article on crowdsourcing and of course, the self-appointed “capitalist tool,” seemed more impressed with it as a business model, rather than a threat to an industry. To be fair, they were balanced in exploring a few quotes echoed by other professionals in the field.
Mix crowdsourcing, the Internet and a huge pool of underemployed graphic designers, and the outcome is a company that’s grabbed a great deal of attention. In the two and a half years since it launched, Web startup 99designs out of Melbourne, Australia, boasts that it’s helped to broker 48,000 graphic design projects for big name clients like Adidas and DISH Network as well as for thousands of small businesses.
Personally, I’ll be sure to remember that when I need new sneakers or satellite TV service. Will other creatives?
Acting as a middleman between business owners and graphic designers, the 99designs site hosts contests in which clients post their needs — website design, logos, print packages — and designers compete to fill them. Instead of bidding for the job, designers submit finished work tailored to the client specifications in the contest listing. 99designs calls it a win-win scenario: Its clients gain access to the site’s pool of 73,000 active designers, while the designers are given a chance to compete for “upwards of $600,000 in awards paid out monthly.”

So, if my math is correct and every one of the 73,000 designers won just one competition a month, each would get $8.22. Sure not every one will win with the four to six entries they must submit to each contest…assignment…act of piracy on the high digital seas…whatever, so some designers will get $16.44 or maybe $32.88 per month? If I lived in Bali…and was stealing someone else’s electricity, I could live well. Well…live.

“99designs is something akin to a Walmart,” says Dan Ibarra, industry veteran and co-founder of Aesthetic Apparatus, a Minneapolis design studio. “It’s not necessarily dedicated to bringing you good work, but to bring you a lot of it. That’s not necessarily better.” Ibarra’s thoughts echo the general response from designers to a 2009 article Forbes ran on a 99designs look-alike called Crowdspring.com. Many critics of Crowdspring’s business model directed readers to NO!SPEC.com, an online campaign dedicated to educating the public about the risks of speculative work — which is, as defined by NO!SPEC, work in which the designer “invests time and resources with no guarantee of payment,” a “huge gamble” for designers competing against thousands of others.
Other professionals I have spoken with on the subject feel it’s just not a threat to the “design experience” or the “personal touch.” Several feel it just separates the serious design clients from the casual small business.
You have to remember that everything is consumer driven. What I mean is that the consumer is the one that dictates how we set our prices. If a consumer is unwilling to spend $100.00 for an original work verses spending $50.00 for one located on-line…what can you really do?
I really hope that it’s not. I think (and hope) that there will always be a market for those of us who don’t have quite a structured pricing plan, and who are willing to pay more for quality instead of quantity.
I’m still waiting for the day graphic design is held in the same regard as auto mechanics and plumbers… you don’t get fixed rates with them, and they’ll laugh at you if you ask for it. There’s a price for parts and and an hourly rate for service, end of discussion. You can give a flat rate by estimating (to yourself) how many hours it will take and then padding that for how many revisions the client will ask for. If you fall short, remember that the next time, but don’t penalize the client. Keep good records of your time. And… you obviously can’t charge the same fee for logo design for a company on the scale of Coca Cola as you would for Joe’s Landscaping down the street. It’s a different value to each. Large corporations get much more use and ROI from a logo than a one man show. That’s my story and I’m sticking to it.
With regards to fixed vs hourly, we almost always do fixed. Even on big application development projects. Sure, there are concerns with client requestitis and scope creep but thats part of the consideration. With hourly you are always guaranteed to be punished for your efficiency and experience by getting paid less. As for cheapo logos and web templates? Go for it I say. It’s nothing new. The clients that find that type of thing valuable are the ones I don’t have the time to educate on the real value of thoughtful design.
It’s the future for clients that have a “checkbox mentality”, where a logo, a brochure, a website, are just things on a list to check off, rather than key elements of their business strategy. Those clients have never been good clients. They’ve never paid well, or been good to work for. For a brief time, as design exploded and became available to businesses that couldn’t afford it previously, they had to buy more than they wanted, and employ real designers. Now that the supply of “designers” has also exploded, these design-blind clients can buy what they actually want, which is a cheap template with their words and photos stuck in it. They’ve never wanted real design, the market has evolved to give them what they want. The market for clients that do want real design is still there, and still very profitable for designers with the right skills and talents. But the bar for that market is very high, and people that can’t reach it are stuck in a no man’s land between the heights of success and the pits of mass-produced junk design.
Since clients have variable needs and budgets, there is definitely room in the marketplace to offer low-cost design services online. The clients who use these online design resources may not be a good fit for those of us who are answering this question, but they have a need with a tight budget and online creative services seem to fulfill that need. Traditionally, junior designers and recent graduates have had access to the low budget projects more experienced individuals have passed on. I think the online sites provide a similar outlet. Students may benefit from putting their hat in an online ring to get experience – especially when they will (most likely) be charging similar low rates. Established creatives and businesses probably have other methods of finding work (the Internet is a great tool for getting business, but does not replace all other traditional marketing/networking/prospecting) so I do not think fixed-price online creative sites will completely ruin our ability to maintain a viable business.

Does Art School Make You A Professional?

Being an art school drop-out myself (12 credits shy, and going back over a decade later to get them) and having much success without a degree, I naturally understand this point about art school. Many echoed this sentiment: that creativity has nothing to do with a degree. I was teaching at Parson’s School of Design long before I went back to take the four art history classes I needed to graduate. My work for major corporations did, however, require a four-year degree. Guess the “accomplishment level” can mean something. Ah! but is it art? Rocket Sm3 in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy? “HA! As the sole surviving creative, I can charge $50 for a logo!” (it’ll still be argued down to $20). It is a popular major, though, as one designer noted:
I asked nearly the same question to the owner of the art college I eventually graduated from: “Do you think similar two-year programs are flooding the market with graphic designers?” His answer was a resounding “No,” and he followed that with, “Talented artists will always find work when untalented artists don’t.” With the designers I’ve met or worked with and the ones I’ve read about, I’d have to I agree.
Naturally, sticks and stones were thrown:
From what I understand from meeting other students, the quality of education is lacking. Apparently, many educators simply like to take home a pay check for doing the least amount of work. A lot of the students suffer from not having any mentorship from a qualified teacher. However, the top students always find their way through the educational maze to get the cheese.
Should art schools teach online fixed-price business to students? Most people say, “no!” Shouldn’t an art school prepare a student to enter the field from day one with all the material and professional skills needed to enter the field as a peer and not a “hack” who lowers the bar for fees and professional demeanor?
Mediocrity runs rampant in today’s society. I don’t think design schools should teach the principles of online stores but make their students aware of what is out there and what they will come up against in the real world. Unfortunately many will go that way. But a true designer is worth their weight in gold, and will always cost more than Walmart pricing.
I’m sorry but I’m still laughing too hard at keeping a straight face while typing about art schools training students to enter the field. Pile on the insults as you will but I rarely see graduating portfolio shows that aren’t frightful, not due to the talent, but to their ideas on what they expect once they graduate. Several months ago I received a request for an essay of 2,500-5,000 words a dean at a Chicago art school wanted to “relay” to students. Naturally he was shocked I wanted to be paid. Guess those students stepped into a world of do-do. As a student commented on the question of fixed-price:
There are some pros and cons for hourly and fixed. However really as a designer you might benefit more from fixed pricing. Example: You design a logo at $20 an hour. Let’s say for the first time you do this logo it takes you 5 hours. The next time you do the logo, you get it done in half the time. 2.5 hours. You just cut your profit in half.  Now the designers that are charging $50, should wake up and realize there offering a service that is worth WAY more than what they are charging. In the beginning of starting my own design business I charge fairly cheap as well. I wanted to build a portfolio and clientele list. Once I had references and a portfolio to show, my rate can go up, because I can prove I’m worth it.
Yes, $20 an hour and $50 logos will shore up the prices she was going to command one day. No, it will set the bar with anyone you quote those prices to while I’m trying to charge a fair market rate. You have lowered that fair rate. Thanks for learning how to run a business within an unlicensed industry that relies on a standard of practice not being taught anywhere. AAAAAAAH! I’m still wondering what kind of logo is created in 2.5 hours. Oh, a “hack” one!

A Solution To Reconcile These Views?

Would a guild or union distinguish between an apprentice, a tradesperson and a master craftsperson? Some have tried. Years ago, I was a member of the board of the Graphic Artists Guild, along with several legal rights groups for artists. The prospect of unionizing was a constant buzz. Every meeting, time was set aside for the subject. There was discussion of joining established unions if no plan could be found to successfully create a union hierarchy and stop those who do not belong dead in their tracks. Neither plan would ever work. Unions on the whole no longer have the clout or power they once commanded. The removal of organized crime really hurt them. The mob knew how to get things done. Now politicians try to do the same but without any efficiency. No union would take on the cause of an entire industry with so many holes as ours. No organization could ever stop the incursion of single-person home studios and $99 logos… or the equivalent on the Internet. Contract Sm9 in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy? “Billy tried unionizing his art class in school. The other kids were heavily punished. I hope they learned a lesson, too!” In an effort to establish standards and set pay levels for professional positions and freelance projects, the Graphic Artists Guild publishes a annual book entitled The Pricing and Ethical Guidelines. I highly recommend it to those starting out. It’s loaded with contracts, pricing, rights and considerations we must all apply to every job, so that both parties come out of a project eager to work together on the next one. We are an unregulated business — anyone can join. I believe had we adopted the tactics of organized crime, we would be living the life of Las Vegas celebrities, and I get to be Elvis! Family heads, lieutenants, enforcers — face it, the mob gets things done. Can you imagine an enforcer negotiating with a client? Many years ago I tried pitching a comic feature to design magazines about a mob boss in the witness protection program, set up in a secret identity as an illustrator’s representative. “Zip Atoné & the Bull Pen Boys” was Goodfellas meets the publishing/advertising world.

Client: “I don’t sign contracts!”

Zip Atoné: “Well, that’s too bad because either your signature or brains is gonna be on that contract when I leave!”

Wouldn’t that be great!? Back to reality…

Design Contests Erode The Industry

The Graphic Artists Guild, along with every other professional creative organization, is against “contests,” in which the creative submits a design, illustration or photo (which become the property of the contest runner) in the hope of winning some measly prize that is not even worth the fee their work would have earned in the open market. But these contests get floods of entries. Who are the people who enter them? AIGA has a form letter on its website encouraging people to post when contests come up. A noble effort. These contests are not advertised on cereal boxes. They appear in the inboxes of creatives. They are advertised on design blogs and websites. They are run by the same corporations that earn millions by selling us burgers and sodas every day. So, winning an iPod seems like a fair trade-off… in Bizzarro World! Getting our money and putting toxins in our bodies just isn’t enough for them. Cb in Designers, Hacks and Professionalism: Are We Our Own Worst Enemy? Your “prize” is equal to what this costs…a stroke and your eternal soul! In the end, we are the regulators of our own unregulated industry. If business is this cut-throat, then are we being lax by not making the removal of hacks and crowdsourcers from the industry our primary concern, or have they been doing the same to us, successfully, and we didn’t see it until it was too late? Does it just provide a cheap alternative for customers who don’t know quality, branding, marketing, customer appeal and retention? If, as mentioned in the article on Forbes, big companies are now getting into crowdsourcing, is there to be any leverage for freelancers or design and development firms? We will never be unified by a union or organization but we can listen to our peers either through networking or organizations like AIGA and the GAG for some semblance of order. The experienced creatives need to mentor those entering the field. Art schools need to focus on business and professional practices as much as technique and other creative skills. There will continue to be clients that want it for nothing and will get what they don’t pay for. There will be plenty who understand the need for quality and that it costs a fair wage, sort of. Please, just keep the previous from calling me! (al)
© Speider Schneider for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: , ,
Smashing-magazine-advertisement in In Defense Of PhotoshopSpacer in In Defense Of Photoshop
 in In Defense Of Photoshop  in In Defense Of Photoshop  in In Defense Of Photoshop

Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop’s throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.

A militia of designers have assembled to launch this coup. Their propaganda is convincing, and their proposed successor is worthy, capable and sexy. Their cause is important, but their manifesto is flawed.

Title-image in In Defense Of Photoshop

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

The Argument

The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation. They present the final product in the final environment. They also take full advantage of browser capabilities, such as fluid layouts, progressive enhancement and animation. These are things that Photoshop simply can’t do.

If we compare the two methodologies even closer, we find a number of other disadvantages to the Photoshop approach. For example, Photoshop’s text rendering is nothing compared that of modern Web browsers. CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document. Even making certain structural changes to a website can be done more easily with CSS. Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the “Save for Web” dialog.

I admit: the benefits of mark-up are undeniable, and Photoshop doesn’t offer any of them. In fact, the mark-up generated across the entire Creative Suite is rather atrocious and unusable. Why then do I think Photoshop is still the most important Web design tool available today? The answer lies in the creative process.

Process Makes Perfect

The creative process is exactly that: a process. Clients may think we simply snap our fingers to make creative goodness flows directly from our brains to the screen, but we know better. We know that it takes hours or days of deep thought to devise the perfect solution. And if you’re anything like me, you often don’t find the perfect solution until you’ve explored a number of dead ends. Essentially, we need time and experimentation to work towards the goals of a project and determine the best way to communicate what needs to be said.

Experimentation is the key to creativity. Without it, the brain simply follows what it regards as the safest route, and the result is as mundane as the thought behind it. Most of the designers I know start all of their designs on paper: creating thumbnail sketches in order to quickly experiment with possible solutions. However, these sketches serve as jumping-off points; the design process is by no means over once the pencil is traded for mouse and keyboard.

Photoshop is vital to good Web design because it extends the process that was started on paper. It gives stakeholders a direct connection to the visuals without regard for the technical execution of the product. In other words, it accommodates visual processing. The designer is given a blank canvas—a playground for experimentation—on which anything is possible.

Experimentation in In Defense Of Photoshop

As designers, our medium is in a visual language. It’s a language of the subconscious, and it allows us to connect to other people through our work in ways that the spoken word cannot. Great design relies on an open dialogue between the artist and the medium. Interfering with that dialogue only impedes the process and distorts the message.

Designing with mark-up, however, creates a disconnect with the medium. Ideas no longer flow fluidly onto the screen. They must first be translated into a language that the computer understands. Like a game of telephone, this methodology requires a great deal of interpretation, which inevitably dilutes the idea and its potency. This chain of translation introduces a latency that kills experimentation and compromises the design.

The Foreman Or The Architect

Truth is often seen clearer in extremes. So, let’s try a little thought experiment. Imagine yourself as an architect tasked with designing a large corporate skyscraper. How would you proceed? If you’re like most architects, you would start by sketching, and then work your way into AutoCAD. Eventually, you’d end up with a computer-generated 3-D model. You’d probably take it even further by constructing a small-scale model. All of this processing gives you a better feel for the project without actually building it. It’d be preposterous for the architect to go out and start welding I-beams together as part of his design process; that is the foreman’s responsibility, and construction begins only once everything has been designed.

Designing with mark-up is like welding I-beams without a blueprint. The client understands—or should understand with your help—that the mock-ups are not the final product and that this actually benefits them. They want to get an idea of what the website will look like without having the entire thing built first. It allows them to change the direction of the project before investing too much. Our responsibility is to explain the differences between the mock-up and the final product. Moral of the story: don’t play foreman when you’re the architect.

Architect in In Defense Of Photoshop

A Call To Arms

Although mark-up can provide a truer experience for clients, Photoshop is clearly an important part of the design process. Ridding it from our toolbox could prove disastrous. What we need is not to change our methodology, but rather to amalgamate our tools. We need a tool that supports the creative process but at the same time gives us access to the subtleties of our medium.

Modern WYSIWYG editors are off the mark. We need something more like Photoshop, but with capabilities that allow us to create DOM elements as easily as we can create shapes. John Nack seems to be on the right track with his idea of HTML layers, which would enable users to create and style HTML elements and render them with the WebKit engine all within a standard PSD file. While this idea is not completely practical, it gives us something to work with. Imagine opening the layer styles dialog and being able to add CSS3 styling to an element. What bliss!

Html-layers1 in In Defense Of Photoshop
An example of what HTML layers might look like with CSS styling.

Jeffrey Zeldman makes a number of valid points about why creating such a tool is impossible:

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

I have to agree. Any tool that is meant to translate visual elements from canvas to code will inevitably fail in the semantic realm. Computers are monolingual: they need us to make that translation. However, do we need perfectly semantic code if we’re only creating a mock-up? Why can’t we accept the reality that we’re not crafting the final product and simply spit out HTML and CSS that’s “good enough” for mock-up purposes. Once the design is approved, we’ll put on our foreman hat and begin the real construction.

Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites. Although it doesn’t currently speak to our medium the way we wish it did, it proves itself priceless when it comes to the process of designing. Photoshop is a virtual playground of experimentation; dropping it from the process only prevents your design from being fully developed. So, before you switch to the mark-up methodology, understand that you’re sacrificing creativity for a few browser capabilities, which could be explained to clients anyway. For the sake of your client, creativity and work, stick with Photoshop.

Mastering-book in In Defense Of Photoshop

For more on information on designing websites in Photoshop, check out my Smashing eBook Mastering Photoshop Web Design, a book for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills.

Further Reading

(al)


© Thomas Giannattasio for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Smashing-magazine-advertisement in Passing The Holy Milestone: How To Meet DeadlinesSpacer in Passing The Holy Milestone: How To Meet Deadlines
 in Passing The Holy Milestone: How To Meet Deadlines  in Passing The Holy Milestone: How To Meet Deadlines  in Passing The Holy Milestone: How To Meet Deadlines

For too many projects, there comes a time when every action taken, every decision and sacrifice made, is spurred on by pressure to finish. Tempers seem to shrink along with the available days, talk about “high standards” gives way to “good enough,” and people realize that deadlines are aptly named. During the last-minute crunch, someone may well wonder, how did it come to this? Could it have been prevented? Every Web project has deadlines. But not every designer or developer deals with them the same way.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

What Causes A Deadline To Break?

Because a deadline marks the end of a project, everyone involved in the project must understand the deadline’s role. Most projects follow a schedule or have an estimated date by which they must be completed. The concept is simple then: when the work takes longer than expected, deadlines get missed.

Deadline-extends-past-estimate in Passing The Holy Milestone: How To Meet Deadlines
A deadline is the end point of a time estimate, making it a known quantity. But how long will the work actually take to get done?

Of course, projects can be more complicated in their details. Unexpected technical problems and unanticipated changes will affect the amount of work required. Sometimes other tasks take priority. Sometimes the time estimate wasn’t considered carefully enough.

Whatever the cause, too much work needs to be done in the available time. That’s the problem, but not the challenge.

Rate Deadlines By Severity Of Consequences

The hardest deadlines are tied to events that cannot be moved, such as a date promised to the public, an upcoming trade show or a date stipulated in a contract. Retailers know that their holiday sales must end at Christmas, and theater owners can expect movie-goers to be upset if a 1:00 pm showing doesn’t start until 2:00. Likewise, if a website is tied to a time-sensitive event, its relevance is lost once the event has passed. Hard deadlines have clear consequences when missed.

Deadlines-magnify-trouble in Passing The Holy Milestone: How To Meet Deadlines
Deadlines exist for a reason. The severity of the trouble caused by missing them increases dramatically after they have passed.

Deadlines tied to less public events are no less real, but a project will soldier on if the deadline slips. Company-imposed target dates, for example, rely less on public demand than on the temperament of managers. Meetings routinely start 10 minutes late because “something came up.”

The softest deadlines lack teeth or are set at some vague point in the future. That’s not always bad: not every missed deadline will cause a life-or-death crisis. But the same methods of solving the crisis apply. There are many strategies for handling a last-minute crisis. Most involve planning, setting priorities and knowing one’s limits.

Strategies For Preventing Deadline Crises

The beginning of a project is a great time to prevent problems later on.

The first solution is both obvious and difficult: do not take on a project that cannot be completed in the given time. Declining paid work requires discipline and confidence, but if the deadline is impossible, then the project may not be worth the money. Money cannot replace time.

Because deadlines with consequences are taken more seriously, keep a written list of definitive reasons why certain tasks must be completed by a given date. Losing money, customers and other assets create real incentives to work.

Schedule deadlines as specific tasks, not the ends of phases. Rather than “Content will be completed by 4 April 2010,” state “Review the content over lunch on 4 April 2010.” This ties the deadline to an event at which results must be shown. Mini-deadlines tied to specific events are more powerful than general statements.

Schedule-review-time in Passing The Holy Milestone: How To Meet Deadlines
Making up for minor time discrepancies during the course of a project is easier than facing a big shortfall when no time is left.

Plan For Unpleasant Surprises

Incentive may not be the problem, though. Unexpected problems cause many people to break deadlines. Their unpredictability make these problems hard to plan for, and good intentions don’t help you see the future. The key is to recognize that, whatever their nature, problems will likely occur.

If everything seems accounted for in the project plan, then invent a problem. Keep it realistic: “reshoot staff photos” is more likely than “spontaneous server combustion,” but it doesn’t really matter. The point is to create extra time to allow for a deadline crisis. One rule of thumb is to add between half and all of a project’s expected duration. That is, increase the full time that has been budgeted by between 50 to 100% to allow for surprises.

A plan of time estimates for major tasks in a project could look something like this:

Task:Time allotted:
Content audit15 hours
Develop content strategy15 hours
Make WordPress theme changes20 hours
Import data from old website15 hours
Test on multiple browsers5 hours
Total70 hours

Being conservative, let’s take half of 70, which is 35. Now we invent a problem: say, having to retype all content from print-outs. Is 35 hours for that ridiculous? Perhaps. But obstacles are unexpected by nature, and they always steal time from an otherwise ideal budget.

Add-time-to-the-estimate in Passing The Holy Milestone: How To Meet Deadlines
Scheduling for unknowns is hard, but acknowledging that extra time is required will better align estimates with reality.

A line item needs to be added to the budget. It could be “Time to make changes” or “Allowance for unknowns.” The description isn’t as important as the fact that you have planned for surprises.

Is half of the original budget too much? It may drive cheaper clients away, but overestimating and finishing under the deadline is better than the alternative.

Mitigate A Deadline’s Threat By Adding Other Deadlines

Implement mini-deadlines within a project’s timeline. Mini-deadlines minimize last-minute problems by serving as checkpoints to gauge how far off track the schedule is, if at all, at certain phases.

  1. Start
    While the project is fresh in everyone’s mind, a schedule for the other phases should be set.
  2. First quarter
    Everyone involved should have a sense of whether they can work together. Work begins, and the pristine project on paper comes up against the sticky details of reality.
  3. Halfway point
    The bulk of the work happens here. If you doubled your estimate to account for surprises, you would actually be aiming to launch the project right now.
  4. Third quarter
    If everyone pushed to launch by the halfway point, then almost everything should be done by now. But it rarely is.
  5. Deadline
    Launch the project.
  6. Review
    Win or lose, everyone should ask what should have happened at each phase of the project? What should have been done to meet each mini-deadline along the way?

Notice that mini-deadlines are based on time, not task. Tasks have a way of expanding, of taking up more time than planned, which mini-deadlines should prevent. Think of a mini-deadline as a chance to review the project’s timeline. While this approach may not entirely stave off a deadline crisis, it gives you opportunities to catch and correct problems along the way.

Plan Sacrifices In Advance

Every project has absolute requirements, which are essentially the reasons the project exists at all or the problems it is designed to solve. But many also have supplemental requirements. If a project requires A, B and C, then by all means include D, E and F, but only with the understanding that they might have to wait.

For example, a newsletter is an important marketing tool for an e-commerce website, but less important than an easy-to-use cart and secure log-in page. Likewise, the top priority for a photo gallery should be to present photos. If the deadline is looming and the AJAX is buggy, then perhaps the blog should wait.

Marking certain features as secondary provides relief when things go wrong. These features don’t need to be cut, but their deadlines should be later than those of the core project.

Practice

Measure the rate at which you work by timing how long you take to perform various tasks. You want to figure out how much time you need to comfortably perform each task, not how fast you can get it done.

For example, the schedule might allow for 30 minutes to create a favicon. But in reality, it consumes 8 hours.

Wait a minute. Eight hours for a measly 16×16-pixel graphic? Isn’t that… excessive?

That’s not the point. You’re not learning the rate at which you work so that you can gasp in embarrassment at the result. Workflow efficiency can be improved later. The question is, how much time are you comfortable with right now? In this case, it’s 8 hours.

Deadlines aren’t the problem. Problems arise when the work outweighs the allotted time. Learning how long you take to accomplish certain tasks is the best way to set a realistic schedule.

Conclusion

Not every deadline drama can be prevented, but even the worst can be dealt with professionally. Prepare for surprises, break up large tasks into manageable segments and prioritize. It’s a matter of respect: deadlines mean business. Do you?

How do you prevent deadline emergencies? What’s the worst problem you’ve faced under time pressure? What’s your greatest solution? Share your story in the comments below.

(al)


© Ben Gremillion for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

Smashing-magazine-advertisement in 50 Useful Tools and Resources For Web DesignersSpacer in 50 Useful Tools and Resources For Web Designers
 in 50 Useful Tools and Resources For Web Designers  in 50 Useful Tools and Resources For Web Designers  in 50 Useful Tools and Resources For Web Designers

An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run.

And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development. We have undergone quite a development since then, and are now publishing almost only in-depth articles — written by some of the best professionals in the industry. However, useful, carefully prepared and filtered lists are still useful, and therefore we keep publishing them as well.

Below you’ll find 50 useful tools and time-savers for web designers and developers. Among other things, you will find recently released tools, useful reference sheets, articles and further resources. Such posts are prepared over months, each containing resources found, reviewed or bookmarked by the Smashing Editorial Team. We hope that at least some of them will help you improve your workflow!

You may be interested in the following related posts:

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Typography

Meet Your Type: A Field Guide to Typography (free PDF)
This eBook will help you better understand the foundation of typography and overcome common obstacles and problems when choosing type.

Useful-tool-122 in 50 Useful Tools and Resources For Web Designers

Web Font Specimen
This template lets you check the typography by analyzing the HTML-specimen in your browser. The specimen contains whole paragraphs in various line heights and font sizes, different headings, ordered and unordered lists, as well as italic and bold text. You can analyze the body size comparison that reveals aspects of the typeface that can’t otherwise be seen and study single glyphs, measure, grayscale as well as light on dark and dark on light previews. You may want to check out Good Web Fonts for the actual specimens of various legible screen fonts.

Handy-006 in 50 Useful Tools and Resources For Web Designers

Font Anatomy Wallpaper
This wallpaper (1920×1200) covers the terminology of typography, showcasing indi­vid­ual parts of the char­ac­ters of the alpha­bet.

Useful-tool-136 in 50 Useful Tools and Resources For Web Designers

Web FontFont User Guide (PDF)
This Web FontFont User Guide contains information about typography aimed at different groups of people: web developers, system administrators and website visitors. You may want to consider giving it to your clients or colleagues.

Useful-126 in 50 Useful Tools and Resources For Web Designers

AltFontPrev
This is a simple JavaScript bookmarklet that lets you view the font stack of any website and then deactivate each font with a single click. It makes it easy not only to make sure everything looks okay when certain fonts aren’t installed on a user’s system, but also to view the fonts included in the website’s font stack in a single click, rather than opening the source code. You can even specify a custom font, which makes it handy when you’re considering changing a design’s current font.

Altfontprev in 50 Useful Tools and Resources For Web Designers

Typografix
This tool is an HTML re-processing script for creating beautiful typography. It corrects things like ellipses and smart quotes and adds tags for <script>, <pre> and <code> automatically. The en dash, for example, is created automatically when a hyphen is surrounded by spaces, and the em dash is created when two dashes appear in a row. Typografix is written in C#, requires Windows Installer 3.1 and .NET Framework 3.5 SP1.

Unicode Codepoint Chart
This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).

Bookmarklets

Quix
We have covered Quix several once already, but when one talks about bookmarklets, it is just necessary to mention Quix as well. Wouldn’t it be nice to have a powerful command line in your browser, some kind of shell that lets you use handy commands and shortcuts for a quicker and more productive workflow? That’s exactly what Quix offers. The tool is a clever extensible bookmarklet that lets you both access your bookmarks and perform various operations on other websites.

Quix in 50 Useful Tools and Resources For Web Designers

WP-Toolbar bookmarklet
This tool will save a lot of clicks as you edit or update posts on your WordPress-powered blog. The bookmarklet gives you quick access to the entire administrative back-end directly in your browser’s window. There is also a GreaseMonkey script that automatically loads the toolbar when you visit a particular website.

Wp-toolbar in 50 Useful Tools and Resources For Web Designers

Print Friendly Bookmarklet
This bookmarklet strips advertising, navigation and all things that you don’t want to have when you decide to print out a page. It formats the content of an article or a document for great readbility and generates a minimal and clean PDF for printing.

Useful-tool-125 in 50 Useful Tools and Resources For Web Designers

Bookmarklet Combiner
This tool creates a master bookmarklet which can either run all bookmarks at once or display a menu at some area of the page. Nice service for users who wants to avoid using a special folder only to hold all bookmarklets.

The Printliminator
The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.

Bespin Bookmarklet
Using the Bespin Bookmarklet, you can replace any textarea you encounter with a Bespin editor, making editing the text much more pleasant.

CSS, HTML and JavaScript Tools

eCSStender
Extensions built with eCSStender simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work — even in IE6.

Useful-tool-1031 in 50 Useful Tools and Resources For Web Designers

CoffeeScript
This is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Coffeescript in 50 Useful Tools and Resources For Web Designers

#grid
#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views.

Analog in 50 Useful Tools and Resources For Web Designers

Primer CSS
This tiny generator works online and has only one function: it extracts from an HTML page (copying and pasting will do) a framework of classes and IDs that can be used as the foundation of an external style sheet. This can be wonderful if you work by first doing the structure in HTML, and then the forms and colors in the style sheet.

Handy-008 in 50 Useful Tools and Resources For Web Designers

CSS Usage
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. Each time you run a scan, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

CSSUsage in 50 Useful Tools and Resources For Web Designers

JS.Class: Ruby-style JavaScript
JS.Class is a set of tools designed to make it easy to build robust object-oriented programs in JavaScript. It’s based on Ruby, and gives you access to Ruby’s object, module and class systems, some of its reflection and metaprogramming facilities, and a few of the packages from its standard library. It also provides a package manager to help load your applications efficiently.

Tools-138 in 50 Useful Tools and Resources For Web Designers

JS Bin
JS Bin is an application specifically designed to help JavaScript- and CSS-developers to test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code, new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

Useful-220 in 50 Useful Tools and Resources For Web Designers

jQuery 1.4.2 Visual Cheat Sheet
jQuery Visual Cheat Sheet is a updated version of the useful jQuery Cheat Sheet. It includes all the reference you will need for jQuery 1.4.2 API.

Useful-tool-404 in 50 Useful Tools and Resources For Web Designers

Turbine
Turbine is a collection of PHP-powered tools that decrease CSS development time and help you avoid headaches. Among other things, it has a simple syntax, automatic packing and gzipping of multiple style files, OOP-like inheritance and templating features as well as a shell for experiments and debugging.

Useful-tool-405 in 50 Useful Tools and Resources For Web Designers

Jo: JavaScript Application Framework for HTML5
Jo embraces JavaScript’s object model and leverages CSS3 to handle as much of the presentation and animation as possible. It also provides a consistent and modular event model between objects and plays nicely with other libraries like PhoneGap.

Useful-tool-411 in 50 Useful Tools and Resources For Web Designers

Sencha: HTML5 Mobile App Framework
Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touch screen devices.

Useful-tool-407 in 50 Useful Tools and Resources For Web Designers

Aloha Editor, The HTML5 Editor
Aloha Editor is an advanced browser-based editor that is faster than other editors and provides you with better and richer formatting in real-time in your browser.

Useful-tool-106 in 50 Useful Tools and Resources For Web Designers

JavaScript Regex Syntax Highlighter
Do you want RegexPal-style regex syntax highlighting on your webpages? This library takes care of it for you, so you can spend more time writing regular expressions and less time deciphering them. Currently, JavaScript regexes only are supported.

Useful-tool-126 in 50 Useful Tools and Resources For Web Designers

OpenStack Open Source Cloud Computing Software
The goal of OpenStack is to allow any organization to create and offer cloud computing capabilities using open source software running on standard hardware. OpenStack Compute is software for automatically creating and managing large groups of virtual private servers.

Useful-tool-102 in 50 Useful Tools and Resources For Web Designers

sweet-template
Sweet (Simple WEb front-End Template) is a lightweight JavaScript template with high performance. It’s small, fast, easy to use, and, most important, extensible. It also can be integrated with jQuery.

Useful-tool-128 in 50 Useful Tools and Resources For Web Designers

jQuery Deconstructed
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools. It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.

Useful-tool-104 in 50 Useful Tools and Resources For Web Designers

Alloy UI
Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.

Useful-tool-406 in 50 Useful Tools and Resources For Web Designers

Google JavaScript Style Guide
This document provides a set of conventions (sometimes arbitrary) that hold the style guidelines used for Google code. It covers general good practices for open-source projects and well-written and well-documented code. It covers a lot of ground, from “use camelCase for variable names” to “never use global variables” to “never use exceptions.”

gleeBox
Gleebox provides a way to navigate web pages via keyboard. For instance, it allows you to hit the ‘G’-key and every link on the page will be highlighted. This application is available as an extension for Firefox and Google Chrome.

shellinabox
Shell In A Box implements a web server that can export arbitrary command line tools to a web based terminal emulator. This emulator is accessible to every browser that supports JavaScript and CSS and does not require any additional browser plugins.

Juicer: a CSS and JavaScript packaging tool
Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can check the syntax, add cache busters to and cycle asset hosts on URLs in CSS files.

Jake: A Build Tool for JavaScript
Jake is a new build tool built entirely in JavaScript that runs on top of the CommonJS. As its name suggests, it is based on the existing and already popular Rake tool and benefits from the same simplicity.

Closure Compiler
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Useful Online Tools and Services

ComparePSD (Win only)
This tool lets you compare two Photoshop files side by side and see every little difference. Look for differences by layer or by effect. You get a scaled view of the files, so you can see them next to each other and pick out differences more quickly. ComparePSD is available for Windows only and is free to download and use.

Handy-001 in 50 Useful Tools and Resources For Web Designers

Secure Passwords Generator
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

Passwordgenerator in 50 Useful Tools and Resources For Web Designers

SwatchSpot: Random Color Swatch Generator
This tool creates random color swatches to inspire you. Lock in the colors you like and shuffle away the ones you don’t. Once you’re done, grab the color codes or download your palette.

Useful-tool-112 in 50 Useful Tools and Resources For Web Designers

Yuuguu: Instant screen sharing and web conferencing
This tool provides instant web-conferencing, online meetings and collaboration and enables you to work with your cusomers, partners and colleagues right away, without a single download. The free version allows for 100 minutes per month of web conferencing.

Useful-tool-403 in 50 Useful Tools and Resources For Web Designers

Web Form Recovery Firefox Plugin
Lazarus securely auto-saves all forms as you type, so after a crash or server timeout you can go back to the form, right click, “recover form”, and breathe a sigh of relief.

Tools-106 in 50 Useful Tools and Resources For Web Designers

Which loads faster?
This tool lets you see two websites load side by side in real time. Then it shows how long each took to load and the percentage difference.

Whichloadsfaster in 50 Useful Tools and Resources For Web Designers

Faary
Faary is an online form builder that operates with the help of text lines, and the form is generated as such. The tool creates an HTML form with CSS, which can be downloaded as a ZIP archive.

Faary in 50 Useful Tools and Resources For Web Designers

Scr.im
Scr.im lets you use a shortened URL to give out your email address safely and securely on forums. Just enter your email address on Scr.im and it will give you a link to a page with your email address, with security to prevent bots from viewing it.

Scrim in 50 Useful Tools and Resources For Web Designers

Name Checklist
This tool will help you find out if your brand name, username, domain and vanity url are still available online or they are already taken.

Useful-tool-121 in 50 Useful Tools and Resources For Web Designers

Quora – Web Design
Quora is a continually improving collection of questions and answers created, edited, and organized by everyone who uses it. You can follow web design, usability and related discussions and ask your questions as well.

Useful-tool-130 in 50 Useful Tools and Resources For Web Designers

Todo.txt Command Line Interface
If you’ve got a file called todo.txt on your computer right now, this script is for you. You probably don’t want to launch a full-blown text editor every time you need to add an item to your to-do list, or mark one that’s already there as complete. With this simple shell script, you can interact with todo.txt at the command line for quick and easy, Unix-y access.

Tools-126 in 50 Useful Tools and Resources For Web Designers

Note and Point
This gallery highlights beautiful Keynote, PDF and PowerPoint-slides on the Web (mostly Web design-related) which is great for inspiration if you are thinking about creating beautiful and attractive slides for your next presentation.

Noteandpoint in 50 Useful Tools and Resources For Web Designers

ManyBooks
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats.

Manybooks in 50 Useful Tools and Resources For Web Designers

Tweetment
This service allows you to design sexy web pages for your tweets.

Useful-tool-117 in 50 Useful Tools and Resources For Web Designers

Browser Cover Generator
This simple tool generates a browser preview of an uploaded image and can add address bar URL, window title, shadow, status bar and various browser skins to the image.

Linkification Firefox Plugin
Linkification Converts text links into genuine, clickable links. To view and set options, you can use the Linkification right-click context menu.

Useful References and Guides

Design Is History
This resource showcases the evolution of design through time. It was created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. As a designer it is important to understand where design came from, how it developed, and who shaped its evolution. The more exposure you have to past, current and future design trends, styles and designers, the larger your problem-solving toolkit. The larger your toolkit, the more effective of a designer you can be.

Desishistory in 50 Useful Tools and Resources For Web Designers

User Interface Style Guides
This page features some useful links to style guides used by large websites, corporations and news agencies (e.g. the BBC Style Guide), including editorial guidelines, quality guidelines and online standards.

Styleguides in 50 Useful Tools and Resources For Web Designers

Trademarkia
Trademarkia is a free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.

Ultimate in 50 Useful Tools and Resources For Web Designers

Icon Reference Chart
This chart, created by Jon Hicks, was created to collect the sizes, formats and the related information about icons used on different devices. At the moment it covers browsers, Android, iPad, iPhone, iPhone 4, Linux, Mac OS X and Windows. And you can also download a template for iPhone and iPad icons. Useful.

Useful-tool-124 in 50 Useful Tools and Resources For Web Designers

OpenWith.org
OpenWith is a directory of existing file extensions and free tools to open them. You’ll find a free program for just about everything you would ever need to open, including source code, data files, disc images, spreadsheets and video files.

Openwith-org in 50 Useful Tools and Resources For Web Designers

ScriptSrc.net
This site puts all the latest versions of script tags from the various JavaScript libraries in one place. Whether you use jQuery, swfobject, Chrome Frame, MooTools, Ext JS, YUI, Prototype, Dojo or Scriptaculous, you’ll find the most recent script tags here.

Scriptsrc in 50 Useful Tools and Resources For Web Designers

Colours In Cultures Chart
This map shows how colours are perceived in different cultures and nations across the globe.

Tools-130 in 50 Useful Tools and Resources For Web Designers

Guidelines and standards manuals
Handy examples of guidelines and standards manuals used by companies and brands online. Also check Branding & Corporate Identity Design page.

Tools-101 in 50 Useful Tools and Resources For Web Designers

Code Standards and Front-End Development Best Practices
This document outlines de-facto code standards in professional modern front-end development. The primary motivation of the document is code consistency and best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. Nice and useful overview.

Tools-133 in 50 Useful Tools and Resources For Web Designers

Essential Tools You Always have Handy When Fixing a PC Problem?
This forum thread features must-have tools that you should keep loaded on your thumb drive when asked to deal with a family member of friend’s personal computer issue.

Tools-114 in 50 Useful Tools and Resources For Web Designers

Project Management For Dummies
Because of the ever-growing array of huge, complex, and technically challenging projects in today’s world, project management has become a critical skill. This page provides a nice project management cheat sheet that will help you handle your project management assignments, such as confirming a project’s justification, developing project objectives and schedules, and maintaining commitment for a project.

Useful-tool-109 in 50 Useful Tools and Resources For Web Designers

Expression Engine Reference Chart
A quick and useful reference guide for ExpressionEngine users. A PDF-version is available as well.

Useful-tool-135 in 50 Useful Tools and Resources For Web Designers

Computer Hardware Chart
A detailed and handy hardware chart for notebook RAM, desktop RAM, CPU sockets, hard drives, ports, processor card slots, processor card sockets, peripheral cards, desktop card slots and power connectors.

Useful-tool-408 in 50 Useful Tools and Resources For Web Designers

Corporate Identity / Logo Usage Guides
A collection of documents that illustrate how organizations and companies ensure that their branding remains consistent online and in print.

ASCII: The Pronouncation Guide
ASCII stands for American Standard Code for Information Interchange. Computers can only understand numbers, so an ASCII code is the numerical representation of a character such as ‘a’ or ‘@’ or an action of some sort. The non-printing ASCII characters are rarely used for their original purpose. This page features an ASCII character table and includes descriptions of the first 32 non-printing characters and the guide to their pronouncation.

Name Pronunciation Guide
Inogolo is a practical, easy-to-use website devoted to the English pronunciation of the names of people, places, and miscellaneous stuff. The site contains a searchable database of names with both phonetic and audio pronunciations in English.

Usability and User Experience

Hand picked UX related resources
UXMARKZ is a collection of hand picked UX related resources, updated daily. You will find interesting sites, articles, videos, images and slideshows from the field of interaction design, usability, information achitecture, user interface design and other. All submissions are moderated.

Useful-tool-107 in 50 Useful Tools and Resources For Web Designers

UX Myths
This ressource is supposed to help you build your website based on evidence, not false beliefs. UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true. And you don’t have to take their word for it, the site shows you a lot of research findings and articles by design and usability gurus.

Useful-tool-105 in 50 Useful Tools and Resources For Web Designers

User Interface Design Patterns for Ideas and Inspiration
A user interface design pattern library. It is a collection of Web design patterns and best practices which helps you to find inspiration and design interfaces with great user experience. It is also a user interface gallery full of real world examples of our patterns.

Useful-tool-137 in 50 Useful Tools and Resources For Web Designers

Last Click

How Do I Win Rock Paper Scissors Every Time?
Now, that’s a handy resource: have you ever gotten tired of being crushed by Rock, cut to shreds by Scissors, or smothered by Paper? This graphic has information compiled about Rock, Paper, Scissors (RPS) from the World RPS Society, the masters of Rock, Paper, Scissors, to help you overcome your opponents and understand the strategies needed to win Rock, Paper, Scissors every time.

Useful-tool-103 in 50 Useful Tools and Resources For Web Designers

The Universal Packing List
This tool generates a custom packing list for your journeys. You have to provide some basic information about the journey and a packing list appears immediately.

Tools-131 in 50 Useful Tools and Resources For Web Designers

Ex-blocker
The Ex-blocker is a plugin that hides any information about your ex online. The tool is available as a Firefox and Chrome extension.

Useful-tool-115 in 50 Useful Tools and Resources For Web Designers

Not Beans Again
An online tool that finds a recipe from your ingredients. Enter what you have got in your fridge to the “Ingrediometer” and see if the tool can come up with a recipe for you.

Useful-tool-108 in 50 Useful Tools and Resources For Web Designers

A Coder’s Guide to Coffee
As most software and creative professionals know, coffee is an important technology for boosting mental acuity and maintaining peak on-the-job performance. But did you also know that coffee can be a damn tasty beverage? All you need is the appropriate amount of disrespect for the mainstream coffee industry and a desire to enjoy a better beverage.

Useful-tool-134 in 50 Useful Tools and Resources For Web Designers

Flipboard
Flipboard is a free personalized social magazine for your iPad. It allows you to quickly flip through news, photos and updates your friends are sharing on Facebook and Twitter. The emergence of tools like this is what will make iPad a truly useful and handy device for many people.

Useful-tool-119 in 50 Useful Tools and Resources For Web Designers

Related Posts

You may be interested in the following related posts:


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , , ,

Smashing-magazine-advertisement in What Do We Really Mean By Art?Spacer in What Do We Really Mean By Art?
 in What Do We Really Mean By Art?  in What Do We Really Mean By Art?  in What Do We Really Mean By Art?

Mark Rothko, an American artist who described himself as an “abstract painter”, once said that he was not the kind of person interested in the relationship of form, color or similars. He didn’t define himself as an abstractionist, but rather as a person interested only in expressing basic human emotions such as doom, tragedy, ecstasy and so on. This was one person’s vision of art, but what do we mean by art today? Why is defining the concept so difficult?

This article is an exploration of the meaning of art and an attempt to understand the relationship between art and artists, with some useful insights via interviews with both traditional and digital artists.

[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

1. What Is Art? 

This question pops up often, and with many answers. Many argue that art cannot be defined. We could go about this in several ways. Art is often considered the process or product of deliberately arranging elements in a way that appeals to the senses or emotions. It encompasses a diverse range of human activities, creations and ways of expression, including music, literature, film, sculpture and paintings. The meaning of art is explored in a branch of philosophy known as aesthetics. At least, that’s what Wikipedia claims.

Art is generally understood as any activity or product done by people with a communicative or aesthetic purpose—something that expresses an idea, an emotion or, more generally, a world view.

It is a component of culture, reflecting economic and social substrates in its design. It transmits ideas and values inherent in every culture across space and time. Its role changes through time, acquiring more of an aesthetic component here and a socio-educational function there.

Scott-Marr in What Do We Really Mean By Art?
Scott Marr

Everything we’ve said so far has elements of truth but is mainly opinion. According to Wikipedia, “Art historians and philosophers of art have long had classificatory disputes about art regarding whether a particular cultural form or piece of work should be classified as art.”

The definition of art is open, subjective, debatable. There is no agreement among historians and artists, which is why we’re left with so many definitions of art. The concept itself has changed over centuries.

The very notion of art continues today to stir controversy, being so open to multiple interpretations. It can be taken simply to mean any human activity, or any set of rules needed to develop an activity. This would generalize the concept beyond what is normally understood as the fine arts, now broadened to encompass academic areas. The word has many other colloquial uses, too.

In this article, we mean art as a form of human expression of a creative nature.

2. The Evolution Of The Concept Of Art

While the definition of art has changed over the years, the field of art history has developed to allow us to categorize changes in art over time and to better understand how art shapes and is shaped by the creative impulses of artists.

Having a solid grasp of art history, then, is important. I spoke with Alexander Daniloff and Jonathan Ball about the concept of art through history and about whether tracing a line through traditional and contemporary art is possible.

Alexander Daniloff is a Russian artist who lives and works in Italy. His focus is painting, although he has worked in several media. Lately, he has worked on children’s illustrations. He has participated in various events and illustration competitions and has illustrated three books. He has held numerous individual and group exhibitions in Italy, Russia, Holland, Spain, Finland and the US.

Jonathan Ball is the creative behind Poked Studio, an innovative company committed to developing creative visual solutions. That’s not all: among its services, Poked Studio offers illustration; Web, graphic and blog design; 3-D rendering and visualization; motion graphics; children’s book illustration; Flash websites; and games.

Question: Can we trace a line from traditional to contemporary art?

Alexander Daniloff: I don’t think we can say anything without falling into controversy, even me. I have a traditional view and prefer artwork that speaks for the artist or period. I can’t explain what contemporary art is, or at least what it’s meant to be. Yes, you can trace a line from traditional to contemporary art, but not a straight one. Perhaps it is a parabola that goes up and then down, or a spiral. We don’t know. All we can say is that the art market has developed, which affects the art itself. With what we call contemporary art, words and explanations are always worth more.

Visual arts have been transformed by articles and critical essays; meanwhile, the works themselves have become mute. In the theater, the curators and critics have taken up the front row. This is my view on the difference between contemporary and traditional art.

I personally prefer art measured in human dimensions: art that whispers and doesn’t shout, art that covers me and makes me fly and does not crush. But I must confess, some of these modern things attract me; for example, mural painting (graffiti) and abstract things.

Alexander-Daniloff in What Do We Really Mean By Art?
Trips to real and mythological ages and changes in theatrical costumes and decor are a part of Alexander Daniloff’s style. The style gives his paintings a special grace, showing both the festive and dramatic sides of life on stage. The style is also infused with a sweet irony that shakes up the painting. Precision, flexibility in design and subtle color harmony free up the artist’s movement between different artistic conventions, playing with light and shadow, line and color.

Jonathan Ball: Yes, most definitely [we can draw a line from traditional to contemporary art]. Many of the same techniques are used, just in slightly different ways and with different tools. The same principles apply, however you create art.

I see a line particularly running through the stylized form of Japanese art such as Hokusai and contemporary stylized graphic illustration.

Question: Compared to the evolution of traditional art, how would you describe the development of digital (or new media) art?

Jonathan Ball: Digital art has obviously developed much more quickly than the thousands of years of hand-crafted techniques. A whole generation has been brought up on “Photoshop” and other tools, whereas earlier generations used pen and pencil.

Still, I believe that digital art is still in its infancy. Despite what seems an enormous amount of progress in computer hardware, general computing and even the computing available to most design studios is just not fast enough to easily reproduce art on the scale and level of detail possible with traditional media. Go to any national gallery, and you will see works on an enormous scale. Try reproducing a 10-foot canvas with the resolution of a hand-painted work of art in a 3-D program, and you’ll find it can’t cope. In fact, most programs will struggle to render a detailed picture at, say, 300 DPI at just A4 size.

While a painting may appear to be just splotches and blobs, when you go up to it close, the patterns are beautiful by themselves, full of color, intensity, saturation and texture. Go close to digital art or a TV screen and you’ll see a mess of distortion and artifacts.

Once screen resolution is on par with printed media, and once computer technology allows us to easily create large, highly detailed work at speed, then digital will have caught up to traditional media.

Most digital art of the early-21st century is designed to be viewed on low-resolution devices. Much of this art will be obsolete when higher-resolution screens and devices are developed over the next century. And much that has been stored only on hard drives will be lost forever as drives fail and websites close or are redeveloped.

I find it a shame that so much great work is reproduced at such a limited resolution and scale and not stored in a way that keeps it safe for future generations.

Jonathan-Ball in What Do We Really Mean By Art?
Jonathan Ball

Question: Tell us about your favourite art movement.

Jonathan Ball: Difficult, because I like so many styles. But I find that if I’m in an art gallery, I love contemporary painting because it holds so many surprises and is less predicable than previous eras.

I love quirky contemporary illustration, particularly low-brow art forms and gothic-mythology mixtures.

3. Aesthetics In Digital Art

Moving into the mid-20th century, the conceptual transformations that arose from new approaches to art led to a crisis of aesthetics, as was manifested in new art media.

Alberto-Cerriteno in What Do We Really Mean By Art?
Alberto Cerriteño

While borrowing many of the conventions of traditional media, digital art can draw upon aesthetics from many other fields. But various criticisms have been made against it: for example, given the variety of tools at their disposal, how much effort do digital artists really have to put into their work?

I asked Jan Willem Wennekes, also known as Zeptonn, for his opinion on this. He is a freelancer who specializes in illustrative design and art direction, with a focus on eco-friendly and environmental projects.

Jan Willem Wennekes: The question seems a bit ambiguous. On the one hand, there seems to be a question about the effort required to create digital art. That is, some people may think that using digital media to create art is easier than using traditional media. On the other hand, there seems to be a question of whether digital art is an art form in itself (or maybe at all?).

With respect to the first question, I think that working with digital media (mostly the computer, mouse, Wacom, scanner, software, etc.) does not have to differ from creating art in other media. The computer and all the tools generated by the software are still what they are: tools! You have to master those tools just as you have to master any other tools. For example, if you do not understand how light works, you won’t be able to create artwork with correct lighting, and so on. If you don’t know how the pen tool works in Illustrator, then you won’t be able to create good artwork, just like a traditional artist who doesn’t know how to use a pencil. You still have to master color theory and all the other things that are essential to creating a good or stunning piece of art. In that sense, it doesn’t matter whether it is a painting or a print. Simply put, you have to master all the tools and theory, just as you had to master them before. And the better you master them, the better your artwork can be.

Jan-Willem-Wennekes in What Do We Really Mean By Art?
Jan Willem Wennekes

Jan Willem Wennekes: Now, one can wonder whether digital art is a distinct art form. This is a difficult question and not easy to answer. I think the difference here is that “digital art” is more of a group term than just one art form. There are many types of digital art: some look a lot like paintings, some look like photographs, some look like drawings, while others appear quite new and unique (e.g. computer generated artwork). So in a sense, digital art consists of both overlapping and new kinds of art. Photography was once viewed as a competitor to portrait painting, but in the end it became its own art form, with many directions and fields of interest. In effect, painting benefitted from the rise of photography, and each added to the other and renewed interest in art in general. Nowadays, we don’t view photography as a competitor to painting; we see them as different media, with different benefits and drawbacks. I think the same holds for newer digital art forms.

Jan-Willem-Wennekes-11 in What Do We Really Mean By Art?
Zeptonn’s work can be described as positive, eco-friendly, simple, wacky, colorful, fantastical and illustrative. It is distinguished by its hand-drawn elements, sweet patterns and curvy line work. And you might find a creature popping up here and there. For more, visit his website or follow him on Twitter.

4. Art As We Know It Today

The 20th century was a turning point in our conception of art, which is mainly why contemporary artists frequently reach for new concepts, break with tradition and reject classic notions of beauty. All these factors have given birth to abstract art. The artist no longer tries to reflect reality, but rather tries to give expression to their inner world and feelings.

The old definitions of art have become obsolete. Today, art is an evolving and global concept, open to new interpretation, too fluid to be pinned down.

Dan-May in What Do We Really Mean By Art?
Dan May

I interviewed Nate Williams and Travis Lampe to explore new elements of contemporary art and to answer the question, what new elements and principles are evident in today’s art.

Nate Williams, also known as Alexander Blue, is an artist, illustrator and designer from the US. He has extensive experience in various facets of the illustration industry, and he has a wide variety of clients. His illustrations are aimed at both adults and children. He has also worked in the advertising world and in publishing, music, fashion, textiles, home decor, merchandising, posters, press and social expression.

Travis Lampe is an illustrator who currently lives and works in Chicago. He worked as an art director in advertising. After a two-year stint in Warsaw, he returned to Chicago and tried his hand in the art and illustration scene. He enjoys making art and toys, and he has shown in fine galleries throughout the US and in Europe.

Question: How much influence does new media have on your work? What is your relationship to digital art? Do you consider yourself a traditional artist?

Jonathan Ball: It has a lot of influence. I think because of my knowledge of programming, it influences my work. I think in terms of modular parts and variables.

Nate-Williams-1 in What Do We Really Mean By Art?
Nate Williams: “My definition of art is play, be curious, discover, express.”

Travis Lampe: I’m a traditional artist—I work in acrylic—but I wouldn’t be able to operate without computers. When I design toys, for example, I use computers to scan and create vector art from my original paintings. I don’t create digital art in and of itself, though. Purely digital work can be beautiful, but for me there is value in having a tangible and unique product, as opposed to a set of data.

No doubt, though, I’ve been influenced in my traditional art by being exposed to ideas that I’ve discovered on the Internet. It’s a great place to find old-timey cartoons, for example.

Question: Travis, if the purpose of art was once to create beauty and to imitate nature, today the concept has evolved dynamically and is constantly changing. In your opinion, how has the Internet and new ways of communicating influenced the development of visual arts, its conceptual premises and its physical execution?

Travis Lampe: The Internet most influences the development of art simply by exposing more people to more art. Unfortunately, a lot of it is really, really crappy, as you would expect. Anyone with a ballpoint pen and digital camera can post their art for the world to see. And that’s okay. I think the cream just naturally rises to the top. Ideas are still what’s important, far more so than technical skill, and the Internet hasn’t changed that at all. I’ve seen a lot of ballpoint pen art that I really like.

As far as physical execution goes, it’s evolved the way it always has: as soon as a new medium arrives, there’s a scramble to use it in new and creative ways. I don’t know that the Internet has affected the physical execution of art so much as computers themselves have. It’s just made it easier to disseminate.

Travis-Lampe in What Do We Really Mean By Art?
Travis Lampe

More communication is great for PR and in that way is a great help to artists. And more communication should equal more ideas bouncing around, which ideally should result in better conceptual thinking. But most of the “communication” is fluff. And I think there’s a threshold beyond which the constant connectedness ceases to be helpful. Artists need some disconnected time for the creative ideas to coalesce. Successful artists are the ones who are disciplined and able to balance all of this, I guess.

Question: Would you say that art and the new, social Web have a connection? Are social media a viable way to improve artistic communities?

Jonathan Ball: Of course. Art has a connection to anything in our environment that influences its creators. As far as social media goes, I think being able to communicate better is always an improvement.

Travis Lampe: Social media is great for sharing results; it’s allowed me to connect with and see the work of other artists who I admire on a constant basis. And it makes working long hours in a basement a bit less of a lonely enterprise when you can show the world what you’ve done the moment you’ve finished. On the other hand, social media are a constant distraction. When I want to get work done, I disconnect. So I love it and hate it equally.

5. New Media Revolution And Its Relationship To Artists

Visual arts comprise many forms of art—painting, drawing, sculpture, music, literature and performance art being the most widely recognized. However, with the technological revolution, others forms have emerged.

Leandro-Lima in What Do We Really Mean By Art?
Leandro Lima

So, what exactly is the relationship between these new forms of expression and contemporary artists? Max Kostenko and Pino Lamanna kindly answered my questions, giving us insight into the topic.

Max Kostenko is a Russian illustrator. He specializes in 3-D digital illustration and character design. He works as a freelancer for many Russian studios and agencies worldwide, such as Kotetkat and Lemonade.

Pino Lamanna, also known as SchakalWal, is an illustrator and graphic designer from Germany who specializes in corporate design, character design and typography.

Question: Please introduce yourself and your work. How did you get started in the field?

Max Kostenko: My name is Max Kostenko. I’m 23 years old, and I am an artist and illustrator from Moscow. I have been doing illustrations for about one year. Before, I worked for three years as a Web designer in various Moscow Web studios.

Pino Lamanna: Hi. My name is Pino Lamanna. I am a 27-year-old half-Italian, half-German digital artist living and working in the city of Wuppertal, in Germany.

I currently work as a freelance designer, specializing in unique branding, handmade typography and character design. Most of my work is highly influenced by graffiti and street art, old-school cartoons and the music I listen to. My aim is to create stylish, unique and useful designs with an urban twist.

I took my first steps as a designer as a little kid, drawing comic strips with my own superheroes. Later, in my teenage years, I became interested in the graffiti and street art movement.

The first thing that attracted me to digital art was photo manipulation. Through that, I was introduced to Adobe Photoshop and several digital art communities. Later, I switched my focus to illustration, branding and typography, which I think suits me best.

Question: Tell us a bit about your artwork. What software do you use? How hard was it for you to learn?

Max Kostenko: In my work, I use only Photoshop. I started studying it when I wanted to start working as a Web designer. But as years passed, I understood what I really wanted to work on, because I found the job of designer boring, and so I started drawing some silly little men; that is, I tried to understand many of the principles by drawing them. In Photoshop, I do not use many tools to make my work look artistic—I just choose my normal round brush and start drawing.

Max-Kostenko in What Do We Really Mean By Art?
Max Kostenko

Pino Lamanna: Even though for the kind of work I specialize in, working in Illustrator or other vector tools would be common, I create most of my work in Photoshop. That might sound strange, but I can’t help it. There isn’t much of a difference at all, because Photoshop has vector editing capabilities, too.

Once I am happy with my design, I copy and paste to Illustrator to create the final output.

I cannot say that mastering Photoshop was difficult, because working in it has always been fun. The very first steps were kind of hard, though. I remember being overwhelmed by the gazillion options. It was learning by doing. I did a lot of tutorials, which I found online, to become comfortable with different techniques and methods.

Learning Illustrator wasn’t hard, either, because I was already used to the Adobe interface and I knew a lot of stuff about vector editing from Photoshop. And of course, there are tutorials for Illustrator everywhere.

Question: What is the main inspiration for your pieces? And how has the digital art community influenced your work?

Max Kostenko: My inspiration comes in different ways: sometimes after watching a film, sometimes from something I see in the street or on public transport. I always look for the work of known artists: it stimulates me to grow and improve my skills. I became acquainted with digital art through the Society of Digital Artists, and the first thought that came to mind was, “I could never draw like that.” But then I gradually drew things like leaves. Still, I’ve only began to walk the path of the artist and still have much to learn.

Pino Lamanna: Inspiration can come from anything, whether a cloud in the sky, an old movie or a box of sushi. My style has always been influenced by urban culture, music, movies, cartoons, etc. As a matter of fact, the digital art community has influenced my work a lot. Thanks to the Internet, I’ve gotten to know many interesting people and designers from all over the world, and in the end those communities have helped define me as an artist.

Question: How would you describe your creative process? What are some of its most important aspects?

Max Kostenko: The most important thing is a basic idea, I guess—a plan. If you have one, you can start drawing. Sometimes I get in my head a general sense of the result, and so I begin with the big shapes, placing them in a composition. When I’ve got the result, I start to color it, the most difficult thing for me. At the end, I complete the final details.

Pino Lamanna: I always have pen and paper by my side, even in my bedroom. You never know when ideas will pop in your mind, and you better save before you forget.

Brainstorming and sketching are crucial for me. If ideas pop up while working on my computer, I’ll usually put aside all the stuff I am doing and try to directly realize that idea in a design.

Pino-Lamanna1 in What Do We Really Mean By Art?
Pino Lamanna

When working for clients, research is very important. Without a detailed brief, finding a design to match the client’s needs and expectations can be tricky. Therefore, I always ask clients to fill out my design questionnaire.

Another important aspect of my creative process is patience. Often, I find a good flow and can’t stop working on a particular design until I am happy (and exhausted). However, before publishing, I always force myself to wait till the next day. I’ll often find things that need to be changed, tweaked or tuned up, when I am looking at my work with a little distance.

Question: Have you ever gotten into traditional art? If so, tell us something about that experience.

Max Kostenko: The thing is, I wasn’t trained in an art school. But since childhood, I have liked drawing and thinking of stories. I’ve always drawn with a simple pencil. After school, I tried to enter the Automotive Design College but was rejected… even having passed the drawing exams marvellously well.

Pino Lamanna: As mentioned, I was into comic drawing as a kid, and I trained hard to create the world’s most powerful superheroes and villains. I can remember only a single character from these days: Super-Frog. (I know that’s lame, so don’t be mean!)

Later, I got some experience with graffiti and street art. Never made it to the All City Kings, though.

So, I don’t have much experience with traditional art, because my main focus for the last couple of years has been on digital.

Question: How would you define your relationship to traditional art? Who is your favourite artist?

Max Kostenko: I often visit the Tretyakov Gallery, and I can’t believe people could draw like that on a canvas centuries ago. I am surprised every time by the talent of classical artists.

I like Russian landscape artists. Vasily Polenov and Ivan Shishkin are top in skills for me.

6. Communication And Self-Promotion In The New Web

The artist’s life is not as simple as it may seem. Standing out from the crowd is not easy, which is why self-promotion is essential.

I queried Bob Flynn, Alex Dukal, Jayme McGowan, Chris Piascik and Irma Gruenholz for their thoughts on the art of self-promotion; on how to spread ideas, concepts and a deeper vision of their work; and on the impact of this kind of marketing.

Bob Flynn is a cartoonist who is interested in illustration, comics and animation. He currently resides in Boston, where he works as an animator and game designer for the children’s media company Fablevision. His work has appeared in publications such as Nickelodeon Magazine and Improper Bostonian.

Alex Dukal is an illustrator who was born and raised in Patagonia, Argentina. From a very young age, Alex has published comics and illustrations in the legendary Fierro magazine.

Back in his home town, he dedicated some years to painting and teaching illustration and comics. After working for some time mostly in Web design, Alex decided to get back into illustration. At the moment, he’s working mostly on children’s books and creating illustrations for design agencies.

Jayme McGowan is a freelance artist and 3-D illustrator based in Sacramento, California. She works with cut paper and posts her artwork in her project journal.

Question: Do you have a portfolio website? And which social networks are you currently on?

Bob Flynn: I have a website, but I’m very lazy about updating it. And I find I get less traffic there compared to, say, my blog, which is infinitely easier to add to. A portfolio website is more of a structured presentation, which is great for art directors and people looking to make a professional assessment of your work. It’s often static, and it offers little to no opportunity for two-way communication. You get little to no interaction with the art community except for a friendly email or two a month. A blog is dynamic and opens that dialogue. I now think of my website as a hub to help direct people where they need to go.

In addition to having a blog (my primary point of communication), I’m currently on Twitter, Facebook, Flickr and, most recently, Google Buzz. Is being on all of them worth it? Probably. I’ve found that you really can’t be in too many places—though there is certainly a sanity threshold. A different audience traffics each social space (with some overlap), so the way to reach the most people is to be everywhere.

Twitter is currently the best place to track people in the industry and to communicate with your peers—but not everyone is there. Facebook is where most everyone else is, although juggling friends, family and business is admittedly cumbersome. You have to weed through the clutter (I’m less a fan of its increasingly unwieldy interface), but you can certainly get traction over there. Flickr is the most straightforward: upload artwork, leave and receive comments. Buzz is new to the game and still hasn’t developed an identity of its own. But it’s another place you should probably be.

I can track most job leads and connections back to a tweet here or a comment there. Not to mention great friendships. Simply by spending time in these spaces, saying “Hi” and participating in a positive way, you really can’t go wrong.

Bob-Flynn in What Do We Really Mean By Art?
Driven by an obsession with off-beat cartoons that are grounded in optimism and tinged with the grotesque, Bob Flynn keeps busy spinning nonsensical creatures into comics, illustrations and animation.

Alex Dukal: Yes, I have had a portfolio online since 1998, and I currently use Facebook a lot, Twitter not so much. I really like Flickr. I used Orkut when it first came out. I tried Google Buzz and did not like it. Every now and then I take a look at Google Wave to see if it’ll ever turn into something interesting. I have a Netvibes account that I hardly use. I have an account on Dribble. As you can see, I like to test new tools.

Jayme McGowan: Yes, I have a website for my portfolio, and pages on Facebook, Flickr and Etsy, and I recently caved and am now on Twitter as well.

Question: Do you write articles for your own blog or for other blogs and publications? Would you consider either an effective way to get your name out there?

Bob Flynn: I regularly post artwork to my blog, and I have written a few Flash drawing tutorials. Simply having an online presence is a good start, but think of the impact you could have by sharing information, ideas and helpful tips. People enjoy reading about process, so document your methodology as you work, and it will make for more interesting posts.

I wouldn’t be in this just to get my name out, though. If you’re all for show and self-promotion, you risk turning people away. Participation is key: I enjoy reading about what everyone else has to say. There’s more value in that, really.

Alex Dukal: I started writing little news on my website using Grey Matter, an old tool for blogging. Then I switched to Textpattern, and finally I separated my portfolio and blog (now in Blogger) as a matter of convenience. In the blog from time to time, I’ll write an article or tutorial. Judging from the feedback I get, I’d consider it an effective method of promotion.

Jayme McGowan: I have a blog where I post images of my work in progress and updates on current projects I’m involved in. I use it to give readers some insight into my process. I think it definitely gets people more involved in my work. Most of the visitors to my main portfolio website were directed there either from my own blog or from someone who did a post about my work on their blog. I think if you keep your blog up to date and post regularly, it will be an invaluable tool for getting your name out there.

Question: What are the challenges of creating a self-promotion strategy? Have you implemented a self-promotion strategy for yourself? Has it worked? If one is starting from scratch, how long does it take for a strategy to start working in their favor?

Bob Flynn: To be honest, I can’t say I’ve ever architected a real strategy. You’re talking to a guy who’s never even sent out a promo card. My approach has been to put myself out there and see what happens. Sort of the like old adage, “Just be yourself”—that’s how you stand out from the rest of the pack. I try to update my blog at least once a week to keep people coming back. Keeping up with your website’s stats is a good way to see what’s sticking (i.e. where your traffic’s coming from and what your most popular posts are).

Alex Dukal: Yes, of course, as a freelance artist, self-promotion is absolutely necessary. I think the first challenge is having something to say, something to show, a reliable portfolio to back up that promotion.

Personally, I placed my bet on a portfolio that shows my best work, something that showcases the illustrations rather than the website interface and that makes it accesible and simple. And then there’s the blog, which allows me to maintain other kinds of contact with people: social networks, forums, contacts database, etc. It’s a big garden; one must water and take care of it every day.

I think a strategy of this kind should be thought of in different phases. And you can’t expect a miracle before six months (though miracles do happen).

Alex-Dukal in What Do We Really Mean By Art?
Alex Dukal

Jayme McGowan: My self-promotion strategy is fairly simple and involves social networks, as I mentioned earlier. When I got started creating a presence online, I came up with a plan by looking at the networks that successful artists who I admired were involved in, and I tried to do something similar. I was fortunate enough to generate interest in my work early on just by posting photos on Flickr and becoming an active member of the Etsy community. Many people who commission work from me say they found me on one of those two websites.

Now I use Facebook and Twitter (and my blog, of course) to keep people posted on what I’m up to. But to succeed in promoting yourself on any of these networks, you have to be truly interested in making friends and business contacts. You can’t just scream, “Hey, look at me!” all the time without giving anything back. I guess I have a subtler approach to self-promotion: let people know what you’re up to from time to time, and trust that they’ll follow you if they like what they see.

Question: Do you regularly submit your work to online galleries? Is that useful for gaining credibility and getting feedback on your work?

Bob Flynn: I created an account on a great website run by Nate Williams called Illustration Mundo a few years back, but I’ve never put my work in an online gallery (or paid for anything of the sort). I guess I view my blog as having that purpose. Flickr is a kind of gallery, though.

Alex Dukal: Not at all to both questions. Ten years ago, if someone invited you to show some of your work in an online gallery, it was cute, flattering. Today, I think we have to be careful, because the selection criteria is often not that great, and one must pay attention to those details as well. If you display your work in the wrong place, it could have a negative result. In principle, credibility should come from the work itself.

Jayme McGowan: I have a profile on Illustration Mundo, which is a great website that functions mainly as a directory of illustrators, not a gallery per se. Honestly, I don’t participate in any online galleries. I’m sure that’s a great way to get feedback from your peers, but I don’t know that it will give you added credibility as a professional. I can maintain only so many Web pages myself, so I try to limit them to the ones I get the most benefit from, those where I believe art directors and buyers might find me.

Jayme-McGowan-1 in What Do We Really Mean By Art?
Jayme McGowan

Chris Piascik is a freelance designer and illustrator who is active in the design community. With six years of professional experience at award-winning firms in New England, he has had work published in numerous books and publications, including the Logo Lounge series, Typography Essentials and Lettering: Beyond Computer Graphics. He currently posts drawings on his website daily.

Irma Gruenholz is a Spanish illustrator who specializes in clay and other materials, allowing her to work in volume. Her work is used in books, magazines, advertisements and online marketing.

Question: Are you an active participant in every social community you have joined? How much time do you set aside to interact in social media? Do you commit to posting new work and personal updates regularly?

Chris Piascik: I stay active in quite a few social communities. I admit that I have joined some that I couldn’t keep up with though! I don’t really schedule time for social networking, although that’s probably a good idea. Instead, I scatter it throughout the day, whether it’s browsing Twitter on my iPhone while exporting a big file on my computer or procrastinating the start of a new project. It’s all about multi-tasking! I think the biggest thing that has helped me with social networking is my daily drawings. I post a new drawing Monday to Friday on Flickr, and from there I post it to my personal website, and those updates flow to my Twitter and Facebook accounts.

Chris-Piascik in What Do We Really Mean By Art?
Chris Piascik

Irma Gruenholz: Yes, I have a blog, and I participate in some social communities, such as Flickr and Behance. Unfortunately, I don’t have much time for a very active presence. I would like to devote more time because it is a good way to keep up with and see the work of other artists.

Question: At the moment, which community is the most valuable for finding job opportunities?

Chris Piascik: I think most of the networks out there have value. I do think Flickr works really well, though. My Flickr page seems to get the most traffic out of all my websites. Flickr is so vast that a lot of people use it for image research. I think my daily updates help my work not get lost.

Irma Gruenholz: Based on personal experience, Behance is a good platform for showing your work to art directors and art buyers. I’ve gotten some work through it.

Question: How important is crafting the messages you send out and keeping your website looking professional?

Chris Piascik: I don’t censor myself that often. I think keeping things honest is a good thing. My work has some personality; much of it has a loose quality—pairing that with a cold or professional Web presence would seem odd. Expanding your social networks requires you to be yourself… just as long as “yourself” is interesting!

Irma Gruenholz: Internet presence is very important for the artist. It is the best way to exhibit your work to the rest of the world. So, keep your website updated, and make it easy to communicate with people who want to follow your work.

Irma-Gruenholz-1 in What Do We Really Mean By Art?
Irma Gruenholz

Question: How do you make time for social networks? Are you committed only to websites from which you can get some professional benefit?

Chris Piascik: I have completely given up sleep. I really just sprinkle it throughout my day. It’s a nice way to start my day while drinking my coffee or eating some lunch. I wouldn’t say that I limit myself only to websites that I benefit from, though my opinion is that all networks help. Visibility is visibility. I use social networking to stay in touch with friends as well, so it’s not strictly business for me.

Irma Gruenholz: I have little time to devote to social networks, so I prefer to focus on communities related to my profession.

Featured Artists

To grasp the meaning of art and how it has evolved over time, I interviewed Alexander Daniloff and Jonathan Ball. To explore the aesthetics of digital art, I spoke with Jan Willem Wennekes, who touched on some important points related to the differences between digital artists and other artists and the nature of digital art itself.

I also feature Nate Williams and Travis Lampe, in an effort to learn more about their work and their relationship to technology, including digital art tools and social media, and to explore the way the Internet influences the development of art.

To better understand the relationship between contemporary artists and new methods and tools for creating art, I’ve interviewed Max Kostenko and Pino Lamanna. I focused on their creative process and professional experience, from their entry into the field right up to their current sources of inspiration.

Finally, I interviewed Bob Flynn, Alex Dukal, Jayme McGowan, Chris Piascik and Irma Gruenholz, asking their opinion of the challenges that artists face when promoting themselves and their work in the new Web, trying to capture their experience with social media and online art communities.

Each of these artists has a particular style and is an active member of the artistic community. As such, they could be a source of inspiration to many. I hope their insights are helpful.

What about you? What does art mean to you?

(al)


© Marilina Maraviglia for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

Smashing-magazine-advertisement in Designing Style Guidelines For Brands And WebsitesSpacer in Designing Style Guidelines For Brands And Websites
 in Designing Style Guidelines For Brands And Websites  in Designing Style Guidelines For Brands And Websites  in Designing Style Guidelines For Brands And Websites

A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

Edward Tufte once said: “Great design is not democratic; it comes from great designers. If the standard is lousy, then develop another standard.” Although there’s no stopping some clients from making their website awful, by creating a style guide, you’re effectively establishing rules for those who take over from you.

Why Create A Style Guide?

  • You’ll have an easy guide to refer to when handing over the project.
  • Makes you look professional. They’ll know you did everything for a reason
  • You maintain control of the design. When someone does something awful, you can refer them to the document.
  • You avoid cheapening the design, message and branding.
  • Forces you to define and hone your style, making for a more cohesive design.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Branding Guidelines: What To Include?

Strategic Brand Overview

This should be short and sweet. In as few words as possible, make clear the vision for this design and any keywords people should keep in mind while designing. Most people will probably flip straight to the picture pages, but they may read a few sentences here.

Kew in Designing Style Guidelines For Brands And Websites
See Kew’s branding guidelines.

Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Even if you read only the first sentence, you get a sense of what it’s trying to do. While Kew has quite a few of these message pages, they are intertwined with beautiful photography that themselves define the photographic style and primary message.

Logos

For print and Web, most brands revolve around the logo. Make sure you provide logo variations and clarify minimum sizes.

Cunard in Designing Style Guidelines For Brands And Websites
See Cunard’s branding guidelines.

Cunard provides many variations on its minimum sizes. Because its crest can be displayed either on its own, with the name or with the tagline, specifying minimum sizes is important for legibility (for example, if the logo with the tagline is too small, it will be illegible).

Think Brick in Designing Style Guidelines For Brands And Websites
See Think Brick’s branding guidelines.

Provide logos with different colors, and specify which colours are allowed. Think Brick gives designers a lot of options with its design. The point is to allow flexibility while maintaining consistency.

Show Examples of What and What Not to Do

You’re a professional, and you know better than to mess around with logos. But many others will try and think they’ve done a good job. They are so wrong. You must make clear what they can and cannot do with a design.

I Love New York in Designing Style Guidelines For Brands And Websites
See I Love New York’s branding guidelines.

I Love New York has done a great job defining all the things you shouldn’t do with its logo. It has also produced a beautiful (though bit wordy) document.

Spacing

Many non-designers underestimate the need for white space. Include a spacing reference, especially for the logo. Rather than specifying inches or centimeters, use a portion of the logo (a letter or a shape) to set the clearance. This way, whether the logo is big or small, the space around it will be sufficient.

Blackberry in Designing Style Guidelines For Brands And Websites
See BlackBerry’s branding guidelines (PDF, 2.2 MB).

BlackBerry not only explains its spacing policy, but also uses the capital B in the logo to define the clearance.

Colors

Always include color palettes and what the colors should be used for. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colours and when and where to use them.

Channel4 in Designing Style Guidelines For Brands And Websites
See Channel 4’s style guide.

Channel 4 shows all of its Web and print colors, and it displays the swatches below an image that helps to define its color palette.

New Uni in Designing Style Guidelines For Brands And Websites
See the New School’s branding guidelines.

The New School is clear about its primary colors and defines them for both print (Pantone and CMYK) and Web (RGB). Its brand guideline document is beautiful, too.

Chris Doyle in Designing Style Guidelines For Brands And Websites
See Christopher Doyle’s Personal Identity Guidelines.

Okay, so this one isn’t a traditional branding guideline, but rather a personal identity guideline. Here Christopher Doyle shows off some alternative color palettes. He does a fantastic job of mocking branding guidelines; well worth a look (and chuckle).

Fonts

You’ll need to define the typefaces to use: sizes, line height, spacing before and after, colors, headline versus body font, etc. Make sure to include Web alternatives for non-Web fonts.

Yale in Designing Style Guidelines For Brands And Websites
See Yale’s typeface.

Yale has its own typeface, which it provides to its designers.

Yale2 in Designing Style Guidelines For Brands And Websites
See Yale’s Visual Identity page.

On the typeface section of its website, Yale also details when fonts should be used. It has a specific Web font section, detailing which fonts to use there.

Layouts and Grids

By setting up templates and guidelines for grids, you encourage best practices and promote consistency. In Web, preparing some generic templates can curb excessive creativity with the layout.

Barbican in Designing Style Guidelines For Brands And Websites
See the Barbican’s branding, print and Web guidelines.

For its website, the Barbican has set up building blocks that are both flexible and ordered—meaning they’re likely to remain in a grid.

Tone of Voice

A huge component of a brand’s personality is the copy, and defining the tone is a great way to keep a brand consistent. When multiple people are writing the copy, the brand can start to sound like it has multiple personalities.

Easyjet in Designing Style Guidelines For Brands And Websites
See easyJet’s branding guidelines (PDF, 2 MB).

easyJet has a well-defined personality, both verbal and written, and it gives examples for both.

Copy-Writing Guide

For those who require clients to write their own copy but want to maintain consistency, a copy-writing style guide can be helpful. Copy-writing is one of those things that most people register subconsciously. When reading, your brain automatically looks for consistency and patterns, and poor copy-writing can ruin the reading flow.

Can in Designing Style Guidelines For Brands And Websites
See CAN’s branding guidelines (PDF, 845 KB).

CAN wants its number formats to look the same. On another page, it defines which spelling variants to use, reminds people of common mistakes and more.

Imagery

Many designers have established a particular tone in their photographs and images. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.

Zopa in Designing Style Guidelines For Brands And Websites
See Zopa’s style sheet (PDF, 3.7 MB).

Zopa has done a fantastic job of making its illustrated style clear. Its online style guide is very good, and it offers further tips on how to construct pages around its illustrations in the online style sheet.

Bring It All Together

Show a few examples of what the logo, photography and text look like together and the preferred formats.

Skype in Designing Style Guidelines For Brands And Websites
See Skype’s branding guidelines.

Skype has done a fantastic job of showing how it want designers to use its illustrations and photography. It has examples of the subtle differences between good and bad usage. The whole guide is beautiful and well worth a look.

Web Guidelines: What To Include?

Many people create branding guidelines but forget to include important style guides for the Web. Just like branding guidelines, Web guidelines keep everything consistent, from button styles to navigation structure.

Button Hierarchy

You’ve carefully decided what all the buttons are for and meticulously defined their states. Unfortunately, the in-house designer hasn’t applied your hover states or has created their own, and they look terrible.

Create a page that shows what all links do (including the buttons), the appropriate behavior of each and when to use them (with examples of appropriate usage). If one button is dominant, make clear the maximum number of times it should be used per page (usually once at most). Define the hover, disabled and visited states for all buttons.

Gumtree in Designing Style Guidelines For Brands And Websites
Gumtree.

Gumtree has worked hard to define all button states, especially custom buttons (for example, Post an Ad has a + sign in front of it). These were defined for the Gumtree redesign, which is now live.

Icons

Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, make this clear.

Icons in Designing Style Guidelines For Brands And Websites
See ZURB’s icon sizes.

Here, the ZURB agency defines icon sizes and when to use them, and it provides clients with an online source from which to download them. ZURB also defines badges and explains their purpose. It believes that its guidelines are best shared online.

Navigation (Logged In/Out States)

On the Web, good consistent navigation can make or break a website. New pages are often added to a website after the designer is done with it. Have you left some space for this? Doing things like letting people know what to do with new navigation items and showing logged-in states make for a cleaner website.

Bbc in Designing Style Guidelines For Brands And Websites
See the BBC’s Global Experience Language.

This is one of the most beautiful guidelines I’ve seen. BBC shows what to do with long user names, how much space everything should have and more.

Basic Coding Guidelines

There’s no way to make someone else code like you, but you can offer others basic guidelines that will minimize the damage, such as:

  • CSS class naming conventions
    Should they use .camelCase or .words-with-dashes?
  • JavaScript integration
    Are you using jQuery? MooTools? How should new JavaScript be integrated?
  • Form styling
    Include the code, error states and more so that they understand what style conventions you expect.
  • Doc type and validation requirements
    Do you allow certain invalid items? Do you expect the CSS and HTML to validate?
  • Directory structure
    Make clear how you have organized it.
  • Accessibility standards
    Should people include alt tags? Is image replacement used for non-standard fonts?
  • Testing methods
    Which standard should they test with? Do you have staging and production websites?
  • Version control
    What system are you using? How should they check in new code?

How To Format

Some branding guidelines have been turned into beautiful books:

Truth in Designing Style Guidelines For Brands And Websites
See the Truth brand guidelines.

This beautiful example, which was designed to go with a brand redesign, shows just how beautiful branding guidelines can be.

But this requires a substantial budget and a reprint every so often. For most companies with tight budgets, this is not practical. On the Web especially, content is constantly being refined and styles for elements are not set in stone.

Here are a few good practices for formatting your guidelines:

  • Include a cover
    This should include an example of best practices for the logo.
  • Make it beautiful
    Even if it won’t be printed as a book, you can still make sure the branding guidelines appeal to the viewer. After all, you’re trying to inspire them to use your designs to the highest standards!
  • Include contact details
    For when they have questions, so that you can prevent bad decisions from being made.
  • Make it easy to access and open
    Usually this means putting it online or in PDF format. Don’t make it too big; use images sparingly.
  • Make it printable
    For international companies especially, keep margins big so that the document can be printed in both A4 and US letter sizes. If it’s online, make sure your print style sheets render the document as expected. Don’t do white text on a black background, either: you don’t want the client to have to buy a new ink cartridge every time they print a copy.
  • Make it easy to change
    Updating, adding new pages and making changes should be easy, because it will happen!
  • Create a mini version
    Make a short handy guide that has just the basics, in addition to the full version. Both will get used in different instances.
  • Provide print templates whenever possible
    Things like letterheads, business cards and envelops should have their own templates. While guidelines will help people put things in the right spot, they usually won’t help them get the right resolution or color format.

Template in Designing Style Guidelines For Brands And Websites
Here’s a useful template for a one-page branding guideline.

Length

Remember, people should be able to follow branding guidelines. A 100-page book will engage none but the most diligent designer. Many believe that a concise three-page overview is best for daily use, with a more in-depth 20-page document for more complex tasks. Less is more, usually!

Bbc Poster in Designing Style Guidelines For Brands And Websites
See the BBC’s branding guidelines and poster.

The BBC has created a detailed 38-page guideline. But it has also produced a beautiful poster for quick reference. It’s a brilliant idea, and it keeps the guidelines at the front of mind.

Resources

Related Posts

You may be interested in the following related posts:

(al)


© Kat Neville for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,

Smashing-magazine-advertisement in The Creative vs. The Marketing Team: Yin And Yang, Oil And WaterSpacer in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water
 in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water  in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water  in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water

Smashing Editorial: Please notice that the language in some parts of this article may be very informal. If you think you might be offended, please stop reading this article now.

I hate the division represented in this title. It’s the major stumbling block in modern business. Power struggle is never constructive, and it at least doubles workforce effort at a time when streamlined is crucial for a positive ROI. You can spell “team” from the word “marketing,” but I’ve yet to see a sense of it in marketing. What can one spell from “creative”? “Reactive”? I’ve seen plenty of that, and for good reason.

Don’t get me wrong: I love marketing as a practice! Relatively speaking, marketing is a fairly new practice (marketing in the sense of “public”, broad mass marketing, applied to products in the modern age — ed.), and one that has to evolve each day to keep up with consumerism and technology. As a designer, coming up with marketing ideas is orgasmic. Guerilla, sabotage and viral marketing are the work of genius, which is why we don’t see them very often. But you are probably thinking horrid thoughts about marketing practitioners right now, so let’s rethink for a second.

I have known a handful of great marketing people in my career, and they were smart enough to form their own companies. They always managed to do the delicate dance to create something that was effective and not just popular with anyone who might, oddly enough, have an opinion. And then there are the people you see every dreadful day.

Stampout in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

It’s A Diverse Crowd Out There

I have a ton of marketing stories, but my favorite one comes from when I was art directing and designing a major push for a new licensed character across all marketing channels. The staff and I worked like crazy to get the lines done in time for approval. It took months — that’s how many lines there were.

After our submission for approval from the licensor, a member of the marketing staff, lower level, came to me, telling me the changes that were needed. First off, don’t tell someone the changes: write them down so that there’s no misunderstanding. Luckily, I was taking notes. One of the changes called for major surgery on the main character to remove markings on their face. It made no sense to me, and I questioned it, but he stood fast and insisted that that’s what the licensor wanted. I asked to see the email from the licensor.

“No.”

I asked that he email the licensor to ask for clarification.

“No.”

The most infuriating thing was that this over-sized man with a cherubic face, looked like Baby Huey from the old Harvey Comics. Sounded a bit like him, too. It was hard to speak with him without laughing. As his new nickname circulated through several departments, a contest started among the staff to try to deal with Baby Huey without laughing.

I knew trouble was brewing, and so, like any smart person who would make file copies or turn off layers, the art staff and I stated cutting the image and placing everything the licensor wanted removed on a hidden layer. We did this to hundreds of pieces. A month later, we submitted the changes, and then (surprise, surprise) the licensor ripped marketing a new one for removing the marking, so essential to the character. An impromptu witch-hunt was held right outside the art department, next to the marketing offices. The president personally led it.

Without wasting any more column space than is needed to state the obvious, Baby Huey was spanked… and I believe the president actually asked him, “What is your major malfunction, Baby Huey!?”

The best part was when I was asked how long it would take to fix it. Explaining to the lay person that I would simply turn on some layers in Photoshop took longer than actually turning them on, but I scored big points with the president, while my “marketing step-brother” was sent to military school.

This doesn’t happen enough. But it does and can happen! At another corporation, marketing was publicly spanked for taking eleven-and-a-half weeks to work on an initiative that had only twelve weeks in total — giving creative, copy and design three or four days to execute lines for hundreds of products. Creative would always get it done, so action to stop it took a while, but the grumbling and angry staff meetings got some relief in the form of at least six weeks.

Are We Or They The Strange Ones?

What do creatives look like to non-creatives? Obviously, everyone thinks they can design an ad or logo in Microsoft Word, so immediately we become snooty, whining snobs. A great marketing person I worked with wrote a recommendation for me and said, “…great designs without a lot of creative baggage!”

“Creative baggage.” What could that mean? For anyone who has wrangled creatives, whether staff or freelance, we can be intolerable freaks. It’s hard to remember the last creative who actually followed my art direction without an argument or apology. We are also weak and lack the social skills to deal with corporate power. We often give up our power in an effort to be seen as “flexible” or “a team player.”

An art director who was firmly a puppet on the hand of the company she worked for gave me this recommendation: “He usually hits strategy, but if some adjustments need to be made, he is very open to suggestion and direction. [Speider] has worked with our team for a long time and understands our process.”

The process was that I went into meeting all smiles, told a few jokes and did exactly what I was told to do. The pay check helped me live with myself.

Drinkblood in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water

In most cases, that means doing what you’re told by anyone bold enough to speak their opinion about the creative process and not be questioned. I have had to pull marketing co-workers aside and remind them that we were both reporting to the same person and that no one ever told me anything about reporting to them. I’m not “being difficult”: I’m taking control of my work for my department so that I don’t have to take the fall for failed initiatives and low sales down the road that result from someone else’s design decisions. I never get angry or aggressive, although people who have worked with me say that my sarcasm could be deadly at times. Baby Huey’s ghost haunts me.

Be Different, But Expect The Same

Just the other day, a client showed me a product catalog that I thought was from 1972. It was their 2010 catalog, and the creative department’s directors asked me to bring one of their paper products into the present (or future) and do “something different.” I love when they say that.

I did some of the finest work of my career… some good work. The creatives were really on board, and revisions were almost non-existent. Imagine basically having free reign to design some fun and impressive paper products and having the full support of your clients? Well, no good effort goes unpunished, and I was informed that the marketing department rejected the work in favor of a catalog that looked like a sequel to the one from 1972.

Incharge in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water

What has the fear in business done to our ability to make fast, hard decisions in the marketplace? Safe and take-a-step-back has gotten us into the mess we’re in right now. How do we get out of it? I include this passage from someone who would refer to himself only as a “suit.”

I have to have the confidence that the design solution is meeting the needs of the client and is achieving strategic/tactical goals. Because of that, if there are elements of your design that I’m uncomfortable with, I will call them out and, in some cases, will nix them. Similarly for the client, they have to be comfortable about how their own brand is being presented, how their market will react, even how their own staff will react.

“How their market will react.” That should be the only concern. And how did this “suit” become the tip of the approval funnel? The truth is that people can’t let go without second- and third-guessing what will be successful. It’s not a question of whether, say, a good marketing plan based on researched demographics would improve a creative brief that professional designers and writers could use to create a cohesive package. The reality is more like, “Just design, and I’ll make changes until I see what I like.” That always makes for a great waste of time and resources.

Business is tight for many reasons, but just one wrong move could cost you big time. My question is, if the marketing plan is sound and the sales staff is competent, then why would those simple little changes that are requested to please people truly affect the product?

”You know, Bob, I was about to buy that package of Fluggelbinders that I wanted, but I couldn’t bring myself to do it.”

“Too expensive?”

“No. The color of the package turned me off.”

Happens like that every day, doesn’t it?! I used that exchange in a committee meeting in which the background color of an exclusive product was discussed and sampled for a week. The marketing manager turned to me and said that I had negated marketing’s input. I thought marketing’s responsibility was to figure out the target audience, their habits, income and so on and how to best reach them through media and other advertising venues — not how blue or green the product should be? Silly me! Maybe it’s a marketing secret that can’t be shared with creative. They’re spies for… something.

Do You Want To Get Involved In Office Politics?

What can one say when sitting in a committee meeting and subjective suggestions are flying around, usually contradicting each other, and people are echoing previous requests but adding “More red” or “Bigger logo” or “I’ll know when I see it”? I sit and listen, take notes and then turn to my contact (if it’s a freelance job) and ask what he or she would like me to implement. To be sickeningly submissive, I say, “Some great insights here, but some are counter to the creative brief and some other directions suggested here.”

I turn to the art director, boss, marketing person or whoever hired me and ask them to go over what they think will be needed. Usually, they tell me just to follow what I was told in the committee meeting. This is when I’m thankful for hourly rates, because the Frankenstein created by the committee is usually too monstrous to please anyone. It goes around and around as long as more than one person has a final say on the project. Imagine what would happen if too many cooks worked on a dish. The chefs I know are insane and would stab and de-bone each other.

When freelancing, you are removed from the eternal struggle between creative and marketing. You are only a tool used by creative and a bludgeon used by marketing to wield its power over creative. Just ignore it and let the creative department deal with it.

But what happens when you are the art director or designer on staff? If you are, then prepare for office politics. The struggle between creative and marketing has nothing to do with design or marketing: it is the good old human impulse to assert one’s power over others, to be the alpha dog.

Whatever your position or department, everyone in it is jockeying for some measure of power over others, from the frowning minimum-wage guard at the front desk who tells you to sign in (as you’re doing it) to the mail deliverer who won’t give you your mail away from your desk to the co-worker who tries to convince you that part of their job is now your job or that part of your authority is now theirs.

Humans usually spend a lot of effort blending in with the herd and shying away from confrontation. Confrontational people know this and use it. When the person taking your order asks if you want to super-size it, do you say “Sure” or “No”? You say yes because your brain and protective nature tell you to go the easy route and say yes. Less aggravation. Why do good girls like bad boys? Because we… I mean they go against the herd, they break with convention, and they’re confrontational.

Pi Cramit in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water

So, it stands to reason, while you’re in the workplace — where you face the pressure of HR rules, progress reports and the ever-present cliques of workers and executives — that you would feel alone and stay away from confrontational co-workers. But you can bet that they will at least size you up from day one, if not start stealing your authority and setting a standard that will follow you throughout your career at that firm.

You must start a new job with basic knowledge of your rights as an employee. Listen, and be bold, compassionate and assured. Show no fear, and show that being flexible is not the same as being a wimp. Any business book will tell you that the weak die. You have to set your own boundaries when starting a job. If you “wait and see,” then standards will be set for you as you adjust to the learning curve. If you relinquish any territory, you will not be able to get it back. You will open yourself to charges like, “That’s the way it’s always been done, and you said nothing last time.”

(By the way, a comeback to that last line is, “It may have been done that way in the past, but part of my job is to streamline the process to get the best results, faster and more efficiently. I’m sure you’ll love what my system will do for the workflow and product.”)

As with any situation, your gut will tell you what’s right and wrong, as will your job description. To whom do you report? To whom do others report? If a marketing person reports to the same person as you or is lower on the corporate ladder, why would you let them dictate anything if you were not told to follow their lead? Sometimes, someone may be assigned to oversee all aspects of a project. In that case, they are the boss, and that’s that… but that role ends when the project ends.

If a colleague of yours on the same rung of the corporate ladder makes a poor suggestion in a committee meeting, it’s best to nod and just not execute it. Either you’ll never hear a word about it or the colleague will approach you about it — in which case you shouldn’t respond that you don’t have to take their suggestion, which could be labeled as “confrontational” (it’s always the people who defend themselves who are “confrontational”), but rather that their idea, after much consideration, was found to have no merit. Simple and easy. It deflates their ego and could lead to sexual performance problems down the line. How can you argue with that?

“I thought my suggestions were good!”

“Sorry, but I didn’t think so, and no one else echoed your concerns.”

(This cuts the person off from others by setting a line that people would rather not cross. You are showing strength as the alpha dog. The pack will fall on your side.)

A more direct and devastating attack would be to ask, “Why do you think I’m incapable of doing my job?” This is a heart-stopper because it cannot be answered. They may argue that you lack team vision or that they’re protecting the client’s interests. Again, ask why they think you haven’t fulfilled the team’s vision, drawn from the creative briefs, and why they see you as acting against the client’s interests.

It’s like a fistfight. It lasts only a few seconds before the herd breaks it up… Yes, this is confrontation. Even confrontational people are taken aback when confronted, unless they are psychotic — in which case, pray that HR rules keep them from turning violent. And if they do become violent, taking a knuckle sandwich from your lunchbox is a small price to pay to see the aggressor fired and spend a night or two in county jail awaiting a bail hearing, opening the way for you for a civil lawsuit. A win-win situation!

On the other hand, you might encounter a “squeaky wheel,” who runs to the boss demanding “respect” and a title over you. Often, in the interest of a quick resolution, the boss lets the squealer have their way. You’re only hope is to calmly state your case, note your accomplishments without the squealer’s input, and add that it’s a business office and not a therapist’s office for people to work out their personal problems by laying them on others. Firm, direct and sound.

If Squeaky gets their way, then you’re doomed. But then, you don’t really want to work in a place like that anyway. If the boss would so easily knock you down the ladder, then you need a new boss. If you get your way, others will fear confronting you. I think coining the name for Baby Huey may have frightened my colleagues into avoiding my displeasure and gaining a nickname of their own.

The Enemy Within?

Once you establish that you are not a push-over, most people will respect your boundaries, and the natural order will be restored… with an occasional bump as a stray member of the herd probes your weak spots. Those weak spots, as some will discover, are your department colleagues: lowly designers and writers who will surely tremor when someone storms into the office and demands the changes that “I called for in the meeting.” Now you, as that lowly worker, have another problem. You have just given up your power to a stranger and put your creative director in a tough spot. Your actions affect how your supervisor controls the department and your job.

The proper thing to do is to tell the intruder that you are just a designer or writer and that they really need to speak to the creative director so that they can assign the proper revisions and work. Then smile and point to the creative director’s office. If your colleagues are on their toes, one of them will summon the creative director to come into the department and protect his or her minions from intruders. I’ve done it a gazillion times.

Summon your righteous indignation, flair your nostrils and imitate the tiger. When the interloper leaves, send an email gently reminding them that they must come to you for any requests, because only you know everyone’s schedule, and all changes must be signed off by you, as department head. Don’t assume that HR will intercede to stop this; they believe that the process should be flexible enough to keep work flowing. And as long as the bloody wound isn’t squirting arterial red like a fountain, HR likes as few problems as possible.

Points to Remember

  1. You were around. In fact, aside from occasional bathroom breaks and meetings, you’re around 12 hours a day on average.
  2. You are responsible for everything that comes out of your department and will be held accountable for it.
  3. People want their way and will try anything to get it.
  4. Don’t allow people under your authority to sabotage your power or security.
  5. Prepare a response to an objection or make a list of responses for when a ridiculous argument is used to attack you.
  6. HR wants the easiest path to peace and calm. Present all squealers as troublemakers and not team players. Use corporate-speak to your advantage.
  7. Sometimes you will lose the battle. Sometimes you will also lose the war. Form as many strong allies in the company as you can. The higher the executive level, the better!
  8. Does someone want to comment on a design in a conference meeting? Make some well-educated comments yourself. Perhaps you see a hole in the marketing plan, or the project doesn’t have enough creative time, or the sales material is a week past deadline. Bring it up gently and kindly. I believe that’s called passive-aggressive. Use it!
  9. Grab power, and don’t wait for it to be offered. Take on an extra project; start an initiative yourself; or earn a few million dollars for the company. They’ll sit up and take notice.

Power grabs are often made by people too incompetent to do their own work, and public displays of “directing” are thought to mask that incompetence. They often are. But handled correctly, they aren’t, because they won’t get the chance.

Every Relationship Has Good And Bad Times

When I worked at one large corporation, I was closing up my office and the art department at 7:00 pm on a Friday night when a young woman from the marketing department caught me in the hallway and asked to step into my now locked office. She immediately went into an act about how “her” project was so important and how I had to do it by Monday and email it to her because she would be away for the weekend.

I looked at her in silence. I asked who she reported to and learned it was one of my subordinates (if you went by the order on the corporate masthead). I told her I would talk to her boss on Monday to find out why she would have the utter nerve to hope that I would be in the office at 7:00 pm on a Friday night and then expect me to work all weekend on something that was not important enough for such a tight deadline. She stormed off.

Cantfly in The Creative vs. The Marketing Team: Yin And Yang, Oil And Water

I don’t remember why I was late on Monday, but as I walked down the hall, people were shouting for me to check my email. There was an email from the young lady I spoke with on Friday evening. She must have gone back to her office and written a very angry message, courtesy copying the entire corporate division, about how unwilling I was to work on her project, and how she was cancelling it, and how I was costing the company millions of dollars and immortal souls, and hail Satan, hail Satan, and so on.

In walks her boss, one of those fine marketing people who I mentioned do exist. The young lady had the project for three weeks (grabbing it as her first project and naturally wanting to make a big splash), and as I suspected, it wasn’t time sensitive… Mind you, she sat on it for the previous three weeks, and it did have to be at the printer the very next day. Being of sound minds, the head of marketing and I were able to come up with a solution, work hard together and make the deadline. Creative and marketing did it… together, with no arguments or stepping on each other’s toes or egos, and we both shared in the glow of accomplishment. It can happen. Maybe we just need guns to our heads at the time?

(al)


© Speider Schneider for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Visit our Blog Area

If you haven't noticed already but our web site will continually feed creative information into our blog area. Please take the time to visit occasionally to read the latest news in the creative arena.

Comments

    Archives