The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.Image creditIn this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.[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.]PawnsOf all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.Always Move ForwardPawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.Here are some tips you can use to adopt this mindset:Don’t get stuck using deprecated practices when structuring website code.Examine your community to determine needed features for future upgrades.Change a website’s interface only if it would benefit the user experience.Be Willing to SacrificeThe ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.Here are some tips for internalizing this attitude:Ensure that your Web layouts are flexible enough to meet the needs of various devices.Weigh the benefits of features against their pitfalls before eliminating them.Content is more valuable than design; never dilute its quality for eye candy.Aim for ChangeThe pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.Here are some tips to get into this mode:The website-building process is never complete; ensure that you maintain a steady flow of updates.Think of ways to enhance the website to better cater to your visitors’ changing needs.It never hurts to have a business plan when scoping out a Web-based project.RooksRooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.Structure With PurposeA rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.Here are some tips for strengthening your outlook and code:Always validate your code; it will reduce the number of bugs.Use the right element for the job to improve your code’s semantic value.Keep code minimal to reduce file size and loading time.Assist Those in NeedLike the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.Here are some tips that might be of assistance:Providing ways for people to contact you is important to maintaining trust.Negative feedback can still be constructive; don’t dismiss it as “bashing.”Provide social interaction aids to help visitors feel involved in your community.Take PrecautionsSometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!Below are some tips for fortifying your website:Turn off scripts and styles to test whether your website is still usable.Test your websites on mobile devices, a market that is proliferating.KnightsKnights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.Be Brave in AdversityMythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.Here are some tips to make yourself more knight-like:Never take criticism personally; negative feedback is often the most useful kind.Don’t resign in the face of competition; the only failure in life is to quit trying.Try to rally support for your project; there’s strength in numbers.Have a Selling PointThe knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.Here are some tips on finding your selling point:Draw from other people’s work, but never steal anything outright.Improving on existing services is a kind of innovation in its own right.Be focused in what you offer; reinventing too much increases complexity.Avoid Barriers to AccessThe knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.Below are some tips on removing barriers:Consider the types of people who are not as able as you are online.Testing your work on an audience is better than going solo.Make sure your website works in different browsers to avoid serious breakages.BishopsThe bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.Have Faith in Your WorkThe bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.Here are some tips for building faith in your work:Create a list of benefits to focus on your website’s potential.Set realistic, structured goals to achieve success.Encourage visitors to recommend your work to people they know.Know Your LimitsIt may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.Here are some tips on knowing your limits:Get external support or advice when you hit a wall.If something can’t be achieved the way you hoped, look for alternatives.Reduce your weaknesses by learning new skills regularly.Stick to Your GunsWhile being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.Here are some tips on being determined:Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.Mistakes happen, and no one is perfect, but that’s no reason to stop trying.The QueenThe queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.Realize Your PotentialA potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.Here are some tips to stretch your skills:Everyone has the capacity to learn; keep your skill set up to date.Push yourself to become a better professional and to exceed your own expectations.Try not to let any of your skills go to waste when creating something.Cover All BasesIn our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.Here are some tips to cover your bases:The more time you spend planning a project, the better the results usually will be.Information architecture is your friend; make use of wireframes and mock-ups.Spend time testing your website intensively for critical flaws.Strategy and LearningYou have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.Here are some tips to help you strategize:Read blogs, books, tutorials, magazines and anything else that can help guide you.Analyze your target audience to get ideas on what your website might need in future.Researching the competition gives you a sense of what potential visitors need.The KingNo piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!Avoid TrapsProtecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.Here are some tips on avoiding traps:Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.Actively seek out errors in your work to improve your service.Internet Explorer is a pain. Watch out for its rendering faults.Value and ImportanceA common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.Here are some ways to tip the scale:Accurately pinpoint the value of your service.Upgrades are avoidable, but reduce downtime as much as possible.Price your service fairly; prices that are either too high or too low create problems.Know When to ResignSometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.” We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.Here are some tips on recognizing when to throw in the towel:Trust your instincts when deciding whether to undertake a project.Salvage something from anything you work on.Learn how to deal with “clients from hell.”ChessboardChess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.Image creditLight and DarkLike a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.Think AheadOne of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.Weigh Your OptionsIn chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.Make Your MoveDecision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.Checkmate!So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.>More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.(al)© Alexander Dawson 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:
-
I posted to smashingmagazine.com
Web Design Checkmate: Using Chess For Success in Web Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/yZnR19L4P7I/
September 3 2010, 2:49am | Comments »
-
I posted to smashingmagazine.com
The Case For Open-Source Design: Can Design By Committee Work?
http://feedproxy.google.com/~r/SmashingMagazine/~3/shiAJfWTJ1c/
In celebrating the merits of free software and the excitement over this radical networked production method, an important truth is left unspoken. Networked collaboration shines in the low levels of network protocols, server software and memory allocation, but user interface has consistently been a point of failure. How come the networked collaboration that transformed code production and encyclopedia-writing fails to translate to graphic and interface design?The following is an investigation into the difficulties of extending the open-source collaboration model from coding to its next logical step: interface design. While we’ll dive deep into the practical difference between these two professional fields, the article might also serve as a note of caution to think before rushing to declare the rise of “open-source architecture,” “open-source university,” “open-source democracy” and so on.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]The ChallengesScratching an ItchBy going open-source, coders are fulfilling a need to change software, to make it their own. They might have different motivations, but if you’re already modifying something for yourself, answering the “Why share?” question is really easy with “Why not?” By the time the code executes correctly, the immediate users of the software—that is, the coders themselves—are already familiar with the software and can operate it even without a delicately crafted user interface.Therefore, the motivation to take an extra step and invest in a usable interface that would extend the user base beyond the original geek-pool is not obvious. The interface already works for me, so what itch am I scratching by working hard to make it usable for others who can’t help me code it?For the designers themselves, what is their incentive to make the design process more collaborative? Will others make my design better? Will they be able to communicate my ideas better than I can?Beyond that, open-source interface design suffers from a chicken-and-egg problem: most designers don’t use open-source tools, and so it doesn’t occur to them that they could make the software better. As a result, open-source software suffers from an inferior interface that makes designers shy away from it and stick to their proprietary tools. The cycle repeats…GranularityBoth software and wikis are made of granular building blocks, namely characters. This makes every typo an invitation to collaborate. My first Wikipedia edit was a typo correction, my second was adding a reference link, my third was writing a whole paragraph, and that led me to more substantial contributions, like adding a whole new article and so on.Each granular step gets you closer to the next granular step. This ladder of participation makes each successive step easier. It also allows you to compare changes easily, giving you transparency, accountability, moderation and an open license to try and possibly fail, knowing you can always revert to the previous version.You don’t get that with design, because the changes are not granular and are not as easily traceable. The first step is steep, and a ladder is nowhere to be found.Encoding/DecodingIn his 1980 article “Encoding/Decoding,” cultural theorist Stuart Hall defines communication in terms of code. To describe it briefly, let’s imagine a spoken conversation between Alice and Bob. Alice encodes her framework of knowledge into the communicable medium of speech. Assuming Bob can hear the sounds and understand the spoken language, he then decodes the sounds into a framework of knowledge.Both encoding and decoding are creative processes. Ideas are transformed into messages that are then transformed into ideas again. The code that Alice uses for encoding is different than the one Bob uses for decoding. Alice could never telepathically upload ideas into Bob’s brain. (We can all agree that that is a good thing.)Let’s entertain Hall’s ideas of encoding and decoding in software. Alice is an open-source hacker, and Bob is collaborating with her as a designer. Alice is writing software code; she knows when it executes and when it doesn’t because the program communicates that through error messages. When she is happy with the result, she uploads the code to an online repository.Bob then downloads the code to his computer, and because it has executed on Alice’s computer, it also executes on his. When Alice and Bob collaborate through a programming language, they are literally using the same code for encoding and decoding.Alice always chooses one of her three favorite programming languages. Being a designer, to communicate a message visually Bob starts by defining a visual language—graphics, color, layout, animation, interaction… If Alice or any other developer had to reinvent a new programming language on every single project we would be speaking about FLOSS now.Bob needs to define a graphic language, a standard for the collaboration. Doing that is already a major part, possibly the most important part of the creative work. Whoever works with Bob will need to accept and follow these standards, relinquish control and conform to Bob’s predefined graphic language. These artificial constraints are harder to learn and conform to than the constraints of a programming language. While constraints and standards in technology are the mother of creativity, in design they can often feel artificial and oppressive.Beyond that, within a collaboration, when Bob tries to argue for the merits of his design, unlike in the case of Alice’s code he cannot prove that it executes flawlessly, or that it is faster or more resource efficient. The metrics are not as clear.It is important to remember, in collaboration on code Alice and Bob have a third collaborator, one that cannot be reasoned with – the computer. This collaborator will simply not execute anything that doesn’t fit its way of work. On the other hand, as long as it is syntactically correct and satisfies the inflexible collaborator even “ugly code” executes and muddles through. And so, the different voices expressed in code are flattened into a single coherent executed application.For better or worse, we lack this inflexible collaborator in design. It doesn’t care about our communicative message and it doesn’t level the playing field for communicative collaboration. And so, the different voices in design simply spell inconsistent multiplicity that dilutes the communicative message.One might turn to Wikipedia as a testament to successful non-code-based collaboration, but Wikipedia enforces very strict and rational guidelines. There is no room for poetry or subjectivity within its pages.Is It Simply Impossible?Not necessarily. If we step out of the technical construct of the open-source methodology, we can identify quite a few networked collaborations that are transforming and often improving on the design process.Viewing free culture and the free sharing of media as evidence of collaboration is tempting, but the availability of work to be remixed and re-appropriated does not necessarily imply collaboration. Sharing is essential to collaboration but is not enough.WordPress, the leading free blogging software, is an interesting example. Looking to redesign the WordPress administration interface, Automattic, the company leading the WordPress community, hired HappyCog, a prominent Web design firm. And in March 2008, WordPress 2.5 launched with a much improved interface. Through a traditional design process, HappyCog developed a strong direction for the admin interface. Eight months later, Automattic released another major revision to the design that relied on HappyCog’s initial foundation but that extended it far beyond.One of the interesting methodologies that HappyCog used to get the WordPress community involved in the design process was a call for icon designers to provide a new icon set for the interface. Within two weeks, the six leading icon sets were up for voting by the community.But rather than just casting a blanket “Like” or “Dislike” vote, community members were invited to provide a detailed assessment of consistency, metaphor coherence and so on. Some icon designers in the running even acknowledged the superiority of other contributions and voted against their own sets. The icon set that was ultimately chosen, though, was a collaborative effort, because some of the icons changed based on inspiration from the other sets.Another example is the evolution of grid systems for Web design. Half a century after the rise of Swiss-style graphic design, some design bloggers suggested that some of its principles might apply to Web design. Those suggestions evolved into best practices, and from there into Blueprint CSS, an actual style sheet framework. The framework became popular and inspired other frameworks, such as 960.gs.Similar processes happen in interaction design. One example is the pop-up window evolving into the elegant lightbox or modal window modules, and then changing and being modified again and again in open-source code libraries.Other design-oriented experiments in free software, such as the ShiftSpace platform, challenge the Web interface power structure. ShiftSpace allows users to interact with a website on their own terms by renegotiating the interface and proposing different interactions on top of the page. Projects like ShiftSpace aim to expand the limited participatory paradigm of the Web beyond user-generated content to include user-generated interfaces.Make It Happen!There are ways to make open-source design work without falling into the traps often characterized as “design by committee.” We are already seeing designers scratching their own itch and contributing creative work to the commons.Lecturing designers (or users) and demanding that they use bad tools for ideological reasons is counter-productive. Designers often use free tools (or use proprietary tools in unauthorized ways) only because they are free as in free beer. So, to win over new users, free software should be pitched on the full range of its merits rather than on ethics alone. While the ethics of “free as in free speech” are convincing to those who can “speak” code, the openness of the source to those who lack the skill to modify the code is a weaker selling point.Free software tools have won on their broad merits many times, and not only on low-level system and network fronts. Wikis and blogging software (which are interaction and communication tools) that have been invented by the free software community have maintained a lead over proprietary competitors. Networking and collaboration are the bread and butter of free software, and the community should leverage these advantages.Just as Wikipedia extends the free-software collaboration model by leveraging the granularity of characters, so can design. When possible, using code for design collaboration is preferable. Beyond that, versioning both code and image files should be adopted more by design collaborators. Rather than hanging its hat on inferior clones, the free software community can come up with new collaborative paradigms for versioning and collaborating on files—even ones built as features for otherwise inferior clones! It need not be an all-or-nothing game.Finally, There are ways for us to better analyze the encoding and decoding of the communicated message. We can formalize processes of collaborative encoding. We can start by conducting networked design research using existing research tools; in this way, we might come up with design decisions collaboratively. We can define modular and extensible languages that embody design decisions but still allow for flexibility and special cases (like Cascading Style Sheets). We should also learn how to document our design decisions so that they serve other collaborators. Designers have been doing this for many years in more traditional and hierarchical design contexts when they have compiled documents such as branding books or design guides.For the decoding part, we should realize that many design patterns are rational or standardized and can leverage common ground without compromising the creative output. For example, underlined text on the Web almost always implies a hyperlink. We could choose to indicate a link otherwise, but if we try to use this underline styling, say, for emphasis, we can expect users will try to click on it.User experience research, technical aspects of design, best practices in typography, icon use, interaction paradigm—these are all aspects of design that can be researched and assessed according to measurable parameters. Thorough research of these can provide a basis for consensus for shared expectations of how a message will be interpreted. A lot of this work is already taking place on design blogs, which have published a lot of research on the subject over the past few years.Finally, the substantial parts of design that still cannot be easily quantified or assessed on shared rational ground should be managed through trust and leadership. A resilient community of practice must be able to develop design leadership whose work and guidance is respected and appreciated even without the convenient meter of coding meritocracy.Scaling SubjectivityIt comes down to the deep paradox at the heart of design (whether for interface, architecture, product, etc.). We are trying to create a subjective experience that scales—a single personal scenario that can be multiplied repeatedly to fit a wide array of changing needs by a vast majority of users. The thing is, subjectivity cannot be scaled—that’s what makes it subjective—therefore, the attempts to create a one-size-fits-all solution are bound to fail, along with the attempts to customize the solution to each individual user in each individual use case.Chris Messina gives a great example for this paradox by comparing Apple’s Magic Mouse to the OpenOffice mouse. While Apple’s solution is a slick, clean one-button device, the OOMouse has “18 programmable mouse buttons with double-click functionality; analog Xbox 360-style joystick with optional 4-, 8- and 16-key command modes; 63 on-mouse application profiles with hardware, software and autoswitching capability…” and more. While the Magic Mouse embodies Apple’s commitment to design leadership at the price of user choice, the OOMouse embodies the free software community’s preference for openness and customization over unified leadership.Successful open-source projects have always benefited from a mix of the two approaches, a combination of openness and leadership. Finding a similarly nuanced approach in other fields is required if we ever hope to extend the open-source model beyond code. We cannot sprinkle the pixie dust of open source on everything and expect wonders. The same goes for design. Hopefully, though, we can make some progress by demystifying the process and by collaborating wisely when it makes sense and coming up with new ways when it doesn’t.“Can Design By Committee Work?” by Collaborative Futures is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at http://www.booki.cc. This essay is also featured in the Collaborative Futures book, written collaboratively, published for free and released under the CC-BY-SA license.(al)© Mushon Zer-Aviv 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:
- Tags:
- design
- Opinion column
September 1 2010, 6:08am | Comments »
-
I posted to smashingmagazine.com
Free Wireframing Kits, UI Design Kits, PDFs and Resources
http://feedproxy.google.com/~r/SmashingMagazine/~3/Ogu-aolPQ20/
To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]Free Mobile GUI PSDAndroid GUI PSD This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.RIM Blackberry PSD A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.Android Sketch Stencil Version 1.0 A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.All elements of Maemo 5 GUI in PSD This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.iPhone 4 GUI PSD (Retina Display)GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.iPad GUI Kit in PSD This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.Android 1.6 Wireframe stencil for Omnigraffle Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.Google Android GUI PSD Here are the GUI elements of Android, built using vectors to scale.iPad GUI PSD Kit This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.Google Android PSD A stencil set for Google Android prototyping.Fireworks template for Android In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.Sexy Vector Cell Phone This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.iPad Stencil for Omnigraffle Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.iPhone App Wireframe TemplateMobile – iPhoneiPhone GUI Elements Some beautiful iPhone elements. All graphics are layered Photoshop files.iPad and iPhone Design Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.Design Stencil for iPhone and iPad A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.Apple iPad fully editable PSD A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.Palm Pre GUI PSD This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.iPhone UI Vector Elements Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.iPad Vector GUI Elements: tabs buttons menus icons This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).Free Social Networking GUI PSD KitsFree Full-Layered Facebook GUI PSD Kit The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.Facebook GUI Free PSD Resource A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.Facebook Applications A sizable collection of elements for creating wireframes for Facebook applications.Omnigraffle Twitter Widget Stencil This set includes a selection of useful Twitter widgets and badges.Wireframing KitsBest Practice UX Forms Stencil v1.1 A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.Form Elements UI KitForm elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.Wireframe Shapes Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.Wireframe kit for UI DesignersA set of various wireframes, such as product details, list of items, front page, mobile phone.MBTI sketching paper for ideation MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.A4 sketching paper This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.Wireframe Magnets (DIY Kit) This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.Paper wireframe templates The finished product include seven variations, as well as PSDs.Wireframe template A useful print-and-sketch template available for downloading.iPad Idea Sheet A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.Scenario, Taskflow and Grid Sketch Sheets A set of beautiful printable sheets for ideas and sketchingFree Photoshop browser template Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.Interactive Sketching Notation 0.1 The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.MobileMe Full iPhone GUI For use with WinterBoard, this is a beta release, so there may be unthemed elements.Android Wireframe Templates (PDF)Free Keynote UX StencilsAdvertising Stencil Kit A set of very useful advertising stencils.Dragnet website wireframes kit v 0.9 Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.User Interface Design Framework This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.Browser Form Elements PSD Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.Sketching and Wireframing Kit Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.Photoshop Form Element Templates This set includes all common form fields and mouse and link pointers, optimized for ease of use.Web Browser Elements This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.UI Design Kit This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.Wireframe Symbols This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.Web UI Element Pack This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.Wireframe Kit for Google DrawingsOmniGraffle Stencil for Ext JS v3.0 This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.Flex 3 Stencil Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.Aqua GUI A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.Flex Darkskin PSD UI A beautiful set of 16 PSD files.Web Wireframe Kit Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.UI Buttons and Icons This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.Quommunication Stencil Kit This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.Mac OS X Interface 2 A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.OmniGraffle UX Template The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).Template for Blueprint CSS Comps This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.Apple Elements for OmniGraffle Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.DeviantART ID PSD Kit These 15 professionally designed, fully customizable templates include MINI and Original ID templates.Browser Screens and Website Elements Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.960 Grid Template for OmniGraffleControl of different browsers for designers (download link)A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.Useful ArticlesThe Importance of WireframingA comprehensive article on how wireframing plays an important role in information architectureThe Future of Wireframes As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.Wireframing Is Not a ReligionWireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.Five Commandments for WireframingPaul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.20 Steps to Better Wireframing Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.Resources and Round-UpsI Love WireframesA tumblog dedicated to wireframes, prototypes and mock-ups.Wireframe ShowcaseThis site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.
- Tags:
- design
- Freebies
- free
- wireframing
- psd
August 27 2010, 6:07am | Comments »
-
I posted to smashingmagazine.com
In Defense Of A/B Testing
http://feedproxy.google.com/~r/SmashingMagazine/~3/tEW8KP0j64w/
Recently, A/B testing has come under (unjust) criticism from different circles on the Internet. Even though this criticism contains some relevant points, the basic argument against A/B testing is flawed. It seems to confuse the A/B testing methodology with a specific implementation of it (e.g. testing red vs. green buttons and other trivial tests). Let’s look at different criticisms that have surfaced on the Web recently and see why they are unfounded.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Argument #1: A/B Testing And The Local MinimumJason Cohen, in his post titled Out of the Cesspool and Into the Sewer: A/B Testing Trap, argues that A/B testing produces the local minimum, while the goal should be to get to the global minimum. For those who don’t understand the difference between the local and global minimum (or maxima), think of the conversion rate as a function of different elements on your page. It’s like a region in space where every point represents a variation of your page; the lower a point is in space, the better it is. To borrow an example from Jason, here is the issue with the local vs. global minimum:As even Jason acknowledges in his post, this argument isn’t really concerned with A/B testing, because the same methodology could be used to test radical changes to get to the global minima. So, calling it an A/B testing trap is unfair because it doesn’t have anything to do with A/B testing. Rather, the argument uncovers the futility of testing small changes.So, if A/B testing is not the culprit, is the real issue the local minima? No, even the theory of discounting local minima is flawed. The image above shows you a very simple one-dimensional fitness landscape. You can imagine the x-axis as the background color and the y-axis as the bounce rate. Jason’s argument goes something like this: if you tested dozens of shades of blue, you might decrease your bounce rate, but if you tried something completely different (such as a yellow), you might achieve the absolute lowest bounce rate possible on your page.There are two problems with this argument…1. You Never Know for Sure Whether You’ve Found the Global Minimum (or Maximum)The global minimum (or absolute best) exists only in theory. Let’s continue with the example of an extreme yellow background giving you the global minima (in the bounce rate). Upon further testing, what if you found that no background color at all gave you a lower bounce rate? Or better yet, that a background full of lolcat images gave you an even lower bounce rate? The point is, unless you have reduced the bounce rate to 0% (or the conversion rate to 100%), you can never be confident that you have indeed achieved the global optimum.There is another way to determine whether you have found the global optimum: by exhausting all possibilities. Theoretically, if your page didn’t contain anything other than background color (and you couldn’t even add the background image because, well, your boss hates it), then you could cycle through all background colors available and see which one gave you the lowest bounce rate. In exhausting all possibilities, the color that gives you the lowest bounce rate should be the one that is absolutely the best. This brings us to the second point…2. It’s Not Just About the Background Color, My FriendWhen optimizing a Web page, you can vary literally hundreds or thousands of variables (background color being just one of them). Headline, copy, layout, page length, video, text color and images are just a few such variables. Your goal for the page (in terms of conversion or bounce rate) is determined by all of these variables. This means that the fitness landscape (as seen in the images above) is not one-dimensional and never as simple as it appears. In reality, it is multi-dimensional, with a ton of variables affecting the minima and maxima:Again, imagine the peaks as your conversion rate (or bounce rate) and the different dimensions as the variables on your page (only two are here, but in reality there are hundreds). Unlike a one-dimensional case, exhausting all possibilities in a real-world scenario (i.e. in conversion optimization) is impossible. So, you are never guaranteed to have found the global maxima (or minima). Lesson to be learned: embrace local minima.Argument #2: A/B Tests Trivial ChangesRand Fishkin of SEOMoz, posted an article titled Don’t Fall Into the Trap of A/B Testing Minutiae in which he reiterates Jason’s argument to not waste time testing small elements on a page (headline, text, etc.). His main argument is that getting to the local maxima (by testing trivial changes) takes up too much energy and time to make it worthwhile. See the image below, reproduced from his blog but modified a little to make the point:Large view.The first point to make is that the opportunity cost is not the time required to run the test (which is weeks) but rather the time needed to set up the test (which is minutes). Once you have set up the test, it is pretty much automated, so you risk only the time spent setting it up. If an investment of 15 minutes to set up a button-color test ultimately yields a 1.5% improvement in your conversion rate, what’s wrong with that?Many A/B testing tools (including Visual Website Optimizer—disclaimer: my start-up) make setting up small tests a no-brainer. They also monitor your test in the background, so if it isn’t a winner, it is automatically paused. What’s the risk then of doing such trivial tests? I see only the upside: increased sales and conversions.To make his point, Rand gives the example of a recent Basecamp home page redesign, by which Basecamp managed to increase its conversion rate by 14%. Can you imagine the kind of effort that went into such a redesign (compared to a button-color test)? In fact, because the fitness landscape is multi-dimensional (and very complicated), a total redesign has a much higher probability of performing worse. A complex design can go wrong in many more ways than a simple button color can. Because we never hear of case studies of redesigns gone wrong (hello survivorship bias), we shouldn’t conclude that testing radical changes is a better approach than testing minutiae (especially because radical changes require a huge investment in effort and time compared to small red vs. blue tests).With the local minima (or maxima), you at least know for sure that you are increasing your conversion rate, which leads directly to increased profit. This isn’t to say that we should give up on our hunt to achieve the global optimum. Global optimum is like world peace: incredibly hard to achieve, but we have to keep moving in that direction. Lesson to be learned: the ideal strategy is a mix of both small (red vs. blue) tests and radical redesign tests. By jumping across the mountains in the conversion rate fitness landscape, you ensure that you are constantly seeking better conversion rates.Argument #3: A/B Testing Stifles CreativityJeff Atwood compares the movie Groundhog Day to (surprise, surprise) A/B testing and concludes that because the protagonist failed in the movie, A/B testing must also fail. Stripped of all (non-)comparisons, Jeff suggests that A/B testing lacks empathy and stifles creativity. He goes on to cite a tweet by Nathan Bowers:A/B testing is like sandpaper. You can use it to smooth out details, but you can’t actually create anything with it.Whoever claimed that A/B testing is good for creating anything? Creation happens in the mind, not in a tool. The same flawed reasoning could be applied to a paint brush:A paint brush is like a stick with some fur. You can use it to poke your cat, but you can’t really create anything with it.A/B testing, like a paint brush, is a tool, and like all tools, it has its properties and limitations. It doesn’t dictate what you can test; hence, it doesn’t limit your creativity. A/B testing or not, you can apply the full range of your creativity and empathy to coming up with a new design for your website. It is up to you whether to go with your gut and implement it on the website immediately or to take a more scientific approach and determine whether the new design converts better than the existing one. Lesson learned: A/B testing is a tool, not a guidebook for design.SummaryTo reiterate the lessons learned from the three arguments above:Because you can never achieve the global minima, embrace the local minima. Testing trivial changes takes a few minutes, but the potential outcome is far greater than the cost of those minutes.Constantly explore the best ways to increase your conversion rate by performing both trivial tests and radical redesign tests at regular intervals.A/B testing is a tool and does not kill your imagination (in fact, you need your imagination most when designing variations).Lastly, don’t feel guilty about performing A/B testing.(al)© Paras Chopra 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:
- Tags:
- design
- Opinion column
August 26 2010, 11:34pm | Comments »
-
I posted to smashingmagazine.com
Improve Your E-Commerce Design With Brilliant Product Photos
http://feedproxy.google.com/~r/SmashingMagazine/~3/X6LXszPjCDA/
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 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.]Examples Of Beautiful Product PhotographyUncrate 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 Photography1. Prepare ProductTo 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. LightTo 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 CameraWatch 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 PhotosThis 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 TipsBlend Photos With DesignWhen 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 CardA 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 TripodTaking 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 ReflectorsAs 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 ProcessIf 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 AppropriateIf 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 ResourcesIf 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
August 24 2010, 4:12am | Comments »
-
I posted to smashingmagazine.com
A Design Is Only As Deep As It Is Usable
http://feedproxy.google.com/~r/SmashingMagazine/~3/o8Gtsiav2f8/
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 what is evidently 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 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.]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 SyndromeWith 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 ComparisonHow 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?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 UsableIf 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.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 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 UsableIf 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 UglyMy 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 PostsIn Defense of Eye CandyResearch 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 FeelingsAn article about the importance of aesthetics in web design.Stop Designing Aesthetics, Start Designing EmotionsGradients 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 DesigningThere 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
August 23 2010, 2:55am | Comments »
-
I posted to smashingmagazine.com
Business Card Design Starter Kit: Showcase, Tutorials, Templates
http://feedproxy.google.com/~r/SmashingMagazine/~3/XN6jjY0-9nA/
Professionals in any field should always keep business cards on them because you never know when you’ll meet a potential client, partner or like-minded person. Despite their small size, business cards are one of the most powerful and handiest marketing tools. Not only do they create a link between you and your new contact, they’re also a quick way to give a great first impression. Business cards promote your skills and achievements and serve as a little container for big ideas.Don’t underestimate the process of designing business cards; a well-made card does not just share your contact details: it generates further sharing and buzz. Like any self-promotion tool, designing a business card requires solid brainstorming and careful implementation to get the best effect.This post targets a diverse audience. It features a collection of remarkable business card designs that could help you in your search for creative ideas. The round-up of fresh tutorials and business card templates further down might come in handy for those who don’t have the skills or experience to design their own.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Showcase Of Original And Memorable Business CardsLetterpress CardsLetterpress printing has actually been the only form of printing text and images since it was invented by Johannes Gutenberg in the 15th century. Because of its distinctive qualities, such as crisp and tangible impression onto paper, letterpress work is now widely used for branding and identity development. Letterpress gives stronger visual definition to type and artwork and has a special touch, which is why it’s a popular technique for business card printing. Below you can see some beautiful examples of letterpress business cards.John Henry Donovan On this business card, the fine design created by Irish designer and developer John Henry Donovan is complemented by the printer’s excellent choice of paper and inking.Greg Anderson This card works because of the stylish dirty texture, good use of color and, of course, letterpress. Designed by Thomas Guy.Chris Piascik The funky typography of freelance graphic designer Chris Piascik is set off well by the letterpress work on his business card.Space 150 This stylish letterpress business card was designed for the creative agency Space150 by designer Evan Nagan. The card is part of the agency’s periodic general redesign, which it conducts every 150 days. The elegant constellation theme and high-quality letterpress printing make for an excellent card.White Rabbit This card promotes the portfolio of the German photographer Florian Muller (aka the White Rabbit). The use of the negatives pattern incorporates the card owner’s occupation well, and the surface is enhanced by an embossed rabbit.One in Zero The business card of Hong Kong-based idea firm OneinZero is minimalist: the focus is on the letterpress type and paper texture.Christian Garibaldi The effective combination of blind and ink debossing, along with the subtle coloring along the edge, makes for a clean and exquisite business card that perfectly conveys the aesthetic of the photographer’s online portfolio.Montage Dallas Graham of Montage Creative has a simple and strong business card.Paper Monkey Press Some filigree letterpressing is evident on the card of Paper Monkey Press.Second World Design The guys over at Second World took their branding very seriously, resulting in the clean beautiful letterpress card you see below.Kinetic Lens This card was designed by photographer Riley Maclean for his company Kinetic Lens. Combining various letterpress techniques and a great set of red tones, this business card has a multi-dimensional feel. It’s printed on thick 220-pound-bond cotton paper.Laura Moretz A good use of letterpress on the front and back of this card and the labels make this card memorable. It’s printed on French Speckletone #140 stock.23rd And 5th Here is a beautiful business card showing fine typography and two-color letterpress. It was designed for the staff of the 23rd & 5th branding agency. This business card for the Director of Development features a QR code that drives contacts to a dedicated mobile website optimized for the iPhone, Blackberry and Android.Die-Cut Business CardsSomething else that determines a business card’s memorability and appeal is shape. Today many individuals, businesses and organizations die-cut their cards, going beyond traditional dimensions. Die-cutting is an effective way to make a business card eye-catching, unique and even interactive. But remember that a die-cut card should still be compact enough to fit in a standard wallet or card holder. Alternatively, you could suggest some other way to carry or hold your card. Some noteworthy die-cut business cards are showcased below.Derrick Mitchell Derrick Mitchell, a designer from Kalispell, Montana, creates his business cards by hand with chip board, screen printing, labels and stamps.Popupology This cute die-cut business card is done entirely in-house by designer Elod Beregszaszi.Dyalect The chic design of this business card is accentuated by the custom shape and 16-point silk matte finish card stock.Kaman This concept-based business card was designed by Mehdi Tuchak for the Iranian multimedia company Kaman.Sean Gerety This lovely business card mimics a Moleskine notebook. While the front is glossy, the back is matted and can be used as a note card.Amundson Films Cheap card stock and moderate-quality print wonderfully fit the aesthetic of this vintage movie ticket business card. Great job, Alice Cho!Alteroy This die-cut masterpiece belongs to the Israel-based designer Alteroy. The cardboard icons can be separated. Much effort was put into this business card, and the result is absolutely worth it.Carlos Vazquez This super-cute business card might be the shortest route to any Mac fan’s heart.Herbert Martin Besides containing the contact info of German dentist Herbert Martin, this business card has another cool function: it helps you check your bite by way of a die-cut stencil. Designed by Petra Penz.Truf The business card is square and “combines a hand-crafted feel with the style of Russian propaganda posters.”Classic, With a TwistMost of the business cards below have a classic rectangular shape and standard dimensions… but that is where their classic-ness ends. Creative ideas and skillful implementation make these cards look anything but ordinary.Coco The amazing identity concept for COCO was created by Polish designer “Wallstreet Different Creature.” This business card, as part of the overall branding, is pure style and beauty.Erich Hartmann Erich Hartmann designed his business card to spell out a bunch of his skills, along with his main occupation. This clever idea is nicely visualized by way of a two-sided card, with an offset logo on the front and letterpress on the back.Fran Rosa Motion and graphics designer Fran Rosa takes different angles on both his website and business cards… literally.Grill Me To see the info on this business card, grill it against a fire, because the card is stamped with lemon juice for ink. Quite an original idea, but using this effect for non-essential information or for an image, rather than contact info, might be more reasonable.Luciano Ferreira A lovely typographic business card made by Brazilian graphic designer Luciano Ferreira for promotional purposes.Sandra Boils This elegant business card was made for Spanish jazz vocalist Sandra Boils by graphic design studio Estudio Menta.Stepan Prokop A beautiful artistic business card by graphic designer Stepan Prokop.Synchromatik The rich grass texture makes the card of designer Marko Manojlovic look fresh and beautiful.Van Der Buzz This transparent business card, mimicking an X-ray, belongs to Ukrainian advertising agency Van Der Buzz.What What These cool playful business cards were created by twin brothers, designers John and Edward Harrison, also known as What What.Combining TechniquesWhen it comes to developing promotional material for a brand today, the variety of choice is impressive. With all the different printing techniques, the loads of diverse paper and material available and relatively cheap digital technology, the process of designing a business card is limited only by the designer’s imagination. The following business cards rely on both paper quality and printing methods to create a memorable experience.TAM Cargo Traditional at first glance, this business card can be transformed into a little cargo transport box. The card was design by Brazilian advertising agency Y&R for TAM Airlines.Cinch Creative Design company Cinch Creative printed its business cards on 60-point Blotter paper with a fine natural texture. Thanks to this and the debossed logo and text, the card is a pleasure for both the eyes and hands.Feelme Crew This creative business card in the shape of a clapper board was designed by Ralev.com for Bulgarian multimedia agency Feelme Crew.Fiverr Here’s a green approach to business card design. The cards for Fiverr CEO Micha Kaufman are made from recycled paper and cardboard. Moreover, the cards are completely hand-made. See details on Kaufman’s Facebook page.Groundflights This card, inspired by a boarding pass stub, was created by creative agency R3M1X3D for transportation company Groundflights. It is a successful mix of letterpress printing and die-cutting.Herofilm A beautiful business card stylized as a film frame. It was designed by Jimmituanart for Herofilm Productions.Philosophy Communications With a squeezable circle built in, the business card of PR company Philosophy Communications is a two-in-one solution. Brilliant work, wouldn’t you agree?Rhino Studio Premium paper, imitation rhino skin and a stylized typographic logo make this card chic indeed. Designed by Contreforme.Paper Fortress This vintage-looking business card, which features die-cutting, embossing and high-quality paper, was designed by the studio Second World for the film production company Paper Fortress.Hear This fancy silk-laminated card, featuring a spot UV coating, was designed by social media and design company Hear.Gita Ayu The cool illusion on this business card was achieved with a thin transparent plate that makes it look as though this faux-3D brick is broken. The amazing card was created by Saatchi & Saatchi, Indonesia, for a karate club.Something Completely DifferentThe cards showcased below considerably expand the parameters of the business card format. It seems that business cards can be grown, played with and even eaten! Look at the craziest business card concepts around.MODhair Not only can you comb your hair with this business card, you can also play a classic rock song on it with your fingernail. The card was designed by Fabio Milito for a Rome-based hair salon.Gitam BBDO Spicy The Gitam BBDO agency uses spice sachets as business cards, associating each of its departments with a particular condiment.BC Adventure Survival Training The cards of BC Adventure remain extremely useful even in situations where a business card is useless. They are made of organic beef jerky and are good to eat for up to a year.RDA To promote one of his projects (an interactive chopping board), designer Sam Gough created 20 wooden business cards, carving his project’s title and contact info neatly into each.Dept of Energy With its business “cords,” Dept of Energy shows a skillful play on its identity and style.Lush This business card is a thin envelope stuffed with grass seed. The clean design, clever copy and sneaky seed surprise make for an adorable card. Designed by Brandon Knowlden.Taberu Me For the most desperate self-promoters, peanut business cards are not a bad idea. Taberu Me uses innovative CO2 laser engraving technology to print on the peanuts. But before you hands yours out, make sure no squirrels or chipmunks are around.Wes Thomas This business card design is an ongoing project of Philadelphia-based industrial designer Wes Thomas. The laser-cut card can be quickly transformed in a cute desktop toy. This is no ordinary concept and is pretty labor-intensive, but who would refuse such a business toy for their desk?Business Card GalleriesOnly the truly unique are remembered. When designing anything for yourself, it’s always useful to look around for fresh ideas. Here are permanent showcase galleries where you can find trends and best practices for business card design.Card ObserverCardonizerCard NerdCardviewCardGalaCreatticaCardsPressThe Art of the Business Card (Flickr pool)BusinessCardCriticTutorialsTo get you started on your own business card, we’ve selected some fresh and useful tutorials and guides that cover various issues you might deal with in this area.Create a Print-Ready Business Card in Illustrator In this tutorial, well-known designer and blogger Chris Spooner walks you through the process of creating a fun business card with a sketched illustration.How to Create a Stylish Business Card Template in Adobe Photoshop In this tutorial, you learn how to create an elegant minimalist business card design in Photoshop. The source files are available for free downloading.Create a Grunge Print-Ready Business Card Use this tutorial to create a business card with nifty faded brush strokes in Photoshop.How to Create a Nebula Background in Photoshop Learn how to design a business card with an astral background.Print-Ready Business Card Tutorial This tutorial explains how to create a print-ready business card with a clean dark design in Photoshop.How to Make a Print-Ready Business Card in Photoshop In this tutorial, you will learn how to create a two-sided business card with crop marks and bleed.How to Design Your Business Card This article discusses the basics of business card design and covers some best practices.Business Card Design Walkthrough Along with other step-by-step tutorials, a detailed case study like this one might be useful to you.PSD Tutorial: Design a Dirty Business Card Learn how to create a simple business card, complete with grungy texture.Business Card Tutorial in Inkscape Here is a detailed guide on how to design a business card in Inkscape. While the result shown does not look that great, the principles of working in Inkscape are described quite well, so you can get a better result using this open-source graphics editor.Business Card If you like the business card shown below, learn how to create it in Photoshop in this tutorial.Making Creative Business Card This tutorial shows how to make a nice business card in a matter of minutes.How to Design a Print-Ready Business Card Design in Photoshop This business card tutorial includes a couple of bonus templates, which you can download in PSD format and use for free.How to Design Business Card Learn how to create the unconventional and attractive business card below.Grungy Business Card Another variation of the grunge design is explained in this guide. The image preview and PSD file are free to download.How to Make your Own Photographic Negative Business Cards Now, here’s a completely different take on business card design. Photographer Steph Goralnik shares his technique for crafting a unique photographic negative business card.How to Choose Business Card Paper Paper is an important consideration when printing business cards. The right paper can make your card shine, while poor-quality stock can spoil even a top-notch design. Read this article to learn the key points and differences between various types of paper.How to Choose the Right Paper Although quite old, this article contains some useful tips on choosing the right paper for your business card. A solidly written article.TemplatesA template is definitely a great option for those who don’t have the skill to create a business card on their own. But even if you’re a professional designer, you may need the job done very fast or simply want to save time making customizations. This is when a template comes in handy. Below you’ll find a selection of well-designed free and commercial business card templates that you can take advantage of in your own projects.Free TemplatesMost of the templates in this category are free for personal and commercial use, but please be sure to read all accompanying legal usage notes before downloading the files.Free Business Card Design from IceTemplates A simple yet attractive business card design, ready to print and customizable. The ZIP container includes two PSD files and a font folder.FreelanceSwitch Business Card Template This Adobe Illustrator template can be customized for any freelance profession. The pack comes with templates for writers, coders and designers.Bokeh Business Card | More The PSD template for this business card is available in high resolution and is ready to print.Free Business Card Template for Photoshop (PSD) | More This minimalist grayscale business card template is available as a free download at DeviantArt.Free Business Card Design Pumpkin This “Pumpkin” business card template features 300 DPI resolution and CMYK color mode for professional printing, front and back sides and four color schemes: pumpkin, cream, Indian pink and brown.Construction Hazard Stripes Theme | More This print-ready business card template is in Photoshop format.Free Abstract Blue Business Card Template This double-sided PSD card template includes well-organized layers and is in CMYK color mode for easy editing.Die Gallery In this gallery, you’ll find some unusual card shapes, all for free. All files are in EPS format.Business Card Template Here is a blank template for a standard US business card. Both JPEG and PSD versions of the template are available for free downloading.Noise Modern Card | More This download pack includes two full-layered PSD files for the front and back. The dimensions are 3.5 x 2 inches, and the resolution is 300 DPI.Minimax Positivo Business Card Template The template has six color variations and features a letterpress effect. The template package includes a PSD file, PDF help file and preview image.Business Card Template (Vector) | More A free Adobe Illustrator business card template in 3.5 x 2 inch format.Vertical Business Card Vectors | More An EPS file containing 18 vertical business card templates with JPG preview.Free business card templates 10 free business card designs in PSD and TIFF formats.Seextwood Business Card | More A minimalist template in CMYK mode and 300 DPI resolution. The dimensions are 3.5 x 2.5 inches.4 Blue Personal Business Card Templates | More A set of four PSD business card templates in blue. The dimensions are 3 x 2 inches, and the resolution 300 DPI.Sand Business Card | More This business card template (3.5 x 2) is available in PSD format.Premium TemplatesPure Style Business Card Template | More A minimalist two-sided business card design (3.5 x 2 inches) that can fit practically any profession or brand. The template comes in high resolution and requires Adobe Photoshop 8 or higher for editing. Price: $7Blue Monster Business Card Template | More This funny template is ready to print and can be easily customized in a vector graphics editor. Price: $4Business card (set 17) | More business card templates These cheerful business cards might appeal to people in creative fields. Three license types are available; the basic one gives you this set for $5.Typography Mini Business Card | More These bright typographic mini-cards come in two styles, grungy and clean, and include a black and white version for low-cost printing. The templates are print-ready and can be edited in Photoshop. Price: $6Tender Flowers Business Card | More An original floral design that would work well for wedding photographers. It is print-ready and can be customized in Photoshop. Price: $7Blue Bubble business card | More This clean and airy design will appeal to fans of minimalism. It is in print-ready CMYK, 300 DPI, and includes two PSD files and two high-quality JPG images. Price: $5Black Business Card Template | More This business card has a rather universal design and would serve a personal brand, company or other project equally well. It is print ready; all you need to do is change the default text. Price: $7The Black Family business Card Pack | More These super-original and cute business cards might be good for showing off members of a creative team. They are two-sided, in CMYK and 300 DPI, easy to edit and print-ready. Price: $6Related PostsYou may be interested in the following related posts:Business Card Design: Better Than A Plain Ol’ Business CardThe Ultimate Round-Up of Print Design Tutorials(al)© Julia May 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: business, card, Design
August 9 2010, 6:11am | Comments »
-
I posted to smashingmagazine.com
Craft An Irresistible Price By Focusing On Your Users
http://feedproxy.google.com/~r/SmashingMagazine/~3/L_z4OV2zfsI/
Price influences behavior. In order to craft an excellent user experience, the price — and how your users interact with that price — must be central to the development of the product, especially applications. No user will welcome an application if the cost is prohibitive. This makes price every bit as important as design, information architecture and wireframing, and it goes deeper than just getting people to click “Buy.” By focusing on users in setting and maintaining a price, you will increase revenue, lower overhead and, most importantly, significantly improve the user’s (read customer’s) experience.For just about a year now, between designing and developing client’s websites, I have been running a little app that I created with co-workers. In that time, we have launched, added features, raised the price, added more features and just now begun the early stages of marketing the product. So far, we have done all of this without borrowing a cent, and we have managed to at least cover our costs, if not generate some modest profit. I have no doubt that this success comes from our choices of model and price point.This article is not about “How to price your app.” There are plenty of good resources for learning how to find the right number. Pricing for use is a framework for continually adjusting your price, when needed, to suit your profit goals and the experience of your users. Your price is the nail from which you hang your masterpiece. Image source[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.]Me FirstIn any pricing endeavor, think of yourself first. Many people think that apps have no overhead. They basically believe that “selling an app is free money, pure profit!” (ahem, Mr. Anderson). As a professional who has been running a application for just under a year now, I can tell you, this is patently untrue.Digital goods and services have a very tangible overhead: time — time to innovate over competitors, time for customer support and time to cultivate your unique point of view. Each of these requires constant effort if you want to succeed. If you cannot afford this time, you will sacrifice your product, and possibly your livelihood.Keeping the app running is the only imperative in pricing, so first make sure that your price covers your costs. After that, pricing is really a matter of how much you can gain — and not just in profit, although that will affect your bottom line.User-Centric PricingMatt Linderman of 37signals said it best: “Pricing can be usable, too.” I would only add that pricing not only can be but should be usable. Predict (or just ask) what price point would feel reasonable to your target users, and when they will want to pay for your product. You already agonize over how users interact with your product; why not agonize about how they interact with you at so sensitive a time as when money is involved?With so much being offered for free these days, paying for an app can be considered an annoyance. Ease this pain as much as possible by making it simple for customers to work payment into the flow of their lives. This could be as basic as setting up an automatic payment system, or it could require a complete re-evaluation of your pricing model.An Attractive PriceSomewhere between covering overhead and your zeal for profit (Go on, admit it), there is a sweet spot of what you can realistically charge for your product. This is where it gets dangerous — and where many tend to undervalue. Set your price too low and you leave money behind that could be used for growth and reinvestment. Too high a price could be an insurmountable barrier to potential customers.Ask yourself, “Does this price feel right?” Feel plays a major role here, and intuition is the perfect barrier to push against. If the price feels right, the product will feel right. In Human Action, Austrian economist Ludwig von Mises writes that prices are social phenomena. According to him, “the ultimate source of the determination of prices is the value judgment of the consumers.” So, what would a reasonable customer pay for your product?A Model Tailored to Your UsersA pricing model determines when users pay you. The best model is tied closely to your audience and the way they will use your product. Forcing the wrong model on an app (to increase profitability or just generate more consistent revenue) can cripple the product.Freelancers, for example, work mostly on a per-project basis, and any solution they may recommend to a client would need to be easily slipped in as a line item on an invoice. A one-time fee would be the most appropriate model in this case. If the freelancer might come back to the app frequently, though, a monthly or yearly fee would be more palatable. Any cost incurred by the customer must be exceeded by the return in both value and frequency of use. If the app comes with a monthly fee, then users should feel like they are getting their money’s worth every month. Prices are fluid. Gas, groceries, electronics and many other products fluctuate in price, and consumers accept this as much as manufacturers embrace it. Image sourceBe FlexibleIf you feel your price is already too low, raise it. Too high? Drop it, and be a hero to your users. Recently, we raised the price of our app by more than 50%, and I kept a close eye on our stats for the months around the change. Comparing the time frame one month before to the month after, we saw a loss of 17% in number of sales, but a gain of 9% in revenue. Same effort, same overhead, but now more profit to reinvest in support and innovation.Prices are fluid. Gas, groceries, electronics and many other products fluctuate in price, and consumers accept this as much as manufacturers embrace it. When accompanied by new technology, the price of a high-end television is ridiculous, but the reason is not that the perceived value is so high. New technologies require new production methods, new parts and much more customer service, all of which add to overhead. Early adopters recognize this and are willing to pay the premium. New apps meet similar demands for support and marketing, and the pricing should bend to these needs.The “U” In UsableYour price is a workhorse. It can help you solve problems before you ever set up a help desk. It can stymie the competition and even do some marketing. It sets expectations for your product the moment it is introduced, and it continues to work on your behalf (to your benefit or detriment) throughout the entire user experience.Support Where You Need ItVery early on in the development of our app, we understood that pricing was key to our internal operations, especially support. Our small shop did not have the resources to deliver the kind of support expected of a high-priced app, so we set an initial cost that reflected the investment of time we could afford. This lowered user expectations and allowed us to run our customer service sustainably. As the product grew stabler through revision, and therefore more profitable, we were able to raise our price to more accurately reflect what we considered to be its true value.Your price determines how demanding or forgiving the person at the other end of the support line will be. Assess your resources and what you can realistically cover. Then, modify your price to fill gaps in service that you cannot afford to offer. Or if you have the manpower, raise the price to reflect the added support time your team can deliver.Protection MoneyIf you’re selling to other developers, would they rather improvise their own solution? Would pirating your product be easier for them? Dismissing this possibility on purely moral grounds ignores the free nature of the Web. Look at peer-to-peer sharing: as soon as Apple and others eliminated the arcane barriers of music sharing, people were willing to ignore their compunctions about pirating. Only then did the issue become a question of morals.Your price protects your product. Choose a price that is easier to pay than to circumvent by stealing or hacking. This frees you to focus on making an excellent product, rather than policing deviants.The Loudest VoicePrice can market a lot for you. With a lower price, whatever income you lose, you make up for in word of mouth. People love to brag about doing things cheaper and more efficiently. With our product, we set a low price because we deliberately excluded many of the features offered by higher-priced competitors. Our perspective is that simplicity rules, and that point of view is demonstrated in our pricing.A higher price, on the other hand, could position your product as the market leader and make it more palatable to a wider audience. The majority of people want to pay up to a 30% premium for the leading product on the market, according to Keith Moore, author of Crossing the Chasm. A higher price sets expectations for better service and a better quality of experience.Pricing At WorkPlenty of great, usable prices are out there. There are also many prices that users barely tolerate. Let’s explore both (but mostly the former).Campaign MonitorWe wanted a model that was as simple as possible and didn’t require any commitment. For a product like ours, the first-run experience is critical for converting an interested party into a long-term customer. Pricing (and especially requiring credit-card details) can add a lot of friction to this process.— David Greiner, co-founder of Campaign MonitorCampaign Monitor’s pricing is as simple as it gets. It provides no barrier to entry and is completely transparent. By building a model around low one-time fees, Campaign Monitor’s product suits the needs of everyone from freelancers to large corporations.MacRabbit’s Espresso vs. Adobe’s DreamweaverAesthetics aside, Espresso’s price feels simple. Dreamweaver’s forked pricing adds complication, and the $200 gulf between an upgrade and the full product suggests a bloating of price and possibly features. Both companies offer a trial, which is essential to demonstrating value to new customers.37signals’ BasecampPricing for 37signals’ Basecamp feels right for the audience: professionals. It may be a little steep for individuals who want to organize a group conversation, but a free plan is offered (though heavily de-emphasized). Basecamp is a product that customers use every day, so a monthly plan feels worth the cost. I should know: I have been using it for seven years.Think Vitamin Membership from CarsonifiedWhether the experience is understandable and fair will determine whether the user signs up, so it’s the most important thing. It sets the “value” for the user. It prepares them for what kind of quality they will be getting. The higher the price, the more they expect.— Ryan Carson, founder of CarsonifiedThe Think Vitamin membership gives users a good understanding of how price aligns with perceived value. In a tiered system, each level should be tied to cost, whether it be in the form of support, bandwidth, memory or, in this case, proprietary information.TypekitTypekit is a great product at a very reasonable price, but it comes with unnecessary inconveniences. By tying recurring costs to domains, it makes for difficult interfacing with project-based design work. This renders the product useless for designers who want to use great typography but chafe at the thought of burdening their clients with the cost of fonts or absorbing the cost themselves for clients they may never work with again. Typekit greatly alleviates, but doesn’t solve, this by offering unlimited domains in the “Portfolio” option.If You Know User Experience, You Know PricingPricing is merely estimation, our best guess at the perceived value of our offering. But this does not mean that we should do it blindly. To quote von Mises again, “All prices we know are past prices.” According to him, prices never reach a final state of equalization. As long as people continue to grow and change, so will their behavior, and so will our markets — just as our products and their interfaces do.Focus on your product and its target audience. Work towards pricing that makes cents for you and sense for your users, and continue to refine it to show that you understand and respect your current customers. Do not shy away from intuition or change. Set a price with confidence, knowing that you can adapt as needed.Usability is relevant beyond the screen; it reaches as far as a user’s wallet. You’ve already honed the skills to create great experiences. Now apply those same skills to crafting a price and model that balance your product’s needs with the expectations and behavior of your customers.(al)© Nathan Ford 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:
- Tags:
- design
August 5 2010, 5:42am | Comments »
-
I posted to smashingmagazine.com
Designers, “Hacks” and Professionalism: Are We Our Own Worst Enemy?
http://feedproxy.google.com/~r/SmashingMagazine/~3/37caI2B4CUs/
“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 know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]What Exactly Is A “Hack”?Let’s take a look at dictionaries. Hack: noun.A horse used for riding or driving; a hackney.A worn-out horse for hire; a jade.One who undertakes unpleasant or distasteful tasks for money or reward; a hireling.A writer hired to produce routine or commercial writing.A carriage or hackney for hire.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 IndustryThe 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
- Tags:
- design
- hacks
- designers
- professionalism
August 3 2010, 5:11am | Comments »