The whole gang at The Placemaking Group wish you a happy and prosperous New Year!
Notes from a designer
Essential Knowledge for Front-End Engineers
Over six years since its first publication, this concise little book remains relevant, listing 14 ways to improve your website’s performance that still hold true today.
As a designer, particularly having come from a print design background, I often spend large chunks of web design projects primarily focused on look and feel: color palette, branding and messaging; choice of imagery—photography, illustrations, icons and so on; where the eye lands as it travels across a page and whether that flow is helping folks get to where you want them to land. But my experience as a front end developer has taught me that while there are more than one way to skin a cat when it comes to choosing an approach to building a great looking site, not all of them are equal in terms of performance.
How a site is built may not be readily apparent to the end user, but it makes all the difference in the world in its relative page load time and by extension, user experience. Who wants to waste time waiting for even a great-looking web page to load these days, after all? With page speed ever-increasingly important for search engine optimization, it behooves developers to plan in advance to create an efficient, speedy web site from the ground up.
Of course, even older sites can benefit from a performance review and improvement plan. One site I managed for a couple years was bestowed upon me complete with bloated code and little regard for accessibility nor page load time; I spent countless hours tinkering under the hood to clean things up, with dramatic results. Having a copy of O’Reilly Media’s High Performance Web Sites, by Steve Souders, on hand would have been super handy.
Over six years since its first publication, this concise little book remains relevant, listing 14 ways to improve your website’s performance that still hold true today. Front-end developers will find tips to speed up page load time by up to 50%, collected by Souders as he optimized sites such as the Yahoo! Front Page.
I found that while I already had a number of these strategies in my arsenal, I learned a few things that I look forward to using in the future. Sounders deftly covers such topics as where to put stylesheets and scripts, avoiding redirects and the use of duplicate scripts, and reducing HTTP requests and DNS lookups, among other best practices.
Students of web engineering should find Souders’ primer essential to their training, while seasoned developers will appreciate it as a refresher on the basics of approaching the construction of a faster-loading, well-optimized web site.
A month-long Rafflecopter giveaway created by The Placemaking Group for the Kosrae Visitor’s Bureau has wrapped up, and was a great success.
With over 7,000 total entries, the second annual Picture Yourself on Kosrae contest used Rafflecopter’s tools to host a giveaway of a GoPro camera on Facebook. Cross-promotion on the Kosrae Facebook Page, Twitter, Pinterest, and Tumblr, as well as sweepstakes lists on blogs, helped to spread the word. We easily met our objective to get more Facebook fans, Twitter and Pinterest followers, and also to get more subscribers to the Kosrae Visitors Bureau email list.
We’d used WildFire to run last year’s Picture Yourself on Kosrae contest on Facebook, but with changes to its billing structure following its acquision by Google, we decided to go with Rafflecopter’s affordable giveaway management tools instead this year. Rafflecopter makes setting up and running a giveaway a snap, and has tiered levels of support based on your needs: free accounts with basic tools, a $7.99/month subscription for additional resources for bloggers, and business accounts with analytics, no Rafflecopter branding, automatic email list subscribing and more at $59.99/month.
Easy to use, well designed and very effective
With a compelling graphic designed to use for cross promotion across many channels, one simply plugs in the ways folks can enter to win (i.e., joining a mailing list, liking a Facebook page, tweeting about the contest) using Rafflecopter’s easy-to-use contest management tools, installs the Facebook app that adds a Giveaways tab to your fan page, and you’re good to go. Rafflecopter does the rest.
Their widget design is clean and doesn’t compete with contest promotional graphics, and can also be embedded in blog posts or on a web page, with multiple widgets all feeding into the same contest statistics. When the contest is over, Rafflecopter will choose a random winner for you.
Kosrae’s giveaway attracted over 7000 total entries, all of which required liking their Facebook page (if you didn’t already) and subscribing to Kosrae’s mailing list. Many entrants also opted to help promote the contest by tweeting about it, or became followers of Kosrae’s Twitter or Pinterest pages. Each action was worth at least one entry for a chance to win the grand prize, in this case, a GoPro camera.
This was a very easy and effective tool to use, which made running the contest quite fun. Highly recommended!
Occasionally at The Placemaking Group, I get to put on my beret and step into the role of videographer to produce video blogs for their Get Famous blog or, even better, for clients’ blogs. This is the latest new video for IT support services company, Clare Computer, expert Jim Bender explains the basic steps of creating an effective business continuity plan, and why it is so important for businesses to do so.
Imagery and bullet points pulled from the brief talk illustrate and highlight key points, with design elements pulled from the Clare Computer website and printed marketing materials supporting their brand.
Coffitivity is based on the premise (supported by some interesting research) that coffee shop noises enhance creativity. Can’t make it to your favorite local haunt to brainstorm over a latte? Use Coffitivity on your iPhone, iPad or other mobile device, or use it straight from your browser via their website or Mac Desktop app.
Whether your workspace to too quiet or you need to drown out the ceaseless chatter of the IT guys a few cubes down, the gentle hum of coffee shop background noise really seems to help one focus on the task at hand.
My other favorite new toy is Adobe’s Kuler color palette generator. Powered by Adobe’s Creative Cloud, Kuler allows users to work in a browser or use their handy iPhone app to share their custom palettes and to explore and save popular themes.
Lose hours noodling with color palettes or whip one up in a jiffy by starting with a photo. It’s quite the enjoyable rabbit hole to jump down, and a powerful tool as well.
MicroscopeHub.com, an online store for high quality, brand name microscopes, is a recent e-commerce website launch by Placemaking Group. As senior designer on the project, I was involved in its design and website production.
Microscope Hub is an online store providing high quality, brand name microscopes at fair prices. We structured and designed their website to appeal to and educate buyers in three specific fields: medical device inspection, micro-electronic inspection and education. Comparison charts for each application provide detailed information to guide a customer to the right choice for their needs.
On the administrative (backend) side, a content management system (CMS) was added for easy updates to product descriptions, videos and cost by staff.
The Microscope Hub shopping experience includes a carousel of product images with optional zoom-in, videos demonstrating key features, and an easy-to-use shopping cart for its e-commerce sales.
Taking a little time to be properly prepared for a video shoot will allow your personality to come across on screen, and your message to feel more authentic and have more impact. In my latest post up on The Placemaking Group’s Get Famous blog, learn a few quick tips for video and having a great presence on camera.
Video is still a really great way to engage with your client base, present yourself and company as leading experts in your field, and gain followers. Looking your best for video will allow your viewers to focus on your message rather than your appearance. If video is part of your online marketing plan, it’s essential that you think about your personal presentation before you start recording.
On vacation this week I got lost in a wonderful new app commemorating the 50th anniversary of Interaction of Color by Josef Albers. The new edition of the book is also splendid, but it was playing with the app really took me back to art school and X-ACTO knives and Color-aid paper. From grain edit:
To commemorate the 50th anniversary of Josef Albers’ Interaction of Color,Yale University Press has released an interactive iPad app for the now classic book on the subject. Beautifully designed by Potion, the app features the original set of over 140 color studies as well as the full text. In addition, a variety of experts and scholars provide commentary on Albers’ theories and work.
Maria Popova at Brain Pickings has posted a wonderful write-up about Albers’ theories and the design of the new app featuring audio interviews by Debbie Millman, that’s recommended reading to anyone who appreciates design and the power of color.
After three years of studying painting an printmaking at Hampshire College, it was a summer class in color theory based on Albers’ classic at the School of Visual Arts, along with Graphic Design 101, that convinced me to switch my major and school to pursue a career in design. For years my interest in design had been growing, inspired by early 20th century Surrealist books and illustrations and with modern album cover and magazine design.
For me, Albers’ exercises made me realize that design choices made around the exploration of color can be as satisfying an intellectual and emotional pursuit as those artistic choices I’d made on a daily basis as a painting major.
It was lovely to dive back into that world of color via the Interaction of Color app over coffee and freshly baked scones on holiday.
Why, Bon Ami? Why?
Bon Ami’s packaging redesign of 2010 was a perfect example of how to manage the updating of a brand that has been with us for over 125 years. Handled by Berkeley, California’s Celery Design, the new look was rolled out with the introduction of a new line of environmentally friendly products.
Let’s take a look at the packaging for their powdered cleaner, before the revamp.
Bon Ami has been no stranger to package redesigns over its long history, but the white logo against a red diagonally cropped field, along with the cute chick proclaiming, “hasn’t scratched yet!” have been constants for most of the product’s history. However, let’s face it, the 120th anniversary design for Bon Ami polishing cleaner, above, was pretty awful, wasn’t it?
Cluttered and dated in its design, I kept my canister hidden under the sink or in the garage. This was a product I bought because I knew it was a) really effective, and b) environmentally friendly. It certainly wasn’t the utilitarian packaging that spoke to me in the grocery aisle.
Which brings us to the 2010 redesign.
A modern design for a classic product
Celery Design handled the updating of the brand and packaging for the new Bon Ami family of green cleaning products. While it was a dramatic departure from the previous design, it remained true to the core elements of the brand.
It was simple, clean, no frills, and classic—just like the product. For a cleaner and more contemporary spin on an already recognizable brand, the logo was updated to lose the harsh drop shadow and superfluous dot over the i, but remained against its red diagonal field. Plus, the chick! I loved that the new art harkened back to the early days of the product; it was a sweet and appropriate nod to its past.
Celery Design put quite a lot of research and thought into the project, that you can read about on their website. The new product line and redesign got some nice attention in the press (Real Simple, Martha Stewart Living, and many more). My cleanser came out from under the sink because it looked so great.
So, what happened?
Bon Ami kills their awesome packaging redesign
I noticed the other day that Bon Ami has reverted an updated version of the old packaging design—just for the powdered cleanser, not for the rest of its product line. Here is how it looks on their website today (and don’t even get me started on the quality of the Photoshop job. Pro tip: photograph the canister from the same angle as in the previous photo shoot for a better match).
This new canister design is simpler than the pre-2010 packaging, but back in force are the garish foil, a very cluttered look, and oddly, the heavy-handed old logo. Even the chick had reverted to its pre-redesign, more literal and less folksy version.
What really leaps out is the discrepancy between the looks of the products in the Bon Ami family. They’re no longer a unified collection of products. The decision to use two different versions of the logo is particularly perplexing.
I have to wonder how this strange decision will impact their overall brand recognition and the feeling of connection to a product among those who discovered it over the past few years, thanks in part to the redesign. In a world where folks freak out en masse and create petitions over small design changes to their Facebook layout, this startling regression to a less sophisticated design could alienate a new and loyal customer base.
It will be interesting to see how this plays out for Bon Ami. In the meantime, I’ll be going back to keeping my canister under the kitchen sink.
Full disclosure: While I have no connections to the folks at Celery Design, I do have a friend at Bon Ami.
Vanessa is a cook and author specializing in writing about food justice, urban agriculture, and sustainability. She had a dated website as well as a TypePad blog with disparate designs, and with a beautiful new cookbook, DIY Delicious, due to be published, it was time to unify and refreshen her web presence with a more consistent, bright clean look across the board.
By switching her blog to WordPress so it could be hosted on her server, not only is the SEO boosted for Vanessa’s site, but also fans are treated to less hopping around the web to find her.
Vanessa’s blog was a winner of a 2010 Bronze Horizon Interactive Award.