It is the day and age of online readers, electronic books, pdf compendiums and Kindles. At the book store, I might buy a book on an impulse, but 9 out of 10 times, I come back home, get onto the internet and hunt for a bargain on various online bookstores. Such is the lure of online bookstores and the surprise price-busting deals that attracts book lovers worldwide, that  more and more publishers choose to sell exclusively on online book stores.

One of the first things to consider when designing an online bookstore is that there are similar physical entities [actual bookstores] present around us. By providing an online medium to buy the product, we are not only obliged to make it easier for the buyer but we are also expected to provide a very interactive and unique experience which might not beat the feeling of actually holding a book in their hands, but would come pretty close to it. Don’t you just hate it when you are browsing a bookstore online and you click on a book you like and it doesn’t give you any information besides the title and an author?

 

The Structure And Flow Of An Online Bookstore

Design Elements – Visual, Functional, Interactive And Updates

Visual – Creativity can be unleashed and ideas can be set free here. If a store is small and boutique, getting creative with the layout and navigation to stand out would be a great idea. If the store is huge and has scores of products, a minimal design, visually speaking is the best choice. When I say visually minimal design, I don’t mean a stunning artsy design floating amidst white space. I refer to a clean and structured design with repetitive use of similar design elements that create an illusion of minimalism without making the design appear cluttered.

Functional – As easy as picking a book off the shelf and sliding it back in, an online bookstore’s functionality is what will make or break it. The real world "Stacks" can be beautifully translated to the online "Grids". A grid-based design for display and browsing is perfect for the intricacies of an online book store because it maximizes space and creates the illusion of books lined up next to each other, the way we are used to it.

Interactive – Search is the lifeblood on a system like this. The more interactive it is, the better. Ask yourself what you or someone browsing for books in a store looks for. Name [alphabetically arranged], information about editions, types of copies available [large format, hardbound, softcover, Digital versions], whether it is part of a bigger pack etc.

When you are in a bookstore, you can feel the raised detailing on the cover, you can read the inset summary, you can flip it open [and you can smell the pages, which unfortunately just cannot be captured in an online bookstore] and bombard your senses with images, words and textures. How would you maximize that and capture that experience on a website would determine how much of a pleasurable buying experience your online store provides.

Make allowance for structured information display along with the product images. If you plan to have a member section, enhance interactivity by providing means for members to add information that you might not have. Envision lists, wishlists, favorites, bookmarks, ratings, detailed reviews, 10-word reviews, tagging, discussion boards, "ask the author" interfaces, book clubs, reading marathons, literary events and anything else you can think of that will enhance the interactivity and user experience.

Non-Design Elements – Supply/Stock/Movement

As designers, we have to be aware of how our design and the system we create would work to provide a smooth flow between the suppliers and the customers, with the store itself as a go between. So although we don’t have to worry about whether a book is in stock or not, we do have to make allowances for situations like that arising in a transaction from both perspectives [Store Administrators and Customers]. Factor in  notifications and flags with appropriate icons. Allow lists, wishlists and effective forms to input that information as well as display them efficiently.

I have never designed an online book store and thought that it would be a fantastic idea to deconstruct the design of a popular online book store and try to understand what goes into the design and development of one. I have dug into the aesthetics and workings of one such store from the designer as well as the end user’s perspective.

For our case study, I have chosen the Amazon.com book store.

A little bit about the history of the Amazon Online Book Store

Amazon.com was started by a man named Jeff Bezos in 1994 in his basement garage in Bellevue, Washington. Over the years with several of the initial fundings coming from people who believed in what Jeff was doing, Amazon has grown from the original online bookstore to America’s largest online retail giant.
 

What makes it Unique?

The sheer age of it means that when people first started buying books, it was there so it managed to capture a very wide consumer market based simply on its availability and the fact that it was one of the first of its kind.

Despite being part of a bigger network of products, it has a very comprehensive catalog catering to every kind of bookworm possible with books available in multiple formats and a massive community of book lovers who take advantage of the rating and reviewing system to provide an honest and valuable "buying advice" like no other.

Why It Works?

In a way Amazon is not just run by the guys at Amazon, it is heavily influenced by the customers who buy things off their online shelves. One of the very few online stores to provide  the "Look Inside" service where you can actually peek at a couple of pages before buying the book makes the book buying experience very close to the actual one. Ease of ordering, back-ordering, pre-ordering, returns and a wide variety of payment options including gift vouchers and a million other redemption facilities, make Amazon the best in its field.

What It Lacks?

As a customer, although I love the amazing selection on offer and ease of use, I feel it lacks color and jazz. As a designer I can understand their need for maximizing white space and drawing attention to the text on a white background. I also understand their need to keep their operation fast-loading and size optimized with crisp and minimal graphic elements, but with images going bigger on websites with faster connections, I really feel they need to inject a bit of color on their otherwise bland pages. Their "Book" home is every bit as bland as the internal pages with no clear demarcation of "Special Offers" or "New Releases". Because of the sheer amount of books they have tried to cram onto the home page, a subtly visual color coding separation of some kind would have been great.

Right from childhood, our brains are trained to seek out books on overcrowded library shelves and bookstores with books stacked from the floor to the ceiling in a never ending maze of aisles. Any other kind of product browsing online would call for wide open spaces, but book browsing needs a semblance of those tightly packed shelves, at least some of it. Amazon could do with more books displayed on a single page, rather than the sparse designer-wear showroom effect they seem to have in place.

 

DECONSTRUCTING

NAVIGATION

Amazon has a very basic top navigation. It is clean and functional but a bit lost amongst bigger text on the pages. The second-tier navigation on the left is very in depth and serves its purpose. When you click on one of these links and enter the third-tier, things start getting confusing. The second-tier navigation on the left completely disappears and is replaced by the third set of sub-navigation and you don’t realize anything has changed because it follows the same colors, sizes and linkage as the earlier two.

When you eventually click on an item of interest, you land on a very comprehensive item page. This page has no breadcrumbs at the top to follow the trail back to the 2-3 levels of links you have clicked, should you decide that the product you clicked on was not the right one. The breadcrumbs are right at the bottom, cleverly hidden or it may seem after all the product information, reviews and sponsored links.

LISTS AND PAGES

The List Pages of Amazon are again basic which for big online catalogs is a good thing. My grouch with their list display is the space being wasted on each listing as it is a horizontal one  and not a grid-style listing. A grid-style listing would probably enable them to list the same number of books with less vertical scroll or more number of books with the same vertical scroll as the present one. It would also enable them to increase their thumbnail images in size, making the entire design more appealing and colorful without introducing a new color or graphic element. It would also balance the layout with thumbnails now appearing on left and right instead of being banded in a vertical line on the left.

The individual "product" page or book listing is Amazon’s saving grace. It is one of the best ones I have seen on an online bookstore. Starting off with a couple of product images on top, information regarding pricing, discounts, stock availability and shipping, you are for certain products offered an option to actually browse some pages. With easy buying options hovering on your right, you are shown similar products and a plethora of tags and keywords relevant to the current book you are browsing.

 

Summary

PROS

1. It has virtually everything you would ever need to browse a book store online.
2. It is fast and efficient.
3. It has a good ordering and transaction processing system in place.
4. It utilizes interactive pdf readers to give you a limited glimpse at certain books.
5. It is an intelligent system and remembers your browsing history, makes the right product suggestions based on your searches and offers on the spot deals by pulling up two or more related products of interest to you.
6. It offers a wide variety of choices from buying "used" or "new" to saving you bucks by offering different kinds of shipping.
7. Icons and buttons to "buy" and show "discounts" are used effectively throughout the site.
8. Original price strike-throughs with new, discounted prices in bright and bold colors do their job.
9. The community section of the website with "book discussion threads", "ratings and reviews" and "book lists" are well integrated with the actual content, allowing intelligent and informed browsing.

CONS

1. The Home page doesn’t show you a list of "Current Topsellers" or "Newly Released Books" or "Pre-Order these Anticipated Books" straightaway or clearly, like you would see the moment you enter an actual book store.
2. "Recommended Reads" and "Special Deals" are not highlighted enough on any of the pages.
3. Typography is not used effectively. All fonts virtually appear to be of the same weight.
4. Too much information clutters the internal pages. Heavy content could have been broken up with effective use of more modern icons.
5. On bigger screens, the left half of the page bears the burden of the most content whereas the right half of the page is quite bare, leading to a visual imbalance.
6. Halfway down each page, every box seems like the footer and there are too many of those boxes.
7. The product sliders are not very prominent and can be easily missed.

In Parting

Visualizing, designing and building an online bookstore is a massive task and an evolutionary one as well. What we have looked at today in this article barely skims the surface of a project that big. But a voluntary exercise like this, where you deconstruct an existing website, allows you to think and learn about how you would begin to start designing one, what obstacles you would face, the design limitations that would arise due to size, speed and demographics of the  website and how you would go about tackling issues like that. I like to flex my thought process by assigning a random design and development exercise occasionally. You might not become an expert at it, but it is amazing how many new things you will learn. I hope you have enjoyed this little walk-about through the aisles of Amazon’s online bookstore.

A few months ago I refreshed my Twitter Background. I had been toying with the idea of doing a simple but striking mixed-media illustration for the background. When it was done, I received countless nice emails praising the design and many more wanting to know how I had achieved that effect. This cursory tutorial is for all those who wrote to know the method. In this tutorial, I explain the process of creating a mixed-media illustration using a photograph and re-creating some of the elements from the photograph in vector format. The process touches base with creating a composition of the raster and vector elements in a beautiful, modern digital artwork.

What Is Mixed Media?

Mixed media artwork refers to art made via the use of different mediums. In visual art, this could refer to an artwork on canvas that combines paint, ink and decoupage. In digital art, it refers to using raster and vector graphics in a medley of creative placements.

Tutorial Overview

• Choosing the right raster graphic. For eg. a photograph.
• Studying the photograph for design elements and qualities.
• Creating complimenting vector graphics.
• Composition.
• Finishing artwork with secondary design elements.

1. Choosing The Right Raster Graphic

Use a strong photograph as the base of your design.You will be re-creating elements from that photograph in vector format to achieve that "flows out of the photograph" look and feel.

For my project I needed a picture of me that was looking up. I short-listed a couple of photographs before deciding on the one used here. The background of my page was going to be gray, so I took the warmth away from the photograph, making it brighter and cooler, focusing on the grays and blues in the picture. I also cut out my outline from the sky and roughed up the edges in preparation for the final artwork.

2. Studying The Photograph For Design Elements & Qualities

Outline the most striking qualities of your photograph. What visual element of the photograph stands out the most? Is it the color or the perspective? Is it the unique paisley pattern or bold lines? Once the points are listed out, decide on the elements you want to build on.

For my project I liked the ornate patterns in the top I am wearing and felt that I could extend that design beautifully into vector artwork. With the pattern in my top being extremely busy, I decided to make the accompanying vector graphics fairly simple and monotone with stark black outlines.

3. Creating Vector Graphics

Fire up illustrator. Create the vector design elements. Experiment with stark contrasts as this will highlight the vector and raster aspects of your piece beautifully. If your photograph is color, go for monotone vector graphics and vice versa.

For my project I decided to make graphics that were similar to the paisley patterns but not exactly the same as I didn’t want the visual to be crowded. I gave it a sketchy, hand drawn effect by not making all the curves perfectly smooth. The bird was blacked out and all details were left out to break the "white" in the vectors.

4. Composition

Import the photo into Photoshop. Import vectors as Smart Objects into photoshop so you can make changes to them on the fly. Create the composition from a sketch or from experimentally arranging the elements at will. Don’t be too rigid. Sometimes going with the flow and evolving along the way produces a more natural effect.

For my project, I wanted to blend the swirls and the bird with my photo to express thoughts coming out over the top of my head and Twitter being my constant companion. The roughed out white edges I gave the photograph in Step 1 helped achieve the transition perfectly.

5. Finishing Touches

Once the elements are in place, use subtle effects like shadows, textures, patterns, overlays and gradients to tie the piece in perfectly. For my piece, I simply used the LBOI checkered gray background.

In Parting

I used Photoshop to process my photograph initially and then creating the composition and applying the effects. I used Illustrator for all the vector artwork seen in the piece. I hope you have enjoyed reading my process for creating organic mixed media illustrations. Have you created similar pieces? Are there any other methods you use? Please join the discussion below or drop me a line if you have any questions.

At great risk of angering the web design overlords I need to get something off my chest, I can’t stand the term "Bulletproof." When someone decides they have come up with a "sure fire" solution they label it bulletproof, which in reality nothing ever is. @font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG. What I’m going to show you is the most solid (not bulletproof!) method of @font-face implementation I personally find best and use within my projects.

For your CSS:

@font-face {
font-family: "Museo 300";
src: url("fonts/Museo300-Regular.eot");
src: local("Museo 300"), local("Museo 300"),
url("fonts/Museo300-Regular.otf") format("opentype"),
url("fonts/Museo300-Regular.woff") format("woff"),
url("fonts/Museo300-Regular.svg#Museo 300") format("svg");
}

Let’s break it down!

font-family: "Museo 300";

This is the font name, and how you will call it in your stylesheet.

src: url("Museo300-Regular.eot");

This will enable your font on Internet Explorer.

src: local("Museo 300"), local("Museo 300"),

This is the local setting which will call it from your machine if it exists.

url("Museo300-Regular.otf") format("opentype"),

This covers Safari, Opera and Firefox below 3.6

url("Museo300-Regular.woff") format("woff"),

This is the Firefox 3.6 file type.

url("Museo300-Regular.svg#Museo 300") format("svg");

This is the Opera font type. This will cover Safari, Firefox, Internet Explorer, Chrome and Opera at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font (IF you have permission to use it!)

Example Usage:

#main {font: 18px "Museo 300", Helvetica, Arial, sans-serif;}

Anything Else?

When using the @font-face font in other elements, its good practice to have a few fallback fonts for users who are using a dated browser or browser that don’t support @font-face.

Demo And Download

I have included a very simple demo along with the various font types which you can run locally and view in the various browsers, and use the sample code to adapt for your own uses. If you have the .OTF file you can use the Font Squirrel Generator which will create the .SVG, .WOFF and .EOT formats for you to use.

Let’s take a look at final result:

Materials needed for tutorial

Facebook vector logo 20 Free Crumpled Paper Textures Heavy Scratch Brush

Step 1:

Fireup Photoshop and create a new document with dimensions 550x400px. Fill the background with #45452d.

From the Tools bar pick up Rounded Rectangle Tool (U), set radius to 8px and draw a rectangle.

Change the color of rectangle to #00549f (which is the color of the facebook logo), then open Layer Style properties and apply Stroke. Name this layer "sticker background".

Open Facebook vector logo in Photoshop, in the Rasterize EPS format dialog box, for mode choose RGB Color from drop down menu, and click OK. With Magic Wand Tool (W), click on the Facebook background to select blue color, and then while holdig Shift key click on blue color inside letters.

Go to Select -> Inverse to inverse selection (or by pressing Command + Shift + I on keyboard).

Copy selected text and paste it into our document. Name this layer "facebook logo".

Select these two layers and duplicate it.

Merge duplicate layers, and name result layer facebook sticker.

Hide "facebook logo" and "sticker background" layers.

So far we have a nice and simple facebook sticker.

Step 2:

Pick up Polygonal Lasso Tool (L) from Tools menu and make a selection like shown in the picture.

Go to Layer -> New -> Layer via Cut (Command + Shift + J on keyboard). Give a new layer name "sticker cut". Hide "facebook sticker" layer to see "sticker cut" layer.

Unhide "facebook sticker" layer. Select "sticker cut" layer, go to Edit -> Free Transform (Command + T) and rotate "sticker cut" layer. Angle is -3¼.

Now using arrow keys on the keyboard, move "sticker cut" up and left few times, to achive result like on the picture. Zoom in to make life a little easier.

Select "facebook sticker" and "sticker cut" and merge these two layers into one. Name resulting layer "sticker".

Step 3:

Load "Heavy Scratch Brush" into Photoshop. Create new layer above "sticker", right click on this layer and choose Create Clipping Mask (Command + Alt + G).

Make sure that foreground color is black, pick up Brush Tool (B), for the brush choose Scratch Heavy, adjust size, paint once or twice with this brush. Lower the opacity to 60%.

Create another layer on top, Create Clipping Mask (Command + Alt + G), for the foreground color set white, pick up again Brush Tool (B), use same brush as before, rotate brush, and paint over the layer once or twice. Lower the opacity to 60%.

Select "sticker" and scratches layers and merge them into one.

Import "crumpledpapertexture19.jpg", go to Image -> Adjusments -> Desaturate (Command + Shift + U), since is really big, resize it, change the Blend Mode to Hard Light.

Create Clipping Mask.

Merge these two layers.

Step 4:

Duplicate resulting layer. Change Blend Mode to Multiply. Merge these two layers.

Apply Drop Shadow from Layer Style.

We come to the end of this tutorial. I hope you learned something from this tutorial! Thanks for reading!

A few days ago I was experimenting with plaid or gingham patterns in Illustrator for a Christmas cartoon I was making. It was a fascinating experience to see how simple it was to make a basic plaid pattern and then with just the additions of a few lines of varied widths, it transformed into an intricate, woven plaid pattern that would do any textile maker proud.

Today I will show you how to make a very basic seamless plaid pattern in Illustrator in just one minute. I guarantee that you will be itching to make more and experiment once you make this. It can be quite addictive. It is also a wonderful way to build up your own personal design stash.

Step 1
In Illustrator, open a new document. With Stroke set to null and Fill set to a color of your choice, click on the Rectangle Tool and then on your artboard. In the box that opens opt for "1 inch" for both height and width.

Step 2
Go to Object>Transform>Transform Each. Just scale Horizontal Width to 50% and click on "Copy". Fill this rectangle with another color of your choice and set opacity to 50%.

Step 3
Making sure this new rectangle is selected, Go to Object>Transform>Rotate. Rotate by an angle of 90^o and click on "Copy". Set opacity of this horizontal rectangle to 20%.

Step 4
Select All[Cmd A in Mac/Ctrl A in PC]. Drag into the Swatch Palette. Now using this swatch as the "Fill", fill up any shape you want with the seamless pattern you just created.