Original source in Frensh:
http://www.prestashop.com/wiki/FR_Guide_du_graphiste/
This guide for designers will provide advice and some basic rules to follow when creating a theme for PrestaShop. In addition it will address some points ergonomics so you can be unbeatable on e-commerce.
I. Reflection
Before starting to launch PhotoShop (or GIMP), I invite you to take a pen and paper and think about the tree of your site and think that your store will be flexible (you will not always the same number of categories or products).
A PrestaShop complete theme requires the creation of at least 10 pages:
1. Home
2. Page category
3. Datasheet
4. My account and its inside pages
5. My Cart
6. Identification
7. Create Account
8. Address
9. Delivery
10. Payment (check, bank transfer)
Please take into account so as not to forget.
Once this is set for you, do some sketches to get an idea of the layout of various elements (news, promotion, photos, text, etc. ...). Remember also to small details like the different entries on the sheet products such as (sales, promotions, news, prices crossed ...).
Of course all this are merely advice, some professionals prefer, for example, from PhotoShop and coding directly in php and css.
II. Technical
Your models must be at Photoshop format (. Psd) in 72 dpi RGB / non flattened.
We recommend that you work for a screen resolution of 1024 x 768 as the width of your site should not exceed 980 pixels wide to be compatible.
Available in PhotoShop layer
Several methods can be applied, one where you think to a folder where you find all the layers of text, so that integrators can prepare funds pages faster, the other where you make a folder for each block (videos, Top Sellers, so. ...).
The colors
Consider using the RGB format adapted to the screen rather than CMYK which it is adapted to the field of printing.
Fonts
Do not use exotic fonts, think functional!
For standard text (type title, subtitle, current text, etc. ...) Limit to the following fonts so that all visitors to your site can see the same thing, as too many fonts on one page can quickly become unreadable.
1. Arial
2. Verdana
3. Helvetica
4. Georgia
5. Tahoma
6. Roman Times News
Unit of Measure
The unit of measure on the Web, is the pixel dots of the screen and not pica, point centimeter or for which there is no conversion and the need to forget.
Text Size
Remember that the text size is set by the user.
But you can already start & gold on fixed sizes such as: 8px for small text, 10px / 12px for standard text, 14px for a sub-title, 18px for a title so. ...
Transparency
The transparent images are very badly managed by Internet Explorer, also avoid. Png 24 bits. For transparent gif think to put on a uniform background to simplify your task. To avoid more pixels semi-transparent color by setting a cache (the same as the substance).
Other
- Remember to activate all the options to see delivered with the standard theme.
- Visit the publication of a product to see what are the options (promotion, news, etc.. ...) And their impacts on the display front office.
- The graphic style of your store must be uniform.
III. Ergonomics
Here we will see some rules of ergonomics. Nothing really complicated, but just enough to be sure that your store can be understood and fully functional for everyone.
Your goal> Give visitors confidence to buy.
Each issue of use, you lose the confidence of visitors. If it happens below a certain level, frustration sets in, and the user leaves the site. Hence the importance of ergonomics in an e-commerce site.
Remember that your goal (in addition to sell, of course) is to show visitors behind the e-commerce site that you do, he hid from serious and competent people.
The home page
This page is the most important because this is where it all happens.
Here the visitor will get an opinion and it is here that will tell if he can trust your site.
Your first action is to highlight your shop and the richness of your catalog.
For the image of your store, use the header of your site and logo.
The header of your site (the header) should be up to 250 pixels high, so visitors can at least take a look at your catalog without having to scroll.
The visual appearance is very important (hence the phase of reflection upstream) you must find an elegant way to move your products without overloading your page. In addition you must use color graphics & homogeneous type. (eg> If you use an effect on your buttons on a page, please use the same effects on all pages of your site.)
The search engine should be put forward. As a visitor often we know what we picked it is also important as distinguished from the first glance this tool.
When creating your site also think the navigation classes, it must be simple and intuitive.
To strengthen the confidence of visitors should remember to forward your partners (banks, transporters) and your ranking FIA-NET.
If you have a telephone or online chat, do not hesitate to put forward.
This will demonstrate your closeness to the customer and that is what will make the difference.
Display clearly the conditions for the return of the commodity, GCS, and other legislation.
The Performer
If your visitor is on this page is that it is interested in your product and would like details.
Put forward the Add to Cart button. It must be clearly visible and distinct from the rest of the page to its color or size (again think to be uniform).
Put forward as the "labels" associated with these products (nouveautés, promotions, coupon, etc.. ...) And display clearly delivery!
The tunnel conversion (My Account and its inside pages)
Here you turn your visitors into customers (hence the word processing or conversion).
If these pages are poorly structured, it can make you lose more customers and a lot of sales.
Create Account / My Account
PrestaShop comes with a form providing a high level of processing.
But after your site will not necessarily suited to your needs.
So here are some tips to follow if the basic form does not suit you:
Keep that much. The visitor should focus on the creation of his account and make purchases. (eg> Amazon, Fnac.)
Minimize the number of steps.
The visitor needs to know how many steps it remains to be done before finalizing its purchase.
Clearly show the errors of form in front of each field. Each error must be displayed in a separate color (red is the most common) and specify the required fields (with an asterisk for example).
Last thing: the button is always to the right of the cancel button.
Payment
The visitor has created his account! Congratulations.
But all is not won, he will have to take the step of the act of purchase.
Again, same as the form of account creation.
Reduce the maximum number of steps. (shipping address, payment)
Display errors and clearly indicate required fields.
To pay by CB warn visitors that happening on the secure website of your bank. Use a padlock icon with such a small narrative.
If payment is by check (or other online payment) indicate clearly the way forward (address, amount, ...)
After this crucial stage your visitor is now one of your customers. Bravo!
These ergonomic advice for your site e-commerce are not exhaustive, but constitute a basis for better use of your site e-commerce.
Tips to make PrestaShop template
