TG Designer

10 Responses to “50 Useful Tools and Resources For Web Designers”

1. 

   Vitaly Friedman says:

   July 26th, 2010 at 2:00 pm

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

   • 50 Powerful Time-Savers For Web Designers
   • 50 New Useful CSS Techniques, Tools and Tutorials
   • 45 Incredibly Useful Web Design Checklists and Questionnaires

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

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

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

   

   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.

   

   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.

   

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

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

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

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

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

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

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

   

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

   

   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.

   

   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.

   

   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.

   

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

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   Related Posts

   You may be interested in the following related posts:

   • 50 Powerful Time-Savers For Web Designers
   • 50 New Useful CSS Techniques, Tools and Tutorials
   • 45 Incredibly Useful Web Design Checklists and Questionnaires

   ---

   © Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/26/50-useful-tools-and-resources-for-web-designers/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: Coding, Design, tools, typography, usability, Workflow
   
2. 

   Vailancio Rodrigues says:

   July 26th, 2010 at 2:19 pm

   Camera is a remarkable piece of innovation. However, it is people — professionals and newbies alike — who make it truly remarkable. It’s the photographer behind the camera. It’s his imagination, passion and talent and knowledge of the medium. You don’t need a high-end costly equipment to get beautiful results. Just your talent and a way of looking at things differently is together more than enough for a great shot. It’s also the ability to envision the final result in your mind which is also important.

   A pinhole camera is a simple camera without a lens and with a single small aperture — effectively a light-proof box with a small hole in one side. Light from a scene passes through this single point and projects an inverted image on the opposite side of the box. You can easily construct this camera by yourself using things lying around like match boxes or any kind of boxes, paper, duct tape etc. The small amount of light passing through this pin sized hole produces image on a photographic film or a CCD sensor.

   If you don’t want to get your hands dirty on creating a pin hole camera by yourself, you can use your DSLR with some modifications (replacing camera lenses with a pinhole). Also, pinhole cameras are available in the market: and they are quite popular, too — after all, you don’t have to worry about the focus and distortions as there are no lenses involved. Also, you might end up with lovely motion blurred photographs.

   In today’s weekend post we present beautiful and inspiring photographs created using a pinhole camera. Please notice how photographers use the camera creatively to produce quite remarkable images. At the bottom of this post you will find links to some photographers and references to related resources that will help you get you started. Also, we listed related Flickr pools which contain thousands of further examples of what can be achieved with this technique. Get inspired, folks!

   [By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

   Beautiful Inspiring Pinhole Camera Photographs

   Tarquin Coates

   

   Tetsuya

   

   The calmness of blue by Andrew Watson

   

   Daniel Tückmantel

   

   Invader by TEIKO

   

   Mackeson

   

   Danielle Hughson

   

   Tea Room

   

   A. Wallis

   

   An Oceanic Ghost Forest by Danielle Hughson

   

   Zeb Andrews

   

   Mackeson

   

   Danielle Hughson

   

   Scott VanderStouw

   

   Tea Room

   

   Scott Speck

   

   Scott Speck

   

   Mackeson

   

   Bruno Malegue

   

   gonebiking

   

   The Iron Cycloid by Scott Speck

   

   Matteo Bagnoli

   

   The Sleeping Zebra by Scott Speck

   

   Sarah Knopf

   

   Follow The Tunes by Tim Franco

   

   Bill Bresler

   

   nhung dang

   

   Darren C.

   

   Scott Speck

   

   Tea Room

   

   Celeste Brignac

   

   A. Wallis

   

   Darren C.

   

   Zeb Andrews

   

   Kakki

   

   Kent Mercurio

   

   Mackeson

   

   Sara

   

   Erik

   

   Zeb Andrews

   

   Michael C. Pastur

   

   mist-y

   

   Zeb Andrews

   

   Tea Room

   

   Always de Sun

   

   Remarkable Photographers

   And here is a brief overview of some remarkable pinhole photographers from Flickr. They have added a new demission to photography: their photo streams are full of beautiful photographs.

   Zeb Andrews

   

   Tea Room

   

   Scott Speck

   

   Further Resources

   • The Ultimate Guide to Create Your Own 35mm Pinhole Camera.
   • Exposure Times for Pinhole Photography
   • Photography 101 – Light and the Pinhole Camera
   • 20 Strange Beautiful Pinhole Cameras
   • Turn Your DSLR into a Pinhole Camera
   • Turn Your Holga into a Pinhole Camera
   • DIY: Pinhole Lego Camera
   • DIY: Panoramic Pinhole Camera
   • Pinhole Calculator
   • Flickr Pool: Pinhole
   • Flickr Pool: Pinhole Photography
   • Flickr Pool: Color Pinhole Photography
   • Flickr Pool: Polaroid Pinhole
   • Flickr Pool: Pinhole Perspective

   ---

   © vailrodrigues for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/25/the-showcase-of-beautiful-pinhole-photography/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: photography, photos, pinhole
   
3. 

   Vitaly Friedman says:

   July 26th, 2010 at 2:29 pm

   In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks and released for Smashing Magazine and its readers. The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. As usual, the kit is free to use in all projects, without any restrictions.

   

   The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Plus all the modal components, comment boxes, buttons, message boxes, tabs, etc. All the components are full layered, built using vectors and blending options, so that scaling and editing the objects will not be a problem.

   Download the set for free!

   The theme is released under Creative Commons. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the kit as you wish.

   

   • large preview (.png, 0.72 Mb)
   • download the .zip-package (zip, 6.5 Mb)
   • alternative download link (zip, 5.1 Mb)
   • release on the developer’s page

   Features

   The PSD set consists of 3 PSD files:

   • Facebook-GUI.psd contains all Facebook UI elements;
   • Facebook-App-Authorization-Request.psd and Facebook-App-Template.psd contain the basic structure for Facebook applications design.

   
   Facebook App Authorization Request (large view)

   
   Facebook App Template (large view)

   
   Features (large view)

   
   Features (large view)

   
   Features (large view)

   Thank you, guys. We appreciate your work and your good intentions!

   ---

   © Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/23/free-facebook-gui-psd-kit/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: Freebies
   
4. 

   Marilina Maraviglia says:

   July 26th, 2010 at 2:35 pm

   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, 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!]

   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

   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.

   
   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

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

   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.

   
   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

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

   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

   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

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

   
   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

   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

   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

   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

   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! | http://www.smashingmagazine.com/2010/07/23/what-do-we-really-mean-by-art/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: art, Design
   
5. 

   Cameron Chapman says:

   July 26th, 2010 at 3:02 pm

   Think of Tumblr as micro-blogging on steroids (technically, it’s called “tumblelogging”). Whereas Twitter and similar services limit posts to 140 characters or less, Tumblr lets you post updates of any length, although it’s best suited to short-format posts. Tumblr bridges the gap between full-blown blog and micro-blog.

   

   Tumblr is also an option for designers and creative people, because it gives you complete control over the look of your tumblelog. It also offers great opportunities for theme designers, especially with the recent launch of premium themes (which range in price from $9 to $49). Read on for your complete guide to using and designing for Tumblr.

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

   Why Use Tumblr?

   Quite simply because Tumblr makes setting up a blog very easy. It also makes it very simple for you to follow other tumbleloggers on the website and to share their content. Tumblr tries to combine the best parts of blogging and micro-blogging in one. It handles longer-form and multimedia posts, like regular blogs, while encouraging more interaction between tumbleloggers, like micro-blogs.

   Post Formats

   The fact that Tumblr has built-in formats for a variety of content types makes it stand out from other blogging and micro-blogging platforms. There are templates for text, photos, videos, audio, quotes, links and chat transcripts. Most themes take advantage of the differences between these post types and implement special formatting for each one. You can also add plain text to most of these post types, and you can add images to your text posts. It’s a quite flexible system.

   

   Because of the unique post formats, Tumblr makes a perfect platform for vlogging and podcasting, as well as for photo blogging. For audio posts, you can even call in a post, requiring nothing more than a phone. You can also email in posts of all types (each type of post has a specific email format).

   Tumblr API

   The Tumblr API has spawned plenty of third-party apps that let you do all sorts of things with Tumblr. More than a dozen iPhone apps can be used with Tumblr, and at least as many Web services. Desktop and mobile apps are available, as well as widgets and plug-ins that you can use on other websites. You can set up Tumblr to automatically post to your Twitter or Facebook account, too.

   

   For developers, the API opens a world of options for creating apps. The API itself is relatively straightforward and anyone with basic PHP and XML skills will have a short learning curve. While dozens of Tumblr apps are already out there, there’s still plenty of room for further expansion.

   Other Unique Features

   Like Twitter, Tumblr lets you follow other users and view their posts in your dashboard. Tumblr also gives you the option to reblog or “heart” (the equivalent to a “Like” on Facebook) posts from anyone, whether you follow them or not.

   Following other users is simple: just click the “Follow” link in the upper-right corner of their tumblelog. That’s also where you’ll find the links to heart or reblog content.

   

   Blog Options

   Tumblr gives you fairly complete control over how you blog. You can set up group blogs with multiple authors. You can also set up numerous blogs under a single account (each with its own custom options), though only one username is able to follow other tumblelogs. Tumblr also lets you keep private Tumblelogs that are password-protected, so you can share them with those you know or keep them completely personal. Just make sure not to post to your public tumblelog by accident!

   Getting Started

   Starting out with Tumblr is easy. Just sign up on the site, enter your email address and a password and the URL you want to use (something.tumblr.com). You’ll have the option to set up a custom domain name after you’ve signed up. Once your account is set up, you can start posting right away.

   

   Themes and Customization

   Hundreds of themes are available for Tumblr, most of them for free. Take some time to go through the theme options when you sign up, either to find one for your tumblelog or to get ideas to create your own theme.

   

   One thing you may notice with Tumblr themes is that a lot of them have very narrow content areas. While wider themes are available, the vast majority are narrower than 800 pixels (and some even narrower than that).

   Most Tumblr themes come with some customization options that don’t require any HTML and CSS knowledge (if you plan to create some public themes, you’ll probably want to include some customization options). There’s also an area to enter custom CSS that will override existing styles.

   

   

   You can customize the HTML in any theme, too. Click on the “Customize” link from your dashboard, and then click on “Theme” and “Custom HTML.” This is also how you would create a theme from scratch. You can link to an external style sheet, too (Tumblr has a static file uploader for uploading theme assets).

   

   Editing an existing theme is a great way to start designing for Tumblr. It also gives you complete control over how your theme looks and works without having to start from scratch.

   The Bookmarklet

   The Tumblr bookmarklet makes it easy to post content from anywhere on the Web. Just drag it to your bookmarks toolbar and use it when you find something to blog about. Depending on the page’s content, a window will pop up suggesting a particular content format for your post. You can change the post type right there or accept its suggestion.

   

   Most pages will default to the “Link” post format, but if you’re on Flickr, for example, it will default to the “Photo” format. Likewise, if you’re watching a YouTube video, it will default to the “Video” format.

   Creating Custom Tumblr Themes

   While Tumblr makes it easy to customize the HTML and CSS of almost any theme, you may want to start from scratch. If you’ve ever created a theme for another blogging platform or CMS, creating a Tumblr theme won’t be any more difficult. Even if you haven’t created a theme for another CMS, creating a Tumblr theme isn’t much more difficult than creating a standard HTML template.

   

   Basic Structure

   Tumblr themes include the same basic parts as any website. There’s usually a header and main content area, as well as an optional sidebar and footer. Beyond that, Tumblr themes are broken down into blocks. Each block on your tumblelog contains some piece of data. For example, there are blocks for each of the post types (text, photo, audio, video, etc.), as well as blocks for things like your tumblelog’s description and “Previous” and “Next” page links.

   The Tumblr loop has a huge number of variables to take advantage of. You’ll need to define blocks for each post type in order to display them properly in your theme. Beyond that, you choose what to include in your theme.

   A complete list of Tumblr variables can be found on the Creating a Custom HTML Theme page on Tumblr’s website. The page also includes more information on creating Tumblr themes in general.

   More on Tumblr Theme Variables

   Variables allow you to do various custom things with your Tumblr themes. There are basic variables for things like the theme title, portrait URLs and favicons. There are unique variables for each of the post formats, too. Some formats (like text posts) have only a handful of variables, while others have over a dozen.

   Creating Public Themes

   With the addition of premium themes, many designers are becoming more interested in creating their own Tumblr themes. You might want to do a few things to a public theme that you might not bother with for a personal theme, though. One of these is creating some customization options that allow users to change things like font colors and which parts of a page to show and hide. Look around at what other themes allow to be customized, and look at the variables that Tumblr uses.

   

   Public themes do have a few requirements that may not apply to personal themes. These are:

   • All the theme’s assets have to be hosted on Tumblr.
   • Third-party widgets have to be commented out. This means that you can include the code and instructions on how to enable it, but it must be disabled by default.
   • Your theme must support all of the different post types: text, photo, quote, link, chat, audio and video.
   • It must support the standard tags (check the variables list to see what they are).
   • It must be good-looking and fully functional. Tumblr themes are vetted for quality; unattractive ones won’t make the cut.

   At the moment, when you submit a theme to Tumblr, it’s free by default. To be able to sell premium themes through the Tumblr directory, you’ll either need to ask or be invited. Overall, the premium themes program is pretty secretive.

   This doesn’t mean that you can’t sell premium Tumblr themes elsewhere. Theme Forest has a number of Tumblr themes for sale. Other theme developers sell them directly through their own websites. Both are options if you want to get into the premium theme market.

   Remember to include credit and a link in the footer of your theme, so that visitors can find your other themes and download them. Many users will leave this credit and link as is, giving you potential traffic for your blog.

   Tumblr-Specific Memes

   You may want to consider joining in on some Tumblr-specific trends, events and memes out there.

   Tumblr Tuesdays and Recommended Blogs

   Think of Tumblr Tuesdays as sort of like Twitter’s #FollowFriday hash tag. Tumblr has a built-in recommendation engine that feeds the directory listings of blogs that are recommended enough as well as the recommended tumblelogs that show up in your dashboard’s sidebar.

   Bacon

   

   I suspect that Tumblr has a higher proportion of bacon-related blogs than on any other blogging or micro-blogging service out there. Just a quick search turns up at least half a dozen tumblelogs focused exclusively on bacon.

   Unfollow Friday

   Playing on Twitter’s #FollowFriday hash tag, Unfollow Friday encourages you to post annoying or disgusting things to your tumblelog in an effort to get people to unfollow you. The goal is to see how many people you can get to stop following you.

   Conclusion

   Whether you’re looking for a quick and easy platform to post short-format or multimedia posts or you’re interested in developing custom Tumblr themes to give away or sell, this guide should get you on your way. If you have additional resources or tips to share, please do so in the comments below!

   Further Resources

   • 34 Amazing Tumblr Themes—Twitter Could Never Look This Good!
   • Things to Know About Custom Tumblr Theme Design
   • Getting Started With Tumblr and Custom Theme Design
   • Theming Tumblr

   (al)

   ---

   © Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/22/a-complete-guide-to-tumblr/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: tumblr
   
6. 

   Kat Neville says:

   July 26th, 2010 at 3:27 pm

   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 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!]

   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.

   
   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.

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

   
   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.

   
   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.

   
   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.

   
   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.

   
   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.

   
   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.

   
   See Yale’s typeface.

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

   
   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.

   
   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.

   
   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.

   
   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.

   
   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.

   
   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.

   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.

   
   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.

   
   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:

   
   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.

   
   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!

   
   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

   • The Web Style Guide, 3rd Edition
     A comprehensive guide for the Web.
   • Corporate Brand Guidelines
     A list of design guidelines. Some are old but still useful.
   • Brand Identity
     A great article from Computer Arts magazine on building your brand identity
   • 20 Top Tips for Designing Effective Brand Guidelines, from Saatchi
   • The Corporate Identity Manual (Brand Style Guide)

   Related Posts

   You may be interested in the following related posts:

   • What Makes A Great Cover Letter, According To Companies?
   • The Art And Science Of The Email Signature
   • Invoice Like A Pro: Examples and Best Practices
   • Business Card Design: Better Than A Plain Ol’ Business Card
   • How To Create A Great Web Design CV and Résumé?

   (al)

   ---

   © Kat Neville for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: brand, branding, guidelines, logo, style
   
7. 

   Speider Schneider says:

   July 26th, 2010 at 4:00 pm

   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.

   

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

   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.

   

   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.

   

   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.

   

   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.

   

   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! | http://www.smashingmagazine.com/2010/07/20/yin-and-yang-oil-and-water-creative-and-marketing/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags:
   
8. 

   Smashing Editorial says:

   July 26th, 2010 at 4:54 pm

   Today we are glad to release CMS Icon Set, a set with 12 high quality icons in 48×48px, available in the .png-format. The set was designed to be used in content management systems, but can also be useful for other user interface designs. This goodie was designed by the Russian design studio Pixel-Mixer and released especially for Smashing Magazine and its readers.

   

   Download the icon set for free!

   You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

   

   • download the set (zip, 0.1 Mb)

   Behind the design

   As always, here are some insights from the designers:

   This Smashing CMS icon set was designed by the Russian studio Pixel-Mixer. It contains 12 high-quality icons in the 48×48px in the .png format. You are welcome to use this set for your commercial and private projects, it’s a gift from Pixel-Mixer to Smashing Magazine readers, from Russia with love!

   Thank you very much, guys! We appreciate your efforts.

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

   Related Posts

   You may be interested in the following related releases:

   • The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)
   • Free Medical Icons Set (60 Icons)
   • Yummy! Free Food and Cakes Icon Set (20 Icons)
   • Quartz Icon Set (90 clean sharp icons)
   • gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)

   ---

   © Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/19/content-management-system-cms-icon-set-12-free-icons/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: Freebies, Icons
   
9. 

   Rachel Andrew says:

   July 26th, 2010 at 5:14 pm

   CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices.

   In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

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

   Media Queries

   If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.

   The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:

   • width and height (of the browser window)
   • device width and height
   • orientation – for example is a phone in landscape or portrait mode?
   • resolution

   If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. To see an example of this in practice, the UK web conference dConstruct has just launched their website for the 2010 conference and this uses media queries to great effect.

   

   The dConstruct 2010 website in Safari on a desktop computer

   

   The dConstruct 2010 website on an iPhone

   You can see from the above example that the site hasn’t just been made smaller to fit, but that the content has actually been re-architected to be made more easy to access on the small screen of the device. In addition many people might think of this as being an iPhone layout – but it isn’t. It displays in the same way on Opera Mini on my Android based phone – so by using media queries and targeting the device capabilities the dConstruct site caters for all sorts of devices – even ones they might not have thought of!

   Using Media Queries to create a stylesheet for phones

   To get started we can take a look at a very simple example. The below layout is a very simple two column layout.

   

   A very simple two column layout

   To make it easier to read on a phone I have decided to linearize the entire design making it all one column, and also to make the header area much smaller so readers don’t need to scroll past the header before getting to any content.

   The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:

   	@media only screen and (max-device-width: 480px) {
   
   	}
   

   We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:

   	@media only screen and (max-device-width: 480px) {
   		div#wrapper {
   			width: 400px;
   		}
   
   		div#header {
   			background-image: url(media-queries-phone.jpg);
   			height: 93px;
   			position: relative;
   		}
   
   		div#header h1 {
   			font-size: 140%;
   		}
   
   		#content {
   			float: none;
   			width: 100%;
   		}
   
   		#navigation {
   			float:none;
   			width: auto;
   		}
   	}
   

   In the code above I am using an alternate background image and reducing the height of the header, then setting the content and navigation to float none and overwriting the width set earlier in the stylesheet. These rules only come into play on a small screen device.

   

   My simple example as displayed on an iPhone

   Linking a separate stylesheet using media queries

   Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.

   To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.

   <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
   

   Testing media queries

   If you are the owner of an iPhone, Android device or other device that has a browser which supports media queries you can test your CSS yourself. However you will need to upload the code somewhere in order to view it. What about testing devices you don’t own and testing locally?

   An excellent site that can help you during the development process is ProtoFluid. This application gives you a form to enter your URL – which can be a local URL – and view the design as if in the browser on an iPhone, iPad or a range of other devices. The screenshot below is the dConstruct site we looked at earlier as seen through the iPhone view on ProtoFluid.

   

   The dConstruct 2010 website in ProtoFluid

   You can also enter in your own window size if you have a specific device you want to test for and know the dimensions of it’s screen.

   To use ProtoFluid you need to slightly modify the media query shown earlier to include max-width as well as max-device-width. This means that the media query also comes into play if the user has a normal desktop browser but using a very tiny window.

   	@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   
   	}
   

   After updating your code to the above, just refresh your page in the browser and then drag the window in and you should see the layout change as it hits 480 pixels. The media queries are now reacting when the viewport width hits the value you entered.

   You are now all ready to test using ProtoFluid. The real beauty of ProtoFluid is that you can still use tools such as FireBug to tweak your design, something you won’t have once on the iPhone. Obviously you should still try and get a look at your layout in as many devices as possible, but ProtoFluid makes development and testing much simpler.

   Note that if you don’t want your site to switch layout when someone drags their window narrow you can always remove the max-width part of the query before going live, so the effect only happens for people with a small device and not just a small browser window.

   Retrofitting an existing site

   I have kept the example above very simple in order to demonstrate the technique. However this technique could very easily be used to retrofit an existing site with a version for small screen devices. One of the big selling points of using CSS for layout was this ability to provide alternate versions of our design. As an experiment I decided to take my own business website and apply these techniques to the layout.

   The desktop layout

   The website for my business currently has a multi-column layout. The homepage is a little different but in general we have a fixed width 3 column layout. This design is a couple of years old so we didn’t consider media queries when building it.

   

   My site in a desktop browser

   Adding the new stylesheet

   There will be a number of changes that I need to make to linearize this layout so I’m going to add a separate stylesheet using media queries to load this stylesheet after the current stylesheet and only if the max-width is less than 480 pixels.

   	<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
   

   To create my new stylesheet I take the default stylesheet for the site and save it as small-device.css. So this starts life as a copy of my main stylesheet. What I am going to do is go through and overwrite certain rules and then delete anything I don’t need.

   Shrinking the header

   The first thing I want to do is make the logo fit nicely on screen for small devices. As the logo is a background image this is easy to do as I can load a different logo in this stylesheet. I also have a different background image with a shorter top area over which the logo sits.

   	body {
   		background-image: url(/img/small-bg.png);
   	}
   
   	#wrapper {
   		width: auto;
   		margin: auto;
   		text-align: left;
   		background-image: url(/img/small-logo.png);
   		background-position: left 5px;
   		background-repeat: no-repeat;
   		min-height: 400px;
   	}
   

   Linearizing the layout

   The next main job is to linearize the layout and make it all one column. The desktop layout is created using floats so all I need to do is find the rules that float the columns, set them to float: none and width:auto. This drops all the columns one under another.

   	.article #aside {
   		float: none;
   		width: auto;
   	}
   

   Tidying up

   Everything after this point is really just a case of looking at the layout in ProtoFluid and tweaking it to give sensible amounts of margin and padding to areas that now are stacked rather than in columns. Being able to use Firebug in ProtoFluid makes this job much easier as my workflow mainly involves playing around using Firebug until I am happy with the effect and then copying that CSS into the stylesheet.

   

   Testing the site using ProtoFluid

   Testing in an iPhone

   Having created my stylesheet and uploading it I wanted to check how it worked in a real target device. In the iPhone I discovered that the site still loaded zoomed out rather than zooming in on my nice readable single column. A quick search on the Safari developer website gave me my answer – to add a meta tag to the head of the website setting the width of the viewport to the device width.

   		<meta name="viewport" content="width=device-width" />
   

   After adding the meta tag the site now displays zoomed in one the single column.

   

   The site as it now displays on an iPhone

   This was a very simple retrofit to show that it is possible to add a mobile version of your site simply. If I was building a site from scratch that I would be using media queries on, there are definitely certain choices I would make to make the process simpler. For example considering the linearized column orders, using background images where possible as these can be switched using CSS – or perhaps using fluid images.

   Our desktop layout features a case studies carousel on the homepage, this wasn’t easy to interact with on a touch screen device and so I checked using JavaScript if the browser window was very narrow and didn’t launch the carousel. The way this was already written meant that the effect of stopping the carousel loading was that one case study would appear on the screen, which seems a reasonable solution for people on a small device. With a bit more time I could rewrite that carousel with an alternate version for users of mobile devices, perhaps with interactions more suitable to a touch screen.

   More resources

   This is a relatively new technique but already there are some excellent tutorials on the subject of media queries. If you know of others then please post them in the comments.

   • A List Apart – Responsive Web Design
   • Apple – Safari Web Content Guide
   • Sitepoint CSS Reference – Media Queries
   • Targeting the iPhone 4 Retina Display with CSS3 Media Queries
   • Aral Balkan: How to make your web content look stunning on the iPhone 4’s new Retina Display
   • Stuff and Nonsense: Proportional leading with CSS3 Media Queries
   • Matthew James Taylor: iPad layout with landscape and portrait modes

   Providing support for Media Queries in older browsers

   This article covers the use of media queries in devices that have native support. If you are only interested in supporting iPhone and commonly used mobile browsers such as Opera Mini you have the luxury of not needing to worry about non-supporting browsers. If you want to start using media queries in desktop browsers then you might be interested to discover that there are a couple of techniques available which use JavaScript to add support to browsers such as Internet Explorer 8 (and lower versions) and Firefox prior to 3.5. Internet Explorer 9 will have support for CSS3 Media Queries.

   • Media Queries section on When Can I Use, showing which browsers have support
   • Media Queries jQuery plugin (only deals with max/min width)
   • css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers

   More inspiration

   To see more interesting use of Media Queries have a look at Hicksdesign where Jon Hicks has used Media Queries to not only provide a better experience for mobile device users, but also for regular web browser users with smaller windows. Also, have a look at Simon Collison’s website and Ed Merritt’s portfolio for other examples of this technique.

   Try it for yourself

   Using Media Queries is one place you can really start to use CSS3 in your daily work. It is worth remembering that the browsers that support media queries also support lots of other CSS3 properties so your stylesheets that target these devices can also use other CSS3 to create a slick effect when viewed on an iPhone or other mobile device. If you have implemented media queries on your site, or try this technique after reading this article, let us know in the comments.

   ---

   © Rachel Andrew for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: CSS, css3, media queries, mobile
   
10. 

    Louis Lazaris says:

    July 26th, 2010 at 5:21 pm

    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.

    [By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

    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:

    • Speed up your JavaScript - Part 1
    • Speed up your JavaScript - Part 2
    • Speed up your JavaScript - Part 3
    • Speed up your JavaScript - Part 4

    Further Info:

    • Google Tech Talks YouTube Channel
    • Speed up your JavaScript (article by the speaker discussing the video)

    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:

    • A similar presentation by the same speaker on MSDN

    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:

    • Brad Neuberg's website

    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.

    

    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:

    • Watch the video on MSDN
    • eCSStender website
    • Stop Forking with CSS3

    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:

    • Video with comments on Nettuts+
    • Video posted on the author's website

    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:

    • Video with Transcript on Carsonified
    • Carsonified's Vimeo Channel

    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:

    • Watch the video on TED

    Related Articles

    • 7 Must-See Web Design Videos and Presentations on Smashing Magazine
    • 7 Must-See Web Design Videos and Presentations on Noupe

    ---

    © Louis Lazaris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/07/17/seven-must-see-videos-and-presentations-for-web-app-developers/">Tweet it! | Submit to Reddit | Forum Smashing Magazine
    Post tags:
    

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

CAPTCHA Code