Interface changes to an already responsive design based upon a modified oscommerce shop

In Progress

For a project that will be used mainly on a tablet, we need some design changes.

Of course the most important thing about the changes is, that they need to look good on a tablet. It would be handy if you own a tablet to see the actual changes or use an emulator to mimic the reults.

The website will be used as a catalog for salesmen on the road. They will be able to add products to a shopping cart and confirm the order.

The order is then sent to the ERP with a webservice.

This part is already working. We only need some UI changes and some changes to the images.

In general:

-The images are now resized instead of using the already present plug-in that makes thumbnails.

-The scroll bar doesn't seem to load entirely on a tablet. You can see it, but the part that falls below the screen never shows up.

On the product page (landscape and portrait):

-It should be possible to swipe between previous and next product.

Product page in portrait mode:

-The page should display the image, then the price+number+shopping cart logo, below that the title and description, and then the left-right buttons with the category between them (see screenshot). The image should take up most of the space. In the screenshot the text and buttons should go lower so there's more room for the image.

-The previous/next buttons must be shown at the very bottom of the page for easy navigation while holding the device.

-Everything should be centered.

Product page in landscape mode:

-The image distorts, but the use thumbnails should fix this?

-The image can take up most of the space, but the price+number+cart logo should be shown on the right of the image. The title and the description can be shown below that part on the right.

-The previous/next buttons must be shown at the very bottom of the page and aligned in the middle for easy navigation while holding the device.

On the product listing page:

-The image must take up most of the square. In order to do that, the title must be aligned at the bottom and the price and buttons need to be lowered as well.

-The images on the product listing have different heights because resizing was used instead of thumbnailing (see first point in general section).

-The price can be as high as the shopping cart button. It must fit on 1 row. It does not need to be aligned to the left.

-All the text and buttons can be centered in each box.

Skills: CSS, HTML, OSCommerce, PHP, Website Design

See more: tablet logo design, space n design products, shopping website logo design, shopping cart ui design, scroll design, product centered design, number 29 logo design, need a logo design ui, mode design logo, logo landscape design, logo design tablet, logo design mode, general portrait, erp logo, design you own logo, design thumbnails, design tablet, design price and product page, design own scroll box for website, design of road, design logo plug, design logo of a well, button logo design price, button design price, room to room

Project ID: #4875647