The way you express yourself with words is a crucial extension of your creative identity. Professional designers are usually busy focusing on the visual aspects of their craft, but visual arts and literary arts collide and coincide regularly. The two fields meet not just in typography, but also in press releases, social networking communication, slogans, promotional materials, ‘About Me’ pages, marketing strategies, and every single pitch, contract, and email you’ve ever sent to a client.What might happen if you injected some of those materials with a healthy dose of poetry, humor, or bravado? Obviously, doing so will not be appropriate in some forums, but when it is, this may be a good way to express yourself and differentiate your brand from the crowd.Some of the most electrifying examples of writing about art and design come in the form of the manifesto. The manifesto has played a pivotal role in some of the most important creative movements of the previous century: Futurism, Surrealism, and Cubism among them. Most graphic designers working today will probably not require their own manifesto, but it can be helpful to write a mission statement or expression of your creative goals. Likewise, most of us probably don’t intend to launch a full-scale ‘movement,’ but this genre of writing may inspire you to reconsider the literary content of your creative work and its public representation.What is a manifesto?The 1963 Fluxus manifesto by George Maciunas includes rousing proclamations in the form of both handwriting and typewriter copy.The artists’ manifesto is a “document of an ideology, crafted to convince and convert” (Mary Ann Caws, Manifesto: a Century of isms). The word ‘manifesto’ contains elements of the Latin terms ‘manus’ (hand) and ‘festus,’ which may be derived from the root ‘fendere,’ as in ‘offendere.’ In other words, the manifesto is a personal or even handwritten statement intending to shock, inspire, or offend. Most of the artists in this selection lived in times that they felt desperately required change, and their solution was revolution.Artists’ manifestos were being written as early as 1886, but the genre developed into a “new literary sport” after the publication of Italian artist/provocateur F.T. Marinetti’s first Futurist manifesto in 1909 (Marjorie Perloff, The Futurist Moment). Marinetti’s writing had mythmaking qualities; this ringleader of the Futurists “became a public figure as a result of, not prior to the publication” of his manifesto.Here are four artists’ manifestos, beginning with that of Futurism – the lunatic grandaddy of all artists’ manifestos. A review of each manifesto is accompanied by historical context, images of relevant artwork, and inspiration for contemporary applications of the ideas within.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]FuturismAn Overview“Everything of any value is theatrical.” –F.T. MarinettiFuturism originated in Italy in 1909 as an avant-garde movement that glorified technology, modernity, and even war. In their artwork, the Futurists strove to capture the speed and ‘force lines’ of motion and progress. This ideology pushed their work towards abstraction, and Futurism helped fuel the invention of Cubism.Highlights from the ManifestosF.T. Marinetti’s Futurist manifesto was first published in French newspaper Le Figaro in 1909. The manifesto text is preceded by a disclaimer about the author’s “singularly audacious ideas.”“We have been up all night, my friends and I, beneath mosque lamps whose brass cupolas are bright as our souls, because like them they were illuminated by the internal glow of electric hearts… we have been discussing right up to the limits of logic and scrawling the paper with demented writing.”So begins F.T. Marinetti’s Futurist manifesto, which is full of “demented writing” and poetic language (”celestial bivouacs,” “rogue locomotives”) intended to rouse and mesmerize. The concept of the “internal glow of electric hearts” is an example of Marinetti’s glorification of industrial machinery and his desire to emulate it. This fascination with technology is a familiar notion in this current gadget age we live in today.Perhaps even more than most artistic movements, the Futurists were obsessed with demolishing the ideals that preceded them. In his Manifesto of Futurist Painters (1910), Italian artist Umberto Boccioni declared, “We will fight with all our might the fanatical, senseless and snobbish religion of the past, a religion encouraged by the vicious existence of museums. We rebel against that spineless worshipping of old canvases, old statues and old bric-a-brac, against everything which is filthy and worm-ridden and corroded by time. We consider the habitual contempt for everything which is young, new and burning with life to be unjust and even criminal. ”“We want no part of it, the past”, Marinetti wrote, “we the young and strong Futurists!”Futurist Work SamplesFortunato Depero’s book Depero Futurista, 1927.The Futurists excelled at experimental typography, and there’s no greater example than Fortunato Depero’s book Depero Futurista, boldly bound with two metal bolts. Once again, the Futurists are seizing the opportunity to incorporate industrial machinery into their work. This also must’ve made the book annoyingly difficult to shelve, which probably had them brimming with mischievous glee.Two internal pages from Depero Futurista. Depero’s page layouts reveal the force of his bold compositional strength. View the designer’s advertisments for Campari for further evidence of his typographic and compositional muscle.Umberto Boccioni, The City Rises, 1910.Boccioni exalts the colossal energy of the massive horses in this scene of urban labor. The horses test the limits of their harnesses while men direct the explosive equestrian strength. Man and horse appear almost as one. The artist could not have compressed more dynamism onto the canvas.Contemporary ApplicationsIs your business a brand or a bland?The Futurists excelled at drama. Say what you will about their work (the paintings are somewhat repetitive and occasionally, well, ugly), but they were never boring. It is a movement that never murmured, preferring to shout, sing, or scream.Futurism shares a major quality with the contemporary web design community and that is a passion for progressive technology. The Futurists were intensely devoted to smashing the past while realizing the future. Web designers are always pushing the boundaries of what we’re capable of achieving, whether we’re developing new uses for content management systems or discussing the future potential of CSS (see the Surrealism section of this article for some distant future ideas). The lesson here is Always Evolve.Another lesson is to keep it personal. Marinetti’s manifesto obsesses over machines, but it does so with intense emotion, which is a fundamentally human quality. In other words, don’t let your professional writing grow too cold. Those who excel in social networking excel at this aspect. Especially if your business identity is stark and pristine, a human touch goes a long way.DadaAn OverviewTo the Dadaists, logic was a pestilence. They believed that logic had led to a culturally and morally deficient society. These artists were so appalled by World War I that they violently rejected existing notions of culture, aesthetics, and even reason. Their work was anti-war, anti-bourgeois, and anti-conformity. Freedom was the goal; Dada sought to liberate a variety of media and its meanings from the shackles of the past. The Dadaists’ most powerful tools were biting satire and brazen provocation. Their ideology laid the foundation for Surrealism and their delight in anarchy makes them a cultural precursor to the punk movement that was born half a century later.One of the most widely recognized symbols of the Dada movement is Marcel Duchamp’s Fountain (1917). The artist turned a urinal on its back, scrawled the absurd pseudonym ‘R. Mutt’ on its side, and declared it art. It was a lewd gesture towards the notion of contemporary art itself, which Duchamp criticized as being too ‘retinal’ in nature – mere aesthetic decoration. He succeeded with his ‘readymades’ at putting art “in the service of the mind” (hence, the constant labeling of his work as ‘conceptual’). The piece is emblematic of “the vehemently untraditional and bitingly critical nature of the Dada movement” (Marcel Duchamp 1887-1968, an essay by Nan Rosenthal). Dadaism assaulted the traditional values of fine art; Duchamp’s work succeeded in redefining the conception of what belongs in a museum setting, and therefore, the conception of what is considered art.Highlights from the ManifestosThe Dadaists published many polemical manifestoes designed to provoke their critics and un-define their work. They insisted that the word ‘Dada’ was nonsense and that they were not a ‘movement.’ Each manifesto does its best to shatter any conventional thought on the matter. One such manifesto concludes, “Long live Dadaism in word and image! … To be against this manifesto is to be a Dadaist!”Dadaist poet Tristan Tzara’s 1918 Dada Manifesto is a blustering rant. It is full of sound and fury, signifying nada. “DADA DOES NOT MEAN ANYTHING,” it demands. Intoxicated with energy, Tzara delivers stream-of-consciousness poetry that reels from social commentary to dream-drunk nonsense. “I destroy the drawers of the brain, and those of social organisation: to sow demoralisation everywhere, and throw heaven’s hand into hell, hell’s eyes into heaven.”“Publicity and business are also poetic elements,” Tzara writes, foreshadowing Warhol’s claim that “business art is the best art.”Work SamplesThis gorgeous cover design for Le Coeur à Barbe: Journal Transparent (1922) is attributed to the writer and artist Iliazd (also known as Ilia Zdanevich). Publication of this esoteric, single-issue journal was prompted by a feud between Dada leaders Francis Picabia and Tristan Tzara. The cover is regarded as an important example of early Twentieth-century avant-garde page layout.Photomontage by Raoul HausmannPhotomontage and collage developed into two of Dada’s most effective tools of artistic communication. The reappropriation of images from the mass media allowed for deft social commentary. Dissonant combinations of photos, advertisements and text seemed to capture the jolts of modern reality.Contemporary ApplicationsDadaism was a revolt, an “attack on the culture of a bankrupt society,” which “brought about a violent renewal of meanings” (The Dada Movement 1915-1923, by Marc Dachy).Those of us who achieve notoriety as designers face a unique opportunity: the opportunity to be heard. Can you use that power to take a stand for your beliefs, to bring about change through good design and positive values? We make a statement – actively or passively – by every professional association we make, every client we choose to represent, and every product we validate by inclusion in our portfolio. Here in America, our designs exist in a culture fractured by deep ethical fissures. It is a culture where gun violence rears its hideous head in the headlines regularly – recently, on a daily basis. It is a culture where so desperate is the desire for fame that people are willing to infiltrate a White House party or stage a hoax involving the life of a child – all in the hopes of achieving reality television stardom. If the Dadaists realized a desire to shift their problematic cultural values, so should we, no matter what nationality we are. We do not require a ‘movement’ to do so. Cultural change is also affected by the simple choices of intelligent individuals. You do not need a soapbox. But look down; you may be standing on one.If the best thing we designers have to get upset about are the font choices in Ikea brochures, our priorities are unbalanced. There are plenty of better things to rebell against – namely war, climate change, and the filmography of Nicolas Cage.SurrealismAn OverviewRené Magritte’s work is known for clever twists of visual logic.Surrealism is a weird dream. This dream can be a vivid exploration of personal identity (Frida Kahlo) or a startling hallucination fraught with Freudian fears (Salvador Dalí). Oh, and there’s often weird fruit involved (think pomegranates or an orange in a doorway).In short, Surrealism sought to explore the unconcious in order to break creative ground. Their artwork rejects rational thought in favor of absurdity and illogicality, suggesting that these qualities may offer more accurate representations of modern life’s disturbing complexities.Highlights from the Manifesto“We are still living under the reign of logic,” begins André Breton’s Le Manifeste du Surréalisme (1924). Breton rails against the supremacy of logic, and credits the work of Sigmund Freud for unleashing a “current of opinion” on the subjects of dreams and the subconscious. “Perhaps the imagination is on the verge of recovering its rights,” says Breton. “If the depths of our minds conceal strange forces capable of augmenting or conquering those on the surface, it is in our greatest interest to capture them.”Ironically, Breton’s is the most sober and rationally argued manifesto in this selection. He is laying the philosophical groundwork for the artwork that will be built upon these ideals. The wildest language he uses is employed in this assessment of the dream state: “The mind of the dreaming man is fully satisfied with whatever happens to it. The agonizing question of possibility does not arise. Kill, plunder more quickly, love as much as you wish. And if you die, are you not sure of being roused from the dead? Let yourself be led.”Work SamplesA razor is drawn towards a woman’s eye in this still from the film Un Chien Andalou by Salvador Dalí and Luis Buñuel, 1928.Un Chien Andalou is a piece of Surrealist film that has had a profound and lasting impact on cinema. It can be seen as an example of Dalí’s skill with “the usual paralyzing tricks of eye-fooling.” The film has been thoroughly absorbed by pop culture; the rock band Pixies famously refer to it in the song ‘Debaser’ when Frank Black wails, “Got me a movie / I want you to know / Slicin’ up eyeballs!”Max Ernst, The Temptation of St. Anthony, 1945.Goblins and gremlins galore! Ernst’s take on this classic painter’s narrative is visual feast of nightmares, but its monsters are also a bit cartoony with their grinning jowls and muppet eyes. St. Anthony is being overtaken and physically invaded by transforming plant creatures. Ernst described St. Anthony’s plight thusly: “Shrieking for help and light across the stagnant water of his dark, sick mind, St. Anthony receives as an answer an echo of his fear: the laughter of the monsters created by his visions.”Corresponding visual sensibilities might be found in the work of contemporary filmmakers Tim Burton and Joe Dante (director of Gremlins and a memorable segment of Twilight Zone: The Movie). For another Surrealist take on the tale of St. Anthony, view Dalí’s composition of the same title.Contemporary ApplicationsIn many aspects of graphic design and marketing, the idea reigns supreme. A clever concept can be the key to a unique logo design; a startling idea can distinguish an advertisement from the crowd. Surrealists like Dalí and Magritte were idea men. View any of Magritte’s major works and you are looking at a stroke of conceptual brilliance that would humble the cleverest contemporary illustrator.The conceptual strength shows in their words as well. Consider this choice quote from Dalí: “I consider perversion and vice to be the most revolutionary forms of thought and activity, just as I consider love to be the only attitude worthy of the life of a man.”Dalí’s most famous painting is The Persistence of Memory, with its melting clocks, which have become the most recognized symbol of Surrealism. The theme of that painting is time, and the multiple melting clocks imply the simultaneous existence of various temporalities. What if we allowed ourselves similar freedoms with our imagination? What will CSS look like in ten years, or fifty (assuming CSS and civilization are still in existence)? What if there were a ‘Time’ property in CSS, and what would it do beyond mere animation? Perhaps CSS of the future will have a variety of temporal qualities, and perhaps it will go 3D as well. Could tomorrow’s cascading style sheets create a holographic effect? Could the cascade apply to past, present, and future?FluxusAn OverviewLike a cloud, Fluxus tends to appear in a different shape from one moment to the next. Their goal of ‘intermedia’ creativity blurred the boundaries of visual art, music, publishing, graphic design, and performance art. An international movement that began in the early 1960’s, the Fluxus artists entertained the absurdly paradoxical notion of becoming an “anti-art art movement.” Much like their ideological predecessors in Dadaism, this meant that they would attack the reigning notions of what art could or could not be. It also reveals their predilection for the absurd.Highlights from the ManifestoABOVE: A portion of George Maciunas’ Fluxus Manifesto.Like Fluxus itself, George Maciunas’ manifesto is a wild mongrel of a thing. According to Fluxus scholar Simon Anderson, Fluxus “deliberately experimented with, ignored, and tore down so many of the barriers and heirarchies of contemporary culture that no analogy suffices: [Fluxus] defies description, a condition that is perhaps its most potent source of strength.” (In the Spirit of Fluxus, Janet Jenkins, ed.)Maciunas’ manifesto – which includes collaged literary definitions juxtaposed with his ranting handwritten voice – directly reflects the nature of his movement. It’s a good reminder: does the literary content of your design business accurately reflect the voice of your visual content?Maciunas asked Fluxus artists to ‘purge’ their work of “bourgeois sickness” and “professional & commercialized culture.” A professional demeanor in the design industry is of utmost importance. However, if you’ve ever met a branding professional whose entire personality has been crafted into an ‘elevator pitch,’ you know how creepy and cold that can be. Speak to people like friends when you can. Never speak to them like just another potential sale. That’s rude and it makes you seem robotic.Fluxus Work SamplesFluxkit, 1969, various Fluxus artists.Fluxus was a graphic designer’s dream: typographic freedom, multimedia publishing, visual puns galore, audacious self-promotion. Looking for inspiration for your next promotional mailer? The Fluxus artists packed dozens of clever ideas into the diverse contents of their witty, mass-produced ‘Fluxkits’ and ‘Fluxboxes.’ Make absolutely sure to view the dense, inspiring collection in the Fluxus room at the Tate Modern the next time you’re in London.Ben Vautier, Fluxbox containing God, 1961.Fluxus was conceived as a publishing enterprise specializing in pamphlets, flyers, games, and various unpredictable objets d’art. The spirit of publishing remained central to its nature even though Fluxus artists eventually tried their hands at every other medium under the sun.Contemporary Applications“Too bad he died before its advent,” wrote the Village Voice, “(Fluxus founder George Maciunas) would’ve loved the internet.” If the internet is a playground, then take time to play between professional projects. Many of us draw for fun often, but when’s the last time you built a website for fun? Build a site for your own amusement. Build a humorous site that raises money for charity. Build a site in a day.Fluxus artists spent a lot of time probing the concept of ‘intermedia’ art and performances. What applications or intersections of your media haven’t you considered yet? The Fluxus artists were fond of puzzles and games; what if you built a website that had a logic puzzle built into the code, with clues hidden in the ‘target’ function so that users could hunt for them by rolling their cursor over areas of text?Or what if we plundered the online trends of other industries for ideas we can implement in design projects? The first bullet listed in these online media predictions in the publishing industry has ‘viral gold’ written all over it. Who will exploit ‘intermedia’ opportunities like these?Web designers work in one of the only thriving, pivotal industries of this extraordinarily progressive era. Almost all prominent cultural industries have been thrown into upheaval due to the evolutionary progress of the web and a variety of other twenty-first century factors. Cultural monoliths are falling to their knees all around us – the record industry, the publishing industry, and the automobile industry among them. How can we learn from them? And more importantly, how can we help each other evolve?Web design in the twenty-first century means much more than the unfolding potential of CSS and the dead, discarded shells of old browser versions. It means that we will be central to social, cultural, and political revolutions worldwide. It means opportunity – the opportunity to expand and assist the progress of global cultures.In ConclusionBuild your business into a brilliant brand, not a boring bland. Seek new and unusual intersections of media. Look at the big picture. What’s going on in your neighbor’s industry today that will affect yours tomorrow?Go to a museum. Put more art in your design. Always evolve. Be witty and unpredictable. Just remember, as illustrator Sergio Baradat once said, “It’s okay to pull a rabbit out of your hat, but sometimes a rabbit out of a hat is not what’s called for.”Promote positive change in the world around you when you can. Support a charitable cause. Use your voice. Don’t waste words. Make them sing and dance.Further ReadingFortunato Depero Online gallery of works by the Futurist artist and designer.States of Flux The Village Voice on Fluxus founder George Maciunas.Marcel Duchamp (1887-1968) An essay on ‘one man art movement’ Marcel Duchamp. Essay by Nan Rosenthal of the Metropolitan Museum of Art.Dada at MoMA This New York Times review of a 2006 Dada show at the Museum of Modern Art includes a slideshow of artwork.The Many Temptations of St. Anthony A collection of famous artworks on the theme of ‘The Temptation of St. Anthony.’ Compiled by Dan Redding.Dada’s Girl: Hannah Höch Show review and biography of influential Dada photomontage artist Hanna Höch.Would you like to see more similar posts on Smashing Magazine?This article is one of our experimentations of the new content formats on Smashing Magazine. Did you find it interesting? Did you find it useful? Did you find it too easy or too difficult? Please let us know in the poll below and in the comments to this post! We are looking forward to your feedback! Would you like to see more similar posts on Smashing Magazine in the future?(survey) © Dan Redding for Smashing Magazine, 2010. | Permalink | 2 comments | 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
Art Manifestos and Their Applications in Contemporary Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/lZOOHpwd-NQ/
- Tags:
- design
February 21 2010, 5:31am | Comments »
-
I posted to smashingmagazine.com
Free Dark and Clean WordPress Theme: Designpile
http://feedproxy.google.com/~r/SmashingMagazine/~3/8UFlnHxBKtc/
In this post we are glad to release DesignPile WordPress Theme, a theme designed by Site 5 and released for Smashing Magazine and its readers. The theme comes with 3 color styles and a couple of jQuery-based goodies. It can be used for portfolios and blogs as well as corporate webAs usual, the theme is free to use in private and commerical projects.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.live demolarge preview (1.2 Mb)installation guide and documentationdownload the .zip-package (.zip, 0.9 Mb, includes instructions files and required plugins)download mirror for the .zip-packagerelease on designers’ siteFeaturesHere are some of the features of the theme: Widget ready (footer and sidebar), Easy to setup, the Theme Options Page has 3 color styles, Custom homepage, Simple Post Thumbnails Plugin,125×125 ads section with enable/disable option, using “WP125″ plugin,JQuery Lightbox,JQuery Forms,AJAX-based based contact form,Live form email validation,Theme Requirements: Wordpress 2.9.1+SidebarContent, overview“About the author”-sectionCommentsCategories archive sectionThank you, Gabi Schiopu and the Site 5 design team! We appreciate your work and your good intentions!© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 7 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: wordpress
February 20 2010, 1:02pm | Comments »
-
I posted to designmeltdown.com
70 Business card designs
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/L_DAV6cjWfw/
Yes even more business cards. This is just a topic I can’t help indulging in. Maybe I should have people mail me their business cards and I will do a showcase. http://designrfix.com/inspiration/70-business-card-designs
- Tags:
- Business Cards
February 20 2010, 10:00am | Comments »
-
I posted to designmeltdown.com
A great collection of forms
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/uWbnjcMo4wE/
This is a great collection of forms, some are well known, but many are new ones to check out. If your designing forms this is a great place to start for ideas. http://webexpedition18.com/articles/creative-web-form-designs-ideas-and-realizations/
- Tags:
- Forms
February 19 2010, 10:00am | Comments »
-
I posted to smashingmagazine.com
Is John The Client Dense or Are You Failing Him?
http://feedproxy.google.com/~r/SmashingMagazine/~3/NCndpRjup2I/
Meet John the client. John runs a reasonably large website. He is a marketer who considers himself smart, articulate and professional. That said, he doesn’t know much about Web design, and so he needs your help. John comes to you with a clear set of business objectives and asks for a quote. But what happens next leaves John confused, frustrated and extremely unhappy.[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]Explain Why You Are Asking About MoneyBefore giving John his quote, you ask a little more about the project. After chatting for a few minutes, you ask him about his budget. A fair question, you think. After all, you could approach the project in so many ways. Without knowing the budget, knowing where to begin is impossible. In your mind, building a website is like building a house. Without knowing the budget, you can’t possibly know how many rooms the client can afford or what materials you should use to build.John, on the other hand, is instantly suspicious. Why would you want to know about his budget? The only reason he can think of is that you want to make sure you don’t charge him less than what he is willing to give. Besides, he doesn’t really know his budget. How the heck is he supposed to know how much a website costs? Don’t come across as money-grubbing. (Image credit)John leaves, determined to find a Web designer who doesn’t want to take advantage of him. Fortunately for you, all of the other designers he speaks with also neglect to explain why they need to know about his budget, and so you manage to win the project after all.Justify Your Recommendations In Language John Can UnderstandOnce you have won the job, you arrange a kick-off meeting to nail down the specifications. However, John instantly regrets his decision to hire you because his worse fears have been confirmed. In his eyes, you are all of a sudden trying to squeeze more money out of him as you waffle about the importance of usability and accessibility. John doesn’t care about disabled users. He doesn’t expect disabled users to visit his website anyway.And as for usability, surely the job of the Web designer is to make the website usable. Why do we need expensive usability testing? He is pretty certain that usability testing involves expensive things like cameras, labs and two-way mirrors. You thought you had explained these issues clearly. You spoke of WCAG 2, and you mentioned Jakob Neilsen. You are beginning to wonder if John is a bit thick.Avoid techno-babble if you expect clients to understand what you’re talking about. (Image credit)Perhaps if you had talked about accessibility in terms of assessing search engine rankings and testing usability as a way to increase conversion, then John might have listened. As it is, John puts his foot down and refuses to pay for any of these “unnecessary extras.”Include John In The ProcessYou walk away from the kick-off meeting pleased to have a signed contract. But that feeling in the pit of your stomach tells you that this might be another one of those projects. Regardless, you try to be optimistic, and you dive into the design process. Almost immediately, you get a phone call from John asking if there is anything for him to see. You explain that it is still early in the process and that you are not ready to present anything. John sounds disappointed but resigned.A short while later, you are ready to present the design to John. You are pleased with the result. It took you a lot more time than you had budgeted for, but it was worth it. The final design is extremely easy to use and will make for a great portfolio piece. Stop hiding from your clients. Show them your work early on, and include them in the process. (Image credit)When John sees the design, he is horrified. From his perspective, you have entirely missed the point. The design clashes with his offline marketing materials and doesn’t hit the right selling points. Also, he is convinced that his suppliers will hate it and, although they are not his end users, their opinion matters.After a tense conference call, you feel demoralized but have struck a compromise that hopefully will make John happy. You wonder in hindsight whether showing John some of your initial ideas and sketches would have been better. Perhaps you should have presented a wireframe first.Educate John About DesignAfter much agonizing and compromise, you are once again ready to present to John. John is much happier with the new design and feels it is heading in the right direction. However, he does have some concerns. For starters, he has to scroll to see most of the content, and yet white space takes up either side of the design. He tells you to move key content into this wasted space. Also, as he thinks about his young male target audience, he realizes that the color scheme is too effeminate, so he tells you to change it to blue.While John feels somewhat happier, you feel crushed. You feel as though he is trying to do the job for you. The instructions to move this there and change this color to that makes you feel like you have been reduced to pushing pixels. Educate your clients so they make more informed decisions. (Image credit)By this point, you are sure the client is dim, and now you just want him to sign off on a design. At no stage do you think to ask John why he is requesting these changes. Perhaps if you had appreciated his thinking, you could have explained concepts such as screen resolution and suggested an alternative to corporate blue, which is so over-used on the Web.Instead, you wash your hands of the design and just give John what he wants.Communicate With John RegularlyNow that the design is complete, you turn your attention to building it. John certainly won’t care about your code. Now you can finally do things right.It’s a big job and takes a lot of time. Even though you put too much time into the design and washed your hands of it, you still have your pride. You are not about to cut corners with the code. After all, other designers might look at it and judge you! You work really hard, putting in more work than you probably should have. John even manages to slip in some extra functionality at the scoping phase, which turns out to be a pain in the butt.For his part, John is wondering what’s going on. He hasn’t heard from you in weeks. Surely the website must be ready now? He decides to email you to ask how things are progressing. You reply with a short email telling him that everything is progressing smoothly. You never did like project management, and you are sure John would prefer that you spend time building his website instead of writing him detailed reports.John receives your email and is becoming increasingly frustrated. What does “progressing smoothly” mean? He writes back asking for an expected date of completion, and you reply with a rough estimate.The date comes and goes without a word from you. After all, it was merely an estimate, and several complications have delayed completion by a few days. John finally loses his temper and calls you. He tells you that he has arranged a marketing campaign to coincide with the launch date, and because he hadn’t heard from you, he presumed everything was on schedule. Communicate with your client regularly. (Image credit)You defend yourself, citing “scope creep” and unanticipated delays. But responding is difficult when John says, “All I needed was a weekly email keeping me up to date on progress.”Explain John’s Ongoing RoleBy this stage, the relationship has broken down entirely. You finish your work, and the website finally launches. Begrudgingly, John pays the invoice after delaying it for as long as possible. What amazes you most is John’s pronouncement that he is bitterly disappointed with the result. How can that be when you gave him exactly what he asked for? This guy isn’t just thick: he’s a jerk!Of course, John sees things differently. He came to you with a list of his business objectives, and the website has failed to meet any of them. He had hoped to launch the website, watch it achieve his objectives and then move on to the next project. Instead, after an initial spike in interest, the number of users and inquiries dropped over time, and the website stagnated. Ensure that your client understands what kind of ongoing care their website will need. (Image credit)What John does not realize is that websites need continued love and support. You cannot build a website and then abandon it. John has to nurture it by adding new content, engaging with visitors and planning for ongoing development.If only someone had told him.The Moral Of The StoryIt’s amazing how quick we are to judge our clients.As Web designers, we communicate and empathize for a living. Our job is to communicate messages to our clients’ users. We create usable websites by putting ourselves in the position of our users, which allows us to design around their needs.Why, then, do we so often seem to be incapable of empathizing or communicating with our clients? Perhaps it is time for us to apply the skills we have cultivated as Web designers to our own customers.(al)© Paul Boag for Smashing Magazine, 2010. | Permalink | 39 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: clients
February 19 2010, 5:34am | Comments »
-
I posted to designmeltdown.com
65 Beautiful ecommerce sites
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/r4pa_zhWyM4/
E-commerce sites are a massive undertaking, and implementing a beautiful design on one is even harder. Kudos to those who forge ahead and implement beautiful sites in this niche. http://acrisdesign.com/2010/02/65-well-designed-ecommerce-website-for-design-inspiration/
- Tags:
- e-commerce
February 18 2010, 11:00pm | Comments »
-
I posted to designmeltdown.com
Massive navigation round up
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/r25UzUBpp40/
Leave it to Smashing Magazine to cover a topic in great depth. This nice article sums up a lot of styles commonly in use in key navigation areas. http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
- Tags:
- navigation
February 18 2010, 10:00am | Comments »
-
I posted to designmeltdown.com
More iPhone app sites
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/TU6-yHd_TOA/
Another rather large post of iPhone app sites to inspire your designs. These sites tend to be single page landing sites that really try to push you onto the App Store to purchase the app in question; as such they serve as great models of landing page designs that could inspire other industries that heavily use such conversion points. http://webdesignledger.com/inspiration/50-inspiring-iphone-application-websites
- Tags:
- iPhone Apps
February 18 2010, 6:00am | Comments »
-
I posted to smashingmagazine.com
50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery)
http://feedproxy.google.com/~r/SmashingMagazine/~3/7uCmFBaFyXg/
Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.You may want to look at similar CSS-related posts that we published last months:45 Powerful CSS and JavaScript Techniques50 Brilliant CSS3/JavaScript Coding Techniques5 Useful Coding Solutions For Designers And Developers[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]CSS Layouts: Techniques And WorkaroundsFacebook Style Footer Admin PanelLearn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 2.Adaptable View: How Do They Do It?This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”Easy Display Switch with CSS and jQueryA quick and simple way to enable users to switch page layouts using CSS and jQuery.Quick Tip – Resizing Images Based On Browser Window SizeIn fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.One Page Résumé SiteA clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.Pegs: Automate Display: fixed++Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.CSS 100% HeightA common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.CSS Trick for a Scrolling Transparent Background EffectScroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.Fluid ImagesBy default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?Scroll/Follow Sidebar, Multiple TechniquesA really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.Vertical Centering With CSSThere are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.Create YouTube-like adaptable view using CSS and jQueryOther than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.How To Create a Horizontally Scrolling SiteIf websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!Purely CSS – Faking Minimum Marginsmin-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.Create Sidebars of Equal Height with Faux ColumnsCSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.Setting Equal Heights with jQueryHere is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.6 Flexible jQuery Plugins to Control Web Page Layouts EasilyA collection of six jQuery plug-ins to manage page layouts easily.Four Methods to Create Equal-Height ColumnsThis article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.How to: CSS Large BackgroundA tutorial with various CSS examples for how to create a large background using either a single image or double images.A Nice Little CSS Positioning TechniqueHere, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.Perfect Full Page Background ImageThis technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.Smart Columns With CSS and jQueryIn observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.MarkercssYou’ll learn how to create open-source code for website layouts flexibly and quickly, and based on standard CSS.Images And Visual Effects With CSSA Beautiful Apple-Style Slideshow Gallery With CSS and jQueryCreate an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.Rolling a coke can around with pure CSSRomán Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!Grayscale Hover Effect With CSS and jQueryA few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.Codename RainbowsSome JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.3 Easy and Fast CSS Techniques for Faux Image CroppingThis article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.Image Rollover Borders That Do Not Change LayoutWith CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS.Nine Techniques for CSS Image ReplacementPut nine different techniques of image replacement to the test.Bokeh effects with CSS3 and jQueryThis tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.A Stationary Logo That Changes on Page Scroll with CSS Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.Silhouette Fade-InsTo achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.A parallax optical illusion with CSS: The Horse in MotionTime for some fun with CSS and optical illusions.Pure CSS Line GraphThe idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.Zooming with jQuery and CSSThis post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.Create Resizing Thumbnails Using Overflow PropertyThis tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.Cross-browser drop shadows using pure CSSMost methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.Date Badges and Comment Bubbles for Your BlogOne of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.CSS Tables And Web FormsUX trick: display form data as tabular dataThis is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.Tables: Not As Evil As You ThinkTables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.Make a Select’s Options PrintableWhen printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.Twitter-Like Log-In With jQuery and CSSThis post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.Clean and Pure CSS Form DesignThis tutorial illustrates how to design a pure CSS form without using HTML tables.CSSG Collection: Free Comment StylesThis is the second CSSG collection from CSS Globe.Have a Field Day with HTML5 FormsHere is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.Editable/Printable InvoiceCreate editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.How to Mask Passwords Like the iPhoneMany smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.Make Web Forms Suck Less With LabelsWe’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.FancyForm: JavaScript checkbox replacementFancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.jQuery checkbox v.1.3.0 Beta 1A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.Disabled labels and the Trilemma plug-inThe form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.Last ClickBrowser PongA whole new pong game using three browser windows for the ball and racquets. Clever!Related postsYou may want to look at similar CSS-related posts that we published last months:45 Powerful CSS and JavaScript Techniques50 Brilliant CSS3/JavaScript Coding Techniques5 Useful Coding Solutions For Designers And Developers(kk) (jb) (vf) (al)© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: CSS, jquery
February 18 2010, 3:25am | Comments »