Design Treats

• I posted to designmeltdown.com

  Tasty textures

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/PaoMCj1DAzM/

  Texture is certainly one of the more overused and under thought out design elements, but at the same time it is a useful tool to have in the designers toolbox. Because when it makes sense, it can work really really well. Check out these samples to decide for yourself. http://sixrevisions.com/design-showcase-inspiration/web-designs-that-use-textures-beautifully/

  

  • Tags:
  • Texture

  July 12 2010, 5:30am | Comments »

• I posted to smashingmagazine.com

  The Showcase of Beautiful Photography

  http://feedproxy.google.com/~r/SmashingMagazine/~3/2IKRR97KOwY/

    Sometimes, a picture can be powerful enough to be inspirational material all by itself. To provide you with some inspiration for the upcoming week, this sunday we feature some truly beautiful and impressive images from talented artists and photographers worldwide.Whether in black and white or in colors, they are all related by a strong sense of composition and an emphasis on lightening and colors work. All images are linked to their sources, which you are encouraged to visit. Other work of the photographers we have featured here is certainly worth discovering as well. Please notice that some images are available as prints as well.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Beautiful PhotographyDreamingAmazing sleeping beauty, where the beauty is actually also the beast, by Peter ツ. Prints are available as well.Blue SkyFar And AwayInside Capitol HillThe EndpointBy Jeannette Oerlemans.Falling UpSong of TideBy Wira Nurmansyah from Indonesia.BlueBy Earl A. Jones.Bunny BokehHappy bunny bokeh wednesday, by Little Miss Patricia.The CatAbstractBy tanakawho.Ink SeaBy Hermin Abramovitch.Fan’s EyeA macro shot by LauHi.falltuerPainterBy an unknown artist (please let us know the photographer in the comments).Ant, The DriverBy Raphael Guarino.A purple leafBy National Geographic.Flower PetalBy Alistair Campbell.KeeperBy Wysseri.Who Feels LoveBy Ciuky.In The Mood 4 LoveBy Antonio Navarro Wijkmark.TunnelBy Kleemass.EyjafjallajökullBy Skarphéðinn Þráinsson.Susanna MajuriA disturbing yet insteresting serie of images by Susanna Majuri.San ToriniAbandonedBy tEdGuY49.blue canaryBy Ursula I Abresch.Bearded DragonA macro shot by LauHi.Ant (by Unknown)Please let us know who is the author of this image in the comments.Light Paintings by Twin Cities BrightestLast ClickThe PlugsWell, that’s not a beautiful photo per se, but we are confident that this image will spark your imagination for a more productive workflow — at least when it comes to handling cabels and plugs!Would you like to see more similar inspirational posts? Would you like to see more similar (inspirational) posts on Smashing Magazine?Market Research © Smashing Editorial 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

  July 11 2010, 6:35am | Comments »

• I posted to designmeltdown.com

  Breadcrumbs

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/1L0wMku8xkk/

  This is a great review of some beautiful breadcrumbs. It’s one of those design elements that can be easily overlooked and added as an after thought. But, if considered carefully it can actually be a very powerful guiding tool for the user. http://spyrestudios.com/best-of-breadcrumbs-and-how-they-enhance-your-website/

  

  • Tags:
  • Breadcrumbs

  July 9 2010, 5:30am | Comments »

• I posted to smashingmagazine.com

  Web Designer as The Artist, Scientist And Philosopher

  http://feedproxy.google.com/~r/SmashingMagazine/~3/j1DhwcQeXYI/

    Web professionals have to be both flexible and creative to meet the needs of each client — and these characteristics often transcend the design and development process. Each of us has a unique approach to our work. The particular mindset and methods by which each of us turns a mental image into a delightful and usable website is worthy of investigation.In this article, we’ll discuss three approaches taken by many Web designers and developers. While a creative individual usually falls into more than one of the three categories, each of us is still likely more heavily weighted towards one. These approaches might help determine what paths someone is best suited for and might shed light on how they achieve their goals. So, without further ado, we introduce you to the artist, the scientist and the philosopher.[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.]The ArtistSitting in a studio apartment, engrossed in Adobe Photoshop, ruminating on the powers of shape and color, is a person like no other. The artist is a creature of great creative power, who sees beauty in their surroundings and attempts to reflect it in their work while meeting the requirements of their clients. The artist might not be inclined to write the next Google killer, but everything they produce is inspired by their care and keen eye.Definition: Artists are best defined as those who are more interested in the presentation itself than in the mechanics of the mode of presentation. Graphic artists, Web designers, content writers and podcasters often fall into this category.Passion and the need to create are the hallmarks of the artist. Her wish is to satisfy her love of the visual elements of the Web industry. She relishes showcasing her skills and stays at the forefront of exploration in the field of design. Her imagination is matched only by that of children and children-at-heart.Living in a fantastical world of beauty — which can actually breed sensible design — is not the only characteristic of the artist. Visitors are drawn to her work and feel an emotional connection to it. The artist also acts as a muse for other designers.With a range of tools, the artist conveys emotion in a beautiful and professional design. Here are some examples: Single-page animated websites powered entirely by Flash are common. Typography that goes beyond Web-safe conventions can enhance artistic value. Clean, visually appealing designs that attract many eyes. Minimalism and a focus on content demonstrate a keen use of space. jQuery animations and colorful focal points increase visual interest.The ScientistA cup of something caffeinated and some snacks lie on the desk. It’s the middle of the night, and a man is furiously typing away at his computer, producing line upon line of code to meet an looming deadline for “the next big social network.”The scientist is a creature of habit, working longer hours than other colleagues. He has the stamina to render thousands of lines of PHP in an engaging, thought-provoking and memorable project filled with complexities and structured progress.Web developers — their term — are well known for late nights and working at ungodly hours. They can produce code at the drop of a hat. While these habits may seem rather unhealthy, the scientist’s willingness to solve complex problems, his enviable powers of memory and his ability to solve problems logically make him a different but still inspiring creature in the technological world and workplace.Definition: Scientists are best defined as those with an interest in code. Making things work and creating structure tend to be their top priorities. Think of programmers, developers, database workers and their kin.Pictures of a coding monkey might come to mind, but remember that writing code is just as involved and requires as much creativity (though perhaps of a different sort) as the work of the artist and philosopher. It’s also just as much of a gift. To give you an idea of the inner beauty of the scientist’s work and of how this driven mindset can be a powerful asset, see the examples below. Following specifications shows the scientist’s commitment to presenting code properly. Server-side scripts process forms silently and in the background. Innovation and careful planning lead to elegant and complex search mechanisms. Keeping things simple increases speed and minimizes redundant code. Frameworks and microformats facilitate well-maintained, elegant, optimized code.The PhilosopherOur friend the philosopher sits on a train. He is on his way to meet a company. His laptop is open, and he is reading the business plan — or so it seems. Underneath, the wheels are turning; he is dreaming up a revolutionary way to help the business evolve. The philosopher, a unique breed, incorporates the skills of the artist and scientist while bringing to the table his keen insight into trends and target audiences. He is engaging and friendly, and he shows empathy, that rare and valuable gift.Definition: Philosophers are consultants, officially and unofficially. They are masterful advocates and are able to coordinate and empathize with both artists and scientists. Think of accessibility and usability gurus, UX and IA advisors, SEO planners and information architects.Those who design and build websites tend to receive the most credit in our industry. The philosopher knows that if he does his job well, he is invisible. His work should integrate seamlessly with the work of his colleagues. He is the person who performs UX and usability tests, audits websites and advocates for the end user.The skills of such a person might seem questionable, but their understanding of the end user’s needs and their ability to help execute the team’s vision for the Web are attributes worthy of distinction. The philosopher is calmly neutral and can sense what is best for everyone involved.Below are a few examples of contributions made by philosophers to the evolution of the Web. Techi highlights that a well-structured navigation menu is paramount. Jakob Nielsen is a famous master of usable Web design. Philosophers put a great deal of thought into simplifying information requests. Accessibility gurus consider the potential of mobile and handheld devices. Looking for errors and potential improvement is all part of the job.Which Are You?The world is full of job titles that are meant to define people’s roles and usefulness. While a title can delineate a person’s skill set, it doesn’t come close to explaining how each professional sees themselves or what they mean to a community. A question inevitably left unanswered is: what makes an individual’s style and approach unique?Bridge the GapUnder the right circumstances, each of us gets to be all three: artist, scientist and philosopher. Being a Web professional often requires an equal measure of skills related to art and design, development and theory. Still, the way we conduct ourselves and perform our duties hints at our true “inner being.”You’ve met these three equally gifted professionals (in this article and probably in real life), but keep in mind that distinguishing between these three types is simply an exercise in professional development. None are in any way better than the others; this field has a genuine need for all three. It goes without saying that approaching tasks in different ways helps us to be innovative. If you’re just entering the industry, perhaps a little self-analysis will help you find your niche.We are all a bit of everything. Most of us can draw; even if we’re limited to stick figures and finger paintings, we all have an artistic outlet when we need it. We can all think logically, even if we don’t always show it; and our ability to work and code within parameters is helped along with HTML and CSS. We are all social beings, able to interact and understand one another, and we all have personal tastes. Everyone also has bad habits and prejudices. Stay open-minded and accept that “it takes all kinds”; a variety of skills and personalities makes the workplace vibrant.We possess the knowledge and skills required to undertake the work our clients pay for, and acknowledging these three approaches can aid us in our work. In doing so, we might feel driven to learn new skills or find ourselves better able to understand and cooperate with our colleagues, and we might gain enough insight to take a step back from a project to get a fuller view of our goals.Be proud of your unique approach (if it’s working), whether you’re an artist, a scientist or a philosopher. We are, each of us, unique, and we are more than the sum of our qualifications.(al)© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  

  • Tags:
  • design

  July 9 2010, 2:54am | Comments »

• I posted to smashingmagazine.com

  Renegotiating The Contract (And Other Tales Of Horror)

  http://feedproxy.google.com/~r/SmashingMagazine/~3/-J2n8x9a6xI/

    You’ve met with the client, done the creative brief and gotten some kind of written agreement or contract. Work has been creative and progressing nicely. The joy and hope for life slowly return as the scent of money looms. So, with an overdose of sleeping pills no longer your retirement plan, you start to delete your suicide note and dispose of the envelopes containing instructions on terminating your accounts on Twitter, Facebook and LinkedIn.Then, someone crunches some numbers and realizes that you can’t be paid what was agreed on. Suddenly, your contract becomes either a weapon in a brutal fight or a token to keep the job going in the hope of some pay and a return client.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]The Hard Part Is Behind YouMany people start an assignment only after a percentage of the job has been paid. 50% is nice, but convincing the big clients that they are not your bank is becoming harder and harder, and the promise of payment in 30 days does not give you a warm feeling inside.I am currently awaiting word from a client who has to evaluate some concepts and inform me of which to invoice (per piece). I am now in my sixth week of waiting, and then I have to wait 30 days beyond that to receive payment. I’ll be paid faster than the waiting period for approval for a large corporation. If you have the deposit fee, walking away is an option, but if you don’t, then you’re in a tough spot.For hourly jobs, I always include a summary in each email of my hours spent. Sometimes, they actually pay attention and step on the brakes so hard that you can hear the job screeching to a halt. I have never worked on a project that didn’t go around and around and rack up the hours. Clients rarely connect the hours spent on committee decisions to the many extra hours they eat up. When they do and the budget is dried up, who do they turn to to make the project fit the budget?When this happens, the strongest contract is worthless if you’re trying to finish the project, educate the client and show them a better method of coming in under budget while getting exactly what they want. The alternative is a collection agency or small-claims court (check your local laws for limits on small claims and civil claims); I prefer collection agencies, but you still may never see the money.My Story Of Horror Averted… For NowThis story involves a website for a mid-sized company. Because the boss’ son knew my wife, his cousin asked for the “family discount.” The discount wasn’t enough to sting, so I agreed on an hourly rate and began. I was to work with the boss’ secretary as my contact person. A couple of weeks rolled by, with changes and odd requests coming in. The requests were implemented, and more requests came in, sometimes reverting the project to a previous version. This went on for a while until I got a call from the boss one weekend. He was angry that I wasn’t following his directions and wanted to know what my problem was.I sent him several emails showing the instructions for the changes. There was some silence on the phone before he muttered, “Oh… my… God.”He said he’d get back to me and hung up. Monday afternoon he calls to relate a story that is unfortunately not entirely unfamiliar. His secretary, it seems, has always wanted to be an art director. She had no formal training but apparently loved the idea of having the power to hold meetings and tell designers what to do, because apparently that was her impression of what art directors did. That and drink a lot of gourmet coffee.She ignored what the boss wanted so that she could run the project and present it to him as her “art direction.” When I told him that she had wracked up about $2,000 in changes, he hit the roof.“You can’t expect me to pay that!?” he boomed.“I did everything I was told to do by the point person you assigned to me,” I answered softly, hoping my tone would bring him down a little. I knew he was furious and wasn’t about to part with another $2,000 (family discount included).“I can’t afford another $2,000 in the budget.”“I can’t afford to walk away from $2,000 of work I did, forsaking other work, so the money can’t be replaced or forgotten.”“You’re going to have to work with us on this,” said the client, a little more down to earth, but obviously worried I hadn’t given in right away and cut my bill.“May I suggest you take it out of your secretary’s pay?” I gently suggested. “I’m sure she’s worried about losing her job right now, and she’d probably prefer to pay out of pocket than just be fired.”“I’ll get back to you,” said the boss before hanging up. His tone indicated that he hadn’t decided whose head would roll.After about a week, he called back and informed me that I would be working directly with him. He told me what he had asked for before the secretary (whose name he never brought up again) messed with his directions. We completed the whole thing in a week. I don’t know what ever happened internally. Later on, they called a couple of times to revise a page or two on the website, but eventually they stopped calling and later redid the website with someone else very cheaply — probably in cost and certainly in look.I did get paid the entire amount, minus the family discount, and it led to more work. I never renegotiated, but I would have to save the client. My gamble may or may not have paid off because the relationship went on for a brief period, but I was prepared to renegotiate to keep this client with the “dysfunctional family discount.”I’m Often Asked to RenegotiateSometimes renegotiating gives you a better deal. Sometimes you just have to take a lower fee and hope it leads to something better down the road. And sometimes you have to cut your losses, take some money and learn a lesson. I wish I knew what that lesson was. I think it’s to say, “Yes.”A good client of mine, a huge corporate entity, assigned me the challenge of coming up with innovative initiatives. I could submit up to three, and each idea accepted would pay me enough to buy all the fast food lunches I wanted for the rest of the hour. I submitted three, but the point person felt that one of them wasn’t quite there and so would pay me a fifth of the agreed-upon slave wages. What kind of candy bar would I buy with that money?“I could never, in good conscience, invoice you for something that you are not 100% happy with and will not invoice you for that initiative,” I wrote. “I must also state that this negates our contract for ownership on this piece only.”He agreed and was obviously happy with the renegotiation because he has since sent me better-paying work, and I was happy to retain the rights to the initiative, which I shopped elsewhere.What if he had insisted on paying less for ownership of the third idea? I would have given in. The client was too important, and all that would happen is my pride would be hurt and the client might have made a huge windfall from the idea and looked forward to cheating me again… well, you know what I mean. They would see my value, and obviously I’m willing to be “flexible.”Being “flexible,” in my experience with work and life, means inconveniencing myself because someone else screwed up. I use different words, but never in mixed company.In negotiating a contract with another client, the partners agreed that I should include “… and anything else we deem necessary.” (People who have heard this story love it.) Obviously, entering the slave creative trade wasn’t acceptable to me, and so they told me they needed to work with someone “more flexible.”My guess is that either they never found someone to launch their business or some poor soul is owed many thousands of dollars.What To Do When Asked For a “Flexibility” Mid-Project?There are many schools of thought on what to do when you’re asked to be “flexible” with your work and invoice right in the middle of a project, ranging from quiet acceptance to violent government overthrow. Let’s explore the middle road.When you’re asked out of the blue to reduce an invoice or provide extra unpaid work, the first thing you have to do is think. It’s okay to sit on your response overnight, depending on the deadline. If it comes via a phone call, then you can say to the client, “I understand your dilemma. I’ll need to crunch some numbers and come up with an option or two that will make us both happy and allow us to finish the project on time. Let me call you tomorrow with some great solutions.”They may press for an answer right away. You’ll feel the pressure. Explain that a lot is at stake, and you want to be sure that everyone walks away from the renegotiation happy.If they press further still, well then, think quickly and engage them in a negotiation. Here are some possible responses you can give:— The first thought off the top of my head is to cut the number of changes by having one point person draw together the requests and decide what is necessary. That would cut the number of hours. Does that help you out?— I can’t really reduce the invoice because it’s time that I can’t make up with other projects. What if I stretch out the payments over six months so that the overage falls into another budget period?— I’ll give you a discounted rate on the next assignment to even it out. [Wouldn't it be something to use that line on a client for a change?]— If you can get me two dozen items of the product, I could easily agree to changing the monetary part of our agreement.— You carry some products that we could use to barter.— You have a service I could use, so let’s barter.(Check your local laws on the value of bartered goods for taxation purposes, and always barter at the wholesale cost, not the retail cost.)There are several ways to get paid while remaining “flexible.” When asked to renegotiate, think of what you want. Do you want the client to be a regular client? Do they give you enough work to even be regular? Has working with them been a positive experience? Is the fee structure good? What are you really giving up? Do you have another project waiting? Will a few unpaid hours dent your income from other clients? Is the client the type that would appreciate your sacrifice? Will you get referrals from this client? Does the 50% deposit cover your output so far, and could you just walk away now and leave them to find another freelancer?Big Lies About Being “Flexible”I became very close with many ad agency art buyers, and when they would get liquored up, I could easily get them to spill the industry lingo. They would laugh as they spat out slogans that had no meaning to anyone. I think back to the many times I heard those slogans thrown my way and how the laughs must have mounted at my expense as I left.If you hear this: “We’ll remember that you did us this favor…”Insert the following: “… and avoid you like the plague because of it.”If you hear this: “We ran over budget on this project, but you can add it to the next invoice…”Insert the following: “… which will never be happen because we’ll never run out of freelancers to screw.”If you hear this: “It will take you 10 minutes to do this…”Insert the following: “… But it will take you six weeks to listen to me say ‘I’ll know it when I see it’ and to listen to all my stories about my vacation to Fiji and my new Maserati.”If you hear this: “I just don’t understand how a design for one simple movie poster could cost more than $500?…”Insert the following: “… After all, it’ll only be used for the worldwide rights to all merchandise for this blockbuster film, and we expect the poster image will bring in only $485 million.”(It’s long been the practice that illustrators, photographers and designers would charge more for work that would be licensed out. Licensing rights are just as important as the money earned from time spent on the actual work. The story of the Nike logo shows a happier ending.)If you hear this: “Oops! I typed $500 instead of $5,000 on my budget report. Could you give me a break here?…”Insert the following: “… so that I’m not fired when you show the contract to my boss.”If you hear this: “The client loves your work and wants to use you for further projects, but could you lower your fee as a kind of test?…”Insert the following: “… which you will fail, even if the work is great. Ha-ha! Satan wins again!”It seems Satan has quite a following in advertising. As if we didn’t know that. How do you think agencies get work for the Super Bowl?People will tell you all kinds of things to get what they want. We do it, too. The key is to know when to keep one’s mouth shut and when to negotiate one’s way to a happy solution, with as little of Satan’s influence as possible. You may not be cowering from him in subservient terror, but you’re stuck next to him on a cramped bus for the entire ride.Related PostsYou may be interested in the following related posts:How To Spot A Sketchy Client (Plus A Contract Template)Web Design Criticism: A How-ToWhy Design-By-Committee Should DieDealing With Clients Who Refuse To Pay Would you like to see more similar articles on SmashingMag?online survey (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: contract, freelance, renegotiation

  

  • Tags:
  • workflow
  • contract
  • freelance
  • renegotiation

  July 8 2010, 6:58am | Comments »

• I posted to designmeltdown.com

  Large online retailers

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/EFLZycKiek0/

  Noupe has a great write up analyzing the structure and patterns of big online retailers. It’s nice to see a sub set of the ecommerce bucket being reviewed and talked about. http://www.noupe.com/inspiration/showcase-of-big-online-stores.html

  

  • Tags:
  • e-commerce

  July 7 2010, 5:30am | Comments »

• I posted to smashingmagazine.com

  Designing A Facebook Fan Page: Showcases, Tutorials, Resources

  http://feedproxy.google.com/~r/SmashingMagazine/~3/G-QOOrwwEA8/

    Despite its privacy issues, Facebook clearly has a key role in global Internet activity. It has become a kind of universal social network, being used for both personal and business needs. For many individuals, companies and organizations, Facebook has become an integral part of their branding strategy and promotional campaigns.Facebook provides many tools for maximizing the effect of your presence on the social network, most of all by means of business pages, also known as fan pages. Using a variety of applications and Facebook API tools, one can get creative not only with the page content, but with the design, too.In this post, we’ll give you an idea of how to use Facebook for your business and self-promotional efforts. Below, you will find best practices for custom Facebook fan page designs, with various approaches to creating an attractive, descriptive and engaging Facebook business page. In addition, the selection of tutorials and resources for Facebook fan page development might help you get started with your own effective Facebook presence.By the way, it’s been two years since Smashing Magazine’s Facebook fan page launched (now with 18,500 fans). We have worked hard to integrate discussions, useful tips and give-aways to make the fan page more appealing and engaging.[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.]Showcase Of Well-Designed Facebook Fan PagesGiants of the IndustryBig brands demonstrate the best use of Facebook by far. Getting millions of fans may not seem like a big deal for Coca-Cola or Victoria’s Secret, but these companies managed to create fan pages that engage users on a much deeper level than by just asking them to click the “Like” button. An interesting trend seen across this category is of large companies taking Facebook to a new level, putting it at the center not only of their social media campaign, but of their entire online presence.Starbucks Currently with the number one fan page for a brand on Facebook (with almost 8 million fans), Starbucks takes a distinctive approach, focusing less on loud entertaining apps and more on high-quality content and beneficial offers for its fans. Starbucks has learned how to effectively use status updates and how to share a lot of interesting, useful and engaging material aside from its product updates. The company also offers a couple of interactive apps that not only are fun (e.g. the Instant Story tab) but that offer tangible benefits (e.g. discount coupons, and functionality that allows fans to manage their Starbucks accounts right in Facebook). The fan page also has an interactive map that links to the company’s regional Facebook pages (just as BlackBerry does, as we’ll see). With no unusual visual indicators on its fan page, Starbucks demonstrates that functionality is at least as important as aesthetics.Red Bull The fan page for Red Bull is by far one of the best on Facebook. By implementing a number of innovative ideas and engaging apps, Red Bull makes the best of its Facebook presence and thus stands out from business pages for other brands. A good example of this is its Twitter stream, which, instead of featuring just Red Bull’s corporate feed, assembles tweets from sponsored sports athletes and allows fans to connect with them beyond Red Bull’s domain. Live Web TV that anyone can view right on Facebook and a variety of fun games also encourage users to interact with the brand. While the welcome page is not in the default menu bar, it’s quite informative and serves as a compact graphic map of the entire Facebook page. Red Bull is also a pioneer of using Facebook as a recruiting tool; adding a careers board to a profile with so many fans makes sense indeed. Bravo Red Bull!Skittles Although Skittles’ fan page features two brightly designed, eye-catching tabs (one a graphic presentation with links, the other promoting its “Mob The Rainbow” campaign), the company has set its Wall tab as the default. This is typical of popular brands that don’t require an introduction. It allows fans and visitors to the page to immediately follow the company’s updates and join the conversation.Coca-Cola Another giant with a million-plus Facebook fans, Coca-Cola has a fan-centric Facebook page. It encourages active user participation and interaction between the brand and its fans. The landing tab is set to the Coca-Cola introduction, which contains a dynamic box with latest updates and a “Like” button, links to other social network profiles for the brand, a fan highlights strip, and info about the product and the page’s creators (by the way, this Facebook page was created by two Coke fans and then later supported officially by the company). Another highlight of the Coke fan page is photo albums: in addition to some standard product shots and event photographs, many other albums are included, presenting Coca-Cola not only as a popular beverage but as a multi-generational icon. Here is a good example of how to make use of photos on Facebook.Twilight Saga The default tab for the official fan page of the blockbuster series Twilight Saga is a large graphical tab promoting the latest episode, Eclipse. The custom tab incorporates elements of the movie’s website and the trailer, live Twitter updates, links to official websites and other info. Two other custom tabs are dedicated to the second film, New Moon, and the official movie soundtrack. The entire page is rich in content and delivers its information effectively.More Beautiful and Engaging Facebook PagesRoom 214 A nice approach to the Facebook welcome page is demonstrated by social media agency Room 214, based in Boulder, Colorado. The default tab, with its nice duo-tone and sketchy font, looks minimalist and attractive, and it focuses on introducing its team members. The “About” tab has a clean two-column layout, with some basic info about the company in the left column and cute roll-over links to the staff’s Twitter accounts, official website, blog, contact page and corporate Twitter page. Another graphic tab covers the agency’s clients. A simple yet well-executed fan page design.Porsche The ColorStyler tab on the fan page for Porsche is so darn great that one immediately wonders why on Earth they didn’t make it the default tab? The pure FBJS tab allows users to select a Porsche model and customize its look in a live preview mode, with a nifty color and rims picker. One then can send the Porsche image to a friend or publish it on the page’s wall. This hidden gem makes the entire page shine.Digital Turf The fan page for Digital Turf is an interesting and rather confusing case. The page design itself is wonderful: the excellent company presentation, two-level sub-navigation, diverse data and cute style is a feat of FBJS and makes this one of the most attractive business pages you’ll see on Facebook. Here’s the confusing part: Digital Turf specializes in developing Web-building and media solutions for political campaigns and organizations (maybe not exclusively, but that does figure prominently in its list of services). The question is whether this design style communicates the company’s strengths well enough to attract its target audience. If it solved this concern, Digital Turf could turn its fan page, which is awesome as it is, into a Facebook promo bomb.Revision Eyewear The main tab of the Revision Eyewear fan page features an impressive Flash intro, with bold photographs and transitions and a dynamic “Become a Fan” link. The eye-wear manufacturer also uses Facebook for its charity work; a custom graphic tab on the page explains its causes and displays donation links (the “Become a Fan” button turns into a donation button—very clever).Thurston & Betts PLLC The Facebook page for law firm Thurston & Betts is notable for its “Like Us!” tab. A simple informational scheme in the center, with nice roll-over buttons leading to the company’s website, is a clever solution: neat yet substantial. The tab also includes the firm’s main contact info and a map of its location. It’s difficult to imagine a better Facebook page design for a law consultancy.Daddy Design The fan page of Miami-based Web design studio Daddy Design includes two custom tabs: “About” and “Portfolio.” Both tabs use the page’s entire width, which, along with the striking orange color scheme, makes this page hard to pass by. The business page is tied closely to the company’s official website design, and it highlights a neat FBJS portfolio, with links to Daddy Design’s social profiles. It actually creates the feeling of a website within the Facebook page. Great work.1-800-Flowers In our opinion, this is one of the best uses of a Facebook business page for e-commerce. By becoming a fan of 1-800-Flowers on Facebook, you can access up-to-date content, send virtual gifts to friends and shop for flowers right on Facebook (via the Flash-based application Alvenda). The company’s “Welcome” page has a simple and attractive grid, consisting of four sections that engage visitors with various activities. Also, the cool promo code field offers a discount to anyone who hits the “Like” button.The Game – Team A The Game, for the Sony PS3, has two beautiful fan pages on Facebook, dedicated to each of the two teams in the game. The two pages have a similar design, featuring beautiful graphical tabs (and especially fine typefaces) that link to the interactive Facebook applications. The “About” tab includes an interactive worldwide game stats map, which is a nice touch.Oxelo Oxelo’s fan page would be rather generic if not for the inventive Diabolo Roller tab, which promotes its new model of roller blades. Built with a Flash app, it allows a nifty 360-degree view of the product.Teesey Tees Teesey Tees use its Facebook presence effectively: it partially implements an e-commerce element from its website that allows Facebook users to browse t-shirt designs in a sleek FBJS gallery, directing them to the regular store for purchases. The fan page also includes a blog and a charming fan-only tab containing a discount code. There is no “About” or “Welcome” tab, and the default tab is set not to the product gallery (which one would expect) but to the Wall. While this is normal for big brands, it’s not so clear why a company with a smaller audience, such as Teesey Tees, would do this. Still, this is an attractive and well-executed fan page.Threadless Popular t-shirt producer Threadless takes the e-commerce on its Facebook fan page to the next level. Here, the native Facebook tee design gallery is supplemented by a size-selection menu and shopping cart buttons, which direct the user to the cart on Threadless’ website. The customer review section, with its “Share” and “Like” buttons, enhance the shopping experience of this fan page. Threadless also makes good use of the video and photos tabs, which, along with the live webcast section and active discussion board, make for an engaging, community-oriented Facebook presence.Cranium Board game Cranium has a beautiful Facebook fan page, which includes several promotional FBML pages. It doesn’t have any JavaScript gimmicks, just cutely drawn illustrations and cheerful colors that make for a positive visual experience.Mark Meyer Photography Mark Meyer’s business page is a good example of how to promote one’s personal brand effectively on Facebook. Using FBML and FMJS, the Alaska-based photographer outfits his custom tab with sub-tabs for his blog and photo gallery and an exquisite image slideshow. Status updates are also cleverly done, so that the Wall (the default tab) takes on the appearance of a photoblog.Livescribe The “Buy Now” tab on the Livescribe Smartpen fan page has an Amazon-ish design: it’s rich in content and options, but may require the touch of someone like Jacob Nielsen to be truly usable. Livescribe effectively uses multimedia on its Facebook page, which certainly presents its product favorably and is good for fan interaction on the page. But we would suggest that the company rearrange the position of its tabs, putting some interesting sections (such as the Pencasts, which are animated Flash videos of handwritten notes and audio captured by the Smartpen) in the main bar, instead of, say, the standard “Boxes” tab.Bodum USA The highlight of Bodum’s Facebook business page is its excellent use of an iFrame to embed the company’s online store and interactive catalogue, which is powered by iPaper, onto the Facebook profile. In other words, Facebook users can shop for Bodum products without leaving the page.Soul City Church The “Welcome” tab of the Soul City Church Facebook page is by far the smoothest pearl in our collection of fan page designs. The clean layout, the neat typography and icons and, of course, the awesome combination of black-and-white photography and energetic green elements result in a stunning intro page. It portrays the church as a progressive and contemporary community. Credit for the great job goes to Monster Eyes.Diesel Famous apparel brand Diesel has three out-of-the-mold tabs, the most noteworthy of which is the one labelled “Sex Sells.” It is built on a Flash app and provides a stylish and original showcase for the denim collection of the same name.Lancome Germany This one will appeal to those who admire good typography. The “About” section of Lancome Germany’s Facebook page takes on a website-within-a-tab format. It features elegant and polished typography, accompanied by high-quality photography.Eco-Artware.com The Facebook business page for Eco-Artware.com features a nice FBJS “Shop” tab. It’s a pseudo-shop, though; in fact, it’s just a featured product gallery, in which both product thumbnails and catalogue categories are linked to the official online store. Nevertheless, the clean grid layout and nice roll-overs for the product images make this a beautiful and useful fan page tab. Eco-Artware.com also makes good use of the “Boxes” tab by setting it as the default.311 The official Facebook page of music band 311, particularly the “News & Multimedia” tab, is eye candy. Designed in a cool retro poster style, it contains basic info about the band and a built-in multimedia player. A large “Fan Photos” section reflects the band’s commitment to communicating with its fans. Well done!Rei Outdoor gear and clothing provider REI uses its Facebook profile to foster strong interactivity, rather than merely to present a plain front. Its fan page is basically a community portal where the company engages people with its social campaigns and projects. The fan page includes two Flash tabs that feature community pictures, links and fun family games.Desigual The fan page for Spanish apparel brand Desigual is bursting with color, freshness and style. It is versatile, with various types of promotional and entertaining content, yet not overwhelming. The mood is set equally by great content and classy design elements. Desigual points out that the page was started by fans and then made official by the brand; this is clearly illustrated on the Wall feed, where user-created updates are set to default along with the company’s messages.Volkswagen Currently featuring its soccer fan campaign, VW shows amazing use of FBJS on its page. Rich in content, up to date, well designed and heavily supportive of user-created content, this is the best Facebook business page that a popular automotive brand could have.Living Proof The fan page of cosmetics manufacturer Living Proof is all about interactivity and dialogue between the company and its customers. Chief among its many features is the dynamic Flash introductory tab, containing basic info about the company,a lab tour,a mini blog, links to customer support services and a corporate Twitter feed. The business page also includes an interactive app that helps customers choose the most suitable products.Inspired Magazine Inspired Magazine is one of the few Web design blogs that have customized their Facebook fan page. No fancy applications or high-volume presentations here; a minimalist FBML tab is quite enough to grab the attention of a random Facebooker and give them reasons to “Like” the page.Sony Ericsson Current Sony Ericsson promotions are presented via beautifully designed tabs, with videos, contest forms and interactive applications inside.BlackBerry Besides its several promotional tabs built with Facebook Javascript and Flash, the BlackBerry fan page features a nice FBJS map with links to local Facebook business pages. This does a good job of integrating the company’s Facebook presence and promoting its local pages.Resources And TutorialsHere is a list of websites and tutorials to help you understand the basics of developing and promoting your Facebook business page.Facebook Developers This is the ultimate resource for anyone who wants to take advantage of the variety of opportunities offered by Facebook. Related documentation, forum discussions, wikis and a showcase of best practices for Facebook integration are all aggregated in one place for both beginners and advanced developers.Hyperarts A lot of excellent tutorials related to Facebook fan page development can be found in the Static FBML & FBML archive on the Hyperarts Blog. The tutorials are geared to both beginners and advanced developers. The blog also features a series of video tutorials, which we’re sure will come in handy for many of you. Some of the most interesting tutorials from Hyperarts are highlighted below.All Facebook On the unofficial Facebook Blog, you will find news, articles, tips and stats related to the world’s fastest-growing social network. An extensive guide titled How to Develop a Facebook Page That Attracts Millions of Fans addresses its subject well.How to Create a Facebook FBML Template In this tutorial, you’ll learn how to create a Facebook fan page in Photoshop. It uses a page for a photographer as an example. This is the first in a series; the second lesson covers the coding part. The source files, including the code, are available for download.Facebook Programming step-by-step tutorial This tutorial series consists of 22 lessons and covers all aspects of Facebook programming, including application development, displaying fan-only content and creating an interface for a Facebook page.Static FBML: Not Every Facebook Fan Page Needs an Application In this tutorial the well-known blogger Alison Gianotto walks you through what a Static FBML is and why it’s sometimes quite enough to create an attractive and efficient Facebook fan page.Extending Facebook Static FBML Tabs with Dynamic Content Continuing from the previous guide, this tutorial explains how to add some spice to your Facebook fan page using the DynamicFBML function. You can build an image or video gallery or even a micro-site inside a Static FBML tab quite easily.Creating a Custom Facebook Page This useful guide gives you a head start on building your own fan page on Facebook. The tutorial includes such basics as Facebook page creation, restrictions on Facebook, creating tabs and displaying navigation and content elements using FBML and FBJS.Google Analytics for Facebook Fan Pages Another great post by Webdigi.co.uk, in which they show you how to get around Facebook’s limitations. Even though Facebook supports only restricted JavaScript, which is usually not enough for Google to correctly track visitors, the guys from Webdigi.co.uk successfully managed to get all functions of Google Analytics working on their fan page. You can learn how they did it by reading this tutorial.How To: Build a Facebook Landing Page for Your Business This is Mashable’s brief guide on how to add and configure a Static FBML tab on your Facebook fan page.Internet Explorer and Static FBML: Using External Style Sheets for CSS This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs.8 Essential Apps for Your Brand’s Facebook Page This article suggests a number of Facebook apps you could use to attract fans to your brand’s landing page and to make them return repeatedly.Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments.Facebook Best Practices for Non-Profit Organizations This Facebook fan page guide is written by Diosa Communications, a company that specializes in social-media consulting for non-profit institutions and small businesses. It’s not exactly a list of best practices in the traditional sense, but rather a number of recommendations on how to set up and promote a fan page to the best effect.Adding iFrames to Your Facebook Applications: 2010 Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial.Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato.ShowcaseNot many galleries of Facebook pages exist yet. Still, the ones that do give us a pretty good idea of trends in this area.Facebook Designs This gallery is rarely updated, but it features some really cool Facebook page designs that we haven’t seen in other showcases.Custom Facebook Page gallery Custom Facebook Page is run by the social media marketing group North Social. The gallery contains over 60 Facebook page designs, sorted into several categories. The most recent showcase is dated December 2009.Facebook Showcase Facebook Showcase is the most frequently updated gallery of the ones covered here. A lot of inspirational Facebook page designs can be found here.Facebook Platform Showcase This showcase is slightly different. Here you can explore how companies around the world integrate Facebook on their websites.Customize Your Facebook Fan Page: Tips, Tricks, Applications A quick overview of basic tips and tricks for customizing and improving your Facebook fan page.Facebook Fan Page TemplatesMany freelance designers and design studios offer customization services for Facebook pages. Standalone fan page templates are less widespread, at least so far. To provide you with the best possible starter kit, we’ve collected Facebook business page themes that you can get either free or at a cost.Free TemplatesFree PSD Facebook Template | Preview | Details This 520-pixel Photoshop layout of Facebook fan page tab is available for free downloading. If you are looking for a simple graphical presentation for your Facebook page, this template may come in handy.Free PSD: Facebook Fanpage Template | Preview | Details This is a free mock-up Facebook fan page with editable text, posting times and other elements.Absolutely Free Cool Facebook Template | Preview| Details This graphic FBML template, along with the PSD file, fonts and HTML mark-up, is available for free downloading. The package also includes an installation manual.Free FBML Template | Preview | Details You can use this multi-tabbed Facebook page template for free only if you maintain the links to its creators and the copyright info in the footer.Facebook Template Page | Details This is quite a different Facebook page template. Basically, it’s a worksheet available in text and PDF formats, allowing school students to construct a Facebook page for a character from a story or some other purpose. The template has been downloaded over 10,000 times and has gotten a lot of positive feedback because it is a new and exciting way for students to comment on their readings. You have to register to download the template.Commercial TemplatesPhotographer Facebook Template | Preview | Details | All FB templates A sleek graphical FBML tab, with an image gallery, text sections, social networking buttons and a reminder to “Like” the page. The template package consists of source files and the Facebook installation guide. Price: $15.Corporation Number 1: Facebook Tab | Preview | Details | All FB Templates A minimalist Facebook page theme, with space for one main image, the company’s logo or tagline, two paragraphs of text and links to social media resources, including an optional RSS feed. The user simply provide the content, and then the developer implements it in this template. Price: $98.My Style Facebook Flash Template | Preview | Details | All FB Templates Among the highlights of this Flash-based FBML template are diverse transitions, multi-tab sub-navigation and a large image gallery in the tab header (760 pixels in width, of course). Instructions on how to upload the template are attached; and the developer offers additional customization services. Price: $18.Website Image Gallery Template | Preview | Details | All FB Templates This FBML template features a FBJS image gallery, horizontal top menu navigation, social networking links and side images. The website does not mention whether installation documentation is provided; perhaps it is provided upon purchase. Price: $20.Facebook Flash Template | Preview | Details This is another version of the Flash-based “Welcome” tab for Facebook fan pages. It’s actually a mini-site, 520 pixels in width, with three sub-pages, including a slideshow and image gallery. It comes with step-by-step instructions on setting it up on Facebook. Price: $13.(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: facebook

  

  • Tags:
  • design
  • facebook

  July 7 2010, 4:29am | Comments »

• I posted to smashingmagazine.com

  Complete Beginner’s Guide to Web Analytics and Measurement

  http://feedproxy.google.com/~r/SmashingMagazine/~3/62vitM2AXkU/

  Because each website appeals to its audience differently, the prudent user experience designer takes a measured approach when communicating, especially when they do so on behalf of their client. No matter what the vision and no matter how it’s executed, a design can always communicate more effectively.Online and off, we gauge the effectiveness of design—of communication—by its affect; in other words: what action(s) do people take after they give us their attention? Properly utilized, Web Analytics and Measurement helps us answer this fundamental question.Table of ContentsWhat is Web Analytics?What is Web Measurement?Web Analytics luminariesTools of the tradeWeb Analytics booksAdditional resourcesIn the early days of the Internet, webmasters used hits (remember counters?) to gauge their website’s success. The logic went like this: if people liked what was written on a site, they would request that content more often. This made sense because, at the time, the web was largely state-driven. People navigated the Web one page at a time.Today, however, that’s far from true.As a consequence, analysts have turned their attention towards the constant in the Internet + User equation: the User. Instead of simply tracking hits, analysts track user behavior. Emphasis has appropriately gone from answering the question “what is the web server doing?” to “what is the user doing?” (Joshua Porter details this trend in his post User Engagement Metrics.)Both the metrics and methods required to illustrate what our users do are nuanced. In this article we’ll take a closer look at how these methods inform our design process.Back to topWhat is Web Analytics?It’s nearly impossible to understand why someone does something online. How, then, can we possibly hope to evaluate trends across (potentially) thousands of viewers? As it turns out, it’s not so difficult.Even with only a modicum of traffic, web servers generate a tremendous amount of data. Web Analytics tools were created to collate and refine this data. Typically manifested as web-based applications, Web Analytics tools (such as the popular Google Analytics) take data and, through a variety of computations, generate insightful charts and reports.Unlike research methods—which are typically qualitative in nature—web analytics methods are decidedly quantitative. So instead of dealing with warm, fuzzy descriptions of problems (practically written by our users) web analysts look at reports based on cold, hard data about them. Where’s the love?Louis Rosenfeld explains the conundrum:…analytics tell us what is happening, not why. After detecting data patterns, we might guess what’s going on with reasonable accuracy. But we can’t know for sure unless we conduct qualitative analysis, such as actual user testing, where we can ask people why they do what they do.Louis RosenfeldAs a consequence, Avinash Kaushik motions to combine the two heretofore disparate disciplines with his definition of “Web Analytics 2.0:”“[Web Analytics 2.0 is] the analysis of qualitative and quantitative data from your website and the competition, to drive a continual improvement of the online experience that your customers, and potential customers have, which translates into your desired outcomes (online and offline).”Avinash Kaushik, Web Analytics 2.0Marko Hurst calls this behavioral metrics. He explores this amalgamation in his recent presentation, User Experience by the Numbers.Back to topWhat is Web Measurement?If Analytics provides the tools, Web Measurement is the process by which those tools are utilized. Thus, Web Measurement helps us make and act on inferences from the aforementioned tools. Marko Hurst makes an uncanny parallel in his presentation Analytics & Gambling—How Similar They Really Are.Because analysis is rooted in mathematics, it’s typically accomplished following a logical, deductive process. We start by defining outcomes, then we proceed to measure, monitor, and act on our analysis. Let’s briefly cover each:OutcomesWe begin measurement by establishing a desired outcome, or goal. In other words, what do we want to accomplish?For example, say you want to improve your company’s next email blast. Their mailing list contains 150,000 members; what action do they want recipients to take? Fortunately for us, this email contains a coupon—perfect.Outcomes are best when they are both specific and quantifiable. Let’s set a hypothetical goal of six percent. That is, six percent of our 150,000 members should convert (9,000). Next, let’s set a deadline: if we send this email out on Friday, let’s give users 1 week to determine whether or not they found our offer valuable to them.MeasureWe begin measurement by determining what’s quintessential to our desired outcome. In other words, a metric is anything we can track, but we’re looking for what we should track. For email, we’ll want to take a look at delivery rate, open rate, bounce/invalid rate, click-through rate, etc. Based on our desired outcome, though, we’ll put supreme emphasis on conversions. Thus, conversion (using our coupon) becomes our Key Performance Indicator (KPI).MonitorMonitoring keeps you aware of and lets you know three things at all times:Where you are at—1,000 successes after 3 days.Where do you want to be?—9,000 in 7 days. At the current rate you’d need 27 days to achieve your goal.How you will get there?—Your current path and actions are not going to cut it, so you’ll need to change something to still have a chance to achieve the desired outcome of 9,000 conversions in the next four days. This is your output or delivery item for this phase. It tells what item or items can and should be acted upon to still achieve your goal.Remember—the greatest gift monitoring can give you is time to make adjustments and manage expectations before it’s too late, in this case after the seven days.ActAction helps us refine measurement endeavors based on the data we’ve received thus far. In the case of our hypothetical email blast, we could:inform stakeholders of this campaign’s outlook.send a blast to a new set of subscribers (in case we’re not approaching our goal).send a blast to the same set of subscribers (minus those that have already converted) as a reminder.change the title of the email or the call-to-action in the email—the equivalent to an A/B Test.Back to topWeb Analytics luminariesGary AngelGary co-founded Semphonic and is president and chief technology officer. He helps companies like WebMD, Intuit, American Express and Charles Schwab maximize their web channel marketing through intelligent use of Enterprise Web AnalyticsRead Gary’s BlogIlya GrigorikIlya Grigorik is the CTO of PostRank, a company providing social engagement analytics. A tinkerer at heart, Ilya is a hopeless, proverbial early-adopter of all things digital. He is both a blogger and a developer.Read Ilya’s BlogMarko HurstMarko Hurst is a consultant, author, and speaker in fields of Web Analytics, Search, and User Experience. His clients include various U.S. Government agencies and some of the largest Automotive, Financial Services, Media, Technology, Mobile, & CPG companies in the world. He authored the book Search Analytics: Conversations with Your Customers.Read Marko’s BlogHurol InanHurol Inan is Managing Director of Bienalto Consulting, a consulting firm specialised in Online Analytics, Direct Response Campaigns, and Information Architecture. He authored the book Search Analytics: A Guide to Analyzing and Optimizing Website Search Engines.Learn more about HurolAvinash Kaushik Avinash Kaushik is the co-Founder of Market Motive Inc and the Analytics Evangelist for Google. Through his blog, Occam’s Razor, and his best selling books, Avinash has become recognized as an authoritative voice on how marketers, executive teams, and industry leaders can leverage data to fundamentally reinvent their digital existence. Read Avinash’s BlogJoost de Valk Joost de Valk is an SEO consultant and web developer living in Wijchen, near Nijmegen, the Netherlands. He is responsible for the Google Analytics plugin for Wordpress, as well as a highly–regarded blog on optimizing the performance of Wordpress blogs. Read Joost’s BlogOn Twitter@garyangelFollow@igrigorikFollow@markohurstFollow@hurol_inanFollow@avinashkaushikFollow@yoastFollowBack to topTools of the tradeMany different tools enable Web analysts to do their jobs. Here’s a selection of some of the most popular:Google AnalyticsGoogle Analytics is the self–described enterprise-class web analytics solution. What does this mean to you? Google Analytics gives you insight into your website’s traffic and marketing effectiveness through user session metrics, including bounce rate, keyword frequency, etc.Google Website OptimizerFrom their product page:Which phrase will earn more clicks: “Add to Cart” or “Buy Now”? Should you use a photo of your product or a photo of someone using it? Or no photo at all? Website Optimizer will find out. It shows the alternatives at random to your website visitors, then measures which versions lead to the conversions you want. And it’s all free.MINTMint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages, and searches can all be taken in at a glance on Mint’s flexible dashboard.KISS InsightsKISS Insights is a tool that allows designers to place a small survey bar across the bottom of their websites. Curious visitors can take a peek and are then presented with a simple survey in which they can evaluate the experience design of your website.4QThe 4Q Online Survey is a free online survey solution that allows you to find out why visitors are at your website, and whether or not they are completing their tasks (and if they aren’t, what’s getting in the way?).ClickTaleClickTale captures every mouse move, click, scroll, and keystroke that a visitor makes inside a webpage, and then sends this information back to the ClickTale servers in a highly compressed package. In addition, ClickTale takes a snapshot of the webpage as it was experienced by the visitor, and combines it with the recording to recreate the original browsing session.PostRank AnalyticsEngagement events are individual activities performed using specific social networks, sites, or applications. One tweet is an engagement event, for example as is posting one comment, or voting one digg. PostRank tracks these events and gives analysts the tools to extrapolate meaningful insights from this data.Compete.comCompete.com is a simple tool for gauging a website’s traffic versus that of its competitors. Compete also allows members to track that data over time to make calculated decisions based on their competitor’s strategy.Quantcast PlannerQuantcast Planner lets you search, rank, and sort millions of Web properties in real-time according to the criteria that matter to you, including audience age, gender, ethnicity, income, education, and geographic location as well as constraints such as property size, content category, and ad acceptance. They claim that once you identify your audience, you can “buy” that audience.Icerocket.comIcerocket is a simple off–site analytics tool that gives interested parties a glimpse into the latest chatter going on around their website.Back to topWeb Analytics BooksWeb Analytics: An Hour a DayWeb Analytics 2.0Landing Page Optimization: The Definitive Guide to Testing …and Tuning for ConversionsSearch AnalyticsAdvanced Web Metrics with Google AnalyticsIf you’re itching for more UX tools, checkout our articles: Top 29 Free UX Tools and Extensions and Information Gathering: a Roundup of UX Applications.Back to topAdditional ResourcesWhy Bloggers Need Analytics and Usability TestingHow to Increase Site Performance through A/B Split TestingUsing Google’s Website Optimizer to Improve Customer ExperiencesSuccessful Web Analytics Approaches by Avinash KaushikA List Apart Issue 292: Triple issue on UX and SearchEditor’s NoteMany thanks to Marko Hurst and Louis Rosenfeld for their contributions to this article.

  

  • Tags:
  • Blog
  • Web Analytics

  July 6 2010, 6:30am | Comments »

• I posted to smashingmagazine.com

  The Evolution of The Logo

  http://feedproxy.google.com/~r/SmashingMagazine/~3/vOyivo_2K6s/

    Logo design has been a controversial subject in the design press lately. One branding professional recently claimed that logo design is “not that hard to do” and another said that “logos are dead;” some rebutted while others concurred. Why all the fuss?We live in a Brand Era, where branding is in, and for some, aspiring to the Paul Rand style of logo craftsmanship is about as hip and contemporary as writing your invoices with a quill. Yes, logo design is only one facet of the powerful force that we call brand identity. Yes, a branded design environment can communicate sophisticated brand meaning without much (any?) usage of logos. But some ‘brand gurus’ or ‘brand evangelists’ (translation: ‘bastions of corporate pretension’) seem to enjoy making hyperbolic pronouncements just to sound shocking or cutting-edge. Logo design is not dead. The technological advancements and tumultuous industries of our century are causing its role in our culture to evolve.Perhaps this clamorous debate is cause for a look at where logo design comes from, what state it’s in currently, and where it’s headed in the future. Where does a logo ultimately derive its power from? If we’re so hung up on divining what this Brand Era means for our clients, can we envision a Post-Brand Era?[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.]SymbolismThe history of logo design begins with the roots of human expression. In fact, the fundamental power of symbols remains most important element of logo design. A logo has meaning because it draws on centuries of signs and symbols (including the alphabet) in human literary and visual language. A logo designer who uses an image of an apple, for example, is drawing on centuries of potent symbolic usage. For most Western viewers, the image of an apple summons our associations with nature, food, the ‘forbidden fruit’ in the Garden of Eden, Snow White, Apple computers, et cetera. To design a logo with symbolic resonance is to participate in the lineage of social dialogue.Fragment of a vase, third millennium B.C. The figures on this vase bear a striking similarity to the cave paintings of Lascaux and even to contemporary imagery like the Puma logo. These similarities reveal the harmony and union of human communication over great distances of time and geographic location.To communicate effectively with design, it’s important to view the big picture of human communication and mythology. Logo design as we know it today is a strategy that rose to popularity with brands and corporations of the twentieth century. However, people and organizations have been identifying themselves with an enormous variety of marks, signatures, and emblems for centuries. In terms of visual communication, a modern company that represents itself with a logo, color scheme, and slogan is not very different from a 15th century royal court that invoked identity and unity through the use of family crests, uniforms, and religious symbolism.In semiotics (the study of signs and symbols and their use or interpretation), human communication is discussed in terms of signs and signifiers. Signs can take the form of words, images, flavors, or even odors: things that have no intrinsic meaning until we invest it in them. We perceive, understand, and negotiate the world around us by investing meaning in all manner of signs and symbols. In the West, an image of a snake signifies evil. But without our Western cultural and mythological associations (many of which are rooted in the Bible), a serpent is just a serpent.Greek signature seals, fifth century B.C. Affluent Greek citizens used these molded stamps to sign or endorse documents. Using an animal image to identify oneself has a long history predating famous animal logos like Lacoste and Penguin.Symbols are highly subjective and dependent upon cultural reference. The swastika, for example, is a symbol that was used by various cultures across the globe for over 5,000 years to symbolize a variety of positive meanings including good luck, life, sun, power, and strength. In fact, the word swastika comes from the Sanskrit svastika, which means “good fortune” or “well-being.” Sadly, those meanings have all been usurped by the atrocities of the Nazi party. No symbol has inherent meaning of its own, but when maligned by indelible association with war and unspeakable tragedy, a simple symbol like the swastika can be transformed into a potent talisman capable of eliciting an intense reaction from the viewer. Our complex emotional responses to rudimentary images reveals the profound depth of our relationship with the visual world around us.The meaning of a logo is often an elusive concept, and two top professionals may disagree about whether a particular logo is a masterpiece or an abomination. This subjective nature of meaning in logography is part of the beauty and wonder of the craft.Historical Identifying MarksA wide variety of stamps, symbols, and signatures have been used to identify people over the centuries. Here are a few.Printer’s marks, late fifteenth centuryThe printer’s marks above are variations on an ‘orb and cross’ theme, symbolizing the idea that “God shall reign over Earth.”Aldus Manutius, printer’s trademark, c.1500.This printer’s trademark symbolizes a beautiful paradox. It was used in conjunction with an epigram reading “Make haste slowly.” Swiftness is visually represented by the speedy sea animal and stillness is represented by the anchor.Rembrandt ‘branded’ his authorship on his paintings with a variety of signatures during the course of his career, but the distinctive ‘R’ and unique personality of the letterforms provide unity to the marks.Corporate IdentityThe industrial revolution profoundly expanded the reach and power of mass production and the marketing used to promote it. Corporations now found that a simple identifying mark was insufficient for distinguishing themselves amongst growing competition in broadening markets. “The national and multinational scope of many corporations made it difficult for them to maintain a cohesive image, but by unifying all communications from a given organization into a consistent design system, such an image could be projected, and the design system enlisted to help accomplish specific corporate goals.” (Meggs’ History of Graphic Design, by Philip B. Meggs and Alston W. Purvis).In other words, the logo was now being used as one element in a broader system of visual elements used to identify the entire output of a corporation — many of which were becoming larger and more powerful than any had every been before.Here are some notable developments in the evolution of identity design.Wiener WerkstätteThe Wiener Werkstätte was a manufacturing and marketing enterprise founded in Vienna in 1903 — decades before graphic designers were doing work that was officially recognized as corporate identity. This group of craftsmen and designers were true trailblazers.Marks of the Werkstätte, left to right: Werkstätte monogram, rose logo, logo for Galerie Miethke designed by Kolo MoserWiener Werkstätte letterhead printed in ‘Wiener Werkstätte blue,’ 1914. The group’s obsession with squares and grids is evident here.A trademark was proposed for the Werkstätte, but designer Josef Hoffman proposed a complete graphic identity. The appearance of the group’s letters and articles was unified by four elements: the Werkstätte’s red rose symbol plus the monogram marks of the Werkstätte, the designer, and the producer. These standard elements, along with the use of the square as a decorative motif, were used to design everything from invoices to wrapping paper.Now that’s dedication to designing an immersive brand environment: the Werkstätte logo forged into the handle of a cupboard key.Identity MastersWestinghouse logo and annual report designed by Paul RandExtraordinarily influential designers like Paul Rand, Milton Glaser, and Alan Fletcher helped shape the graphic identity of consumer culture during the second half of the twentieth century. Rand, for example, designed many ubiquitous logos and his varied identity work for IBM became a benchmark in the industry. These great designers have been covered in depth elsewhere (check out ‘The world’s best logo designers?’ by David Airey), so we won’t spend too much time on them here.Music Television“The move of information from the printed page to other media has changed the nature of graphic identity. The MTV logo, which emerges from an unexpected metamorphosis, is probably the ultimate in animated identity.” -The New York Times, September 1996The MTV logo was designed by the now-defunct studio Manhattan Design in the early 1980’s. Former Manhattan Design member Frank Olinsky tells the story behind the creation of this logo here.This logo was a revolution in corporate identity because it adapted to the language of television and shattered standing notions about the ‘rules’ of logo use. In the early 80’s, television had become a ubiquitous medium. The MTV logo adapted to the nature of this medium by exploiting the speed and motion of the moving image: it was regularly animated, shattered, decorated, erased, and reborn in the course of a brief station identification spot. This showed that logos could be adaptive vessels for graphic identity and demolished the notion that trademarks should always be presented in a consistent, static form. The logo had evolved to fit the culture of the television era.The Brand Era“In order to be successful multinational corporations, you need to produce brands, not products.” -Naomi KleinLebron James is deified in a Nike desktop wallpaper ad. The Swoosh is tiny; the brand is huge. For some, Nike epitomizes successful branding. For others, it’s the poster child for deceptive marketing, sweatshop labor, and unethical business practices.Now that the whole world has been branded, the Twentieth Century approach to branding is old school. I’ll call our present day in age the Brand Era. The logo has evolved from a mark of quality on a product to a visual distillation of a cultural ideal — one that’s capable of accruing or asserting brand equity in a variety of marketing environments and inspiring great allegiance among consumers. “In this corporate formula,” says Naomi Klein, “the brand has little to do with the life of the product. Rather, it is a free-standing idea. The goal of the successful brand has become nothing short of transcendence from the world of things.”In this twenty-first century brand space, Nike is no longer a shoe company — it is a concept that represents transcendence through sports. Consider the Nike ad above: Lebron James is deified in a Christ-like pose and with religious language (‘witness,’ ‘believe’), both of which imply spiritual transcendence. In the case of Michael Jordan, the star was granted superhuman powers in Nike ads (picture him achieving flight, suspended midair en route to the hoop). In the corner floats the simple, austere Swoosh. In this context, the logo is a sponge, soaking up the ‘brand equity’ created by themes of transcendence and flight as well as the basketball star’s fame/endorsement/deification.‘Brand evangelists’ now use all kinds of lofty language to describe ‘brand worlds’ and ‘branded landscapes.’ At best, this kind of language describes creative brand strategy that can provide organizations with an innovative approach to defining themselves in today’s corporate culture — a place where tumultuous economies and rapid technological change require constant adaptation. At worst, this kind of behavior is an attempt to pull the pretentious wool over the novice client’s eyes, using ostentatious language to leverage the sale of mediocre design and commonplace brand strategy. None of us entered this field to become snake oil salesmen, so don’t pitch like them.A Post-Brand Era?Ask someone standing in Times Square if logo design is dead. Image: ‘Times Square Parade’ by Alexander ChenIn this era, the brand is bigger and more powerful than ever. Brands have become so big that some people have logo tattoos (physically branded with a brand) while celebrities like Martha Stewart and Oprah Winfrey have successfully developed themselves into personal mega brands. Brands like Nike have transformed themselves into lifestyle choices that consumers can integrate into their own identity. How much further can we go? What comes next?Naomi Klein has noted that the many successful brands have already achieved “transcendence from the world of things,” meaning that the dissemination of a brand’s identity has become more valuable than its production of physical commodities. Technology will soon liberate brands from the visible world even further, as companies enter the fields of nanotechnology, synthetic life production, virtual space, and more. What will ‘brand identity’ mean for a person who has branded cells injected into their body to eradicate cancer? And you thought the favicon was small. Brands will occupy startling new environments (like the bloodstream) in the 21st Century.The MTV logo famously introduced a logo that could undergo a costume change during every performance. How else can a logo break the rules to adapt? Is there a way to explode the logo, to decentralize it? What about a logo that consisted of separate elements that could be displayed on their own or joined together to create a unified whole? If branded products exist on a molecular level that’s invisible to the naked eye, could they project external holographic brand identity?The role of brand identity in the future remains to be seen. But it appears as though — barring the apocalypse or some Naomi Klein-inspired activist revolution — brands will continue to expand into new areas. Just as most industries are dealing with abrupt transitional periods due to the disruptive effects of technology, so is ours. In fact, their transitional periods become our transitional periods, because they are our clients.As brand identity designers, merely designing a logo for a client is not good enough. It is also unacceptable to stand on the cultural sidelines or design with our heads in the sand. We must be students of the changing cultures around us. We must take active roles in the use of design to strengthen and navigate the futures of the industries, people, and causes we believe in.The Road AheadFor now, brand identity design is thriving. Branded design environments (like a website with an integrated design strategy expressing brand qualities) can coexist with traditional logo design. In the future — as always — it’s creative thinking that will lead the way. One valuable asset will be the willingness to take a risk when it comes time to develop a strategy for a brand’s visual persona. The faster technology propels our culture, the more design risk-takers we’re going to need.Whatever changes may come, one thing will remain. As graphic artists and designers, we possess the power (just as any two year-old with a crayon does) to ascribe meaning to the world around us. We put an expressive face on raw information. The fundamental desire of humans to understand the world in visual terms is a desire that we can understand and foster. Graphic design’s ability to provide meaning and useful information will prove more valuable than ever during uncertain and challenging times.Partial BibliographyTypography and Graphic Design: from Antiquity to Present by Roxane JubertMeggs’ History of Graphic Design by Philip B. Meggs and Alston W. PurvisGraphic Design: A Concise History by Richard HollisNo Logo by Naomi KleinWiener Werkstätte: Design in Vienna 1903-1932 by Christian Brandstätter© 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:

  

  • Tags:
  • design

  July 6 2010, 4:30am | Comments »

‹ 1... 3 4 5 6 7 8 9 10 11 12 ...77 ›

Popular Tags

• design
• inspiration
• Freebies
• coding
• Graphics
• downloads
• workflow
• free
• showcases
• Developers Toolbox
• How-To
• CSS
• photography
• wordpress
• Design Showcase
• icons
• wallpapers
• Events
• usability
• photoshop
• tools
• typography
• Tutorials
• useful
• mobile
• smashing
• Blog
• javascript
• navigation
• css3
• e-commerce
• Fonts
• techniques
• jquery
• Opinion column
• best of
• portfolios
• trends
• CMS
• Minimal
• themes
• Color
• php
• Forms
• Best of the Month
• movies
• clients
• illustration
• tables
• retro

Search