X-Cart:Design specification guidelines

From X-Cart 4 Classic
Revision as of 14:30, 6 September 2010 by Ivka (talk | contribs) (Created page with 'This article is aimed at helping you create your own unique design, clear and convenient for customers and including all the necessary X-Cart elements you want to use. Design in…')
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

This article is aimed at helping you create your own unique design, clear and convenient for customers and including all the necessary X-Cart elements you want to use.

Design integration is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your sketches. That is why sketches are essential for design integration.

Main requirements

Here are the main requirements regarding sketches. To integrate your design we need to have sketches of 4 main store pages.


Home page

A standard home page includes the following units:

  1. Header. It usually consists of:
    • logo
    • speed bar links
    • search field
    • phone numbers
    • language switcher (X-Cart allows to change language using icons or a select-box)
  2. Main part. It usually consists of a left/right column (or columns), which holds X-Cart menu and a central part. A standard X-Cart includes the following menus:
    • category menu (can be one-level, multi-level with flyout sub-menus and multi-level with tree-like expanding submenus)
    • bestsellers menu (this menu can be replaced by a list of products in the central part, just as a featured products list)
    • manufacturers list menu (optional)
    • help menu (includes useful links, such as «Contact us», «About us», etc.)
    • cart menu. This menu is very important, it contains important shopping links (a link to cart page, a link to checkout, etc.). It also displays the customer’s cart status: Cart is empty , Items: N Total: $XXX.XX. Besides, X-Cart v.4.3 and above has an AJAX minicart feature. If you plan to use this functionality, you should think about the look of the expanding menu and icons for the minicart. To see this menu please open our demo site and add a product to cart. You will see that the cart menu has changed. Click on the cart icon to see the details in a pop-up window. We recommend to consider this functionality in your design.
    • your account menu. It contains a sign-in form and a link to the registration page. Please take into account that this menu looks different when a client has signed in
    • news menu. It contains the last news and its date, as well as a link to the full news list and the subscription form. Please take into account that in X-Cart v.4.3 subscription is located on the news page.

      Central part of the home page of a standard X-Cart contains:
    • Greeting text
    • List of Featured products
  3. Bottom part. Usually contains:
    • Number of users online (if the «Users Online» is enabled).
    • Copyright © 2002-2010 Your Company Name

Category page

A standard category page includes the following units:

  1. Header. The same as on other pages.
  2. Main part. Usually contains the same menu columns as the other site pages and a central part. The central part of the category page of a standard X-Cart contains:
    • a list of subcategories of the current category. It can look as a table of category icons or a list of subcategories (if any)
    • a list of Featured products of this category (if any)
    • a list of products of the current category (if any)
  3. Bottom part. The same as on other pages..

Product page

A standard product page includes the following units:

  1. Header. The same as on other pages.
  2. Main part. Usually contains the same menu columns as the other site pages and a central part. The central part of the product page of a standard X-Cart contains:
    • product name
    • product image
    • product details (description, options, additional fields)
    • product amount field (input box or select box)
    • buttons: add to cart and add to wish list (if the WishList module is enabled)
    • “Send to friend”, “Related products”, “Customers who bought this product also bought”, “Customer feedback” sections, according to the settings (for details see Modules and Add-ons section).
  3. Bottom part. The same as on other pages.

Cart page

A standard cart page includes the following units:

  1. Header. It can differ from the other site pages, if the «Fast Lane Checkout» module is enabled (see Fast Lane Checkout section).
  2. Main part. It usually contains the same menus as the other site pages and a central part if the «Fast Lane Checkout» module is disabled and does not contain a menu if the module is enabled. The central part of the cart page of a standard X-Cart contains:
    • 2 buttons: «Continue shopping” and “Checkout”
    • product list with images, brief description, list of selected options (with an «Edit options» button), price per item, number of items, total amount for all items, buttons «Delete item» and “Update item”
    • final calculation section (subtotal, shipping, tax, discount, total etc.)
    • buttons: «Clear cart», “Update”, “Checkout”
    • section for entering a coupon number ( Discount Coupons)
  3. Bottom part. The same as on other pages.

Important notes

Sketch quality

For design integration we need the high quality graphic images in the following formats:

  • .psd (Photoshop) or
  • .png (Macromedia Fireworks) or
  • .tiff or
  • .jpg,
  • .gif with compression without losing quality

Color mode: RGB;

Resolution: 72 dpi;

Image size of pages samples: (780-1004) x (800-2000) px.

Design samples in PSD format are preferable.

Typical items

X-Cart has some typical items:

Dialogs

Dialogs are blocks containing elements of the main content. A dialog usually consists of a heading and content. Here is an example of a dialog:

Please note that in X-Cart v.4.3 a “Sort by” unit for the products list is placed to the right of the dialog title. If you plan to use different kinds of dialogs for different types of content (for example, for product list and for product details), you should specify exact design styles. You should also define the default style for dialogs which will be used on different site pages. We ask you to pay attention to this when discussing the design integration project.

Menus

Menus are units on the sides of the general content. For example:

Menus also have headings and content. If you plan to use different kinds of menus for different content, please pay attention to this when discussing the design integration project and define the default menu style.

Buttons

X-Cart has several button types: menu buttons (for example, «Your account» menu), general buttons (such as «Add to wish list»), main buttons (usually used for «Add to cart» and «Checkout» buttons and are more prominent than the general buttons) and light buttons (used for service purposes, for example, for «Clear cart» and «Update» buttons on the cart page). Your design must specify the look of the buttons. Buttons, displayed on key sketches will be sufficient to reflect the specified style in all the other X-Cart buttons.

Text labels

X-Cart supports multiple languages. All the text in the interface is specified either with the help of text labels (which can be modified by the store admin) or database content which is entered using special forms of X-Cart admin area. That is why it is not recommended to use images for titles. Besides, displaying text as an image is not SEO-friendly.

Fonts

Unfortunately a web-page cannot support all fonts of PSD Please refer to this page where you can see a list of all standard fonts, that can be integrated with a web-store content: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

We can integrate any standard font with the textual content of your store. Just please define the standard font(s) in your design. And do not use non-standard fonts, please.

Actually it's possible to integrate a non-standard font with a web-site, but for this you will have to generate js files for that font using a special generator like http://cufon.shoqolate.com/generate/ Please note that we will use the provided js file as is, we are not responsible of how the font will look like exactly (it can be different from the font on the PSD). Also please take note that implementation of a non-standard font will increase the base quote for the design integration service.

Layout

In addition please note that X-Cart has dynamic content, which means that the design must be flexible enough to allow to increase content without breaking the layout. Please specify which layout type you want to integrate: stretching or fixed.

Usability

Modern design tends to be light and simple. First, integrating a simple design will cost you less (this is also important for possible upgrades), and second, a site which is not overloaded with graphics, loads quicker. It is also recommended to follow the basic usability rules. The main goal of usability expertise is to make your Web site easier to use. This will enhance the credibility of your brand and attract more users. The text of main links and content must be easily read, the contrast between text and background must be 75-80%, headings must differ from the main text, etc.

Useful usability links:

  1. Jakob Nielsen's Website
  2. http://www.webmascon.com
  3. Apple Human Interface Guidelines
  4. Official Guidelines for User Interface Developers and Designers

We hope that this article has been helpful. If you have any questions please feel free to contact us. We look forward to hearing from you.

Retrieved from "https://help.x-cart.com/index.php?title=X-Cart:Design_specification_guidelines&oldid=4270"