Blog

At the end of last year, we published a comprehensive list of web design and development conferences that might be of interest to Smashing Magazine’s diverse readership. Many readers commented and added links to other conferences and events that weren’t listed, some of which were added to the post. Using the contents of that list along with some other sources, we’ve compiled a list of web design and development-related conferences and events that will be taking place in the next six to eight months.

As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to graphic designers or web developers.

While the previous roundup was organized by category, this one lists the events in chronological order starting with the earliest. Jump to an appropriate month using the links below:

• September 2010 Events
• October 2010 Events
• November – December 2010 Events
• Early 2011 Events

September 2010 Events

FITC Mobile 2010
FITC Mobile covers all aspects of mobile content development — with presentations, demonstrations, and panel discussions. Covering iPhone/iPad, Android, Flash 10.1, Windows Mobile, HTML5, Unity, Marketing, Usability, and other relevant topics in the mobile world.

When: September 16-18, 2010
Where: Toronto, ON, Canada at the Metro Toronto Convention Centre

An Event Apart D.C.
“From the makers of A List Apart, An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: September 16-18, 2010
Where: Washington, D.C., USA at the Washington Hilton

London Design Festival
“The London Design Festival is a nine-day celebration of design in the world’s creative capital. The Festival is a platform for the widest spectrum of design disciplines, brought together as a unique and accessible programme.”

When: September 18-26, 2010
Where: London, UK at a number of different venues across the city

MOBILE 2.0
“The MOBILE 2.0 Conference is a two-day event focusing on new Mobile Applications and Services, Mobile Ecosystems, and Disruptive Mobile Innovation presented by the Mobile 2.0 Organizing Committee. For Mobile Developers we have designed an entire day for you to hear about the latest developer tools and monetization techniques.”

When: September 20-21, 2010
Where: Silicon Valley, CA, USA at the Grand Hyatt & the Microsoft Silicon Valley Conference Center

Design For Mobile 2010
“Design For Mobile (D4M) is a multi-faceted conference aimed at engaging the mobile community in a shared discussion about the future of mobile and ‘the mobile now.’ This is a conference focused on strategy and tactics for user research, product definition, usability testing, interaction and design. D4M is comprised of both preliminary and advanced workshops that flank three full days of speakers and interactive sessions.”

When: September 20-24, 2010
Where: Evanston, IL, U.S.A at The Hilton Orrington

Web Directions USA
“CSS3, HTML5, Geolocation, mobile web — we’re seeing an explosion of innovation in design and development unlike at almost any other time in the web’s history. To keep you ahead of the curve, Web Directions USA features leading web practitioners, bringing you the freshest technologies, techniques and know-how.”

When: September 21-25, 2010
Where: Atlanta, Georgia, USA at the Loews Atlanta Hotel

National Association of Government Webmasters Conference
“The NAGW National Conference is the premier conference that focuses on local, state and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for two and a half days of education, training and networking in a relaxed professional environment.”

When: September 22-24, 2010
Where: St. Louis, MO, USA at the Millennium Hotel

European Information Architecture Summit
“A summit for anyone concerned with the design of navigation, organization, labeling, and search systems that help people find and manage information more successfully.”

When: September 23-25, 2010
Where: Paris, France at Les Salons de l’Aveyron

Flash on the Beach
“Don’t think that Flash on the Beach is only about Flash. Sure appearing at FOTB in the past we have had the usual suspects — Flash, Flex, AIR, and then some. Open Frameworks, Processing, AJAX, Photoshop, After Effects, Art, Design, Illustration, Animation, Sound and many more. Whether you are a tech-head or a creative, if you are a decision maker or a team manager, if you are in need of a fix of creative inspiration, or want to know the latest how-to’s, Flash on the Beach is where you’ll get it.”

When: September 26-29, 2010
Where: Brighton, UK at the Brighton Dome

BlackBerry® Developer Conference
“The BlackBerry® Developer Conference is a premier showcase for what can be done with BlackBerry apps, attended by thousands of the world’s most enthusiastic developers, BlackBerry experts, and Research In Motion® (RIM®) partners. It’s the place to get technical, code-driven information that can be applied to projects; the place where new tools and technologies can be experienced for the first time; the place for getting your questions answered, or finding the inspiration to go further with mobile applications than you ever imagined possible.”

When: September 27-30, 2010
Where: San Francisco, CA, USA at the Marriot Marquis

The ExpressionEngine and CodeIgniter Conference
“At the ExpressionEngine & CodeIgniter Conference you can meet the experts, be inspired and break new boundaries! This event brings you presentations and workshops from your favorite EE & CI speakers. Both beginners and experienced users will benefit from a variety of topics and sessions: discover how your favourite content management system and PHP framework can bend even further!”

When: September 29 – October 1, 2010
Where: Leiden, The Netherleands at De Stadsgehoorzaal theatre

Forward – Phoenix Design Week 2010
“The beauty of Phoenix Design Week is that it enables us to put Phoenix design on a pedestal. Throughout Design Week, there are many ways this is being executed, but one of the coolest ways we manifest this goal is by giving you options to showcase your own creative prowess.”

When: September 29 – October 3, 2010
Where: Phoenix, AZ, USA at the Phoenix Convention Center plus other locations

IDEA Conference
“IDEA2010 is a design conference tailored for you. This year’s unique mix of traditional presentations with structured activity time assures that you’ll get high-level concepts from big thinkers, and the space to apply them with peers.”

When: September 30 – October 2, 2010
Where: Philadelphia, PA, USA at the Independence Seaport Museum

October 2010 Events

A Better World by Design Conference
“A Better World by Design is a three-day internationally acclaimed conference in Providence, RI that connects students, professionals, and individuals from a variety of disciplines in order to build a global community of socially conscious and passionate innovators. Presenters share engaging stories, workshops teach creative skills, and discussions reframe perspectives.”

When: October 1-3, 2010
Where: Providence, RI, U.S.A at Brown University & RISD Campuses

Future of Web Apps
“The Future of Web Apps is a conference for web developers and entrepreneurs. You’ll learn about cutting-edge tech and exciting new ideas.”

When: October 4-6, 2010
Where: London, UK at The Brewery

Fronteers
“Founded in 2007, Fronteers is the non-profit trade organization of Dutch front-end developers. Its goals include the professionalisation of our trade, (improved) recognition of the front-end discipline, and improving the position of Dutch front-end developers in their company and the web design/development world in general.”

When: October 5-8, 2010
Where: Amsterdam at Pathé Tuschinski theatre

DesignPhiladelphia
“Through its events and programming, DesignPhiladelphia showcases the role that design has played historically in Philadelphia, and celebrates the city’s contemporary significance as a center for creative advancement. Through the breadth of our events, DesignPhiladelphia unites the creative disciplines – from architecture to interior design, fashion to product design, multi-media to graphic design.”

When: October 7-17, 2010
Where: Philadelphia, PA, USA at various locations

5D|10 The Future of Immersive Design Conference
“5D | The Future of Immersive Design is the visionary, international conference for all designers, practitioners and students working in the fields of narrative media.”

When: October 8-9, 2010
Where: Long Beach, CA, USA at the Carpenter Performing Arts Center

International PHP Conference
“With its mixture of topics the International PHP Conference provides an ideal resource for all professionals and their successful daily routine within the whole PHP spectrum. Insights into current Web 2.0 technologies, Security, Best Practices for tools and components, Enterprise know-how, databases, architectures and more are presented at the International PHP Conference 2009.”

When: October 11-13, 2010
Where: Mainz, Germany at the Rheingoldhalle

Web Directions South
“Featuring leading web practitioners from across the world, bringing you the freshest technologies, techniques and know-how in web design and development, along with numerous networking and social opportunities. If you work on the web, Web Directions South is the industry event of the year.”

When: October 12-16, 2010
Where: Sydney, Australia at the Sydney Convention and Exhi bition Centre

AIGA Gain
“The premier biennial event for business and design leaders. Attendees will learn how industry leaders addressed business challenges through design—and how they reinvented their businesses, their strategies and even themselves. We’ll hear business, design and thought leaders share their innovative approaches to generating greater return on investment, fostering emotional connections and providing positive brand experiences for customers.”

When: October 14-16, 2010
Where: New York City, NY, USA at The Sheraton New York Hotel and Towers

Voices That Matter iPhone Developers Conference
“You’ll acquire skills for mastering iOS development from leading authors and experts during a weekend of strong educational sessions. Our speakers are eager to share their knowledge, answer your questions and address your application needs. You’ll participate in interactive discussions that provide the perfect environment for an unbiased and effective learning experience. This engaging two-day conference features how-to sessions covering the latest, most intriguing news in application development for the iPhone and iPad.”

When: October 16-17, 2010
Where: Philadelphia, PA, USA at The Hub Cira Centre

jQuery Conference
“The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more — all from the top jQuery developers. Speakers include John Resig, Paul Irish, Karl Swedberg, Doug Neiner, and more.”

When: October 16-17, 2010
Where: Boston, MA, U.S.A at the Hilton at Boston Logan Airport

Web Design World
“These are interesting times: a combination of technical innovation, audience growth, and crummy economy. As a web designer, you can’t escape any of the three. But you can learn how to keep up with the innovation, take advantage of the growth, and survive the downturn. That’s where we come in. We take our mantra — provide practical, no-fluff, how-to — very seriously. If you’ve joined us before, you know that. If you haven’t, please check us out.”

When: October 18-20, 2010
Where: Las Vegas, NV, USA at Planet Hollywood Resort & Casino

Do-It-Yourself Usability Testing: The Workshop
“The workshop will include: A complete explanation of how I recommend doing testing (Hint: very simple, very fast, and very cheap); Two live usability tests on attendees’ sites, so you can see the whole process in detail; A chance to practice conducting a test on your own site; Advice on how to interpret your findings and decide what changes to make; Plenty of time to answer your questions about testing or any other aspect of usability.”

When: October 20, 2010
Where: Washington, DC, U.S.A

Front-Trends Conference
“This is a gathering for front-end lovers and professionals to discover the current trends and tools to build a professional career out of innovative front-end development.”

When: October 21-22, 2010
Where: Warsaw, Poland at the Centrum konferencyjno – kongresowe

Brooklyn Beta
“Brooklyn Beta is a collaboration between Analog and Fictive Kin. Our goal for the conference is to inspire you to ‘make your own stuff.’ We’d love to see what the Web would be like if all you talented web people started using your magical abilities to bring your own ideas to life. To help, we’ve put together a conference aimed at turning inspiration into action with talented folks from every web field attending. We want to get all the people who can turn an idea into reality in one place and see what happens.”

When: October 21-22, 2010
Where: Brooklyn, NY, USA at the Invisible Dog

ExpressionEngineCamp
“ExpressionEngine Camp is a collaborative all-day workshop about ExpressionEngine on October 22nd. Learn best practices or share tips about creating web sites with EE.”

When: October 22, 2010
Where: Denver, Colorado, Casselman’s Event Venue

Adobe MAX 2010
“MAX 2010 is an amazing opportunity to learn new skills, explore emerging technologies, and connect with thousands of other industry leaders, Adobe products users, and Adobe teams. The conference offers hundreds of informative sessions and hands-on labs for designers, developers, and decision-makers, and there are countless networking opportunities, from organized events to casual conversations in hallways between sessions.”

When: October 23-27, 2010
Where: Los Angeles, CA, USA at the Los Angeles Convention Center & the Nokia Theatre L.A. LIVE

FITC Unconference @ MAX 2010
“FITC brings together thousands of forward-thinking designers, developers, and business decision makers that are shaping the future of our industry. The Unconference is a way for attendees to convene in a casual setting to share ideas as well as host their own discussion groups. This year FITC has once again been chosen as one of the organizations to run one of the Unconference areas.”

When: October 25-27, 2010
Where: Los Angeles, CA, USA at the Los Angeles Convention Center

View Conference 2010
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX. VIEW 2010 will continue to focus on exploring the increasingly fluid boundary between real and digital worlds. Through lectures, meetings, tributes, exhibits, screenings and demo presentations VIEW will reveal the new digital frontier sweeping from cinema to architecture, from automotive design to advertisement, from medicine to videogames.”

When: October 26-29, 2010
Where: Turin, Italy, at the Conference center Torino Incontra

Web Developers Conference
“The goal of the Web Developers Conference was to get students engaged with the world of the web and what this beautiful industry offers as well as meeting professionals and making important contacts that could lead to placements and even graduate positions.”

When: October 27, 2010
Where: Bristol, U.K at the UWE Exhibition & Conference Centre.

Microsoft PDC10
“The PDC isn’t just about content and sessions — it’s an opportunity for you to get hands-on access to the latest technologies, have your questions answered by the people who conceived and built the technologies and plan the features and architecture to support your business goals. If you’re a developer, architect or technology leader involved in making strategic technology decisions for your company or organization, you can’t afford to miss the PDC.”

When: October 28-29, 2010
Where: Seattle, WA, USA at the Microsoft Campus

Usability Week 2010
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials on topics such as: Fundamental guidelines for Web usability; Applying information architecture (IA) principles; Writing for the Web; Application design; Integrating social features on mainstream websites; The human mind (how your users think).”

When: Various dates in October and December.
Where: San Francisco, U.S.A; Copenhagen, Denmark; Edinburgh, UK; Las Vegas, USA

November – December 2010 Events

An Event Apart San Diego
“From the makers of A List Apart, An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: November 1-2, 2010
Where: San Diego, CA, U.S.A at the Westin Gas Lamp Quarter

How to Web 2010 Conference
“Learn to build better web apps and businesses.”

When: November 3-4, 2010
Where: Bucharest, Romania at Hotel Intercontinental

FITC Edmonton 2010
“Back for its second year, FITC Edmonton promises to be jam-packed with presentations, demonstrations, and panel discussions. With some of the most interesting and engaging presenters from around the world, FITC Edmonton will be two days and nights that will leave you inspired, energized and awed!”

When: November 6-7, 2010
Where: Edmonton, AB, Canada at the Northern Alberta Institute of Technology

edUi Conference
“A learning opportunity for web professionals serving institutions of learning. Through a rare speaker lineup, including top innovators and industry peers, we provide inspiration, tools, and techniques to help web professionals serving colleges, universities, museums, libraries, and other institutions of learning address the challenges they share improving the experience of their users online. edUi 2010 offers something for every member of your web team, with sessions on usability, design, programming, rich media, strategy, social media, and more.”

When: November 8-9, 2010
Where: Charlottesville, VA, USA at the Omni Hotel

User Interface Conference
“UI15 is an intense, inspiring 3-day event, masterfully crafted to bring out the best in today’s UX professionals. We’ve assembled an all-star team of design experts to share their latest techniques in interaction design, content strategy, design thinking, and visual communication.”

When: November 8-10, 2010
Where: Boston, MA, U.S.A at the Renaissance Boston Waterfront Hotel

Build Conference
“The hand-crafted web design conference. Build is a small, yet perfectly formed, boutique design conference where interesting, talented web practitioners from all over the world come to share ideas, techniques and inspiration. Some are on stage; some are in the audience. For the second year running, we’ve created the conference we really want to go to. We think you might like it.”

When: November 8-12, 2010
Where: Belfast, Ireland at Waterfront Studio

RubyConf 2010
“RubyConf is the official International Ruby Conference. Founded in 2001, RubyConf has provided an annual venue for the ever-growing Ruby community to meet face to face to share, collaborate, and socialize.”

When: November 11-13, 2010
Where: New Orleans, LA, USA at the Hilton New Orleans Riverside

Full Frontal JavaScript Conference
“Full Frontal is a conference held in Brighton UK, for the front end developers with JavaScript skills ranging from beginner to advanced. If you’ve dabbled with JavaScript in the past and wanted to learn more about how the language works and what makes it tick, then this conference is for you.”

When: November 12, 2010
Where: Brighton, UK at the historic Duke of York’s Picturehouse

Future of Web Design
“The Future of Web Design is coming back to New York in 2010. The newly revitalised event has evolved into a beautiful three full days of essential web learning. A full day conference followed by 2 solid days of in depth workshops, all taught by the best in the industry.”

When: November 15-17, 2010
Where: New York City, NY, USA at New World Stages

Semantic Web Summit East
“How can you create value that will put you ahead of the competition? The Semantic Web Summit, formerly the Web 3.0 Conference, features innovators across industries examining the potential of the semantic web, and how it can transform the way you do business. This won’t be a day and a half of technical jargon — this event is about improving efficiencies in marketing and information management for a positive bottom line effect.”

When: November 16-17, 2010
Where: Boston, MA, USA at the Hynes Convention Center

Design City Graphic Design Expo
“Stay on top of your industry! Visit Design City and see the latest graphic design tools, services, and products from the world’s largest vendors. You’ll see and test software that you’ve been wanting to try, you’ll meet the people that you talk to on the phone every day, and you’ll be wowed by some of the latest technology created for your profession.”

When: November 20-22, 2010
Where: Toronto, ON, Canada, at the Direct Energy Centre

The Rich Web Experience
“RWX 2010 will cover the hot areas of interest in the web space today: HTML5, CSS3, JavaScript, Ajax Libraries, Semantic Web, iPhone, Android, Flex, GWT, NodeJS, Security, and more. RWX 2010 will feature 6 parallel tracks with over 15 speakers and 60 plus technical sessions/workshops. At RWX 2010 you will interact with industry experts, project leads, authors, and top developers.”

When: November 30 – December 3, 2010
Where: Fort Lauderdale, FL, USA at The Westin Beach Resort

Early 2011 Events

New Adventures in Web Design Conference
“This event will be sympathetic to existing and new challenges and opportunities faced by front-end web folks in their day-to-day work and beyond. That said, the content will be beneficial to a broad audience, and a number of attendees and guests represent agencies, organisations, and businesses across varied roles. Ultimately, this event is organised by designers, for designers.”

When: January 20, 2011
Where: Nottingham, UK at the Albert Hall

Interaction Eleven
“The IxDA Interaction conference is the premiere annual event for interaction designers, with content and activities relevant to practitioners, managers, educators, and students. Now in its fourth year, the Interaction conference has hosted leading speakers from consultancies, agencies, corporations, and universities around the world.”

When: February 9-12, 2011
Where: Boulder, Colorado, USA

International Conference on Intelligent User Interfaces
“IUI 2011 is the annual meeting of the intelligent interfaces community and serves as the principal international forum for reporting outstanding research and development on intelligent user interfaces.”

When: February 13-16, 2011
Where: Palo Alto, CA, USA at the Sheraton Palo Alto with workshops at nearby Stanford University

Information Architecture Summit
“The Information Architecture Summit is the premier gathering place for information architects and other user experience professionals. It’s grown from a special interest group’s efforts to define an emerging field, to a rich and expanding community of practice, shaping and informing multiple disciplines. You don’t have to be an information architect or user experience professional to enjoy the Summit. You simply have to love the art and science of structuring information.”

When: March 30 – April 3, 2011
Where: Denver, CO, USA

SXSW Interactive 2011
“SXSW Interactive features five days of presentations from professionals in emerging technology, networking events hosted by industry leaders, and a lineup of special programs showcasing new digital works, video games and innovative ideas the international community has to offer.”

When: March 11-15, 2010
Where: Austin, Texas, USA

Related Links

• Conference Roundup
  Very useful web application inspired by the original roundup here on Smashing Magazine.
• Web Conferences Roundup: Events From Around the Globe

What conferences will you attend?

What conference are you going to attend? Let us know — Smashing Magazine is often attending various conferences and events, and we would love to meet you in person!

---

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

For centuries color has been used to provide distinction between classes, businesses, kings, courts and everything else in between. So what exactly is in a color? Does it matter that purple has been used in connotations with royalty? Does it matter that most fast food places logos are red to stimulate your appetite? So a color is a color right? Not exactly. Below are a few examples with switched color palettes. Do you think the brand still looks the same? Does it give off the same vibe/aura in a different color?

So if colors are “just colors” these brands being switched should be exactly the same thing right? Starbucks stills feels warm and earthy in blue… Facebook is cool and collected in red. Nasa feels not so smart and more juvenile… And adobe… well, it’s a bit shocking to see a different color palette to icons that we rely so heavily on their color. Many would mistake photoshop for flash in that color palette. So, remember colors aren’t just colors… Research should be put into the color palette just like your branding.

Suggested Reading

A Guide to Choosing Colors for Your Brand

Can Color Affect Your Brand Positioning?

The Definitive Color Wheel

Sponsored by

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

Is a color just a color?

Product photography could well be the single most important design aspect of any e-commerce website. Without the ability to touch, hold, smell, taste or otherwise handle the products they are interested in, potential customers have only images to interact with. Ultimately, the softer, tastier, flashier and more attractive your products look to shoppers, the more confident they’ll feel about purchasing from you and the better your conversion rate will be.

While any product can look great in a photo (sometimes deceptively so), keep in mind that your images should match your website’s overall aesthetic and your company’s image. Let’s start with a few great examples of how online retailers have incorporated high-quality product photos onto their websites. In this article, we will focus on images of actual items, rather than models, events or landscapes.

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

Examples Of Beautiful Product Photography

Uncrate
Uncrate is probably the best-looking men’s shopping blog, and a lot of the credit goes to the product photos in its posts. One of the criteria for its blog posts seems to be for product photos to be incredibly well shot. This is a great place to get inspired for your own product photography project.

Ties.com
Ties.com has years of experience with dress-tie photography and has improved the quality of its photos over the years. Now it uses a lightbox effect to offer close-ups of its ties. The layout of the website is similar to that of Amazon. As with any website of this nature, super-clear photos are essential to compensate for the customer’s inability to feel the ties.

Made.com
Turning to furniture, UK website Made.com does a great job of showing its products from multiple angles and perspectives without cluttering the website or making the images feel redundant. Its lamps, for example, can be viewed up close or at a distance within the same frame, while its tables and desks can be viewed from both eye level and low angles. Again, the selective use of color throughout the website directs attention to the products themselves, while giving the overall design a sleek minimalist feel.

Harry Winston
High-end jewelry website Harry Winston emphasizes the brilliancy and luxury of its products by integrating them in a relatively stripped-down website. The sharp, vibrant images of colored gemstones and sparkling crystals command the viewer’s attention on every page, without overpowering the other elements of the design. The brilliant reds, greens and oranges of these products contrast with the neutral black, white and gray color scheme, while complementing the refined cursive and rolling script scattered throughout the website.

Louis Vuitton
Another up-market website, Louis Vuitton also uses wonderful high-res product shots and zooms for its non-clothing items, such as calendars and wallets. While this website predictably has numerous photos of models posing with the products in lifestyle and fashion vignettes, it also does an excellent job of emphasizing the craftsmanship and quality of its items.

Moben
Kitchen designer Moben has a much busier website, using pictures and videos of its products in various locations. The photos here show potential customers the innovative design and style of these products in a unified setting, while still offering detailed shots of individual items. This is a great strategy for e-commerce companies that sell large products or that sell services that are difficult to visualize.

Weber
Moving out of the kitchen and into the backyard, Weber, a well-known maker of grilling and other cooking equipment, has a fine product photography area on its website. The website itself is pretty basic, as you might expect, without much in the way of attractive text or icons, but the sharp images and high-quality close-ups add a lot of visual appeal. If nothing else, this is a good example of how good images can help a website overcome a mediocre design.

Bang & Olufsen
Turning to a website that at first glance seems a bit less inviting, audio-video manufacturer Bang & Olufsen opts for a harder, more architectural aesthetic than some of the other websites we’ve looked at. While there is plenty of black, gray and white throughout, this website is far from cold and sterile, thanks to the side-sweeping product photos, which are bright but do not compromise the futuristic feel of the design. The pages of Bang & Olufsen’s collection have another nice touch: product thumbnails glow when you hover over them.

Leica
As you might expect from one of the world’s biggest names in photography and imaging technology, Leica has some high-quality images, especially of its camera equipment. You won’t find a ton of photos here, but in keeping with the brand’s no-frills, no-nonsense approach, the pictures you do see are high-res and sharp, a perfect example of how to do more with less.

Victorinox
Another brand known for precision equipment, Victorinox has an impressive range of visual content on its website, especially in the product area. The sliding photo gallery in the “Timepiece” section, for example, captures both the mechanical and aesthetic beauty of the brand’s watches: you can really imagine how it would feel to hold and wear the watch, while still being able to see the complexity of its internals. The website is also notable for its great examples of selective focusing and dramatic lighting, which really make the products eye-catching.

CuffLinks.com
CuffLinks.com clearly puts effort into photographing its vast selection of cufflinks. It offers customers a good view of its cufflinks from all angles. It also shows the packaging or box that the cufflinks will ship in, giving us a well-rounded impression. Fortunately for this company, the size and inflexibility of cuff links make them a relatively easy product to photograph. Take a look at their many other products and the different angles the shots have been taken from.

Ties ’n’ Cuffs
Ties ’n’ Cuffs is another e-commerce store with a large selection of cufflinks, ties and other accessories. Like CuffLinks.com, it offers a handful of photos for each product. But Ties ’n’ Cuffs lets customers also zoom into its cufflinks, giving a super-clear picture of product details that one might miss in a wide shot and showing how the crystals reflect the light. Browse around this website to see how they’ve implemented their zoom function for many different products.

Chocomize
Chocomize lets chocolate lovers make their own custom chocolate bars by allowing them to select from a variety of ingredients. Here is a great example of using photos for products that offer a high degree of customization, without bogging down viewers with too many choices and images. The pictures on Chocomize—bright, glossy piles of candy, nuts, berries and decorations that can be added to a milk, dark or white chocolate base—are relatively uniform in size and shape yet distinctive enough to be unique and noticeable. It also has detailed photos of each ingredient.

Threadless.com
The t-shirt giant Threadless.com has a particular culture, and it has done a great job of keeping that culture intact with its photos, while still keeping the product itself front and center. Check out the many creative ways that it displays its t-shirts.

Designbyhumans.com
Another great t-shirt company. It has a super-clean website and keeps the product well in focus, despite the human models (which can sometimes distract from the product).

Apple
While it sounds cliché, the product photos at Apple would make anyone want to purchase an iPad or iPhone. With a limited number of images and a simple twistable 360-degree viewing mode, the designers behind this website visually sum up Apple’s mantra of simplicity and fun.

Four Steps Of Product Photography

1. Prepare Product

To take quality photographs, the complexity and time required will depend greatly on the type of product you’re shooting. Some of the easiest products to photograph are solid objects such as cups and toys; you may just have to give them a good polish before shooting.

Clothing, textiles and other items that can bend, stretch and wrinkle are much harder to photograph and could require hours of ironing and arranging to get a perfect result. Details, like whether a shirt collar is straight, will determine whether the photographs look like they were shot in a serious studio or by an amateur with a point-and-shoot camera.

Whatever the product, inspect it carefully for tears, stains, chips and other imperfections before beginning.

2. Light

To get a great-looking photo, lighting is crucial. Fortunately, with many products, you don’t need much equipment to get a well-lit balanced exposure. For objects the size of a digital camera or smaller, you can use an EZcube light tent with two small 30-watt bulbs on either side. For larger items, such as clothing, two 60-watt soft boxes on either side of the product should suffice. Also consider using a light reflector to get rid of any shadows and obvious highlights.

3. Set Your Camera

Watch out for noticeable light reflections on shiny surfaces. Even though most product photos look very staged, you don’t want yours to look too artificial.

Obviously, you’ll need a camera to take pictures, so make sure you have one. It doesn’t have to be the best or most expensive on the market, but it should at least have manual focus and shutter and aperture controls. These are all standard on most SLR cameras.

Once you’ve arranged the product and lighting equipment, take a few test shots until you get an exposure that isn’t too bright or too dark. Keep track of the shutter speed and aperture settings of your best photos, and use them again in future to maintain consistency. If you aren’t sure how things like shutter speed, aperture and lens focal length affect images, you might want to do some basic research.

If you understand the basics of photography but your photos still don’t look quite right, don’t worry, because you may have to change several in-camera settings before getting the kind of shots you want.

If your pictures look soft or don’t enlarge well, make sure the ISO setting on your camera is as low as possible. The ISO setting affects the light sensitivity of a camera’s photo sensor. By setting yours to 100 or 200, you’ll get a higher-resolution shot with less grain and pixellation. While you’re at it, change the camera’s image size to the highest possible setting. Most cameras default to a medium-sized resolution (around 1500 x 850 pixels).

Next, make sure the white balance is set to handle the kind of light you’re working in. Most cameras have modes for incandescent, fluorescent, direct sunlight and cloudy environments, and you should adjust your camera’s white balance according to these different conditions. If the white balance controls are off, your images might either look too bright or have a sickly yellow cast, especially if your product is white.

Color control settings are important to consider as well. Most digital cameras allow you to select several degrees of color saturation, ranging from muted to normal to vibrant. If your product is already colorful (flowers, for example), a less saturated setting would probably work better. This is especially true with red, which many digital cameras (even high-end ones) have difficulty processing.

Finally, make sure the image format is appropriate. If you’re just putting the photos online, high-resolution JPEGs are probably fine. RAW files, on the other hand, carry more data because they aren’t compressed like JPEG or TIFF files, and they carry fewer digital artifacts; but they take up more space and require special codices and converters to be viewed and edited. Some cameras have a “RAW + high-res JPEG” setting, which gives you both compressed and uncompressed versions of an image. Do a little research on your camera when deciding which format to use, because some models are automatically set to give a softer focus in JPEG mode.

4. Edit the Photos

This is the final and perhaps most important step of product photography. This is when you really take your photos to the next level and make them pop. If you’ve gotten the lighting right and your camera properly configured, then you are well on your way to great photos. Factors such as unwanted colors and objects that couldn’t be removed during the shoot, though, will require some adjustment.

Surrounding a product in white space is common practice. This makes the photo convenient to use on websites and in catalogs because it won’t clash with other elements. To make a product float freely in white space, you have to remove the background with masking in your photo editing program. As common as it is, it is often done poorly, making an otherwise fine photo look amateurish. Masking properly takes time, especially when you are not working with straight lines. Photoshop CS4 has a great “Refine edge” tool that makes it much easier to correct crooked lines.

Many people also use a variety of artistic effects in Photoshop and other bitmap editors to subtly manipulate their photos. One such effect is the soft or selective focus, which, as the name implies, softens a portion of the photo while leaving other areas sharp. This is great for creating the illusion of depth and size, and the trick is often used for pictures of food, jewelry and watches (see the examples above). Depending on your lens, you can get a similar in-camera effect by setting the aperture low and zooming in on the product from a distance.

Also, depending on the product and the look you’re aiming for, you could also experiment with the perspective controls in Photoshop. Most people assume this tool is only good for tall buildings and scenes with noticeable vanishing points, but you can also use it to make geometric objects such as tables and desks appear overpowering, especially when photographed from a low angle (see Made.com for examples).

Additional Tips

Blend Photos With Design

When putting together a collection of product photos, ask yourself if the images you’re taking will match the color scheme and aesthetic of your website. The easiest way around such a challenge is to just keep things simple and minimalist.

Use a Gray Card

A gray card is a middle-gray reference that you can set your camera to for accurate and consistent color rendering, especially on older cameras that have limited controls for white balance and color. A gray card gives a more realistic depiction of your product’s color and reduces the amount of post-exposure color adjustment you have to make later. They can be bought at any photography store and for about $10. Most cameras have a function for taking gray card test photos; read through the owner’s manual carefully.

Get a Flexible and Sturdy Tripod

Taking sharp, consistent and professional product photos is nearly impossible without a good tripod. It can be any regular tripod, but if you are shooting a product on the floor from above, you’ll probably need a horizontal extension: as the name implies, this tool extends horizontally from the head of the tripod so that you can position your camera directly above and parallel to the product itself. This prevents linear distortion, vanishing lines and uneven image depth.

The tripod you need will depend on the size of your camera. If you have a heavy-duty SLR with a long horizontal extension, you’ll need a solid tripod to support the weight of the camera and prevent shaking.

If you put your tripod in storage, make sure you are able to reset it to the same height and position for your next shoot. Measure the legs of the tripod, and mark with tape where the feet of the tripod should stand on the ground.

Use Light Reflectors

As mentioned, light reflectors give photos an even spread of light and a fresh look. They come in many sizes and shapes. A medium-sized light reflector, one as big as a large pizza, should be more than enough for product photography. Anything bigger is more appropriate for videography or photographs of people.

Reflectors come with three different surfaces: silver foliated, gold foliated and white. The gold- and silver-sided reflectors usually reflect the most light, while white reflectors give a softer, warmer glow.

Define the Decision-Making Process

If your standard of quality is high or you’re working on a team, the lack of a decision-making process can waste a lot of time. Set clear criteria for what you’re looking for, and make sure your workflow allows all parties to follow the criteria without constant interruption.

Outsource When Appropriate

If your product is easy to shoot, then outsourcing is a great option. The most important points to discuss with the photographer beforehand are quality and their willingness and ability to contribute to the editing process.

The quality of the photos will depend on the time spent editing them. Some photographers don’t want to get involved with this part, feeling that image masking and other such tedious tasks are below them. Cover all your bases before starting with the photographer, otherwise the process could turn out to be more expensive and time-consuming than you expected.

Further Resources

If you liked this article, then read Smashing Magazine’s recent article How to Use Photos to Sell More Online for another look at photography and e-commerce.

Also consider these:

• An extensive practical guide to photographing various products.
• A guide to photographing watches, jewelry and other products.

Zachary Lowell contributed to this article.

(al)

---

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

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

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

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

Gradients, Drop-Shadows, Reflections, Oh My!

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

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

Mint.com has everything a client could ask for in a “Web 2.0 design”. Does that mean it’s beautiful?

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

The Dribbble Syndrome

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

Dribbble shows out-of-context design shots. Is this a bad thing?

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

The Style-Less Comparison

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

The Nettuts+ logo and navigation bar.

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

The Facebook home page.

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

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

What Makes A Design Usable?

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

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

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

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

Responsive and Intuitive Page Elements Make a Design Usable

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

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

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

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

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

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

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

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

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

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

Branding Makes a Design Usable

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

Look at the screenshot below from 10k Apart:

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

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

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

Usable Doesn’t Have To Mean Ugly

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

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

Related Posts

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

(al)

---

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

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

The Current State

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

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

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

Getting Started

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

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

Live in the Moment

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

Pioneers Of the New Frontier

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

Leonardo da Vinci

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

M. C. Escher

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

Norman Rockwell

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

Closing Words

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

P.S.

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

(al)

---

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

There is a rush of anticipation one feels upon cracking open a fresh sketchbook. The blank page is a small area yet also an expansive laboratory for the creative process. Over time and around the world, artists have developed many ingenious techniques to advance their creative reach.

Despite this, one of the most powerful means we have to develop concepts is deceptively simple: ink on paper. Far from fading in popularity, the fascination with sketching is exploding. Flickr groups like Moleskinerie, Line Drawing and The Drawing Club are growing as international professionals and hobbyists inspire each other.

In the following excerpts from Flickr, we see how these artists utilize simple lines — clean or grungy; thick and thin; controlled or spastic — not only to recreate reality, but to create their own realities.

Sponsored by

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

Drawing the Line

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

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

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

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

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

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

Security

“Death of the Open Web”?

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

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

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

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

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

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

Security Solutions

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

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

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

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

Freedom

Net Neutrality

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

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

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

The World into the Web

Browser-based Everything

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

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

The Internet as a Collective Consciousness

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

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

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

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

The Web into the World

The ‘Web of Things’

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

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

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

Interactive Landscapes

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

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

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

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

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

The ‘Innerweb’

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

Here’s one speculation.

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

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

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

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

The Crown Jewels

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

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

Time Travel

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

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

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

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

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

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

Conclusion

Responsible Evolution

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

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

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

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

Partial Bibliography

• New York Times Magazine: “The Death of the Open Web”
• Simon Mainwaring: “The Future of Shopping: What Happens When Walls Start Talking”
• The Gutenberg Parenthesis: Parallels Between Pre-Printing Communication and the Digital Era
• New York Times: “Google Pitches a Web-Centric Future”
• Google Talks: The Future of the Internet
• Moyers on America: ‘The Net @ Risk’ (Video)
• Pew Internet Research Poll: Future of the Internet IV
• Google I/O: The Web is Killing Radio, Newspapers, Magazines, and TV (TechChrunch reports)

Related Posts

You may be interested in the following related posts:

• The Evolution of the Logo
• The Dying Art Of Design
• Lessons From Swiss Style Graphic Design
• Art Manifestos and Their Applications in Contemporary Design

---

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

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

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

What Exactly Is A “Hack”?

Let’s take a look at dictionaries. Hack: noun.

1. A horse used for riding or driving; a hackney.
2. A worn-out horse for hire; a jade.
3. One who undertakes unpleasant or distasteful tasks for money or reward; a hireling.
4. A writer hired to produce routine or commercial writing.
5. A carriage or hackney for hire.
6. A taxicab.

Those who responded to my query in social media had great insights and varied opinions on what is a ‘hack’. Wrote one designer:

It is not as regulated as other professions, such as interior design and architecture or accounting for that matter. To call oneself a designer, there is no apprenticeship required, no test to pass, no certification to obtain. If you have access to the software, it’s open season.

One creative director wrote some very kind words:

I view hacks as part of the overall ecology of what drives business when it comes to design and branding. On the one hand, hack has a connotation as it relates to businesses that are starting up or struggling to survive or that simply don’t take design seriously — the kind of business-folk who just look for the lowest bidder. Then there are the sincerely talented designers who simply lack ambition, business savvy or both, and who do not get past five years in their careers. Either situation actually helps cultivate a wonderful ecology of design business, in my opinion.

Surprisingly, an editor-in-chief of a well-known news service responded with an outrageous number of typos and grammatical errors (corrected here):

Every industry has hacks, but most artists I have met (most, not all) really do strive to be original and to use their imaginations to come up with new ideas. Very few jaded ones will rehash old stuff or try to peddle work that is derivative. It is always “buyer beware” in this case. If the guy seems like a slick used-car salesman, find someone else with whom you can work. On the other hand, artists look out for people who don’t want to sign contracts, people who can’t tell good art from bad, people who can’t make up their minds after being presented with 20 different sketches, and people who will not pay an advance or a set-up fee.

A well-known writer, checking in as “misery-loves-company,” added:

There are hacks in every discipline. Try working as a professional writer. Anybody with a keyboard and the ability to type can claim this for a calling.

A gentleman with the title of “Business Development” added another view that creatives might not hear often:

I’ve thought about the definition of hack. It is conceivable that a person with no formal training or someone who did not do well in design school could rise to the top of their profession. They would have to be driven to succeed and committed to quality, I am sure. But there is no guaranteed correlation between the eliteness of one’s education and the quality of their current work.

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

I was once invited to witness what crowdsourcing could do. I guess I was being lined up for the next firing squad and lured by free pizza. I honestly thought I was attending a gathering of designers at a promotional advertising company. Mmmmm, nope! The owner described the projects, mostly logos, and showed what a source of 8 “designers” could design. Seems that was the unpaid part. The “best designer” would get paid for finishing the project, which might not be his/her logo but a mashup of every design the owner, who now also owned all of the unpaid designs, decided to create…because he was so creative. “That’s a win-win situation” he closed with. I could hear him from the supply room, where I was helping myself to my “out-of-court settlement” for having been dragged to this thing. HOW Magazine’s July issue has an article on crowdsourcing. Quotes from two authors on the subject in that article say:

Perhaps, as Debbie Millman writes, this trend does devalue our services. Perhaps, as David Baker observes, it weeds out the low-level clients we shouldn’t be working with, anyway. Is crowdsourcing really “stealing” work from professional designers — or has it simply replaced the quick-print guy and the executive assistants?

The editor adds:

One answer to that question may be: Let’s reinvent crowdsourcing so it works to the benefit, not the detriment, of both parties in the exchange. Maybe we could invent a way for a small group of designers, vetted for their expertise, to engage with a client, present their ideas, earn compensation for those ideas — and then the designer whose concept is chosen is further paid to fully develop and execute that idea. Talented creatives from all over the globe could participate in a project they would otherwise have no access to. Designers and clients have an opportunity to interact, so the solution isn’t derived in a vacuum (as is often the case with crowdsourcing). Clients can connect with a range of qualified creative thinkers to build their business. It doesn’t have to be cheap. Everyone gets paid. The client chooses the best solution.

Aside from other glaring mistakes in the article on business practices, the editor is quite obviously fond of glowing rainbows and unicorns. Every creatives’ guild or organization is against this practice because companies use it to their best advantage financially and people continue to provide work. Those attending this cult-fest of design suggested the same thing the HOW editor outlined, to the crowdsourcing person who called us to the ill-fated meeting. Pay MORE money for the same work? It wasn’t going to happen in non-unicorn world. HOW? How MUCH, is more like it. “Mommy, I hate designer’s guts!” “Shut up and eat!” To their credit, they did mention the position of organizations, which they totally ignored when sprinkling pixie dust on the subject and presenting it to readers who want to know “HOW?”

Professional organizations must tread lightly in advocating against unpaid work, as AIGA discovered in the 1990s, when the Federal Trade Commission ruled that any statement or code of ethics that advised members not to work for free amounted to price-fixing. Its current position supports fair compensation for design work, and delineates between spec work (where a creative works for free in hopes of compensation) and unpaid work like pro-bono projects or internships (where services are willingly given away). The Graphic Artists Guild warns its members against competitions where the sponsoring organization retains all rights to all submissions, and helps creatives avoid unfavorable contracts.

Surprisingly, Forbes aired an article on crowdsourcing and of course, the self-appointed “capitalist tool,” seemed more impressed with it as a business model, rather than a threat to an industry. To be fair, they were balanced in exploring a few quotes echoed by other professionals in the field.

Mix crowdsourcing, the Internet and a huge pool of underemployed graphic designers, and the outcome is a company that’s grabbed a great deal of attention. In the two and a half years since it launched, Web startup 99designs out of Melbourne, Australia, boasts that it’s helped to broker 48,000 graphic design projects for big name clients like Adidas and DISH Network as well as for thousands of small businesses.

Personally, I’ll be sure to remember that when I need new sneakers or satellite TV service. Will other creatives?

Acting as a middleman between business owners and graphic designers, the 99designs site hosts contests in which clients post their needs — website design, logos, print packages — and designers compete to fill them. Instead of bidding for the job, designers submit finished work tailored to the client specifications in the contest listing. 99designs calls it a win-win scenario: Its clients gain access to the site’s pool of 73,000 active designers, while the designers are given a chance to compete for “upwards of $600,000 in awards paid out monthly.”

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

“99designs is something akin to a Walmart,” says Dan Ibarra, industry veteran and co-founder of Aesthetic Apparatus, a Minneapolis design studio. “It’s not necessarily dedicated to bringing you good work, but to bring you a lot of it. That’s not necessarily better.” Ibarra’s thoughts echo the general response from designers to a 2009 article Forbes ran on a 99designs look-alike called Crowdspring.com. Many critics of Crowdspring’s business model directed readers to NO!SPEC.com, an online campaign dedicated to educating the public about the risks of speculative work — which is, as defined by NO!SPEC, work in which the designer “invests time and resources with no guarantee of payment,” a “huge gamble” for designers competing against thousands of others.

Other professionals I have spoken with on the subject feel it’s just not a threat to the “design experience” or the “personal touch.” Several feel it just separates the serious design clients from the casual small business.

You have to remember that everything is consumer driven. What I mean is that the consumer is the one that dictates how we set our prices. If a consumer is unwilling to spend $100.00 for an original work verses spending $50.00 for one located on-line…what can you really do?

I really hope that it’s not. I think (and hope) that there will always be a market for those of us who don’t have quite a structured pricing plan, and who are willing to pay more for quality instead of quantity.

I’m still waiting for the day graphic design is held in the same regard as auto mechanics and plumbers… you don’t get fixed rates with them, and they’ll laugh at you if you ask for it. There’s a price for parts and and an hourly rate for service, end of discussion. You can give a flat rate by estimating (to yourself) how many hours it will take and then padding that for how many revisions the client will ask for. If you fall short, remember that the next time, but don’t penalize the client. Keep good records of your time. And… you obviously can’t charge the same fee for logo design for a company on the scale of Coca Cola as you would for Joe’s Landscaping down the street. It’s a different value to each. Large corporations get much more use and ROI from a logo than a one man show. That’s my story and I’m sticking to it.

With regards to fixed vs hourly, we almost always do fixed. Even on big application development projects. Sure, there are concerns with client requestitis and scope creep but thats part of the consideration. With hourly you are always guaranteed to be punished for your efficiency and experience by getting paid less. As for cheapo logos and web templates? Go for it I say. It’s nothing new. The clients that find that type of thing valuable are the ones I don’t have the time to educate on the real value of thoughtful design.

It’s the future for clients that have a “checkbox mentality”, where a logo, a brochure, a website, are just things on a list to check off, rather than key elements of their business strategy. Those clients have never been good clients. They’ve never paid well, or been good to work for. For a brief time, as design exploded and became available to businesses that couldn’t afford it previously, they had to buy more than they wanted, and employ real designers. Now that the supply of “designers” has also exploded, these design-blind clients can buy what they actually want, which is a cheap template with their words and photos stuck in it. They’ve never wanted real design, the market has evolved to give them what they want. The market for clients that do want real design is still there, and still very profitable for designers with the right skills and talents. But the bar for that market is very high, and people that can’t reach it are stuck in a no man’s land between the heights of success and the pits of mass-produced junk design.

Since clients have variable needs and budgets, there is definitely room in the marketplace to offer low-cost design services online. The clients who use these online design resources may not be a good fit for those of us who are answering this question, but they have a need with a tight budget and online creative services seem to fulfill that need. Traditionally, junior designers and recent graduates have had access to the low budget projects more experienced individuals have passed on. I think the online sites provide a similar outlet. Students may benefit from putting their hat in an online ring to get experience – especially when they will (most likely) be charging similar low rates. Established creatives and businesses probably have other methods of finding work (the Internet is a great tool for getting business, but does not replace all other traditional marketing/networking/prospecting) so I do not think fixed-price online creative sites will completely ruin our ability to maintain a viable business.

Does Art School Make You A Professional?

Being an art school drop-out myself (12 credits shy, and going back over a decade later to get them) and having much success without a degree, I naturally understand this point about art school. Many echoed this sentiment: that creativity has nothing to do with a degree. I was teaching at Parson’s School of Design long before I went back to take the four art history classes I needed to graduate. My work for major corporations did, however, require a four-year degree. Guess the “accomplishment level” can mean something. Ah! but is it art? “HA! As the sole surviving creative, I can charge $50 for a logo!” (it’ll still be argued down to $20). It is a popular major, though, as one designer noted:

I asked nearly the same question to the owner of the art college I eventually graduated from: “Do you think similar two-year programs are flooding the market with graphic designers?” His answer was a resounding “No,” and he followed that with, “Talented artists will always find work when untalented artists don’t.” With the designers I’ve met or worked with and the ones I’ve read about, I’d have to I agree.

Naturally, sticks and stones were thrown:

From what I understand from meeting other students, the quality of education is lacking. Apparently, many educators simply like to take home a pay check for doing the least amount of work. A lot of the students suffer from not having any mentorship from a qualified teacher. However, the top students always find their way through the educational maze to get the cheese.

Should art schools teach online fixed-price business to students? Most people say, “no!” Shouldn’t an art school prepare a student to enter the field from day one with all the material and professional skills needed to enter the field as a peer and not a “hack” who lowers the bar for fees and professional demeanor?

Mediocrity runs rampant in today’s society. I don’t think design schools should teach the principles of online stores but make their students aware of what is out there and what they will come up against in the real world. Unfortunately many will go that way. But a true designer is worth their weight in gold, and will always cost more than Walmart pricing.

I’m sorry but I’m still laughing too hard at keeping a straight face while typing about art schools training students to enter the field. Pile on the insults as you will but I rarely see graduating portfolio shows that aren’t frightful, not due to the talent, but to their ideas on what they expect once they graduate. Several months ago I received a request for an essay of 2,500-5,000 words a dean at a Chicago art school wanted to “relay” to students. Naturally he was shocked I wanted to be paid. Guess those students stepped into a world of do-do. As a student commented on the question of fixed-price:

There are some pros and cons for hourly and fixed. However really as a designer you might benefit more from fixed pricing. Example: You design a logo at $20 an hour. Let’s say for the first time you do this logo it takes you 5 hours. The next time you do the logo, you get it done in half the time. 2.5 hours. You just cut your profit in half.  Now the designers that are charging $50, should wake up and realize there offering a service that is worth WAY more than what they are charging. In the beginning of starting my own design business I charge fairly cheap as well. I wanted to build a portfolio and clientele list. Once I had references and a portfolio to show, my rate can go up, because I can prove I’m worth it.

Yes, $20 an hour and $50 logos will shore up the prices she was going to command one day. No, it will set the bar with anyone you quote those prices to while I’m trying to charge a fair market rate. You have lowered that fair rate. Thanks for learning how to run a business within an unlicensed industry that relies on a standard of practice not being taught anywhere. AAAAAAAH! I’m still wondering what kind of logo is created in 2.5 hours. Oh, a “hack” one!

A Solution To Reconcile These Views?

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

Client: “I don’t sign contracts!”

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

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

Design Contests Erode The Industry

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

---

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

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

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

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

The Argument

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

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

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

Process Makes Perfect

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

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

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

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

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

The Foreman Or The Architect

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

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

A Call To Arms

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

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

An example of what HTML layers might look like with CSS styling.

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

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

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

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

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

Further Reading

• Make Your Mockup in Markup
  A walkthrough on designing in the browser.
• Time to Stop Showing Clients Static Design Visuals
  Describes the benefit of showing clients dynamic mock-ups.
• Designing Websites in Browser (Gasp!)
  A Stack Overflow discussion on the topic.
• Why We Skip Photoshop
  37signals’ take on things.
• Designing in the Browser
  A good back-and-forth from Drawar.
• Why the “Design in the Browser” Argument Misses the Point
  Aaron Russell outlines the benefits of Photoshop.
• Feedback, Please: HTML5 Layers in Photoshop?
  John Nack proposes HTML layers within Photoshop.
• CSS is the New Photoshop
  John Nack explains the importance of CSS in the argument.
• An InDesign for HTML and CSS?
  Zeldman in response to John Nack.

(al)

---

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

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

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

What Causes A Deadline To Break?

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

A deadline is the end point of a time estimate, making it a known quantity. But how long will the work actually take to get done?

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

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

Rate Deadlines By Severity Of Consequences

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

Deadlines exist for a reason. The severity of the trouble caused by missing them increases dramatically after they have passed.

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

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

Strategies For Preventing Deadline Crises

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

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

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

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

Making up for minor time discrepancies during the course of a project is easier than facing a big shortfall when no time is left.

Plan For Unpleasant Surprises

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

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

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

Task:	Time allotted:
Content audit	15 hours
Develop content strategy	15 hours
Make WordPress theme changes	20 hours
Import data from old website	15 hours
Test on multiple browsers	5 hours
Total	70 hours

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

Scheduling for unknowns is hard, but acknowledging that extra time is required will better align estimates with reality.

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

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

Mitigate A Deadline’s Threat By Adding Other Deadlines

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

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

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

Plan Sacrifices In Advance

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

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

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

Practice

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

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

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

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

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

Conclusion

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

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

(al)

---

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