New page layout for the Book Setup page

This week we updated pediapress.com with a revised layout for the book setup page.

We decided to change the page because we felt that the previous design was suffering from a messy layout and lack of structure - especially since we introduced the product options for hardcover and color last fall.

The new design introduces tabs as a navigational aide:

• Both tabs contain a preview for the cover image.
• The first tab contains only the editor, title and subtitle.
• The second tab sports a fancy color theme selector. Moreover, you can access all cover images without horizontal scrolling.

We worked on pretty much all elements of the page, but let me pick a few highlights:

• We used CSS3 effects for some progressive enhancements - the design for the tabs and the submit button are pure CSS.
• The previous color theme showed only one color - the background. The new one is designed like a small wireframe and gives you an impression of the color mix for the cover.
• The image selector shows the background of the currently selected color theme. That way you can identify even before clicking on an image, if it’s colors match the current theme.
• We reduced the text quite a bit to make the interactions clearer and worked on the flow of the page. For an example, take a look at the price and product options:

In the old version, the price information came first with a very prominent “Add-to-Cart” button at the top. In the new version, we turned things upside down and put the price and the button at the bottom. That way, your eye can just follow a familiar path along the calculation and you don’t have to look up and down to see the effect of your clicks.

The setup page has always been a challenge for us. We hope these layout changes make this page more fun and easier to use. Now upload a book, check out the new setup page yourself and tell us what you think. We would love to hear your feedback about the new design.