X-Cart:Design specification guidelines - Revision history

Mouse at 13:56, 22 July 2020

2020-07-22T13:56:53Z

Dohtur at 14:52, 29 October 2012

2012-10-29T14:52:40Z

Dohtur at 14:51, 29 October 2012

2012-10-29T14:51:54Z

Dohtur: /* Buttons */

2012-10-29T14:50:26Z

‎Buttons

Dohtur: /* Sketch quality */

2012-10-29T14:48:09Z

‎Sketch quality

Dohtur: /* Cart page */

2012-10-29T14:43:17Z

‎Cart page

Dohtur: /* Main requirements */

2012-10-29T14:33:05Z

‎Main requirements

Dohtur: /* Sketch quality */

2012-10-29T14:02:58Z

‎Sketch quality

Dohtur: /* Sketch quality */

2012-10-29T13:55:49Z

‎Sketch quality

Ivka at 10:46, 6 September 2010

2010-09-06T10:46:21Z

@@ Line 1: / Line 1: @@
 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.
-[http://www.x-cart.com/web-design.html#design-integration Design integration] is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your mockups. That is why mockups are essential for design integration.
+[https://www.x-cart.com/web-design.html#design-integration Design integration] is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your mockups. That is why mockups are essential for design integration.
 ==Main requirements==
@@ Line 18: / Line 18: @@
 ===Home page===
-View [http://www.x-cart.com/images/skins/artistic/shot01.jpg screenshot] or [http://xcart-demo.qtmsoft.com/demo/home.php online demo].
+View [https://www.x-cart.com/images/skins/artistic/shot01.jpg screenshot] or [https://xcart-demo.qtmsoft.com/demo/home.php online demo].
 A standard home page includes the following units:
@@ Line 33: / Line 33: @@
 #* '''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 [http://xcart-demo.qtmsoft.com/demo/home.php 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.
+#* '''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 [https://xcart-demo.qtmsoft.com/demo/home.php 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.<br/><br/>Central part of the home page of a standard X-Cart contains:<br/>
@@ Line 44: / Line 44: @@
 ===Category page===
-View [http://www.x-cart.com/images/skins/artistic/shot11.jpg screenshot] or [http://xcart-demo.qtmsoft.com/demo/CD-audio/ online demo].
+View [https://www.x-cart.com/images/skins/artistic/shot11.jpg screenshot] or [https://xcart-demo.qtmsoft.com/demo/CD-audio/ online demo].
 A standard category page includes the following units:
@@ Line 57: / Line 57: @@
 ===Product page===
-View [http://www.x-cart.com/images/skins/artistic/shot21.jpg screenshot] or [http://xcart-demo.qtmsoft.com/demo/Three-Stone-Princess-Cut-Diamond-Ring.html online demo].
+View [https://www.x-cart.com/images/skins/artistic/shot21.jpg screenshot] or [https://xcart-demo.qtmsoft.com/demo/Three-Stone-Princess-Cut-Diamond-Ring.html online demo].
 A standard product page includes the following units:
@@ Line 117: / Line 117: @@
 ===Fonts===
-It is recommended to use standard fonts which are supported by all operating systems: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
+It is recommended to use standard fonts which are supported by all operating systems: https://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
 Actually it's possible to integrate a non-standard font with a web-site, but all the ways to do so have certain limitations. That is why we recommend to refrain from using non-standard fonts in dynamic sections of your site.
@@ Line 123: / Line 123: @@
 ===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: [http://xcart-demo.qtmsoft.com/demo/home.php?multiskin=skin3 stretching] or [http://xcart-demo.qtmsoft.com/demo/home.php?multiskin=skin2 fixed].
+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: [https://xcart-demo.qtmsoft.com/demo/home.php?multiskin=skin3 stretching] or [https://xcart-demo.qtmsoft.com/demo/home.php?multiskin=skin2 fixed].
 ===Usability===
@@ Line 132: / Line 132: @@
 ==Useful usability links:==
-# [http://www.useit.com/ Jakob Nielsen's Website ]
+# [https://www.useit.com/ Jakob Nielsen's Website ]
-# http://www.webmascon.com
+# https://www.webmascon.com
-# [http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html Apple Human Interface Guidelines]
+# [https://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html Apple Human Interface Guidelines]
-# [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp Official Guidelines for User Interface Developers and Designers]
+# [https://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp 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.

@@ Line 1: / Line 1: @@
 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.
-[http://www.x-cart.com/web-design.html#design-integration Design integration] is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your mockups. That is why sketches are essential for design integration.
+[http://www.x-cart.com/web-design.html#design-integration Design integration] is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your mockups. That is why mockups are essential for design integration.
 ==Main requirements==

@@ Line 1: / Line 1: @@
 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.
-[http://www.x-cart.com/web-design.html#design-integration 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.
+[http://www.x-cart.com/web-design.html#design-integration Design integration] is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your mockups. That is why sketches are essential for design integration.
 ==Main requirements==

@@ Line 109: / Line 109: @@
 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.
+Your design must specify the look of the buttons. The buttons shown on key mockups will be sufficient to reflect the specified style in all the other X-Cart buttons.
 ===Text labels===

@@ Line 71: / Line 71: @@
 # '''Bottom part'''.  The same as on other pages.
-==Sketch quality==
+==Mockup quality==
 For design integration it is enough for us to get high quality graphic images in the following formats:

@@ Line 69: / Line 69: @@
 #* 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 [[X-Cart:Modules_and_Add-ons | Modules and Add-ons]] section).
 # '''Bottom part'''.  The same as on other pages.

@@ Line 5: / Line 5: @@
 ==Main requirements==
-Here are the main requirements regarding sketches. To integrate your design we ask you to provide us with 4 sketches of 4 main store pages.
+For successful integration of your design it is enough for us to get mockups of one or two store pages:
-* Home page
+However, if you can provide more mockups, we will be able to do the integration more accurately.
-Generally an X-Cart page consists the following sections presented on the screenshot:
+Generally an X-Cart page consists of the following sections presented on the screenshot:
 [[Image:Structure.png|center|border]]

@@ Line 89: / Line 89: @@
 ==Sketch quality==
-For design integration we need the high quality graphic images in the following formats:
+For design integration it is enough for us to get high quality graphic images in the following formats:
 * .psd (Photoshop) or
-* .png (Macromedia Fireworks) or
+* .png (Macromedia Fireworks)
-* .tiff or
+They should display elements in separate layers.
 '''Color mode''': RGB;

@@ Line 100: / Line 100: @@
 '''Resolution''': 72 dpi;
-'''Image size of pages samples''': (780-1004) x (800-2000) px.
+'''Image size of page samples''': (960-1260) x (800-2000) px.
 Design samples in PSD format are preferable. Vector format (.cdr, .ai) is also possible, but we definitely need the example of the design in raster format to compare the zoom of integrated elements.