Every now and then we look around, select fresh high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your current projects. We search for them and find them so that you don’t have to.In this selection, we’re pleased to present Piron, Nobile, St Marie, Code, Arcus, Crimson Text, Quadranta, Juice, Prociono, Mr Jones, Ibarra Real and various useful symbol fonts. Please note that some fonts are for personal use only and are clearly marked as such. Please read the license agreements carefully before using the fonts; they can change from time to time.You may be interested in the following related posts:20 Fresh High-Quality Free Fonts25 New High-Quality Free Fonts15 Beautiful High-Quality Free Fonts40 Excellent Free Fonts for Professional DesignYou can find over 80 more free fonts in our Fonts section.[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.]New Free High-Quality FontsPiron Piron is a highly legible typeface, very well suited to any display or text usage: Web, print (especially magazines), brochures, logos, posters, flyers, motion graphics. The font comes in two weights: regular and oblique. Designed by Alexander Nedelev and Veronika Slavova. Available for free and commercial use, and available in OpenType format.Nobile The font is designed to work on digital screens and handheld devices without losing the distinctive look usually found in fonts designed for print. The aim here was to design a font that would function well, have good legibility on screen yet also look good — not only at larger display sizes but also right down to small text sizes. The font is available in the Google Font Directory and was released under the Open Font License. The family comes in four weights (regular, italic, bold and bold italic).Mr Jones Book and Mr Jones Book Italic (Registration required) Mr Jones was originally conceived as a family for print design, consisting of a sans and a headline. The lowercase forms are wide for legibility at small sizes, while the caps are narrower to save space and keep an even balance of negative space when used in body copy. The overall widths of certain characters have been adjusted to almost extremes to keep an even balance of white space around each letter. The font works well in body copy but will need decreased tracking in larger settings. It comes with proportional, old-style and tabular figures and discretionary ligatures.Pigiarniq Inuktitut (Download link) An oldie but a goodie. Heard of Nunavut? A small territory in Canada with one of the lowest population rates of the world? Probably not. Only 0.01 people live there per square kilometer, mostly Inuit. The citizens of Nunavut speak four languages: French, English, Innuinaqtun and Inuktitut. A few years ago, the government of the region decided to design a new typeface to enable its 28,000 citizens to use all four languages in a uniform manner. The result was a beautiful, rich and professional free sans-serif. The family includes bold, heavy, italic, light and regular weights, all available for free use.St Marie St Marie is a rich type family designed for online applications and print. This release is a preview of the upcoming family, and the designer has released two weights (St Marie Thin and St Marie Thin Web) for free. The download package contains the weights in the formats OTF, WOFF, EOT and SVG, as well as a @font-face kit. See this example of St Marie Thin Web (HTML-page).Code: Free Font This sturdy yet playful little font family can be applied to different kinds of graphic design work: Web, print, motion graphics, t-shirts, posters, logotypes. The font contains 192 characters and two weights (regular and bold) and is available in OTF for PC or Mac.VAL Stencil A quite distinctive, memorable font with two variations: lowercase letters bend to the left and uppercase letters bend to the right. This unique font will give your headlines originality and dynamism. Designed by Svetoslav Simov of Fontfabric, available in OTF.akaDora (For personal use only) akaDora is a fairly simple script font with wide character support. Designed by James Daniel Milligan.Arcus and Arcus Italic (Registration required) Arcus is a geometrically constructed font with rounded curves. The font contains a wide range of alternative signs, small capitals, lining and old-style numerals, fractions, superiors, inferiors, ligatures and discretionary ligatures; all this is within the frame of OpenType functions. The type family was designed for headlines, logotypes and corporate identities, and it is not a good fit for long text. Available for free and commercial use.Crimson Text Open that old tome from the bookshelf over the fireplace, stick your nose in its pages and smell the ink, the glue and the immortality of the printed words. That is what Crimson Text is meant to be like. The font is released under the Open Font License.Acid (Free for personal use only) Acid was designed by Stephan Baum specifically to be used in logotypes and body copy. The form of glyphs is similar to the design classic B42 by Marcel Breuer (Bauhaus) and has a very geometric character. The font contains 103 glyphs, comes in six weights (regular, regular italic, medium, medium italic, bold and bold italic) and is in the process of being developed. Released under Creative Commons.Real Origami (Free for personal use only) (PDF specimen) The designers based this font on an origami alphabet by Japanese artist Taichiro Hasegawa. A very original, distinctive and playful font.Quadranta According to its creator, this design was started with quadrant arcs. Quadranta is a display font that would fit logo designs and playful headlines. Available for personal and commercial use. Designed by Darim Kim using FontStruct.Balonez Fantasia Yet another distinctive, playful font with rounded glyphs. This would be great fit for brochures, magazine and t-shirts. Designed by Thiago Calza. Freely available for personal and commercial work. Available are two weights in TrueType.Juice Juice is a modern, dynamic sans-serif type family. The font contains six weights (light, light italic, regular, italic, bold and bold italic), each containing 161 glyphs. The font is available in TrueType format. Designed by Dhany Arliyanti.Geomancy Typeface (Free for personal use only) Geomancy is a chunky, retro geometric font that hearkens to French and American art deco. With some letterforms taken directly from posters and ephemera of the period, the all-uppercase set comes with many alternates and ligatures, so you can give a little of that varied, hand-painted feel to your work. Available in two weights: hairline and extra bold.Prociono Prociono is an Esperanto word meaning either the star Procyon or the animal species known as the raccoon. It is a roman typeface with blackletter elements. The release includes both OTF and TTF. Source files are available as well.Edelsans (Free for personal use only) Edelsans was designed as a noble geometric font for the screen, with few corners and mostly rounded glyphs. The typeface is not completely finished but is free for non-commercial use.Neu Eichmass Neu Eichmass (German for New Etalon) is a typeface based on the weight 100 grams. The name is a reference to International Prototype kilogram, as a base unit of mass in the International System of Units. The typeface has a modern, cold, measured feel to it, reflecting its origin (its metal “parents”). It is a sans-serif font and takes inspiration from famous grotesques and stenciled types associated with marketplaces and street traders. Further inspiration comes from 1920s and ’30s constructivism. The font can be easily stenciled and is appropriate for different uses (street art, retail, independent shops, street markets). It comes in a headline font and a medium point body text suitable for print. Designed by Ivan Khmelevsky.Ingleby Font A beautiful, carefully crafted serif font, with signs of the fine antiqua tradition. Designed by David Engelby, the font comes in four weights: regular, italic, bold and bold italic.Ibarra Real Ibarra Real is a public domain font of Ibero-American character. Created in 2005, Ibarra Real is an elegant design, mixing tradition and modernity; a genuine badge of the particular Spanish culture that was created by Joaquín Ibarra in 1780. Available for Windows, Mac and Linux.Notice 1: Packaging Symbols (Download) A symbols font with various weather, packaging and usage symbols.Notice 2: Navigation symbols (Download) Yet another symbols font, this one containing symbols for public transit, car and flight navigation.Notice 3: Cloth Symbols (Download) This symbols font contains pictograms for the clothing industry. The font is available in OpenType and was designed by the Russian studio Otlab.Glyphyx (Registration required) This set of two free fonts features symbols and icons for use in data visualization. Glyphyx One includes symbols related to transportation, while Glyphyx Two has symbols related to leisure activities. Available in OpenType and TrueType formats for Windows and Mac.Free Symbol Signs Collection Here is a collection of 50 common symbols for signage, professional designed. The symbols are free for use and are available in OpenType format. All were designed by Sander Baumann, set to the proportions of a regular typeface, so you no longer need to copy and paste such icons into your designs.Rally Character Set (Specimen | Preview | Download) Lukyan Turetsky released this character set of car rally symbols. The font contains standard signs of control in rallies, rally-related infographic icons, blanks for logos and other graphics, symbols for legends and other symbols and marks. In OpenType and available for free.Oblik Serif Bold (Registration required) Oblik Serif Bold is a sophisticated contemporary font with vivid and playful glyphs. The font could be a great fit for headlines and posters but is hardly usable for long body text. The font has wide character support and is available for free and commercial use. Comes in OpenType format.Paranoid Paranoid is a yet another experimental font, collaboratively designed by Simon Carrasco, John Stuart and Kevin Yeun Kit Lo. Paranoid is a purely geometric display face, conceived as a contribution to (and subtle critique of) the still growing trend of bold, geometric and counterless typography. It is equally suited to bringing back the joy of ’80s dance parties or expressing the ominous foreboding of inevitable nuclear disaster. A flexible face in spite of its limited form. Please contact the designers before using this font commercially.01.BASE This free font is bold and experimental. It would come handy for bold statements on t-shirts and posters. The font was designed by Fabian De Lange and is licensed under the Creative Commons Attribution Share Alike license.Last ClickTypedia Typedia is a community website dedicated to classifying typefaces and educating people about typefaces. Think of it as a cross between IMDB and Wikipedia, except for type. Anyone can join, add or edit pages for typefaces and the people behind them.(al)© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
-
I posted to smashingmagazine.com
30 New Free High-Quality Fonts
http://feedproxy.google.com/~r/SmashingMagazine/~3/_5y8uGwEzd8/
- Tags:
- Fonts
August 12 2010, 12:34pm | Comments »
-
I posted to smashingmagazine.com
The Future of the Internet
http://feedproxy.google.com/~r/SmashingMagazine/~3/WU2wxhZ1MJw/
“In only a few short years, electronic computing systems have been invented and improved at a tremendous rate. But computers did not ‘just grow.’ They have evolved… They were born and they are being improved as a consequence of man’s ingenuity, his imagination… and his mathematics.” — 1958 IBM brochureThe Internet is a medium that is evolving at breakneck speed. It’s a wild organism of sweeping cultural change — one that leaves the carcasses of dead media forms in its sizeable wake. It’s transformative: it has transformed the vast globe into a ‘global village’ and it has drawn human communication away from print-based media and into a post-Gutenberg digital era. Right now, its perils are equal to its potential. The debate over ‘net neutrality’ is at a fever pitch. There is a tug-of-war going on between an ‘open web’ and a more governed form of the web (like the Apple-approved apps on the iPad/iPhone) that has more security but less freedom.An illustration of a computer from a 1958 IBM promotional brochure titled ‘World of Numbers’ So what’s the next step in its evolution, and what’s the big picture? What does the Internet mean as an extension of human communication, of the human mind? And forget tomorrow — where will the web be in fifty years, or a hundred? Will the Internet help make the world look like something out of Blade Runner or Minority Report? Let’s just pray it doesn’t have anything to do with The Matrix sequels, because those movies really sucked.This article will offer in-depth analysis of a range of subjects — from realistic expectations stemming from current trends to some more imaginative speculations on the distant future.[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]Security“Death of the Open Web”?Those words have an ominous ring for those of us who have a deep appreciation of the Internet as well as high hopes for its future. The phrase comes from the title of a recent New York Times article that struck a nerve with some readers. The article paints a disquieting picture of the web as a “haphazardly planned” digital city where “malware and spam have turned living conditions in many quarters unsafe and unsanitary.”There is a growing sentiment that the open web is a fundamentally dangerous place. Recent waves of hacked WordPress sites revealed exploited PHP vulnerabilities and affected dozens of well-known designers and bloggers like Chris Pearson. The tools used by those with malicious intent evolve just as quickly as the rest of the web. It’s deeply saddening to hear that, according to Jonathan Zittrain, some web users have stooped so low as to set up ‘Captcha sweatshops’ where (very) low-paid people are employed to solve Captcha security technology for malicious purposes all day. This is the part where I weep for the inherent sadness of mankind.“If we don’t do something about this,” says Jonathan Zittrain of the insecure web, “I see the end of much of the generative aspect of the technologies that we now take for granted.” Zittrain is a professor of Internet governance and regulation at Oxford University and the author of The Future of the Internet: and How to Stop It; watch his riveting Google Talk on these subjects.The Wild West: mainstream media’s favorite metaphor for today’s Internet The result of the Internet’s vulnerability is a generation of Internet-centric products — like the iPad, the Tivo and the XBOX — that are not easily modified by anyone except their vendors and their approved partners. These products do not allow unapproved third-party code (such as the kind that could be used to install a virus) to run on them, and are therefore more reliable than some areas of the web. Increased security often means restricted or censored content — and even worse — limited freedoms that could impede the style of innovation that propels the evolution of the Internet, and therefore, our digital future.The web of 2010 is a place where a 17 year-old high school student can have an idea for a website, program it in three days, and quickly turn it into a social networking craze used by millions (that student’s name is Andrey Ternovskiy and he invented Chatroulette). That’s innovation in a nutshell. It’s a charming story and a compelling use of the web’s creative freedoms. If the security risks of the Internet kill the ‘open web’ and turn your average web experience into one that is governed by Apple or another proprietary company, the Andrey Ternovskiys of the world may never get their chance to innovate.Security SolutionsWe champion innovation on the Internet and it’s going to require innovation to steer it in the right direction. Jonathan Zittrain says that he hopes we can come together on agreements for regulating the open web so that we don’t “feel that we have to lock down our technologies in order to save our future.”According to Vint Cerf, vice president and Chief Internet Evangelist at Google, “I think we’re going to end up looking for international agreements – maybe even treaties of some kind – in which certain classes of behavior are uniformly considered inappropriate.”Perhaps the future of the Internet involves social structures of web users who collaborate on solutions to online security issues. Perhaps companies like Google and Apple will team up with international governmental bodies to form an international online security council. Or maybe the innovative spirit of the web could mean that an independent, democratic group of digital security experts, designers, and programmers will form a grassroots-level organization that rises to prominence while fighting hackers, innovating on security technology, writing manifestos for online behavior, and setting an example through positive and supportive life online.Many people are fighting to ensure your ability to have your voice heard online — so use that voice to participate in the debate, stay informed, and demand a positive future. Concerned netizens and Smashing readers: unite!FreedomNet NeutralitySome believe that the fate of the Internet has been up for grabs ever since the federal government stopped enforcing ‘network neutrality’ rules in the mid-2000’s. In a nutshell, net neutrality means equality among the information that travels to your computer: everyone has the right to build a website that is just as public, affordable, and easily accessible as any other. However, some companies like phone and internet service providers are proposing ‘pay tiers’ (web service where you need to pay premium fees in order to allow visitors to access your site quickly). These tiers of web service could kill net neutrality by allowing those who can afford premium service (particularly large media companies who don’t like sharing their audience with your blog) greater access to consumers than the average web user.The debate over net neutrality reached a boiling point when Google and Verizon announced a ‘joint policy proposal for an open Internet’ on August 9th, 2010. Despite the proposal’s call for a “new, enforceable prohibition against discriminatory practices” amongst online content, many criticized it, citing leniency and loopholes.Net neutrality needs to be made law. If the Internet were to have a slow lane and a fast lane, your average web user could lose many of his or her freedoms and opportunities online, thereby shattering the core values that make the Internet so profoundly valuable to society. However, that’s just the tip of the iceberg for this thorny issue. To learn more, read the full proposal or watch the Bill Moyers episode ‘The Net @ Risk.’The World into the WebBrowser-based EverythingGoogle is developing a variety of applications and programs that exist entirely within the browser. Their PAC-MAN game was a preview of what’s to come because it allowed in-browser play of a simple, lightweight video game that required no downloads and relied on pure HTML, CSS, and Javascript. At the company’s 2010 I/O conference, Google laid out its plans to develop “rich multimedia applications that operate within the browser” (according to this New York Times report on the conference). The company plans to sell in-browser web applications like photo editing software (imagine using a Photoshop equivalent entirely within the browser) that it will sell in a web applications store called the Chrome Web Store.If our programs and applications are about to be folded into the browser, what will exist within the browser in ten years? Currency? Education? Consciousness? Personally, I’m hopeful that my browser will be able to produce piping hot cheeseburgers sometime soon.The Internet as a Collective ConsciousnessThe Internet is a medium, and philosopher Marshall McLuhan believed that all media are extensions of the human senses. The engine of our collective creative efforts is the force that’s causing the web to evolve more rapidly than any biological organism ever has.Transcendence is one of the great themes of human culture. Image of seated Buddha statue: The Metropolitan Museum of ArtThe Internet is an extension of the collective human mind and it’s evolving into a medium of transcendence. By constructing a place where the collective human consciousness is both centralized in one location (on your computer) and globally accessible (for those with the means to reach or use a computer, that is), our human spirit is transcending the human body. Way back in 1964, McLuhan himself wondered, “might not our current translation of our entire lives into the spiritual form of information seem to make of the entire globe, and of the human family, a single consciousness?”With the advent of trends including social media, ‘lifecasting,’ and ‘mindcasting,’ the Internet is being used as a real-time portal for the human consciousness. Perhaps those trends will be inverted by some web users of the future: instead of bringing offline life to the web (as so-called ‘lifecasters’ do when they stream live video of their attendance at an offline event), some web users will live their entire public lives online. Imagine a pop star who conducts her entire career online: every interview, live performance, music video or album release conducted solely through a browser window or mobile screen. Or a media theorist who exploited the platform of the web while discussing the theoretical ramifications of those actions. It’d be a great gimmick.The Web into the WorldThe ‘Web of Things’The ‘web of things’ or ‘Internet of things’ is a concept that will be a reality (at least in a rudimentary form) in the near future. The idea is that devices, appliances, and even your pets can all be tracked online. With Google Maps for iPhone, you can currently track your location on a digital map in relation to the streets and landmarks in your area. So it’s not hard to imagine a world where you can zoom in on your location and see detailed, 3D renderings of your surroundings: the cars on your block, the coffee machine in your kitchen, even Rover running around in your backyard! And it’s a good thing that you’re digitally tracking the location of poor Rover; he’s liable to hop the fence and make a run for it now that you’ve created a satellite computer out of everything you own (including his dog collar) by attaching a tracking device to it.AT&T is betting big on the web of things. According to this Reuters article, the phone service provider is investing in tracking devices that could be installed in cars, on dog collars, and on the pallets used to move large shipments of products. The dog collar, for example, “could send text messages or emails to the owner of a pet when it strays outside a certain area, or the device could allow continuous tracking of the pet.”Combine the concept of the ‘web of things’ with Second Life-style 3D imaging and you can imagine a web-based duplicate world — a virtual world that corresponds to the real one. But what are the implications of a world where every physical item has a corresponding digital existence online? Can we track the physical effects of climate change in the web of things? Will there be a digital avatar for every pelican carcass in the vicinity of the oil spill that’s devastating the Gulf of Mexico? It’s a tragic shame to develop a virtual world if we let the natural one go to waste in the meantime.Interactive LandscapesIt has been said that today’s science fiction is tomorrow’s reality. Unfortunately, most good science fiction stories are cautionary tales set in dystopian nightmares.QR codes on the façade of Japan’s N Building. Photo: GizmodoSimon Mainwaring reports on the N building in Japan, where “the whole building facade has been transformed into a real time dialogue between smart phones and what’s going on inside the store.” The exterior of the building is layered with QR codes (an alternate form of bar code) that can deliver real-time information to your phone. In Stephen Spielberg’s film Minority Report (adapted from a short story by mad genius Philip K. Dick), Gap ads came alive to hawk khakis to Tom Cruise. Looks like we’re about one step away from this scenario.Mr. Mainwaring imagines a future with “billboards that watch you shop and make targeted suggestions based on your age, location and past buying habits,” and “stores will effectively be turned inside out as dialogue and personalized interaction with customers begins outside the store.”The technology is cool, but it sounds like a pretty annoying future if you ask me. Who wants to be accosted by a holographic salesperson? The web grants us a great opportunity to use our collective voices to speak out on topics that matter to us. Because there are no regulations yet for much of this technology, it may be up to concerned citizens to make themselves heard if Internet-based technology is used in intrusive or abrasive ways.The ‘Innerweb’Cyborgs are among us already — humans whose physical abilities have been extended or altered by mechanical elements built into the body (people who live with pacemakers are one example). What will happen when the Internet becomes available on a device that is biologically installed in a human? What will the first internal user interfaces look like?Here’s one speculation.In the near future, we may be capable of installing the Internet directly into the user’s field of vision via a tiny computer chip implanted into the eye. Sound far-fetched? I doubt that it would sound far-fetched for Barbara Campbell, whose sight has been partially restored by a digital retinal implant (CNN reports on Barbara’s artificial retina).Ms. Campbell was blind for many years until she had a small microchip surgically implanted in her eye. A rudimentary image of Ms.Campbell’s surroundings is transmitted to the device, which stimulates cells in her retina, in turn transmitting a signal to her brain. It’s a miracle that the development of a bionic eye has begun to help the blind see.How else might doctors and scientists take advantage of the internal microchip? Perhaps the user’s vision will be augmented with an Internet-based interface with capabilities including geolocation or object identification. Imagine if technology like Google Goggles (a web-based application that identifies images from landmarks to book covers) was applied inside that interface. The act of seeing could not only be restored but augmented; a user might be capable of viewing a landscape while simultaneously identifying web-based information about it or even searching it for physical objects not visible to the naked eye. Apply the concept of augmented sight with the idea of the ‘web of things’ — an environment where physical objects have a corresponding presence on the web — and you can imagine a world where missing people are located, theft is dramatically reduced, the blind can see, and ’seeing’ itself means something more than it used to.If the web is an extension of our senses, it follows suit that the web may be capable of modifying those senses or even accelerating their evolution.The Crown Jewels“The next Bill Gates will be the deliverer of a highly technological solution to some of our climate change challenges.” — Lord Digby Jones of BirminghamIn preparation for this article, I considered a variety of wild ideas and fun speculations about the future. Could the Internet be used to solve the problem of climate change, generate tangible matter, or contact extraterrestrial life? Maybe those ideas sound like the stuff of imaginative fiction, but in a world where quantum teleportation has been achieved and researchers have created a living, synthetic cell, it almost seems as if the concept of science fiction is being eradicated while real technology brings our wildest fantasies to life. Here is the result of my most daring (absurd?) speculation.Time TravelThe functionality of the Internet relies on a linear series of events. Image: Eadweard MuybridgeI called on physics teacher Mark Stratil to answer my last burning question: could the Internet ever be capable of facilitating the development of time travel? Here’s Mark’s answer:“The Internet is still based on computers, which make linear calculations. Right now, all computers are based on binary code, which is a series of yes and no questions. You can make something that’s incredibly complex with a series of yes and no questions, but it takes a certain amount of time. The Internet still has to go through those calculations and it still physically has to make one calculation that will lead to the next calculation that will lead to the next. So no matter how fast we can get our computers – they’re making billions of calculations, trillions of calculations per second – there’s still going to be some lag time. They’re still limited by time in that way. They still need some time to make that conversation or that calculation.In that way, they’re kind of chained to time. Their whole existence is based on a linear sequence of things that happen. In order to create something else, something that goes outside of time, you would have to make it a non-linear system — something that that’s not based on a series of yes and no questions, because those have to be answered in a precise order. It would have to be some kind of system that was answering all the questions at once.”So Mark’s short answer to my fundamental question was basically that the Internet, in its current state, would not be capable of facilitating time travel. However, if the Internet was liberated from the linear structure of binary code and migrated onto an operating system that ‘answered all questions at once,’ then maybe it could have the potential to manipulate time or transcend the boundaries of time.Sounds unlikely at this point, but one of the Internet’s greatest capabilities is the opportunity to share and develop ideas like these!ConclusionResponsible EvolutionThrough technology, we hold the reins to our own evolution.For the first time in history, it might be said that there are moral implications in the act of evolution. The Internet is an extension of our senses and our minds, and its progress is propelled by our own creative and intellectual efforts. The future of the Internet will be shaped by millions of choices and decisions by people from all walks of life. Designers and programmers like us have the advantage of technical skill and specialized knowledge. Given the increasing presence of the Internet in our lives, our choices can have deep reverberations in human society.We’ll face small choices like what color to use for a button and larger choices like which platforms to endorse and which clients to support with our work. But the real questions form broad patterns behind every media trend and every mini technological revolution. Can we use technology to develop solutions to environmental problems — or will we abandon the natural world in favor of a digital one and the ‘web of things’? Have we fully considered what it means to merge biology and technology? And finally, do we really need a digital tracking device on our coffee machines?What a thrilling time to be alive! Let’s proceed with great enthusiasm and a commitment to designing a future that is meaningful, peaceful, and staggeringly exciting.Partial BibliographyNew York Times Magazine: “The Death of the Open Web”Simon Mainwaring: “The Future of Shopping: What Happens When Walls Start Talking”The Gutenberg Parenthesis: Parallels Between Pre-Printing Communication and the Digital EraNew York Times: “Google Pitches a Web-Centric Future”Google Talks: The Future of the InternetMoyers on America: ‘The Net @ Risk’ (Video)Pew Internet Research Poll: Future of the Internet IVGoogle I/O: The Web is Killing Radio, Newspapers, Magazines, and TV (TechChrunch reports)Related PostsYou may be interested in the following related posts:The Evolution of the LogoThe Dying Art Of DesignLessons From Swiss Style Graphic DesignArt Manifestos and Their Applications in Contemporary Design© Dan Redding for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: analysis, future, internet
August 11 2010, 4:25am | Comments »
-
I posted to smashingmagazine.com
Showcase Of Delicious Coffee Websites
http://feedproxy.google.com/~r/SmashingMagazine/~3/TpVsag2w2MQ/
For designers approaching a deadline, coffee is a delicious necessity. Lucky for us, having a coffee break is not really difficult. But it’s more than just a 3am fix. With every late-night run to the local coffee house, we contribute to a populous network of coffee trading, sales and experience.And in fact, coffee houses and suppliers are quite a business, with online presences ranging from simple layouts with striking typography to advanced layouts with remarkable photography. Coffee websites: how do they look like? What do they have in common? What metaphors, visuals and typography are they using? Well, this is where this showcase comes handy: let’s take a closer look at tasty coffee websites and examine their distinctive features and peculiarities.[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.]ShowcaseFar Coast Rustic oranges and blues are at play Far Coast’s website, with hints of distressed textures for an even more vintage vibe. The top navigation bar complements the large images that span the bottom, and the size of the centered text balances these for a pleasing look. Contrasting the richness of imagery is a neutral background, as well as low-opacity shots on either side.Gorilla Coffee Thick lines, a dark two-toned palette, heavy shapes and an urban setting remind the user that coffee can be just as enjoyable when sipped in a fast-paced city as in the mountains. Flash in use.Ipsento Coffee Instead of working with generic templates, Ipsento Coffee provides truly professional photography, displaying various navigation options in a quite unusual but attractive way. No links, no pages, no frustration with poor navigation. Ipsento shows that you can be complex and professional in design without having to indulge in equally complex development.Coffee Club It’s no accident that the word “Indulge” emphasized in this design. With the aerial view of the natural setting, multiple areas of primary and secondary focus and beautiful balance of features, you’ll be indulging in this design as much as the Coffee Club’s menu.America’s Best Coffee Roasting Company Balance is key in this design, and in many ways. America’s Best balances the abundance of gray tones in the big background image with a few shots of bright blues and rusty reds. In the same vein, the small text on the right side of the text area is balanced by the large focal text on the left. Overall, this text and link area is centered in the design. There are subtle balances as well: the “heavy” part of the picture is the top right, balancing the logo on the left.Pura Vida Lime green isn’t an obvious tone to associate with coffee, nor with a website. But Pura Vida uses it to embody the qualities of its coffee: fair-trade certified, organic and shade-grown. The tone is cooled down by the rich browns, crisp whites and suede neutrals.Seattle’s Best Coffee The most interesting part about Seattle’s Best Coffee website is its interactivity. You can rotate the cup to reveal different information about the company, its partners and the coffee. As the website says, “Go ahead. Take it for a spin.” Your design taste buds will be satisfied.Café Henrici With a simple “flip” of the menu, you get all the information you need about Café Henrici. Café Henrici’s use of perspective in the layout image draws users into the scene, making them feel as though they are sitting at a round table in the Café, sipping a steamy cup.Sweet Sallie’s Bakery & Cafe Though Sweet Sallie is as much a cafe as a bakery, its website exemplifies the cute-cupcake vibe found in many bakeries. With various blues, lavenders and teals and a feminine background pattern and type, this website’s all about baked-goods deliciousness. The cafe is simply the cherry on top.Influx Café With a design as modern as the furniture in the photo, the Influx website is sure to please. On the home page, we are first presented with a sped-up video of goings-on in the cafe, giving us a fly-on-the-wall look at the cafe… and some tasty-looking muffins. From there, users can navigate to the sub-pages, which continue the clean palette.Tapped & Packed Coffee The Tapped & Packed website combines the beauty and simplicity of modern design with traditional charm. A simple yet elegant palette of deep grays, crisp whites and soft yellows is combined with crisp lines to give a modern touch, while the serif fonts and roman numerals lend traditionalism.Caravan Caravan’s website (or rather “Coming Soon” page) is decadent in rich grays and browns. Crisp whites bounce off the dark tones in both serif and sans-serif fonts, giving the typography a professional look. The background image gives us a view of its modern product design, which reflects the website itself, with its sparse text and neutral color choices.Cilantro Café With drawn images dancing about a meditating man, impulsive swathes of paint and a variety of colors and objects, Cilantro Café reminds us that coffee can be both impulsive and relaxing. Reinforcing this contradiction is the radial balance of links that are off-kilter.Kicking Horse Coffee The classic black and white palette of this website reflects the product design of Kicking Horse Coffee’s cups. The website uses splashes of bright tones to (ahem) kick it up a notch, and it adds slight textural elements for intrigue. The large focal point anchors the design, allowing the designer to make the links and text area large. It’s big, in your face and effective.Robust-ah! Robust-ah’s large photo could have easily overwhelmed this space, becoming a distraction from the information featured below. Instead, the design actually benefits from the large photo, which anchors the rest of the information by giving the structure clean lines and the information a hierarchy. Robust-ah’s design is not what you would expect from a coffee website, with its deep-purple and light-blue tones. However, some things need to be improved here: larger font-size would help, and so would removing text-shadow from some parts of the text.1369 Coffee House This coffee house website may look generic and simple, and that’s because it is. But the generic vibe and simplicity ensure that the large photo and generous information remain clean and organized.Park Avenue Coffee Park Avenue Coffee gives a playful feel with all the vintage charm of its busy patterns, whimsical logos and strong color palettes.Greyhouse Coffee & Supply Co. Greyhouse Coffee emphasizes its menu so much that you have to hover around the bottom or top for the sleek sub-navigation bars to float into view. Design-wise, the menu’s cork background lends organic relief to the modern feel of the other pages.Tre Amici Reminiscent of I Spy books, Tre Amici’s links are scattered across the various photos of its coffee house. With images that skate in and out upon link clicks, Tre Amici shows an interesting, interactive take on the stagnant photo tours of other websites. The transitions in the Flash-based navigation could be certainly improved, though.Dunn Bros Coffee The Dunn Bros Coffee website has multiple textures, including burlap, paper, and photography, to exude a cozy vibe. The aerial view is also quite nice, giving us a few extra textures to enjoy: the blackness of the coffee, the shininess of the mug and the roughness of the coffee bean.Marley Coffee Marley Coffee’s website is aesthetically pleasing, with a simple yet modern palette, lovely Flash and a simple point of focus. But don’t be so quick to click, not until you see Mr. Marley close up, sipping a cup of coffee and peering over the mountains and wilderness.Jones Coffee Roasters Jones Coffee Roasters has a simple website with a simple layout, but the colors are bold and comfortable, and the textures add coziness and warmth. Easy navigation and a homey feel: a workable, beautiful combination.Blaser Café Blaser Café’s website features crisp whites and a no-nonsense, user-friendly structure, which reminds us that coffee isn’t just about sipping brew and enjoying a break. It’s a business. But we all know what all work and no play leads to, and so Blaser Café adds a fun touch, too, with whimsical image transitions on the home page.A Chacun Sa Tasse A Chacun Se Tasse lets us take in rich screen-wide images of its coffee house while reading information in an elegant gray information box. Sifting through images requires only a quick hover on the right side of the page, with no jolting image or page transitions.Turquoise Coffee At the opposite end of the color spectrum is Turquoise Coffee, which uses calm neutrals, muted turquoises and subtle splashes of unexpected tones to grab the user’s attention. The website may not be as flashy or inspirational as some others we’ve seen, but it’s pleasant, easy on the eyes and user-friendly, and it gets the job done. It reminds us that simple isn’t so bad. The line-height and padding could be increased though.Looney Bean Roasting Company Nothing says decadence quite like red. And nothing is a more perfect match than red and subtle khaki neutrals. Reds and beiges may not be the go-to colors for coffee products, but here they play off the large coffee-swirl background to emphasize the coffee’s creamy delectability, rather than its high-energy potency.Storyville Coffee Company This website is tasty enough on the low bandwidth option, but go high bandwidth if possible. Here, everything says rich: the warm tones of the large transitional images, the rich grain in the borders, the page transitions, the balance of information on the secondary pages, the decoration upon link-hover and the elegant, deep-toned pattern background. The coffee is “artfully roasted,” and the website is certainly artfully crafted.Bean Exchange Coffee House History comes alive on the website for this old Philadelphia coffee hub. The coffee house communicates its rich history in the look and feel of the website, with every bit of ornateness, palette and structure contributing to the theme.Java Cabana There is such a thing as too much of a good thing, and certainly in the case of color. But Java Cabana’s heavy use of brown—typical of coffee websites—isn’t overbearing, thanks in part to the texturing of most of the brown elements, which help to break up the monotony. In addition, the steel accents bring a gray neutral that breaks up the brown without becoming an overt accent tone. Add in some great illusions of dimension, and you’ve got yourself a delicious website. Flashy transition effects in the footer of the page could be achieved with CSS3; you don’t really need Flash for that any more.Cuvée Coffee Roasting Company This company boasts, “We take our coffee seriously. But we don’t take ourselves seriously.” It may sound like a cliché, but if its design is any indication, Cuvée Coffee is being honest. With fun cheesy yellows, handwritten fonts and playful graphics, the website feels as whimsical as it is professional. The palette stays grounded in warm hues, helping to maintain professionalism and hint at Cuvée’s birthplace: the arid state of Texas.Café Britt An abundance of imagery is on Café Britt’s website to stimulates several of the senses. The stainless steel logo against the rich gray background convey the professionalism of the company. The wood and plant imagery in the navigation bar and footer brings a natural aura. We also get an intimate feel from scrapbook-like elements such as the handwritten fonts, old-paper textures and painted scenery on sub-pages. The website is wide, but that helps to accommodate the abundance of content.Paul Dequidt Torrefacteur Soft plays on opacity and drop-shadows give texture to the large white information areas at the center of the page. The large background contains the palette from which all tones are pulled. The dimensions could be overwhelming, stifling any smaller images in the text area, but the large image in the white section maintains equal proportions. In addition, we get a definitive sidebar and two-column balance, adding stability to the layout.Cafeshop Especial Dimension, texture and the colors in the links and sidebar ensure instant recognition of important sections, while the soft background adds a neutral base and subtle interest.Swiss Water In the rotating pictures, you’ll find women talking to one another over a cup of coffee, women enjoying a solitary cup of coffee, women sipping coffee while working. These scenes highlight coffee’s status as both a vehicle for social interaction and an occasion for brief solitude, and they form the largest part of the website, above the fold and in your face. The soft blues and whites minimize the distraction of the top links, search box and the like. Even the logo takes a back seat to the driving concept: coffee’s friendliness and warmth.Café Théâtre de la Marionnette It’s not often that a torso with a coffee-cup head descends from above on strings and slides down the page, but with a name like Café Théâtre de la Marionnette, the sight is not surprising. Neither are the rustic textures and intriguing images (such as the doll-like dresses). But what keeps this website in the modern era is the beautiful development, which gives us a realistic bounce as each page loads.First Colony Coffee and Tea Using a mix of old and new design, First Colony Coffee and Tea definitely breathes new life into tradition. The serif fonts, black and white imagery and crest in the logo create a colonial vibe and take the edge off the stark modern yellow in the image and background. With the expansive space along the right side and abundance of text, this website could easily have been boring at first glance; but the focal point comes to the rescue, with the smooth sway of steam from the coffee cup and the soft scrolling of the background image.Juan Valdez This website gives us more than a warm welcome. Here, we are personally greeted by Juan Valdez, we traverse the rich countryside scene, and we enjoy all the animated goodness that this design has to offer. And if you don’t have time to take it all in, you’re in luck: the easy navigation makes the content extremely accessible, an advantage that many heavy websites don’t have.Lavazza Lavazza’s neutral brown background emphasizes the big links of rotating coffee cups that occupy most of the page. The neutral background also accommodates bright tones that run the spectrum. These whimsical touches are balanced by a simple white font for navigation and darker browns for drop-shadows and highlights.Café Rouge Various textures create a warm, entertaining vibe on Café Rouge’s website. The textured background, rough paper, old stickers and supple light are just a few of the touches that make this website cozy. The movement in the photos and scrolling images below add flare.Anodyne Coffee Anodyne’s website is simple. Its coding is basic, and its design is line-based and simple, which might cause some designers and developers to cringe. However, with the Web now so obsessed with bells and whistles, seeing a simply coded, simply designed website is a breath of fresh air. The traditional serif fonts hearken back to simpler times. What would be really necessary, though, is to replace an image used under the header to display opening times and the address with simple text that would have higher contrast against the background.Dôme Café Like Café Rouge, Dôme Café uses a variety of textures to make the user feel cozy. The rotating images add excitement, and elements such as the white ribbon in the logo and the trim around the links instill tradition.Double Coffee Double Coffee matches its big imagery with big text, big text areas and bold white fonts, achieving proper balance. Red runs rampant across the website in different hues and tones, bringing consistency and cohesion to the website. Adding to the cohesion are white cups, dishes and creamers that mirror the font. It’s proportionately spot-on and features interesting touches, such as a credit card. The consideration for all of these basic design principles make the website appealing and make us want to stay for one more page.Kaffebrenneriet Like the Far Coast website, Kaffebrenneriet balances big rich imagery at the top with a neutral brown and taupe bottom, as well as focused images and simple fonts. Shadows set off the logo and two navigation bars, and the play on opacity and light make for an overall professional feel.Mugg & Bean The dominance of one color, the balance of the large imagery and text areas, the traditional white font and the accent tones make this website easy on the eyes. Drop-shadows, reflection effects and beautiful image movement make it look even more professional.Old Town Old Town plays up its name in this design, with its yellow-sepia blend in the background, the old village nestled in the countryside, the italic serif fonts and the flock of birds in the sky. We also get a touch of modern, with scrolling videos on the billboard and an animated delivery truck. The heaviness of the billboard is balanced by the town, and together they are balanced by the six links along the bottom, which reveal sub-navigation in white boxes upon hover.Copper Door Coffee Roasters A multitude of textures, along with paper, wood and nails, give this website its natural look. The nice handwritten font for links and page headers and the drawn lines under hovered links punctuate the naturalness. Warm greens and oranges bring out the equally warm hues in the textures.ROM Coffee Bar The circle of ROM Coffee Bar’s logo is reflected throughout the website, providing continuity and visual interest and giving the crisp whites and steel blues a softer feel.Quills Coffee Big images, fonts and links provide balance, while the contrast of font types adds variety to this big neutral design.Melitta There’s no better way to involve a user in your product than by simply throwing them into the scene. Most coffee websites do this with a close-up of coffee or a large static image of customers enjoying the atmosphere. Not Melitta. Melitta puts us at eye level with the rest of the coffee shop’s patrons, making us feel as if we too are sitting and sipping. We get a large view of the coffee shop’s charming exterior, and we can even watch as the patrons move, change and enjoy the experience. What’s best is how large the graphic is, giving us a full-on view of the perfect Melitta experience.Related PostsYou may be interested in the following related posts:Showcase of Sweet Chocolate Websites“Meet the Team” Pages: Examples and TrendsShowcase Of Beautiful Vertical Navigation DesignsBeautiful eCommerce WebsitesThe Unusable and Superficial World of Beer and Alcohol WebsitesWhat If Oscars Were Given To Movie Websites?Principles Of Minimalist Web Design, With Examples(al)© Katie Thompson 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: showcases
- Tags:
- inspiration
- showcases
August 10 2010, 6:58am | 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
Beautiful Examples of Transparent Screen Trick Photos
http://feedproxy.google.com/~r/SmashingMagazine/~3/4Ck_BK4gbbk/
Two weeks ago we published a showcase of beautiful pinhole photography, and this weekend again we’ve got something unusual and creative to lift up your spirits and challenge your creativity. Illusions can be eye-catching and attractive and when you apply them to computer displays, the results can be quite interesting and deceptive.Take transparent screen trick photos, for example. The idea is simple: you take a photo of your surroundings and set this photo as your desktop wallpaper. Once the display is positioned precisely, the transparent screen trick is achieved. Simple, but what can you do with this simple idea?Below we present a short selection of some original transparent screen trick photos. The environments presented in these photos appear to have a completely transparent screen which creates an optical illusion. We also feature step-by-step-tutorials in the end of this post: and here you go — now you have something fun to do over the weekend![By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]Transparent Screen Trick PhotosStrobist Lighting6/365 Clear ScreenUntitledPeon.masterFirst AttemptI WIN!!!! alternative 10/365Transparent screen 3Transparent screen. [177/365]ExperimentsTransparent Screen 6Transparent Screen 1Transparent Screen ExperimentTransparent Screen 5My Transparent Screen!Transparent screen 3Transparent Screentransparent screenTransparent ScreenTransparent Screen – Tristantransparent screenBeethovenTransparent screenTransparent iBookMy transparent screenTransparent Laptop ScreenTS-pc2Transparent Screen First TryTransparent TabletSee-thru laptops!Caffè a computerGrayscaleTransparent ScreeniPod touchTransparent Screen 2Added a laptopTransparent Screen LaptopTransparent laptopStanding on ChairKeithconroyPlay Desktop With Me?My transparent macbookPeon.masterTransparent Screen Tutorials and ResourcesJust for Fun – Transparent Laptop TutorialThis project involves taking three different pictures. The first two will be taken at the same time, and the last will be taken after some editing. It is very important that you do not move your computer or tripod during the whole process.Transparent TFT Screen TutorialLearn how to create a transparent looking tft screen by combine smart photographing with some easy photoshop tricks. You will need a camera tripod and of course a digital camera to do this.Transparent Screens Flickr GroupA huge and growing gallery of photos with the transparent screen trick effect.© Aquil Akhter 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: photography, photos
- Tags:
- inspiration
- photography
- photos
August 7 2010, 10:52am | Comments »
-
I posted to smashingmagazine.com
My Internship at Smashing Magazine: Social Sushi and Hard Work
http://feedproxy.google.com/~r/SmashingMagazine/~3/7fn2sGnuzyY/
When I found the ad for the internship position at Smashing Magazine about six month ago, I replied within half an hour. I wrote my response quickly because, for once, I didn’t have to exaggerate my enthusiasm. I was genuinely interested in the position and confident that I fit the job.I waited a few days for an answer, during which time I could reflect on what I had just done. My academic semester hadn’t even started, so I would have had to make arrangements if I was chosen. Plus, did I really want to move to Germany? The decision came a few emails and a week later: I was accepted and was expected to be in Freiburg in two weeks.Six months have gone by since then, and I have not regretted anything for one minute. I am now about to leave this city, the friends I have made and this company. To be sure, a lot has happened since February 15th.A Team Starting-Up TogetherWith my arrival at Smashing Magazine, Vitaly Friedman and Sven Lennartz have had to manage regular employees for the first time. Because they have worked from home for the past few years, the beginning of 2010 was a big change for them, too: they moved to the same city and got an actual office.Christina Sitte (the team assistant), Manuela Müller (editor) and I all started on the same day, in mid-February. I was told to expect an office still in the process of being installed, but I actually felt comfortable from the very first day. I guess putting me in front of a computer also helped me to not feel disoriented.Even though I was the only who didn’t speak German, I never felt lost, because everyone here tried hard to speak English as much as possible. I really appreciated it, and I must say I have noticed the same with German people in general. Never would you see French people putting so much effort into making someone feel not left out.With the intention of binding this new team together, a decision was made to launch a collective project that would belong to all of us: a newsletter for the magazine. That’s when the addiction started. We set up meetings to discuss newsletter topics. The meetings led to lunches, and the lunches ended up becoming our strongest habit (even more regular than our working hours): Social Sushi. These casual Fridays, during which we could discuss anything together (except the newsletter), I will really miss… those and the free rolls. (Photo credit)Web Design CommunityI didn’t end up at Smashing Magazine by accident. After studying photography and then media, I wanted to enter a field that I liked in a more professional way: Web design. This internship happened to be the perfect opportunity for me because, in the absence of real professional experience in the field, I was still able to integrate myself, thanks to my other qualifications. In addition, I had the luxury of joining Smashing Magazine and avoiding having to start at square one. I have been immersed in this community from the very beginning, free of financial and time constraints.This visibility, though, has been a bit frightening at times. For example, the first day I arrived at Smashing Magazine, I was given my first long-term task: report on the company and relate my experiences as an intern. I had never blogged before (not that I have much more now), and the thought of potentially 200,000 Twitter followers reading all about me didn’t exactly lower the pressure. Among the posts I prepared, this interview series with Vitaly Friedman has been quite popular:Early stagesHow and why did Smashing Magazine start?NetworkingWhat is it like to be at the center of this community, and how do you deal with it?Running the businessHow do you balance your personal and professional life?IntrospectionWhat do you see looking back on the past few years?And yet, I was looking for exposure in writing for Smashing Magazine. The advantage of being part of such a popular blog is the visibility you get, along with another component: feedback. Whoever the author, the comments from readers will reflect an article’s quality. For this reason, writing rigorous articles was important. This was a driving force for me because it suited my perfectionist side. I made mistakes and learned from them, which is precisely the best thing that could have happened to me.DifficultiesThe only difficulty I faced during this internship was managing my own productivity. Even though I was already used to working a lot on the computer, this wasn’t a full-fledged problem before. When I arrived at Smashing Magazine, though, things changed, because I finally had time to dive into this lively field and engage the extremely responsive community. I started by opening a Twitter account in order to share with readers the daily life of the magazine. By doing this, I stepped into a spiral of endless conversations. At first, I had to force myself not to get dragged into all the articles I was discovering.Social Suicide wallpaper.Twitter, email and comments were all part of the territory, and I had to handle them correctly. To do this, I did what most professionals do: impose some offline time on myself. This worked quite well, as difficult as it was sometimes. As all creatives and thinkers know, writing requires a level of concentration that is sometimes hard to sustain throughout the work day. And I don’t know about other non-native speakers, but writing in English all the time was harder than I expected.LondonA significant part of my internship was not so much something I did, but rather somewhere I went. I was invited to attend The Future of Web Design conference in London from May 17th to 19th. The event, organized by Carsonified, attracts professionals from all around the world and was important to me for several reasons:I attended a great conference that I would not have been able to afford otherwise. For example, the workshop “Words and Pictures: Copy and the Design Process” by Relly Annett-Baker I found incredibly useful.I met incredible people, interactions that were largely facilitated by my “Smashingmag” badge. I was lucky to be introduced to everyone as “the girl who is interning at Smashing,” because that made me not a complete stranger.We had dinner at Google’s office to prepare the announcement of the Google Font API, and I just wanted to say that FTW.The article I enjoyed preparing the most was published by Vitaly in a London’s Starbucks at that time, also related to Google Font API. So, I was immersed in this area when it came out.The Work ItselfThe description of the internship said: “Gain valuable practical experience in online publishing, learn about editorial work, gather first-hand experience in preparing, editing, writing and publishing articles.” And this is what I got. I have been lucky to experience all of the steps that lead to the publication of an article.Writing for the Web, I’m sure you are all aware, is different than writing for print. On the Web, we scan text more than we read; our attention span is much shorter. If the first few lines don’t grab readers, they just move on to something else. That is why the big editorial guides have special sections on online writing. However, that doesn’t prevent bloggers from writing in detail. What I enjoyed a lot was researching topics and putting it all together.For my article The Beauty Of Typography: Writing Systems And Calligraphy Of The World, I spent almost a week browsing the Web and gathering material. The article (in two parts) was definitely the highlight of my writing work because I really got into the topic. I could have even spent much more time exploring it.(Photo credit)I was also particularly interested in editorial policy and understanding how an editor-in-chief manages his content. I observed more than I acted in this respect, but I wrote a few posts about my findings. I was interested in seeing what rules are applied when publishing and also what tools are used to manage the editorial process. If you are interested in learning more about Smashing’s editorial policy, read Being an Editor-In-Chief at Smashing Magazine.Other than that, I had the opportunity to explore various topics, such as photography (Uncovering Toy Cameras and Polaroid Vintage Effects (With Photoshop Tutorials)) and the idea of community (Behind The Scenes of Smashing Magazine: Interview With Our Writers). I definitely would have liked to have written about more subjects, but time flew by.ConclusionI was lucky to have been given so much freedom during my internship. The purpose of the position was to bring new ideas to the company and a fresh point of view. So, I was particularly encouraged to propose initiatives. When writing, I could choose my own subjects and, above all, approach them the way I wanted. For example, I was interested in calligraphy, but not so much in the way it was suggested to me. So, I researched and found a different angle. Even though the stakes for writing this article were high for me, I was given carte blanche.I gained confidence in myself and, more importantly, in my ability in these creative fields that I had neglected a bit during my studies in photography. Above all, I finally found a way to combine and express all of my main interests, which were more or less separate until now: photography, visual art, writing and new technology. I learned to share my work, and I appreciate this a lot because that is the best way to evolve and gain valuable experience.This internship has certainly opened doors for me professionally, and I will remember all the people who want to keep in touch with me because they enjoyed what I did. Finally, my collaboration with Smashing Magazine is certainly not over because I will probably keep writing for it in future (after I take a vacation).Bis bald dann!Editorial’s ImpressionProbably the most remarkable Jessica’s attiude was her eagerness to learn and the ability to keep on working on things until the end, and never give up in the middle. When we were looking for a trainee, we hoped for a creative, talented and hard-working person who would be able to bring fresh wind and fresh ideas into the magazine and provide us with an approach that we have never thought of. And with Jessica this was exactly what we’ve got. She has inspired us with her own ideas, thus adding a certain shape or even a new approach to existing, but sometimes vague ideas of our own. Her input sometimes gave the crucial spark to a new project which would then develop into beautiful and useful results.We will miss Jessica a lot, but she will continue working with us as a freelance author, so you will hopefully see her name here quite frequently. However, the position as an intern at Smashing Magazine is available from now on. And that’s where you come in: we would like to give you the opportunity to gain valuable experience in online publishing and editorial work, too. If you are eager to learn, motivated, curious, hard-working and feeling confident about spending three to six months at Smashing Magazine’s office at Freiburg, Germany, please take a closer look at the details of your internship in Smashing Magazine and get in touch with us! We are looking forward to hearing from you soon.Thank you, Jessica, it was a pleasure and honor to be working with you over these last six months.(al)© Jessica Bordeau 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:
- Events
August 6 2010, 3:51am | 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
Commonly Confused Bits Of jQuery
http://feedproxy.google.com/~r/SmashingMagazine/~3/Jbf8MUuJpFA/
The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need — expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out — to improve JavaScript’s somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.[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.]1. .parent() vs. .parents() vs. .closest()All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.parent(selector)This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example: $('span#mySpan').parent().css('background', '#f90'); $('p').parent('div.large').css('background', '#f90'); The first line gives the parent of #mySpan. The second does the same for parents of all <p> tags, provided that the parent is a div and has the class large.Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so it’s not unique to parent().parents(selector)This acts in much the same way as parent(), except that it is not restricted to just one level above the matched element(s). That is, it can return multiple ancestors. So, for example: $('li.nav').parents('li'); //for each LI that has the class nav, go find all its parents/ancestors that are also LIs This says that for each <li> that has the class nav, return all its parents/ancestors that are also <li>s. This could be useful in a multi-level navigation tree, like the following: <ul id='nav'> <li>Link 1 <ul> <li>Sub link 1.1</li> <li>Sub link 1.2</li> <li>Sub link 1.3</li> </ul> <li>Link 2 <ul> <li>Sub link 2.1
<li>Sub link 2.2
</ul> </li> </ul> Imagine we wanted to color every third-generation <li> in that tree orange. Simple: $('#nav li').each(function() { if ($(this).parents('#nav li').length == 2) $(this).css('color', '#f90'); });This translates like so: for every <li> found in #nav (hence our each() loop), whether it’s a direct child or not, see how many <li> parents/ancestors are above it within #nav. If the number is two, then this <li> must be on level three, in which case color.closest(selector)This is a bit of a well-kept secret, but very useful. It works like parents(), except that it returns only one parent/ancestor. In my experience, you’ll normally want to check for the existence of one particular element in an element’s ancestry, not a whole bunch of them, so I tend to use this more than parent(). Say we wanted to know whether an element was a descendent of another, however deep in the family tree: if ($('#element1').closest('#element2').length == 1) alert("yes - #element1 is a descendent of #element2!"); else alert("No - #element1 is not a descendent of #element2"); Tip: you can simulate closest() by using parents() and limiting it to one returned element. $($('#element1').parents('#element2').get(0)).css('background', '#f90'); One quirk about closest() is that traversal starts from the element(s) matched by the selector, not from its parent. This means that if the selector that passed inside closest() matches the element(s) it is running on, it will return itself. For example: $('div#div2').closest('div').css('background', '#f90'); This will turn #div2 itself orange, because closest() is looking for a <div>, and the nearest <div> to #div2 is itself.2. .position() vs. .offset()These two are both concerned with reading the position of an element — namely the first element returned by the selector. They both return an object containing two properties, left and top, but they differ in what the returned position is relative to.position() calculates positioning relative to the offset parent — or, in more understandable terms, the nearest parent or ancestor of this element that has position: relative. If no such parent or ancestor is found, the position is calculated relative to the document (i.e. the top-left corner of the viewport).offset(), in contrast, always calculates positioning relative to the document, regardless of the position attribute of the element’s parents and ancestors.Consider the following two <div>s:Hello – I’m outerDiv. I have position: relative and left: 100pxHi – I’m #innerDiv. I have position absolute, left: 50px and top: 80px.Querying (no pun intended) the offset() and position() of #innerDiv will return different results. var position = $('#innerDiv').position(); var offset = $('#innerDiv').offset(); alert("Position: left = "+position.left+", top = "+position.top+"\n"+ "Offset: left = "+offset.left+" and top = "+offset.top ) Try it yourself to see the results: click here.3. .css(‘width’) and .css(‘height’) vs. .width() and .height()These three, you won’t be shocked to learn, are concerned with calculating the dimensions of an element in pixels. They both return the offset dimensions, which are the genuine dimensions of the element no matter how stretched it is by its inner content.They differ in the data types they return: css('width') and css('height') return dimensions as strings, with px appended to the end, while width() and height() return dimensions as integers.There’s actually another little-known difference that concerns IE (quelle surprise!), and it’s why you should avoid the css('width') and css('height') route. It has to do with the fact that IE, when asked to read “computed” (i.e. not implicitly set) dimensions, unhelpfully returns auto. In jQuery core, width() and height() are based on the .offsetWidth and .offsetHeight properties resident in every element, which IE does read correctly.But if you’re working on elements with dimensions implicitly set, you don’t need to worry about that. So, if you wanted to read the width of one element and set it on another element, you’d opt for css('width'), because setting dimensions, just like in CSS, requires specifying a unit of measurement.But if you wanted to read an element’s width() with a view to performing a calculation on it, you’d be interested only in the figure; hence width() is better.Note that each of these can simulate the other with the help of an extra line of JavaScript, like so: var width = $('#someElement').width(); //returns integer width = width+'px'; //now it's a string like css('width') returns var width = $('#someElement').css('width'); //returns string width = parseInt(width); //now it's an integer like width() returns Lastly, width() and height() actually have another trick up their sleeves: they can return the dimensions of the window and document. If you try this using the css() method, you’ll get an error.4. .click() (etc) vs. .bind() vs. .live() vs. .delegateThese are all concerned with binding events to elements. The differences lie in what elements they bind to and how much we can influence the event handler (or “callback”). If this sounds confusing, don’t worry. I’ll explain.click() (etc)It’s important to understand that bind() is the daddy of jQuery’s event-handling API. Most tutorials deal with events with simple-looking methods, such as click() and mouseover(), but behind the scenes these are just the lieutenants who report back to bind().These lieutenants, or aliases, give you quick access to bind certain event types to the elements returned by the selector. They all take one argument: a callback function to be executed when the event fires. For example: $('#table td ').click(function() { alert("The TD you clicked contains '"+$(this).text()+"'"); }); This simply says that whenever a <div> inside #table is clicked, alert its text content.bind()We can do the same thing with bind, like so: $('#table td ').bind('click', function() { alert("The TD you clicked contains '"+$(this).text()+"'"); }); Note that this time, the event type is passed as the first argument to bind(), with the callback as the second argument. Why would you use bind() over the simpler alias functions?Very often you wouldn’t. But bind() gives you more control over what happens in the event handler. It also allows you to bind more than one event at a time, by space-separating them as the first argument, like so: $('#table td').bind('click contextmenu', function() { alert("The TD you clicked contains '"+$(this).text()+"'"); }); Now, our event fires whether we’ve clicked the <td> with the left or right button. I also mentioned that bind() gives you more control over the event handler. How does that work? It does it by passing three arguments rather than two, with argument two being a data object containing properties readable to the callback, like so: $('#table td').bind('click contextmenu', {message: 'hello!'}, function(e) { alert(e.data.message); }); As you can see, we’re passing into our callback a set of variables for it to have access to, in our case the variable message.You might wonder why we would do this. Why not just specify any variables we want outside the callback and have our callback read those? The answer has to do with scope and closures. When asked to read a variable, JavaScript starts in the immediate scope and works outwards (this is a fundamentally different behavior to languages such as PHP). Consider the following: var message = 'you left clicked a TD'; $('#table td').bind('click', function(e) { alert(message); }); var message = 'you right clicked a TD'; $('#table td').bind('contextmenu', function(e) { alert(message); }); No matter whether we click the <td> with the left or right mouse button, we will be told it was the right one. This is because the variable message is read by the alert() at the time of the event firing, not at the time the event was bound.If we give each event its own “version” of message at the time of binding the events, we solve this problem. $('#table td').bind('click', {message: 'You left clicked a TD'}, function(e) { alert(e.data.message); }); $('#table td').bind('contextmenu', {message: 'You right clicked a TD'}, function(e) { alert(e.data.message); }); Events bound with bind() and with the alias methods (.mouseover(), etc) are unbound with the unbind() method.live()This works almost exactly the same as bind() but with one crucial difference: events are bound both to current and future elements — that is, any elements that do not currently exist but which may be DOM-scripted after the document is loaded.Side note: DOM-scripting entails creating and manipulating elements in JavaScript. Ever notice in your Facebook profile that when you “add another employer” a field magically appears? That’s DOM-scripting, and while I won’t get into it here, it looks broadly like this: var newDiv = document.createElement('div'); newDiv.appendChild(document.createTextNode('hello, world!')); $(newDiv).css({width: 100, height: 100, background: '#f90'}); document.body.appendChild(newDiv); delegate()Another shortfall of live() is that, unlike the vast majority of jQuery methods, it cannot be used in chaining. That is, it must be used directly on a selector, like so: $('#myDiv a').live('mouseover', function() { alert('hello'); }); But not… $('#myDiv').children('a').live('mouseover', function() { alert('hello'); }); … which will fail, as it will if you pass direct DOM elements, such as $(document.body).delegate(), which was developed as part of jQuery 1.4.2, goes some way to solving this problem by accepting as its first argument a context within the selector. For example: $('#myDiv').delegate('a', 'mouseover', function() { alert('hello'); }); Like live(), delegate() binds events both to current and future elements. Handlers are unbound via the undelegate() method.Real-Life ExampleFor a real-life example, I want to stick with DOM-scripting, because this is an important part of any RIA (rich Internet application) built in JavaScript.Let’s imagine a flight-booking application. The user is asked to supply the names of all passengers travelling. Entered passengers appear as new rows in a table, #passengersTable, with two columns: “Name” (containing a text field for the passenger) and “Delete” (containing a button to remove the passenger’s row).To add a new passenger (i.e. row), the user clicks a button, #addPassenger: $('#addPassenger').click(function() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); var input = document.createElement('input'); input.type = 'text'; $(td1).append(input); var td2 = document.createElement('td'); var button = document.createElement('button'); button.type = 'button'; $(button).text('delete'); $(td2).append(button); $(tr).append(td1); $(tr).append(td2); $('#passengersTable tbody').append(tr); }); Notice that the event is applied to #addPassenger with click(), not live('click'), because we know this button will exist from the beginning.What about the event code for the “Delete” buttons to delete a passenger? $('#passengersTable td button').live('click', function() { if (confirm("Are you sure you want to delete this passenger?")) $(this).closest('tr').remove(); }); Here, we apply the event with live() because the element to which it is being bound (i.e. the button) did not exist at runtime; it was DOM-scripted later in the code to add a passenger.Handlers bound with live() are unbound with the die() method.The convenience of live() comes at a price: one of its drawbacks is that you cannot pass an object of multiple event handlers to it. Only one handler.5. .children() vs. .find()Remember how the differences between parent(), parents() and closest() really boiled down to a question of reach? So it is here.children()This returns the immediate children of an element or elements returned by a selector. As with most jQuery DOM-traversal methods, it is optionally filtered with a selector. So, if we wanted to turn all <td>s in a table that contained the word “dog” orange, we could use this: $('#table tr').children('td:contains(dog)').css('background', '#f90'); find()This works very similar to children(), only it looks at both children and more distant descendants. It is also often a safer bet than children().Say it’s your last day on a project. You need to write some code to hide all <tr>s that have the class hideMe. But some developers omit <tbody> from their table mark-up, so we need to cover all bases for the future. It would be risky to target the <tr>s like this… $('#table tbody tr.hideMe').hide(); … because that would fail if there’s no <tbody>. Instead, we use find(): $('#table').find('tr.hideMe').hide(); This says that wherever you find a <tr> in #table with .hideMe, of whatever descendancy, hide it.6. .not() vs. !.is() vs. :not()As you’d expect from functions named “not” and “is,” these are opposites. But there’s more to it than that, and these two are not really equivalents..not()not() returns elements that do not match its selector. For example: $('p').not('.someclass').css('color', '#f90'); That turns all paragraphs that do not have the class someclass orange..is()If, on the other hand, you want to target paragraphs that do have the class someclass, you could be forgiven for thinking that this would do it: $('p').is('.someclass').css('color', '#f90'); In fact, this would cause an error, because is() does not return elements: it returns a boolean. It’s a testing function to see whether any of the chain elements match the selector.So when is is useful? Well, it’s useful for querying elements about their properties. See the real-life example below.:not():not() is the pseudo-selector equivalent of the method .not() It performs the same job; the only difference, as with all pseudo-selectors, is that you can use it in the middle of a selector string, and jQuery’s string parser will pick it up and act on it. The following example is equivalent to our .not() example above: $('p:not(.someclass)').css('color', '#f90'); Real-Life ExampleAs we’ve seen, .is() is used to test, not filter, elements. Imagine we had the following sign-up form. Required fields have the class req. <form id='myform' method='post' action='somewhere.htm'> <label>Forename * <input type='text' class='req' /> <br /> <label>Surname * <input type='text' class='req' /> <br /> <label>Phone number <input type='text' /> <br /> <label>Desired username * <input type='text' class='req' /> <br /> <input type='submit' value='GO' /> </form> When submitted, our script should check that no required fields were left blank. If they were, the user should be notified and the submission halted. $('#myform').submit(function() { if ($(this).find('input').is('.required[value=]')) { alert('Required fields were left blank! Please correct.'); return false; //cancel submit event } }); Here we’re not interested in returning elements to manipulate them, but rather just in querying their existence. Our is() part of the chain merely checks for the existence of fields within #myform that match its selector. It returns true if it finds any, which means required fields were left blank.7. .filter() vs. .each()These two are concerned with iteratively visiting each element returned by a selector and doing something to it..each()each() loops over the elements, but it can be used in two ways. The first and most common involves passing a callback function as its only argument, which is also used to act on each element in succession. For example: $('p').each(function() { alert($(this).text()); }); This visits every <p> in our document and alerts out its contents.But each() is more than just a method for running on selectors: it can also be used to handle arrays and array-like objects. If you know PHP, think foreach(). It can do this either as a method or as a core function of jQuery. For example… var myarray = ['one', 'two']; $.each(myarray, function(key, val) { alert('The value at key '+key+' is '+val); }); … is the same as: var myarray = ['one', 'two']; $(myarray).each(function(key, val) { alert('The value at key '+key+' is '+val); }); That is, for each element in myarray, in our callback function its key and value will be available to read via the key and val variables, respectively.One of the great things about this is that you can also iterate over objects — but only in the first way (i.e. $.each).jQuery is known as a DOM-manipulation and effects framework, quite different in focus from other frameworks such as MooTools, but each() is an example of its occasional foray into extending JavaScript’s native API..filter()filter(), like each(), visits each element in the chain, but this time to remove it from the chain if it doesn’t pass a certain test.The most common application of filter() is to pass it a selector string, just like you would specify at the start of a chain. So, the following are equivalents: $('p.someClass').css('color', '#f90'); $('p').filter('.someclass').css('color', '#f90'); In which case, why would you use the second example? The answer is, sometimes you want to affect element sets that you cannot (or don’t want to) change. For example: var elements = $('#someElement div ul li a'); //hundreds of lines later... elements.filter('.someclass').css('color', '#f90'); elements was set long ago, so we cannot — indeed may not wish to — change the elements that return, but we might later want to filter them.filter() really comes into its own, though, when you pass it a filter function to which each element in the chain in turn is passed. Whether the function returns true or false determines whether the element stays in the chain. For example: $('p').filter(function() { return $(this).text().indexOf('hello') != -1; }).css('color', '#f90') Here, for each <p> found in the document, if it contains the string hello, turn it orange. Otherwise, don’t affect it.We saw above how is(), despite its name, was not the equivalent of not(), as you might expect. Rather, use filter() as the positive equivalent of not().Note also that unlike each(), filter() cannot be used on arrays and objects.Real-Life ExampleYou might be looking at the example above, where we turned <p>s starting with hello orange, and thinking, “But we could do that more simply.” You’d be right: $('p:contains(hello)').css('color', '#f90') For such a simple condition (i.e. contains hello), that’s fine. But filter() is all about letting us perform more complex or long-winded evaluations before deciding whether an element can stay in our chain.Imagine we had a table of CD products with four columns: artist, title, genre and price. Using some controls at the top of the page, the user stipulates that they do not want to see products for which the genre is “Country” or the price is above $10. These are two filter conditions, so we need a filter function: $('#productsTable tbody tr').filter(function() { var genre = $(this).children('td:nth-child(3)').text(); var price = $(this).children('td:last').text().replace(/[^\d.]+/g, ''); return genre.toLowerCase() == 'country' || parseInt(price) >= 10; }).hide(); So, for each <tr> inside the table, we evaluate columns 3 and 4 (genre and price), respectively. We know the table has four columns, so we can target column 4 with the :last pseudo-selector. For each product looked at, we assign the genre and price to their own variables, just to keep things tidy.For the price, we replace any characters that might prevent us from using the value for mathematical calculation. If the column contained the value $14.99 and we tried to compute that by seeing whether it matched our condition of being below $10, we would be told that it’s not a number, because it contains the $ sign. Hence we strip away everything that is not number or dot.Lastly, we return true (meaning the row will be hidden) if either of our conditions are met (i.e. the genre is country or the price is $10 or more).filter()8. .merge() vs. .extend()Let’s finish with a foray into more advanced JavaScript and jQuery. We’ve looked at positioning, DOM manipulation and other common issues, but jQuery also provides some utilities for dealing with the native parts of JavaScript. This is not its main focus, mind you; libraries such as MooTools exist for this purpose..merge()merge() allows you to merge the contents of two arrays into the first array. This entails permanent change for the first array. It does not make a new array; values from the second array are appended to the first: var arr1 = ['one', 'two']; var arr2 = ['three', 'four']; $.merge(arr1, arr2); After this code runs, the arr1 will contain four elements, namely one, two, three, four. arr2 is unchanged. (If you’re familiar with PHP, this function is equivalent to array_merge().).extend()extend() does a similar thing, but for objects: var obj1 = {one: 'un', two: 'deux'} var obj2 = {three: 'trois', four: 'quatre'} $.extend(arr1, arr2); extend() has a little more power to it. For one thing, you can merge more than two objects — you can pass as many as you like. For another, it can merge recursively. That is, if properties of objects are themselves objects, you can ensure that they are merged, too. To do this, pass true as the first argument: var obj1 = {one: 'un', two: 'deux'} var obj2 = {three: 'trois', four: 'quatre'} $.extend(true, arr1, arr2); Covering everything about the behaviour of JavaScript objects (and how merge interacts with them) is beyond the scope of this article, but you can read more here.The difference between merge() and extend() in jQuery is not the same as it is in MooTools. One is used to amend an existing object, the other creates a new copy.There You Have ItWe’ve seen some similarities, but more often than not intricate (and occasionally major) differences. jQuery is not a language, but it deserves to be learned as one, and by learning it you will make better decisions about what methods to use in what situation.While there are strict rules these days for writing semantic and SEO-compliant mark-up, JavaScript is still very much the playground of the developer. No one will demand that you use click() instead of bind(), but that’s not to say one isn’t a better choice than the other. It’s all about the situation.(al)© Andy Croxall 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: Coding, javascript, jquery, programming
- Tags:
- coding
- jquery
- programming
- javascript
August 4 2010, 7:04am | 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 »