I am also reading DOM Scripting by Jeremy Keith in addition to the Lynda.com tuts. I take the book with me on the train and follow along on my laptop. It’s a solid book and I highly recommend it for the beginner who has knowledge of HTML and CSS already. I have to admit though – it’s taken me literally MONTHS to get through it. I’m not a programmer, and the Javascript language was very foreign to me. I had to keep reading and re-reading the same chapters, especially in the beginning, to get around a steep learning curve. It was an amazingly frustrating experience! But, in the end, it will be worth it.

Now, I’m going to go start learning WordPress theme building. I started dabbling a bit long ago, but decided I should learn more advanced coding skills first. With WordPress, I will also be learning PHP and more advanced CSS, as well as CMS stuff. I’ll be changing my website soon and moving all files into WordPress, instead of just having a static site with a WP blog attached to it. I built my site while learning semantic HTML and CSS a ways back, and it’s a very minimalist site, a little boring, but hey, it’s clean, valid and was a good start. Time to improve it.

So, what else is up? Got a promotion, yep. I am currently Senior Web Graphic Designer at my company. Not bad for someone who came from print design, took a break to start a painting business, got back into temping for design when the economy blew up, and studied studied and studied web technology through Lynda and other sources while doing Photoshop work for the web. It’s amazing how much stuff is out there on the web for anyone who wants to learn something. There’s just absolutely no excuse to be ignorant of anything anymore. And one doesn’t need to spend money to take a class somewhere. If you work online creating online content, why would you go anywhere else for your education?

Other stuff – wedding plans are still on and becoming more solid. We are watching the oil in the gulf with apprehension, but we aren’t freaking out yet. Islamorada is a bit far up the Keys chain and the oil might not make it there.

Bag on Timbuk2

The importance of displaying products in eCommerce can’t be emphasized enough, yet sadly, it’s one of the most overlooked aspects of online visual merchandising.

Customers online are separated from the one thing that the brick-and-mortar customer takes advantage of each time she walks into a store – the ability to pick the product up, feel it, open it, snap its snaps and button its buttons. How does it look? What kind of quality is it? How much functionality does it have? How will it look on me? Is it worth the money?

For many buyers and managers, the thought process of how to keep selling the product once it’s placed into inventory stops at the creation of the item #. The same goes even doubly so for products on the web. But we need to be doubly vigilant about how a product is visually represented online for the very reason a customer is removed from being able to make a physical assessment in a store. For some reason, how products look on the web is taken even less seriously than how they would on a shelf. As more and more customers do their shopping online, and the cost of renting in commercial buildings skyrockets, retail companies need to pay attention to how their products look online, and to ensure that all the visual information needed is there to help the customer make a confident, informed decision.

If you are selling a product that doesn’t rely on the emotions or senses as much as just plain necessity, maybe this doesn’t pertain as much to you. But if you are selling apparel, home goods, jewelry or other lifestyle items, you should seriously consider how your products look online. Would you pay $739 for this blurry, moldy looking bag? I know this brand. They make gorgeous bags. You wouldn’t know it from this terrible picture.

Would you pay $739 for this?

The nicer your product is, the more you invest in making sure it looks impressive. What would you, as a customer, want to see?

Here’s the basics for better online product presentation:

1. Hire a good photographer with a professional camera with access to a good studio with proper lighting. You little point-and-shoot won’t cut it here. Make sure your photographer understands product photography and how to fill a frame. Product photography should be big, informative and clear.
2. Hire a designer proficient in Photoshop retouching with knowledge of web graphic optimization. Yes, this is what I do for a living, and I might be biased, but I can guarantee you that a solid Photoshop artist can drastically change the way your products look online, and, if consistent, your entire website. That designer should have expertise in color and tonal corrections, removing backgrounds, creating shadows or reflections, removing flaws, changing colors realistically without destroying textures or shapes, and sharpening images for clarity. They must understand optimizing images for the web at many different sizes. They also must develop a scalable content management system that allows them to keep the images organized.
3. I have a solid merchandising and retail background, but if your designer does not, you need to guide him or her, or make sure you have a merchandising department who can develop standards for how your products will be shown. For instance, a tote bag for my company will have a front shot, back shot, side shot if needed, open shot, detail shots of special features, and sometimes a model shot. Zappos does an excellent job at this. How they merchandise shoes with multiple views indicates they understand how online customers shop. The goal is to help the customer “pick-up” the product and look at it from all angles, as if they were standing in a store.

Bag on Zappos

4. Invest in Zoom software (Adobe Scene 7) or hire a front-end developer who knows how to use jQuery or Javascript to get you some whiz-bang rollovers and lightbox effects for multiple views of your product. Small thumbnails are fine, but what customers want are large images where they can see every detail. So make sure your thumbnails are linked to larger images, and that those large images are high quality. If you can’t afford the Zoom or rollovers, have a section of your product page or link to another page that shows more views of the product.

Product presentation is often skimped on because it doesn’t show an immediate cost benefit like email campaigns, special offers, or home page banners. But think how you shop. Perception is everything. If your products look fantastic online, customers will believe they are. Great product presentation is at its very core good customer service and excellent salesmanship.

A screenshot of a portion of the Gucci.com handbag page.

Web designers are always supposed to be mindful of viewers’ monitors widths. A lot of us have very large monitors to work on, and it can be too easy to make a website that goes off the screen of another smaller monitor. Nobody wants to scroll horizontally!

The site developers and designers of Gucci.com have decided to go wide anyway with a very usable and sleek design that is like strolling down a 20′ foot line of high-end shelving in a real store, but it works well for any size monitor. I refer to their handbags page as I work with luxury bags myself, and like to see how other companies are doing it.

The Gucci handbags page opens up to show a nav on the left that allows you to narrow your search according to features, and then to the right of that, columns containing grids of up to six bags each. On my visit, you could horizontally scroll through about 10 columns. Next to each column is a small arrow which can allow the viewer to scroll easily through the columns, like turning pages in a catalog. No need to scroll!

Click any of the bags and the column expands. The bag comes out of it’s grid cell like someone is actually taking it off the shelf, then is showcased in an information pod at the right. This is where the copy is, and the “add to shopping bag” button.

This is how nice the zoom feature works for Gucci.com

What I really liked in addition to the great site design was the quality of the photography and the nice zoom feature. A viewer just clicks on the thumbnail and the zoom brings the viewer face to face with killer detail and texture. Here is where a great retoucher (like me!) can come in handy.

This is an inventive and intuitive way to show high-end bags online. I really feel like I’m in a beautiful store, and the way the bags are presented emulates as much as a web store can how it feels to pick up a product and ogle the details.

My only complaint: No alternative views or look-in shots of the bags. I want to see how much I can cram in it. Are there any pockets? What’s the back look like? What does it look like on a person? What other cool features would I need to see if I picked this up in a store? If your company isn’t brand-famous like Gucci, it would be wise to show multiple shots of all views.

If you can’t afford a massive site design overhaul like this, investing in quality photography, professional retouching and showing multiple views will go a longer way than most (because most aren’t doing it! Have you noticed?). Do you know anyone who’ll drop even just $200 on a blurry, muddy looking .jpg? Could be the nicest bag in the world. How would anyone know it?

You are at their mercy. How do you work smarter?

Say you’re an artist within a web retail team (like me). The marketing folks decide they want you to develop a new design for their sales program. Unless your company has a very strict and organized hierarchical structure of planning and approving designs, you can be left at the whim of every person within your team and beyond. This means you will be in the reactionary mode of forever tweaking the design until all the “powers-that-be” are satisfied. Perhaps you can’t control what others do, but you can control how you deal with it.

For Print folks, deadlines can be a salvation. If the design is scheduled to go to print, it motivates people to solidify their edits in a timely manner, and hopefully, to think things through enough to get it right the first time. I’m sure there are exceptions, but this has been my experience.

In Web, however, things happen in real time because the web is “on” 24/7. This requires a certain kind of flexibility and a special kind of superhuman patience on behalf of the designer. If non-designers realize you can tweak things and immediately go live, then you can expect that to happen!

Every once in a while I’ll post time-saving (and sanity-saving) techniques that I have developed while working as a graphics designer in the constantly changing world of eCommerce and web.

Here’s my first few tips:

1. Save all “approved” versions of your designs. They are subject to re-approval at any moment. Don’t assume the first design is the right design. Depending on how long your chain of command is, and if 20 sets of eyes need to see it before its go-live time, you could possibly end up with an entirely different design at the end, only to have the first one suddenly approved after the last one goes live.

2. When making designs, particularly in Photoshop, keep all your Layers specifically named. Keep all named layers of your design in specifically named Group Folders. If you have multiple background colors or images you may have to toggle on or off, you would have them all in one Group Folder and they would be named so you (or your fellow designers) can easily find them. This is Photoshop 101 people…but it’s amazing how many designers don’t practice good workspace hygiene.

3. If there is any possibility you will be asked to switch out different versions of an image element (ie: a wallet that comes in brown, black and red), keep all versions you have in your layers. Today they want a brown wallet. Tomorrow, they might want a black one. Next week, it might be red. If you have a Group Folder named Wallet, you would have your multiple color versions of that wallet within that folder. It’s as easy as toggling a layer on and off should they want to switch the color.

Even if they tell you they just want a black wallet….do yourself a favor and keep all the color layers handy anyway. Minds change.

So, in essence, THINK AHEAD ALWAYS. Be prepared to turn on a dime. All designs should be built with complete usability and change-ability in mind. Thinking ahead will save you time and streamline your productivity, not to mention help any designers you work with who must also work within your files.