Archive for July, 2010

In Defense Of Photoshop

POSTED IN Blog | Comments Off

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: , , , , ,

What Do We Really Mean By Art?

POSTED IN Blog | Comments Off

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:

Ever feel like the online world is not full with enough good instructional design content? Over at Area 51, stack exchange’s awesome new staging zone there is a new site in the making. Can Berk Güder proposed the site idea. His basic concept:

Proposed Q&A site for professional graphic designers and non-designers trying to do their own graphic design (e.g. programmers creating icons/logos for their applications)

Screen shot 2010-07-20 at 12.45.10 AM

It’s had a good amount of proposed questions like: What is kerning?, Does this design look good?, Is it still important to use so called web safe colors anymore? etc. This would be a very good added resource to the design community. It’s also a place where knowledge and helpful instruction and learning could come from. Fuel Brand Network has become an official supporter in the cause for better more relevant content throughout the design world. If you are interested in this site hop over to Area 51 and sign up, commit to the project and help the design world have another great resource.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

A new Q & A Graphic Design site proposed from Stack Exchange

Smashing-magazine-advertisement in Seven Must-See Videos and Presentations for Web App DevelopersSpacer in Seven Must-See Videos and Presentations for Web App Developers
 in Seven Must-See Videos and Presentations for Web App Developers  in Seven Must-See Videos and Presentations for Web App Developers  in Seven Must-See Videos and Presentations for Web App Developers

In previous video roundups, we’ve collected together some interesting videos and presentations from a variety of speakers discussing topics covering usability, graphic design, CSS frameworks, web standards, and more. In this small roundup, we’ve included seven videos that we think would be of great interest to web app developers in particular, with less focus on design and standards.

These presentations are a little more technically heavy than ones we’ve featured in the past, but we think they’re worth every minute. Check them out, and be sure to comment to include links to any related videos that you feel are worth mentioning.

[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.]

Speed Up Your JavaScript

Speaker: Nicholas C. Zakas

As an interpreted language, JavaScript is filled with hidden performance issues that conspire to slow down your code and ruin the user experience. Learn exactly what is fast, what is slow, and what you can do to squeeze that last bit of performance out of your JavaScript code.

Notable Quotes:

“The problem is that JavaScript is slow… And the secondary problem is that people notice that it’s slow, because a lot of the web is about perceived performance. If your [code] is slow and people perceive it to be slow, then you're in a lot of trouble."

"Really the issue is, browsers aren't going to help you with your code. They don't care that your code is running slow, they're not going to do anything to adapt for it. So really, if something has to be done to speed up your code, it pretty much has to be done by you."

Series of articles by the author on the same topic:

Further Info:

HTML 5 and Internet Explorer 9

Speaker: Giorgio Sardo

Giorgio Sardo talks about HTML5, CSS3, SVG, and fast JavaScript support coming in the Internet Explorer 9 platform. His presentation includes demos showcasing the latest code, providing best practices on how to make web application standards compliant, fast and interoperable across browsers.

This is a humorous presentation that will be of interest to front-end developers who want to create cutting-edge applications while keeping up with the latest developments in web standards.

Notable Quotes:

"How many of you are still on IE6? You're more than welcome to leave the room now."

"Microsoft is committed to web standards. And I'm very serious when I say this. [audience laughter] It's not a joke!"

"Our job as browser vendors is to make sure that we give you a professional implementation of HTML5, something you can rely on, something that, if you start building your application today, in one year from now it will not break just because the standard changes."

Further Information:

Introduction to HTML 5

Speaker: Brad Neuberg

If you want to know what's new in HTML 5 but haven't had a chance to do much reading on the topic yet, this video by Brad Neuberg provides a solid introduction to HTML 5's most powerful capabilities and features. In this presentation he discusses five aspects of the HTML5 spec: (1) Canvas and SVG; (2) HTML5 Video; (3) The Geolocation API; (4) The HTML5 database and application cache; and (5) Web Workers.

This is a great video and a must-see for anyone that wants to start building powerful web apps using HTML5's newest features.

Notable Quotes:

"One of the things that's really unique about HTML5 is it [allows you to] drop SVG right into a normal HTML page, so it really makes SVG a core part of HTML."

"Currently, video is complicated, and it's outside your control... In 2009 video really should be a part of the browser... HTML5 now gives you a video tag that really works very similar to the image tag, so you don't have to have very complicated objects or plugins — video just works."

"Using all this JavaScript... we can end up not writing apps great, that end up freezing the browser, causing it to run slowly... HTML 5 gives you something called Web Workers, and this lets you run JavaScript in the background in such a way that it won't 'hose' or kill the browser."

Further Information:

eCSStender: the 'jQuery of CSS'

Speaker: Aaron Gustafson

In this video, Aaron Gustafson discusses an overview of his new JavaScript library along with demos and example code to demonstrate how it can be used. Along the way, Gustafson includes some interesting points on the history of the HTML and CSS specs. He also discusses the library's compatibility with IE6 and CSS3 selectors.

Ecss in Seven Must-See Videos and Presentations for Web App Developers

Notable Quotes:

"You can use [eCSStender] for patching older browsers... basically standardizing implementations across browsers."

"What the extension in the case of border-radius is doing is actually figuring out what it is that it needs to do and then building the implementation that the browser wants... It greatly simplifies the design process."

Further Information:

10 Things I Learned From the jQuery Source

Speaker: Paul Irish

This is a unique, informative, and entertaining screencast from one of the web's best JavaScript developers. Irish is funny and down-to-earth while he reveals some cool little nuggets that he's discovered from examining the jQuery source. The screencast is a remake of Irish's presentation at the recent Texas JavaScript Conference.

Notable Quote:

"Everyone... considers jQuery this black box, and this black box is this magical box that just works — it has this great API, we use it, we don't have to worry about how it actually works internally, we're not going to look inside the source and figure it out. But I'm here to say, if you do, I think you're going to benefit from it."

Further Information:

Steve Huffman on Lessons Learned at Reddit

Speaker: Steve Huffman

A presentation from Future of Web Apps Miami 2010 by reddit co-founder Steve Huffman. Huffman explains some of the most important lessons he and his development team learned while reddit was growing. This is a highly technical presentation that concludes with some audience Q&A.

Notable Quotes:

"If this talk had existed when we were starting reddit, I think it would have saved me a lot of time, so I hope something in here isn't obvious to you now and you can learn from it."

"I dreaded my phone ringing. Nobody would call me for any other reason than to tell me Reddit was down. Even my mother would call me and say, 'Steve, your website’s not working.' Thanks mom."

"Wasting disc and memory is totally fine if you’re not making your users wait. Discs and memory are far cheaper than annoying your customers."

Further Information:

The Paradox of Choice

Speaker: Barry Schwartz

This video, on the surface, is not about web development in any way, but provides an interesting viewpoint on "freedom of choice" and may well remind app and website designers to avoid bombarding users with choices and complicated options. Some very controversial insights are given here into what makes people happier, providing some food for thought for those concerned about usability.

Notable Quotes:

"The way to maximize freedom, is to maximize choice. The more choice people have, the more freedom they have, and the more freedom they have, the more welfare they have. This I think is so deeply embedded in the water supply, that it wouldn't occur to anyone to question it."

"[Having too much choice] produces paralysis rather than liberation. With so many options to choose from, people find it very difficult to choose at all."

Further Information:

Related Articles


© 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 When One Word Is More Meaningful Than A ThousandSpacer in When One Word Is More Meaningful Than A Thousand
 in When One Word Is More Meaningful Than A Thousand  in When One Word Is More Meaningful Than A Thousand  in When One Word Is More Meaningful Than A Thousand

You may be wondering why you’re reading about the good old semantics on Smashing Magazine. Why doesn’t this article deal with HTML5 or another fancy new language: anything but plain, clear, tired old semantics. You may even find the subject boring, being a devoted front-end developer. You don’t need a lecture on semantics. You’ve done a good job keeping up with the Web these last 10 years, and you know pretty much all there is to know.

I’m writing about HTML semantics because I’ve noticed that semantic values are often handled sloppily and are sometimes neglected, even today. A huge void remains in semantic consistency and clarity, begging to be filled. We need better and more consistent naming conventions and smarter ways to construct HTML templates, to give us more consistent, clearer and readable HTML code. If that doesn’t sound like paradise, I don’t know what does.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

The Bare Necessities Of Semantics

With all the functional mumbo jumbo hidden away in HTML5, some of us seem to have forgotten what HTML is really all about. Native video support is considered way cooler than the new header tags, somewhat understandably, but from a semantic and structural point of view, these latter elements present the most valuable improvement.

Semantic importance got a serious boost when accessibility became a big deal to us Web developers. But its powers go way beyond making our content available to those lacking the skills to surf the Web in regular ways. For one, making content recognizable to all kinds of crawlers (but most importantly search engines) could greatly improve the results of search queries on the Web. Rather than wading through trailers, film websites and product pages, wouldn’t it be much nicer to filter reviews directly and find out how a certain film has been received? Currently, no trustworthy mechanism exists to recognize or filter a broad range of content types, which is a serious loss for the Web as a whole.

Sm-img1 in When One Word Is More Meaningful Than A Thousand
When looking for reviews, you don’t want to end up on a page with grayed-out links.

If all of that sounds like a far-off dream, then note that once you’ve distinguished between all the elements on your website, you will have little to no trouble styling or adding functional behavior to the page. The combination of context and proper semantics ensures a solid structure for all further front-end work, which is only made stronger by making sure every element is defined correctly.

The (Very Simple) Basics

Absolutely nothing is complex about semantics, and the basics have been preached for a long time now. A recap of the bare minimum won’t hurt anybody, though, so here it goes.

The HTML language has a range of tags with semantic meaning. If none of the available tags suits your needs, then two generic tags (span and div) are the HTML equivalents of the word “thing,” which can be used in combination with one or more classes to add (not necessarily standardized) semantic value to your elements. It’s the microformats idea without the actual microformats. Some basic examples:

  • Main navigation: nav.main (HTML5) or div.navMain;
  • An article: article (HTML5) or div.article;
  • Article header: article>header (HTML5) or div.article>div.header

That’s all there is to it, really. Adding semantic value is about choosing the correct tag(s) and/or applying the correct label(s) to an element. It really makes you wonder why applying this simple concept consistently to professionally developed websites has proven to be so difficult, even today.

For those of you who don’t like the microformats ideology, you could also go all HTML5 and look at the HTML5 Microdata proposition. What follows in this article reflects both methodologies equally, so the choice is entirely up to you.

Sampling The Web

To illustrate my point, I took some quick samples from some of today’s leading websites. By no means do these samples hold any scientific validity, nor is this a purposeful bash of the websites I’ve singled out. They are simply chosen because I believe they best represent their kind. I hope the data speaks for itself either way.

To grasp the semantic consistency within a website, I tried finding some common content types. Content types are easy to recognize and even easier to label. Before I get to the data, though, let’s look at one way we could label products in a Web store:

  • Product detail: div.product;
  • Products added to your basket: .basket li.product;
  • Promo product in a list: .categoryList .product.promo;
  • Etc.

Products are everywhere in a Web store, so it seems logical that the product class would reappear across the pages for every instance of a product on the website. After all, whether a product is located in a “Related items” list, added to a basket or shown in full doesn’t really change its semantic nature, so why change its structure or class name?

Sm-img2 in When One Word Is More Meaningful Than A Thousand
These are all products, appearing as variants or in different contexts.

For my sample, I picked five content types (story, product, video, person, blog post) and picked four websites to represent each content type. To check for semantic consistency, I looked at the labels on a shortlist (a list of content type instances) and the content type’s detail. The following table summarizes my findings:

TypeWebsiteShortlistDetail
StoryBBCdiv.hpDatatable.storycontent
StoryNew York Timesdiv.storydiv#article
StoryCNNul.cnn_bulletbin lidiv.cnn_storyarea
StoryMSNli.terdiv.w649 (?)
ProductAmazondiv.asinItem-
ProductApple Storeli.productdiv.product-selection
ProductPlay.comdiv.infodiv.dvd
ProductYesAsiadiv.itemdiv#productpage
VideoYouTubediv.video-celldiv.video-info
VideoVimeodiv.itemdiv.video_container_hd
VideoDailymotiondiv.videodiv.dmco_box
VideoeBaum’s Worlddiv.mediaitemdiv#videoContentContainer
PersonFacebookdiv.UIFullListingdiv.profile_top_wash and div.profile_bottom_wash
PersonLast.fmdiv.userdiv.user
PersonVirbtable.people tddiv#profile_wrapper.artist
PersonTwitterdiv#following_list span.vcarddiv#profile
Blog postZeldman--
Blog postA List Apartdiv.item- or body.articles
Blog postJens Meiertdiv.item.content .col-1
Blog postWebaimdiv#featuresdiv.section

Apart from last.fm, none of the websites I checked got it right, even though the content types I chose were very easy to label. Apple and the New York Times came quite close, but some of the others are miles away from what you’d expect to find. And that’s just looking at the root tag of the content type. The structure and classes within are often even worse, bordering on complete randomness. Another thing to note is that blogs about Web design seem to score the worst.

Think Components, Not Pages

There is, of course, not one single cause of this problem, nor is the solution simple. But you can make one important mental shift as a front-end developer to give your work more semantic consistency. The key is to stop thinking of a website as a collection of pages and to instead look for common components.

Front-end developers tend to work the same as designers: start with the home page, finish that, and then move on to the second wireframe — copy the reusable components, adapt if needed, and then repeat until all pages are done. This process requires a lot of copying, adapting and checking older pages to find reusable elements. It is a true killer of consistency — invoking spur-of-the-moment labels and destroying semantic consistency.

Because we want consistency, both in structure and semantics, focusing on a single component at a time is better. When you need to write the HTML code for a product, check each wireframe for variations within and across products. Write code that can handle all existing variants. Once that is done, you will have a consistent and solid model to describe your component that you can used wherever you want.

Making It All Happen

I know from experience that this mental shift takes some time to get used to, and the only way to get it working is to throw yourself in and practice. I’ll share some quick pointers to make the whole process a little less daunting.

Think Beyond Styling Needs and Performance

.productList li or .products li

ul li.product

Consider the example above. As Web developers, we’ve been taught that the first option should be preferred. From a performance and styling perspective, this is indeed the case. But putting on your semantic hat, you’ll notice that to recognize the list items in the first example as products, you need to make a deduction. Singling out all products on a page isn’t as easy as looking for the product class. Automated systems should also account for the possibility that a product is defined as a list item inside a parent that refers to a collection of products. Not such a big deal for the human brain, but writing a foolproof, fully automated implementation isn’t as easy.

On top of that, the second option allows for more flexibility because it makes it possible to drop instances of other content types into the same list without running into styling hell, while at the same time ensuring semantic integrity. It wouldn’t be the first time I was asked to merge a news and event shortlist into one big list just because there wasn’t sufficient content to warrant separate lists. The second option would give you a smaller headache, especially if you’re nearing an important deadline.

Bottom line: try to minimize semantic deductions, and keep the code clear and simple. Pick unique class names for components, and stick with them throughout the entire project.

Don’t Mix Responsibilities

I know that many people like to mix wireframing, HTML and even design into one organic and homogeneous process. The downside to this is that you will have a hard time not compromising your work. When you’re designing, writing HTML and CSS is not priority number one; and once the design is done, you’ll find it tough to go back and rework your code to match HTML and CSS standards.

It’s also refreshing to try to build a website based purely on a set of wireframes, without the slightest notion of design. It helps you focus on meaning and makes it easier to spot components that are actually the same but could differ wildly design-wise. And if you’ve done it right, you’ll find that during CSS development, you don’t have to adapt the HTML at all, unless the design calls for major structural changes.

Try to build your HTML templates based on wireframes, and save the design and CSS for when your static HTML templates are completed.

Automate Your Job

Automation is a major key to success. Whether you use existing tools (such as a CMS) or build your own (as we do), automating the job of building static templates could help you to define a component once and reuse the code everywhere that the component is featured in your templates. The process itself (when done right) ensures semantic consistency and is sure to bring you new insight when constructing HTML templates.

At my current job, we build such a tool based on components (recurring HTML code blocks) and schemes (outlines of each template that refer to these components). Thrown in some simple program logic (if and loop statements, parameters) and allow for proper nesting methods, and you’re good to go.

Semantic Consistency Across Projects

Finally, keep a list of components you’ve made over multiple projects. Many components will be relevant for each new project and will be semantically identical, meaning that the HTML structure should be identical just as well (save some wrappers for visual CSS trickery, if you’re into that).

Once you have such a list of components, starting up a new project will be a lot faster, and you’ll have the added benefit of semantic consistency across all of your projects.

Banana ≠ Curvy Yellow Fruit

Semantics is all about identifying objects, but it goes beyond simply slapping a label on every object that comes your way. If you have a blog, and you randomly throw around classes like article, story, blogpost and news, then your website will lack semantic consistency, making all your hard work amount to very little. Semantics have no point when they are not applied consistently, even though today’s technology does very little with them — which, by the way, is no surprise given that locating a simple “product” on most Web stores is nearly impossible these days.

Sm-img3 in When One Word Is More Meaningful Than A Thousand
People looking for bananas might think twice before buying these.

The next time you begin a project, try to view a Web page as a collection of building blocks. Start by constructing these building blocks first, and worry about building the pages later. Come up with a single label for an HTML component, and use it consistently across your website. It won’t make styling harder, and it won’t affect the way you write JavaScript. Over time, you can take it further by being semantically consistent over multiple projects.

If your main job is to develop static HTML templates, try to automate your work. You’ll find that you spend more time writing flexible and solid HTML structures and less time copying and adapting code from point A to point B. It makes your job more interesting and makes the Web a better and more meaningful place.

Further Resources

  • Microformats
    Summarizes the microformats ideology. Read more about using class names as semantic aids.
  • HTML5 Microdata
    Explains how HTML5 is built to standardize the use of flexible semantics.

(al)


© Niels Matthijs 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:

Speculation has been heavy of late that Google is poised to introduce a new service that will attempt to stave off Facebook's otherwise inevitable quest for global domination of the social space. So if you came across someone who...

That would seem to be the case with Paul Adams, who is currently also putting the finishing touches on Social Circles: How Offline Relationships Influence Online Behavior and What it Means for Design and Marketing, due for publication by Pearson Education in August. Look for an extract from that on Graphics.com.

Adams' Think Outside In blog embodies his ideas about business and design, which he sums up in the following way: "We need a new skill set, a new way of understanding people. A new way of understanding customers. We need to understand how people think, and what motivates them to behave in certain ways. The best way to do this is to design from the outside in. To observe people in their own environment, probing them so that we understand their behaviour. This understanding enables us to design things that are meaningful and valuable to people. So stop designing products and features, and start designing experiences."

Adams' point is that we need to pay more attention to the way people actually are, rather than basing design decisions on what makes sense to us or what we think will make sense to others. Basing a creation on one's own worldview has its place—notably in the arts, with novelists and visual artists traditionally drawing heavily on their own experiences. But this approach has limits, especially in more rigorous domains. We know now, for example, that Freud based much of his psychoanalytic theory on himself and his immediate family, before extrapolating this to apply to all of humanity, from prehistory to the indefinite future. However, it turned out that (luckily for us) Freud and his family were a one-off. Thus, the resulting dead end of Freudian psychoanalysis can be seen as a textbook case of designing from the inside out.

I mention all this here because Adams recently posted a monster slide deck from a talk he recently gave to the Voices That Matter web design conference. I can't imagine how he managed to get through all 216 slides, but the posted talk, complete with footnotes, is packed with enough insights to keep anyone involved in the web to ponder afresh the increasing role of social interaction. And as you might expect from Adams' Outside In focus he has lots to say about what we can learn from the offline social networks in which we engage. There's also intriguing nuggets, such as evidence gleaned from sources as diverse as Neolithic villages, the Roman army, Wikipedia administrators and online gaming communities to indicate that 150 is the maximum number of people with whom we can maintain weak social ties. Who knew?

I won't comment on more details here but simply encourage you to take your time going through the presentation above. Hats off to Adams for sharing his perspective.

Chris Dickman
Founding Editor, Graphics.com
Follow Graphics.com on Twitter

See our New Portfolio Items

We have been busy uploading new portfolio items onto our web site. Please take a look and check out some of our latest work. Be sure to let us know what you think.

Comments

    Archives